core&ui: support file renaming (#688)

Co-authored-by: undefined <i@undefined.moe>

packages/hydrooj/src/handler/problem.ts

@@ -695,7 +695,7 @@ export class ProblemFilesHandler extends ProblemDetailHandler {
             const { testdata, additional_file } = this.response.body;
             const owner = await user.getById(domainId, this.pdoc.owner);
             const args = {
-                testdata, additional_file, pdoc: this.pdoc, owner_udoc: owner, sidebar,
+                testdata, additional_file, pdoc: this.pdoc, owner_udoc: owner, sidebar, can_edit: true,
             };
             const tasks = [];
             if (d.includes('testdata')) tasks.push(this.renderHTML('partials/problem_files.html', { ...args, filetype: 'testdata' }));
@@ -795,6 +795,21 @@ export class ProblemFilesHandler extends ProblemDetailHandler {
         this.back();
     }
 
+    @post('files', Types.ArrayOf(Types.Filename))
+    @post('newNames', Types.ArrayOf(Types.Filename))
+    @post('type', Types.Range(['testdata', 'additional_file']), true)
+    async postRenameFiles(domainId: string, files: string[], newNames: string[], type = 'testdata') {
+        if (this.pdoc.reference) throw new ProblemIsReferencedError('rename files');
+        if (files.length !== newNames.length) throw new ValidationError('files', 'newNames');
+        if (!this.user.own(this.pdoc, PERM.PERM_EDIT_PROBLEM_SELF)) this.checkPerm(PERM.PERM_EDIT_PROBLEM);
+        await Promise.all(files.map(async (file, index) => {
+            const newName = newNames[index];
+            if (type === 'testdata') await problem.renameTestdata(domainId, this.pdoc.docId, file, newName, this.user._id);
+            else await problem.renameAdditionalFile(domainId, this.pdoc.docId, file, newName, this.user._id);
+        }));
+        this.back();
+    }
+
     @post('files', Types.ArrayOf(Types.Filename))
     @post('type', Types.Range(['testdata', 'additional_file']), true)
     async postDeleteFiles(domainId: string, files: string[], type = 'testdata') {

packages/hydrooj/src/model/problem.ts

@@ -282,6 +282,22 @@ export class ProblemModel {
         await bus.emit('problem/addTestdata', domainId, pid, name, payload);
     }
 
+    static async renameTestdata(domainId: string, pid: number, file: string, newName: string, operator = 1) {
+        if (file === newName) return;
+        const [, sdoc] = await document.getSub(domainId, document.TYPE_PROBLEM, pid, 'data', newName);
+        if (sdoc) await ProblemModel.delTestdata(domainId, pid, newName);
+        const payload = { _id: newName, name: newName, lastModified: new Date() };
+        await Promise.all([
+            storage.rename(
+                `problem/${domainId}/${pid}/testdata/${file}`,
+                `problem/${domainId}/${pid}/testdata/${newName}`,
+                operator,
+            ),
+            document.setSub(domainId, document.TYPE_PROBLEM, pid, 'data', file, payload),
+        ]);
+        await bus.emit('problem/renameTestdata', domainId, pid, file, newName);
+    }
+
     static async delTestdata(domainId: string, pid: number, name: string | string[], operator = 1) {
         const names = (name instanceof Array) ? name : [name];
         await Promise.all([
@@ -307,6 +323,22 @@ export class ProblemModel {
         await bus.emit('problem/addAdditionalFile', domainId, pid, name, payload);
     }
 
+    static async renameAdditionalFile(domainId: string, pid: number, file: string, newName: string, operator = 1) {
+        if (file === newName) return;
+        const [, sdoc] = await document.getSub(domainId, document.TYPE_PROBLEM, pid, 'additional_file', newName);
+        if (sdoc) await ProblemModel.delAdditionalFile(domainId, pid, newName);
+        const payload = { _id: newName, name: newName, lastModified: new Date() };
+        await Promise.all([
+            storage.rename(
+                `problem/${domainId}/${pid}/additional_file/${file}`,
+                `problem/${domainId}/${pid}/additional_file/${newName}`,
+                operator,
+            ),
+            document.setSub(domainId, document.TYPE_PROBLEM, pid, 'additional_file', file, payload),
+        ]);
+        await bus.emit('problem/renameAdditionalFile', domainId, pid, file, newName);
+    }
+
     static async delAdditionalFile(domainId: string, pid: number, name: MaybeArray<string>, operator = 1) {
         const names = (name instanceof Array) ? name : [name];
         await Promise.all([
@@ -558,6 +590,15 @@ bus.on('problem/delTestdata', async (domainId, docId, names) => {
     if (!names.includes('config.yaml')) return;
     await ProblemModel.edit(domainId, docId, { config: '' });
 });
+bus.on('problem/renameTestdata', async (domainId, docId, file, newName) => {
+    if (['config.yaml', 'config.yml', 'Config.yaml', 'Config.yml'].includes(file)) {
+        await ProblemModel.edit(domainId, docId, { config: '' });
+    }
+    if (['config.yaml', 'config.yml', 'Config.yaml', 'Config.yml'].includes(newName)) {
+        const buf = await storage.get(`problem/${domainId}/${docId}/testdata/${newName}`);
+        await ProblemModel.edit(domainId, docId, { config: (await streamToBuffer(buf)).toString() });
+    }
+});
 
 global.Hydro.model.problem = ProblemModel;
 export default ProblemModel;

packages/hydrooj/src/service/bus.ts

@@ -85,8 +85,10 @@ export interface EventMap extends LifecycleEvents, HandlerEvents {
     'problem/get': (doc: ProblemDoc, handler: any) => VoidReturn
     'problem/delete': (domainId: string, docId: number) => VoidReturn
     'problem/addTestdata': (domainId: string, docId: number, name: string, payload: Omit<FileInfo, '_id'>) => VoidReturn
+    'problem/renameTestdata': (domainId: string, docId: number, name: string, newName: string) => VoidReturn
     'problem/delTestdata': (domainId: string, docId: number, name: string[]) => VoidReturn
     'problem/addAdditionalFile': (domainId: string, docId: number, name: string, payload: Omit<FileInfo, '_id'>) => VoidReturn
+    'problem/renameAdditionalFile': (domainId: string, docId: number, name: string, newName: string) => VoidReturn
     'problem/delAdditionalFile': (domainId: string, docId: number, name: string[]) => VoidReturn
 
     'contest/before-add': (payload: Partial<Tdoc<30>>) => VoidReturn

packages/ui-default/components/form/textbox.page.styl

@@ -1,7 +1,7 @@
 @import './var.inc.styl'
 
 // Normal Textbox
-input.textbox, textarea.textbox
+input.textbox, textarea.textbox, span.textbox
   form-styles()
   background-color: $input-background-color
   outline: $input-outline
@@ -28,7 +28,7 @@ div.textbox
   margin-bottom: 1rem
 
 .data-table
-  input.textbox, textarea.textbox
+  input.textbox, textarea.textbox, span.textbox
     margin-bottom: 0
 
   div.autocomplete-container

packages/ui-default/components/preview/preview.page.ts

@@ -111,7 +111,7 @@ export async function previewFile(ev?, type = '') {
   const filename = ev
     ? ev.currentTarget.closest('[data-filename]').getAttribute('data-filename')
     // eslint-disable-next-line no-alert
-    : prompt('Filename');
+    : prompt(i18n('Filename'));
   if (!filename) return null;
   const filesize = ev
     ? +ev.currentTarget.closest('[data-size]').getAttribute('data-size')

packages/ui-default/locales/zh.yaml

@@ -71,6 +71,9 @@ Add File: 添加文件
 Add module: 添加模块
 Add new data: 添加新数据
 Add new subtask: 添加新子任务
+Add prefix: 添加前缀
+Add prefix/suffix: 添加前缀/后缀
+Add suffix: 添加后缀
 Add testcase: 添加测试点
 Add User: 添加用户
 Add: 添加
@@ -91,6 +94,7 @@ An example of dataset: 测试数据集的一个例子
 Any user is allowed to join this domain with an invitation code: 任意用户都可以通过邀请码加入此域
 Any user is allowed to join this domain: 任意用户都可以加入此域
 API: API
+Are you sure to rename the following file?: 确认对重命名以下文件？
 Are you sure you want to delete this subtask?: 确认删除此子任务？
 Argument {0} is invalid.: 非法的参数 {0} 。
 Arguments: 参数
@@ -113,6 +117,7 @@ Awards: 奖项
 Balloon Status: 气球状态
 Basic Info: 基础信息
 Basic: 基础
+Batch replacement: 批量替换
 Be Copied: 被复制
 Begin at: 开始于
 Begin Date: 开始日期
@@ -175,6 +180,7 @@ Confirm deleting this comment? Its replies will be deleted as well.: 确认删
 Confirm deleting this reply?: 确认删除这个回复吗？
 Confirm rejudge this problem?: 确定要重测这道题吗？
 Confirm removing the selected users?: 您确定将所选用户移除吗？
+Confirm to delete the file?: 确认删除此文件吗？
 Confirm to delete the selected files?: 确认删除所选文件吗？
 Confirm to delete the selected problems?: 确认要删除所选题目吗？
 Confirmation mail has been sent to your new email.: 确认邮件已经发送到您的新电子邮箱。
@@ -352,6 +358,7 @@ End Time: 结束时间
 Enroll Training: 参加训练
 Enrolled: 已参加
 Enrollees: 参加人数
+'Enter a new name for the file: ': 请输入新的文件名：
 error: 错误
 Errors detected in the config. Confirm save?: 配置中存在错误。确认保存？
 Evaluated difficulty: 估计的难度
@@ -370,6 +377,8 @@ Failed to parse testcase.: 无法解析测试点信息。
 Feedback: 反馈
 Field {0} or {1} validation failed.: 字段 {0} 或 {1} 验证失败。
 Field {0} validation failed.: 字段 {0} 验证失败。
+File have been deleted.: 文件已被删除。
+File have been renamed.: 文件已被重命名。
 File saved.: 文件已成功保存。
 file too large: 文件过大
 File uploaded successfully.: 上传文件成功
@@ -461,6 +470,7 @@ Instead of copying the test data directly, the test data of the copied problems
 Introduce must not exceed 500 characters and it will be shown in the list view.: 简介不能超过 500 个字符，将显示在列表页面中。
 Introduce: 简介
 Invalid password for user {0}.: 用户 {0} 的密码错误。
+Invalid RegExp: 无效的正则表达式。
 Invalid: 无效
 Invitation Code: 邀请码
 IO: 输入输出
@@ -555,10 +565,12 @@ Never expire: 从不过期
 New dataset: 新测试数据
 New Email: 新电子邮件
 New file: 新文件
+New filename(s): 新文件名
 New Password: 新密码
 New Training Plan: 新训练计划
 New: 创建
 No {0} at current.: 当前没有{0}。
+No changes to make.: 没有任何修改。
 No comments so far...: 目前还没有评论...
 No discussion yet...: 目前没有讨论…
 No group available: 没有可用小组
@@ -602,6 +614,8 @@ Operating System: 操作系统
 Ops: 运维
 Or, with automatically filled invitation code: 或者，这是可以自动填写邀请码的
 Ordered List: 有序列表
+Original content: 原始内容
+Original filename(s): 原始文件名
 Original Score: 原始分数
 OS Info: 系统信息
 Output: 输出
@@ -720,6 +734,7 @@ Records: 评测记录
 Reference link copied to clipboard!: 引用链接已复制到剪贴板。
 Refresh Records: 刷新评测记录
 Refresh: 刷新
+RegExp supported, quote with "/": 支持正则表达式，使用 "/" 包裹。
 Registered at: 注册于
 Rejudge all submissions: 重测整题
 Rejudge problems: 重测题目
@@ -733,7 +748,9 @@ Remove Selected User: 将所选用户移出
 Remove Selected: 移除选中
 Remove this data: 移除这组数据
 Remove: 移除
+Rename Selected: 重命名选中
 Repeat Password: 重复密码
+Replace with: 替换为
 Reply discussions: 回复讨论
 Reply problem solutions: 回复题解
 reply: 回复
@@ -779,6 +796,7 @@ Select Category: 选择标签
 Select User: 选择用户
 Selected categories: 已选标签
 Selected files have been deleted.: 所选文件已被删除。
+Selected files have been renamed.: 所选文件已被重命名。
 Selected problems have been deleted.: 所选题目已被删除。
 Selected roles have been deleted.: 所选角色已删除。
 Selected users have been removed from the domain.: 所选用户已从此域中移除。

packages/ui-default/pages/problem_config.page.styl

@@ -6,7 +6,7 @@
   .col--size
     width: 80px
   .col--operation
-    width: 40px
+    width: 60px
     text-align: center
 
   .textbox,.select

packages/ui-default/pages/problem_config.page.tsx

@@ -40,6 +40,25 @@ const page = new NamedPage('problem_config', () => {
     });
   }
 
+  async function handleClickRename(ev: JQuery.ClickEvent<Document, undefined, any, any>) {
+    const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
+    // eslint-disable-next-line no-alert
+    const newName = prompt(i18n('Enter a new name for the file: '));
+    if (!newName) return;
+    try {
+      await request.post('./files', {
+        operation: 'rename_files',
+        files: file,
+        newNames: [newName],
+        type: 'testdata',
+      });
+      Notification.success(i18n('File have been renamed.'));
+      await pjax.request({ url: './files?d=testdata&sidebar=true', push: false });
+    } catch (error) {
+      Notification.error(error.message);
+    }
+  }
+
   async function handleClickRemove(ev: JQuery.ClickEvent<Document, undefined, any, any>) {
     const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
     const action = await new ConfirmDialog({
@@ -132,6 +151,7 @@ const page = new NamedPage('problem_config', () => {
   mountComponent();
 
   $(document).on('click', '[name="testdata__upload"]', () => handleClickUpload());
+  $(document).on('click', '[name="testdata__rename"]', (ev) => handleClickRename(ev));
   $(document).on('click', '[name="testdata__delete"]', (ev) => handleClickRemove(ev));
   $(document).on('click', '[name="testdata__download__all"]', () => handleClickDownloadAll());
 });

packages/ui-default/pages/problem_edit.page.js

@@ -194,6 +194,25 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
     });
   }
 
+  async function handleClickRename(ev) {
+    const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
+    // eslint-disable-next-line no-alert
+    const newName = prompt(i18n('Enter a new name for the file: '));
+    if (!newName) return;
+    try {
+      await request.post('./files', {
+        operation: 'rename_files',
+        files: file,
+        newNames: [newName],
+        type: 'additional_file',
+      });
+      Notification.success(i18n('File have been renamed.'));
+      await pjax.request({ url: './files?d=additional_file&sidebar=true', push: false });
+    } catch (error) {
+      Notification.error(error.message);
+    }
+  }
+
   async function handleClickRemove(ev) {
     const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
     const action = await new ConfirmDialog({
@@ -284,6 +303,7 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
     }
   });
   $(document).on('click', '[name="additional_file__upload"]', () => handleClickUpload());
+  $(document).on('click', '[name="additional_file__rename"]', (ev) => handleClickRename(ev));
   $(document).on('click', '[name="additional_file__delete"]', (ev) => handleClickRemove(ev));
   $(document).on('click', '[name="additional_file__download"]', () => handleClickDownloadAll());
   $(document).on('click', '[name="additional_file__section__expand"]', (ev) => handleSection(ev, 'additional_file', 'expand'));

packages/ui-default/pages/problem_edit.page.styl

@@ -19,4 +19,5 @@
     .col--size
       width: 80px
     .col--operation
-      width: 40px
+      width: 60px
+      text-align: center

packages/ui-default/pages/problem_files.page.js

@@ -1,132 +0,0 @@
-import $ from 'jquery';
-import _ from 'lodash';
-import { ConfirmDialog } from 'vj/components/dialog/index';
-import createHint from 'vj/components/hint';
-import Notification from 'vj/components/notification';
-import { previewFile } from 'vj/components/preview/preview.page';
-import uploadFiles from 'vj/components/upload';
-import download from 'vj/components/zipDownloader';
-import { NamedPage } from 'vj/misc/Page';
-import {
-  i18n, pjax, request, tpl,
-} from 'vj/utils';
-
-async function downloadProblemFilesAsArchive(type, files) {
-  const { links, pdoc } = await request.post('', { operation: 'get_links', files, type });
-  const targets = [];
-  for (const filename of Object.keys(links)) targets.push({ filename, url: links[filename] });
-  await download(`${pdoc.docId} ${pdoc.title}.zip`, targets);
-}
-
-const page = new NamedPage('problem_files', () => {
-  function ensureAndGetSelectedFiles(type) {
-    const files = _.map(
-      $(`.problem-files-${type} tbody [data-checkbox-group="${type}"]:checked`),
-      (ch) => $(ch).closest('tr').attr('data-filename'),
-    );
-    if (files.length === 0) {
-      Notification.error(i18n('Please select at least one file to perform this operation.'));
-      return null;
-    }
-    return files;
-  }
-
-  async function handleClickUpload(type, files) {
-    if (!files) {
-      const input = document.createElement('input');
-      input.type = 'file';
-      input.multiple = true;
-      input.click();
-      await new Promise((resolve) => { input.onchange = resolve; });
-      files = input.files;
-    }
-    if (!files.length) {
-      Notification.warn(i18n('No file selected.'));
-      return;
-    }
-    await uploadFiles('', files, { type, pjax: true });
-  }
-
-  async function handleClickDownloadSelected(type) {
-    const selectedFiles = ensureAndGetSelectedFiles(type);
-    if (selectedFiles === null) return;
-    await downloadProblemFilesAsArchive(type, selectedFiles);
-  }
-
-  async function handleClickRemoveSelected(type) {
-    const selectedFiles = ensureAndGetSelectedFiles(type);
-    if (selectedFiles === null) return;
-    const action = await new ConfirmDialog({
-      $body: tpl.typoMsg(i18n('Confirm to delete the selected files?')),
-    }).open();
-    if (action !== 'yes') return;
-    try {
-      await request.post('', {
-        operation: 'delete_files',
-        files: selectedFiles,
-        type,
-      });
-      Notification.success(i18n('Selected files have been deleted.'));
-      await pjax.request({ push: false });
-    } catch (error) {
-      Notification.error(error.message);
-    }
-  }
-
-  /**
-   * @param {string} type
-   * @param {JQuery.DragOverEvent<HTMLElement, undefined, HTMLElement, HTMLElement>} ev
-   */
-  function handleDragOver(type, ev) {
-    ev.preventDefault();
-    // TODO display a drag-drop allowed hint
-  }
-
-  /**
-   * @param {string} type
-   * @param {JQuery.DropEvent<HTMLElement, undefined, HTMLElement, HTMLElement>} ev
-   */
-  function handleDrop(type, ev) {
-    ev.preventDefault();
-    if (!$('[name="upload_testdata"]').length) {
-      Notification.error(i18n("You don't have permission to upload file."));
-      return;
-    }
-    ev = ev.originalEvent;
-    const files = [];
-    if (ev.dataTransfer.items) {
-      for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-        if (ev.dataTransfer.items[i].kind === 'file') {
-          const file = ev.dataTransfer.items[i].getAsFile();
-          files.push(file);
-        }
-      }
-    } else {
-      for (let i = 0; i < ev.dataTransfer.files.length; i++) {
-        files.push(ev.dataTransfer.files[i]);
-      }
-    }
-    handleClickUpload(type, files);
-  }
-
-  if ($('[name="upload_testdata"]').length) {
-    $(document).on('click', '[name="upload_testdata"]', () => handleClickUpload('testdata'));
-    $(document).on('click', '[name="upload_file"]', () => handleClickUpload('additional_file'));
-    $(document).on('click', '[name="create_testdata"]', () => previewFile(undefined, 'testdata'));
-    $(document).on('click', '[name="create_file"]', () => previewFile(undefined, 'additional_file'));
-    $(document).on('click', '[name="remove_selected_testdata"]', () => handleClickRemoveSelected('testdata'));
-    $(document).on('click', '[name="remove_selected_file"]', () => handleClickRemoveSelected('additional_file'));
-  }
-  $(document).on('dragover', '.problem-files-testdata', (ev) => handleDragOver('testdata', ev));
-  $(document).on('dragover', '.problem-files-additional_file', (ev) => handleDragOver('additional_file', ev));
-  $(document).on('drop', '.problem-files-testdata', (ev) => handleDrop('testdata', ev));
-  $(document).on('drop', '.problem-files-additional_file', (ev) => handleDrop('additional_file', ev));
-  $(document).on('click', '[name="download_selected_testdata"]', () => handleClickDownloadSelected('testdata'));
-  $(document).on('click', '[name="download_selected_file"]', () => handleClickDownloadSelected('additional_file'));
-  $(document).on('vjContentNew', (e) => {
-    createHint('Hint::icon::testdata', $(e.target).find('[name="create_testdata"]').get(0)?.parentNode?.parentNode?.children?.[0]);
-  });
-  createHint('Hint::icon::testdata', $(document).find('[name="create_testdata"]').get(0)?.parentNode?.parentNode?.children?.[0]);
-});
-
-export default page;

packages/ui-default/pages/problem_files.page.styl

@@ -4,3 +4,14 @@
 
   .col--size
     width: 120px
+
+  .col--operation
+    width: 60px
+    text-align: center
+
+  .rename-confirm-table
+    x-overflow: auto
+
+    .col--origin, .col--new
+      width: 50%
+      text-align: center

packages/ui-default/pages/problem_files.page.tsx

@@ -0,0 +1,347 @@
+import $ from 'jquery';
+import { map } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionDialog, ConfirmDialog } from 'vj/components/dialog/index';
+import createHint from 'vj/components/hint';
+import Notification from 'vj/components/notification';
+import { previewFile } from 'vj/components/preview/preview.page';
+import uploadFiles from 'vj/components/upload';
+import download from 'vj/components/zipDownloader';
+import { NamedPage } from 'vj/misc/Page';
+import {
+  i18n, pjax, request, tpl,
+} from 'vj/utils';
+
+async function downloadProblemFilesAsArchive(type, files) {
+  const { links, pdoc } = await request.post('', { operation: 'get_links', files, type });
+  const targets = [];
+  for (const filename of Object.keys(links)) targets.push({ filename, url: links[filename] });
+  await download(`${pdoc.docId} ${pdoc.title}.zip`, targets);
+}
+
+const page = new NamedPage('problem_files', () => {
+  function ensureAndGetSelectedFiles(type) {
+    const files = map(
+      $(`.problem-files-${type} tbody [data-checkbox-group="${type}"]:checked`),
+      (ch) => $(ch).closest('tr').attr('data-filename'),
+    );
+    if (files.length === 0) {
+      Notification.error(i18n('Please select at least one file to perform this operation.'));
+      return null;
+    }
+    return files;
+  }
+
+  async function handleClickUpload(type, files?) {
+    if (!files) {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.multiple = true;
+      input.click();
+      await new Promise((resolve) => { input.onchange = resolve; });
+      files = input.files;
+    }
+    if (!files.length) {
+      Notification.warn(i18n('No file selected.'));
+      return;
+    }
+    await uploadFiles('', files, { type, pjax: true });
+  }
+
+  async function handleClickDownloadSelected(type) {
+    const selectedFiles = ensureAndGetSelectedFiles(type);
+    if (selectedFiles === null) return;
+    await downloadProblemFilesAsArchive(type, selectedFiles);
+  }
+
+  async function handleClickRename(ev, type) {
+    const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
+    // eslint-disable-next-line no-alert
+    const newName = prompt(i18n('Enter a new name for the file: '));
+    if (!newName) return;
+    try {
+      await request.post('./files', {
+        operation: 'rename_files',
+        files: file,
+        newNames: [newName],
+        type,
+      });
+      Notification.success(i18n('File have been renamed.'));
+      await pjax.request({ push: false });
+    } catch (error) {
+      Notification.error(error.message);
+    }
+  }
+
+  let prism = null;
+  const load = import('../components/highlighter/prismjs');
+  load.then(({ default: p }) => {
+    prism = p.Prism;
+  }).catch(() => { });
+
+  async function handleClickRenameSelected(type) {
+    const selectedFiles = ensureAndGetSelectedFiles(type);
+    if (!selectedFiles?.length) return;
+    let onActionButton = (_: string) => false; // eslint-disable-line @typescript-eslint/no-unused-vars
+
+    function Rename(props) {
+      const [original, setOriginal] = React.useState('');
+      const [replace, setReplace] = React.useState('');
+      const [prefix, setPrefix] = React.useState('');
+      const [suffix, setSuffix] = React.useState('');
+      const [regexValid, setRegexValid] = React.useState(true);
+      const [wantNext, setWantNext] = React.useState(false);
+      const [preview, setPreview] = React.useState(false);
+      const [highlight, setHighlight] = React.useState(null);
+      const [newNames, setNewNames] = React.useState(props.names);
+
+      React.useEffect(() => {
+        let s: string | RegExp = original;
+        setRegexValid(true);
+        setHighlight(null);
+        if (original.length > 2 && original.startsWith('/')) {
+          const availableFlags = ['g', 'i'];
+          const flags = [];
+          let copy = original.substring(1);
+          while (availableFlags.includes(copy[copy.length - 1])) {
+            flags.push(copy[copy.length - 1]);
+            copy = copy.substring(0, copy.length - 1);
+          }
+          if (copy.endsWith('/')) {
+            copy = copy.substring(0, copy.length - 1);
+            flags.reverse();
+            if (prism) setHighlight(`/${prism.highlight(copy, prism.languages.regex, 'RegExp')}/${flags.join('')}`);
+            try {
+              s = new RegExp(copy, flags.join(''));
+              setRegexValid(true);
+            } catch (e) {
+              setRegexValid(false);
+            }
+          }
+        }
+        setNewNames(selectedFiles.map((file) => {
+          if (s) file = file.replace(s, replace);
+          return prefix + file + suffix;
+        }));
+      }, [original, replace, prefix, suffix]);
+
+      onActionButton = (action) => {
+        if (action === 'ok') {
+          if (!preview) {
+            if (!regexValid) return false;
+            if (!original && !prefix && !suffix) {
+              setWantNext(true);
+              return false;
+            }
+            setPreview(true);
+            return false;
+          }
+          request.post('', {
+            operation: 'rename_files',
+            files: selectedFiles,
+            newNames,
+            type,
+          }).then(() => {
+            Notification.success(i18n('Selected files have been renamed.'));
+            pjax.request({ push: false });
+          }).catch((error) => {
+            Notification.error(error.message);
+          });
+          return true;
+        }
+        if (preview) {
+          setPreview(false);
+          return false;
+        }
+        return true;
+      };
+
+      const style = { fontFamily: 'var(--code-font-family)' };
+
+      return <div className="typo">
+        {!preview ? <>
+          <div className="row">
+            <div className="medium-6 small-6 columns">
+              <h2>{i18n('Batch replacement')}</h2>
+              <label>{i18n('Original content')}
+                <div style={{ position: 'relative' }}>
+                  <div className="textbox-container" style={{ zIndex: 1, position: 'relative' }}>
+                    <input
+                      className="textbox"
+                      type="text"
+                      style={{ ...style, ...(highlight ? { color: 'transparent', background: 'transparent', caretColor: 'black' } : {}) }}
+                      value={original}
+                      onChange={(e) => setOriginal(e.currentTarget.value)}
+                    ></input>
+                  </div>
+                  <div className="textbox-container" style={{
+                    position: 'absolute', top: 0, left: 0, zIndex: 0,
+                  }}>
+                    {highlight && <span className="textbox" style={{
+                      ...style, border: 'none', display: 'inline-flex', alignItems: 'center',
+                    }} dangerouslySetInnerHTML={{ __html: highlight }} />}
+                  </div>
+                </div>
+              </label>
+              <label>{i18n('Replace with')}
+                <div className="textbox-container">
+                  <input className="textbox" type="text" value={replace} onChange={(e) => setReplace(e.currentTarget.value)}></input>
+                </div>
+              </label>
+            </div>
+            <div className="medium-6 small-6 columns">
+              <h2>{i18n('Add prefix/suffix')}</h2>
+              <label>{i18n('Add prefix')}
+                <div className="textbox-container">
+                  <input className="textbox" type="text" value={prefix} onChange={(e) => setPrefix(e.currentTarget.value)}></input>
+                </div>
+              </label>
+              <label>{i18n('Add suffix')}
+                <div className="textbox-container">
+                  <input className="textbox" type="text" value={suffix} onChange={(e) => setSuffix(e.currentTarget.value)}></input>
+                </div>
+              </label>
+            </div>
+          </div>
+          <div className="row">
+            <div className="medium-12 columns">
+              <p>{!regexValid ? i18n('Invalid RegExp') : wantNext ? i18n('No changes to make.') : i18n('RegExp supported, quote with "/"')}</p>
+            </div>
+          </div>
+        </> : <div>
+          <p>{i18n('Are you sure to rename the following file?')}</p>
+          <ul>
+            {original && <li>Replace {original} with {replace}</li>}
+            {prefix && <li>Add {prefix} as prefix</li>}
+            {suffix && <li>Add {suffix} as suffix</li>}
+          </ul>
+          <table className="data-table rename-confirm-table">
+            <colgroup>
+              <col className="col--origin" />
+              <col className="col--new" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th className="col--origin">{i18n('Original filename(s)')}</th>
+                <th className="col--new">{i18n('New filename(s)')}</th>
+              </tr>
+            </thead>
+            <tbody style={{ maxHeight: '60vh', overflow: 'scroll' }}>
+              {selectedFiles.map((file, index) => <tr key={file}>
+                <td className="col--origin">{file}</td>
+                <td className="col--new">{newNames[index]}</td>
+              </tr>)}
+            </tbody>
+          </table>
+        </div>}
+      </div >;
+    }
+
+    const promise = new ActionDialog({
+      $body: tpl`<div id="rename_dialog"></div>`,
+      width: '600px',
+      onDispatch(action) {
+        return onActionButton(action);
+      },
+    }).open();
+    const root = ReactDOM.createRoot(document.getElementById('rename_dialog'));
+    root.render(<Rename names={selectedFiles} />);
+    await promise;
+    root.unmount();
+  }
+
+  async function handleClickRemove(ev, type) {
+    const file = [$(ev.currentTarget).parent().parent().attr('data-filename')];
+    const action = await new ConfirmDialog({
+      $body: tpl.typoMsg(i18n('Confirm to delete the file?')),
+    }).open();
+    if (action !== 'yes') return;
+    try {
+      await request.post('./files', {
+        operation: 'delete_files',
+        files: file,
+        type,
+      });
+      Notification.success(i18n('File have been deleted.'));
+      await pjax.request({ push: false });
+    } catch (error) {
+      Notification.error(error.message);
+    }
+  }
+
+  async function handleClickRemoveSelected(type) {
+    const selectedFiles = ensureAndGetSelectedFiles(type);
+    if (selectedFiles === null) return;
+    const action = await new ConfirmDialog({
+      $body: tpl.typoMsg(i18n('Confirm to delete the selected files?')),
+    }).open();
+    if (action !== 'yes') return;
+    try {
+      await request.post('', {
+        operation: 'delete_files',
+        files: selectedFiles,
+        type,
+      });
+      Notification.success(i18n('Selected files have been deleted.'));
+      await pjax.request({ push: false });
+    } catch (error) {
+      Notification.error(error.message);
+    }
+  }
+
+  function handleDragOver(type: string, ev: JQuery.DragOverEvent<Document, undefined, HTMLElement, HTMLElement>) {
+    ev.preventDefault();
+    // TODO display a drag-drop allowed hint
+  }
+
+  function handleDrop(type: string, e: JQuery.DropEvent<Document, undefined, HTMLElement, HTMLElement>) {
+    e.preventDefault();
+    if (!$('[name="upload_testdata"]').length) {
+      Notification.error(i18n("You don't have permission to upload file."));
+      return;
+    }
+    const ev = e.originalEvent;
+    const files = [];
+    if (ev.dataTransfer.items) {
+      for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+        if (ev.dataTransfer.items[i].kind === 'file') {
+          const file = ev.dataTransfer.items[i].getAsFile();
+          files.push(file);
+        }
+      }
+    } else {
+      for (let i = 0; i < ev.dataTransfer.files.length; i++) {
+        files.push(ev.dataTransfer.files[i]);
+      }
+    }
+    handleClickUpload(type, files);
+  }
+
+  if ($('[name="upload_testdata"]').length) {
+    $(document).on('click', '[name="upload_testdata"]', () => handleClickUpload('testdata'));
+    $(document).on('click', '[name="upload_file"]', () => handleClickUpload('additional_file'));
+    $(document).on('click', '[name="create_testdata"]', () => previewFile(undefined, 'testdata'));
+    $(document).on('click', '[name="create_file"]', () => previewFile(undefined, 'additional_file'));
+    $(document).on('click', '[name="testdata__rename"]', (ev) => handleClickRename(ev, 'testdata'));
+    $(document).on('click', '[name="additional_file__rename"]', (ev) => handleClickRename(ev, 'additional_file'));
+    $(document).on('click', '[name="rename_selected_testdata"]', () => handleClickRenameSelected('testdata'));
+    $(document).on('click', '[name="rename_selected_file"]', () => handleClickRenameSelected('additional_file'));
+    $(document).on('click', '[name="testdata__delete"]', (ev) => handleClickRemove(ev, 'testdata'));
+    $(document).on('click', '[name="additional_file__delete"]', (ev) => handleClickRemove(ev, 'additional_file'));
+    $(document).on('click', '[name="remove_selected_testdata"]', () => handleClickRemoveSelected('testdata'));
+    $(document).on('click', '[name="remove_selected_file"]', () => handleClickRemoveSelected('additional_file'));
+  }
+  $(document).on('dragover', '.problem-files-testdata', (ev) => handleDragOver('testdata', ev));
+  $(document).on('dragover', '.problem-files-additional_file', (ev) => handleDragOver('additional_file', ev));
+  $(document).on('drop', '.problem-files-testdata', (ev) => handleDrop('testdata', ev));
+  $(document).on('drop', '.problem-files-additional_file', (ev) => handleDrop('additional_file', ev));
+  $(document).on('click', '[name="download_selected_testdata"]', () => handleClickDownloadSelected('testdata'));
+  $(document).on('click', '[name="download_selected_file"]', () => handleClickDownloadSelected('additional_file'));
+  $(document).on('vjContentNew', (e) => {
+    createHint('Hint::icon::testdata', $(e.target).find('[name="create_testdata"]').get(0)?.parentNode?.parentNode?.children?.[0]);
+  });
+  createHint('Hint::icon::testdata', $(document).find('[name="create_testdata"]').get(0)?.parentNode?.parentNode?.children?.[0]);
+});
+
+export default page;

packages/ui-default/pages/problem_main.page.ts

@@ -289,7 +289,7 @@ function buildSearchContainer() {
 async function handleDownload(ev) {
   let name = 'Export';
   // eslint-disable-next-line no-alert
-  if (ev.shiftKey) name = prompt('Filename:', name);
+  if (ev.shiftKey) name = prompt(i18n('Filename'), name);
   const pids = ensureAndGetSelectedPids();
   if (pids) await downloadProblemSet(pids, name);
 }

packages/ui-default/templates/partials/problem_files.html

@@ -13,7 +13,7 @@
         {% if not sidebar %}<col class="col--checkbox">{% endif %}
         <col class="col--name">
         <col class="col--size">
-        {% if sidebar %}<col class="col--operation">{% endif %}
+        {% if can_edit %}<col class="col--operation">{% endif %}
       </colgroup>
       <thead>
         <tr>
@@ -26,7 +26,7 @@
           {% endif %}
           <th class="col--name">{{ _('Filename') }}</th>
           <th class="col--size">{{ _('Size') }}</th>
-          {% if sidebar %}<th class="col--operation"><span class="icon icon-wrench"></span></th>{% endif %}
+          {% if can_edit %}<th class="col--operation"><span class="icon icon-wrench"></span></th>{% endif %}
         </tr>
       </thead>
       <tbody>
@@ -47,8 +47,11 @@
             {% endif %}
           </td>
           <td class="col--size">{{ size(file.size) }}</td>
-          {% if sidebar %}
-            <td class="col--operation"><a href="javascript:;" name="{{ filetype }}__delete"><span class="icon icon-delete"></span></a></td>
+          {% if can_edit %}
+          <td class="col--operation">
+            <a href="javascript:;" name="{{ filetype }}__rename"><span class="icon icon-edit"></span></a>
+            <a href="javascript:;" name="{{ filetype }}__delete"><span class="icon icon-delete"></span></a>
+          </td>
           {% endif %}
         </tr>
         {%- endfor -%}

packages/ui-default/templates/problem_config.html

@@ -29,6 +29,7 @@
         <li class="menu__seperator"></li>
       </ol>
       {% set sidebar = true %}
+      {% set can_edit = true %}
       {% set filetype = "testdata" %}
       {% include "partials/problem_files.html" %}
     </div>

packages/ui-default/templates/problem_edit.html

@@ -107,6 +107,7 @@
           </li>
         </ol>
         {% set sidebar = true %}
+        {% set can_edit = true %}
         {% set filetype = "additional_file" %}
         {% include "partials/problem_files.html" %}
       </div>

packages/ui-default/templates/problem_files.html

@@ -15,12 +15,14 @@
       </div>
       {{ noscript_note.render() }}
       {% set filetype = "testdata" %}
+      {% set can_edit = (handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM)) and not reference %}
       {% include "partials/problem_files.html" %}
       {% if not reference and (handler.user.own(pdoc) or handler.user.hasPerm(perm.PERM_READ_PROBLEM_DATA) or handler.user.hasPriv(PRIV.PRIV_READ_PROBLEM_DATA)) %}
         <div class="section__body">
           <button class="rounded button" name="download_selected_testdata">{{ _('Download Selected') }}</button>
           {% if handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
             <button class="rounded button" name="remove_selected_testdata">{{ _('Remove Selected') }}</button>
+            <button class="rounded button" name="rename_selected_testdata">{{ _('Rename Selected') }}</button>
           {% endif %}
         </div>
       {% endif %}
@@ -38,11 +40,13 @@
         </div>
       </div>
       {% set filetype = "additional_file" %}
+      {% set can_edit = (handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM)) and not reference %}
       {% include "partials/problem_files.html" %}
       <div class="section__body">
         <button class="rounded button" name="download_selected_file">{{ _('Download Selected') }}</button>
         {% if (handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM)) and not reference %}
           <button class="rounded button" name="remove_selected_file">{{ _('Remove Selected') }}</button>
+          <button class="rounded button" name="rename_selected_file">{{ _('Rename Selected') }}</button>
         {% endif %}
       </div>
     </div>

packages/ui-default/theme/dark.styl

@@ -153,7 +153,7 @@ $hover-background-color = #424242
     border-color: #2960a0
     outline-color: #102f4e
 
-  input.textbox, textarea.textbox
+  input.textbox, textarea.textbox, span.textbox
     border: 1px solid #323232
     background-color: #1f1f1f