ui: add hint on problem_files page

package.json

@@ -28,18 +28,18 @@
     "license": "AGPL-3.0-only",
     "devDependencies": {
         "@types/cross-spawn": "^6.0.2",
-        "@types/node": "^16.10.3",
+        "@types/node": "^16.10.9",
         "@types/semver": "^7.3.8",
-        "@typescript-eslint/eslint-plugin": "^4.33.0",
-        "@typescript-eslint/parser": "^4.33.0",
-        "cac": "^6.7.8",
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "@typescript-eslint/parser": "^5.0.0",
+        "cac": "^6.7.11",
         "cross-env": "^7.0.3",
         "cross-spawn": "^7.0.3",
-        "esbuild": "^0.13.4",
-        "eslint": "^7.32.0",
+        "esbuild": "^0.13.6",
+        "eslint": "^8.0.1",
         "eslint-config-airbnb-typescript": "12.3.1",
         "eslint-import-resolver-typescript": "^2.5.0",
-        "eslint-plugin-import": "^2.24.2",
+        "eslint-plugin-import": "^2.25.2",
         "eslint-plugin-simple-import-sort": "^7.0.0",
         "fs-extra": "^10.0.0",
         "globby": "11.0.4",

packages/login-with-qq/package.json

@@ -10,6 +10,6 @@
         "ws": "^8.2.3"
     },
     "devDependencies": {
-        "@types/ws": "^7.4.7"
+        "@types/ws": "^8.2.0"
     }
 }

packages/ui-default/.eslintrc.js

@@ -67,6 +67,7 @@ module.exports = {
       'always',
       { exceptAfterSingleLine: true },
     ],
+
     'lines-between-class-members': [
       'error',
       'always',
@@ -90,6 +91,7 @@ module.exports = {
     'import/extensions': 'off',
     'import/no-extraneous-dependencies': 'off',
     'max-classes-per-file': 'off',
+    'newline-per-chained-call': 'off',
     'no-empty': ['warn', { allowEmptyCatch: true }],
     'no-console': 'off',
     'no-continue': 'off',

packages/ui-default/components/hint.ts

@@ -12,7 +12,7 @@ export default function createHint(message: string, element?: any) {
   a.onclick = () => {
     new InfoDialog({
       cancelByClickingBack: false,
-      $body: tpl.typoMsg(i18n(message)),
+      $body: tpl.typoMsg(i18n(message), true),
     }).open();
   };
   $(element).append(a);

packages/ui-default/handler.ts

@@ -110,7 +110,7 @@ class WikiAboutHandler extends Handler {
 }
 
 class SetThemeHandler extends Handler {
-  noCheckPermView = true
+  noCheckPermView = true;
 
   async get({ theme }) {
     await user.setById(this.user._id, { theme });

packages/ui-default/locales/zh.yaml

@@ -341,6 +341,7 @@ Highlight discussions: 高亮讨论
 Highlight: 高亮
 Hint: 提示
 Hint::icon::difficulty: Hydro 中题目的难度，根据递交数、通过率以及每个递交的递交时间和评测结果，综合计算得出，可能不准确。
+Hint::icon::testdata: <a href="https://hydro.js.org/docs/user/testdata/" target="_blank">请参照文档说明</a>
 Hint::page::main: 欢迎来到 Hydro！ 您可在右上角注册或登录。此类提示仅会显示一次。
 Hint::page::problem_detail: 这是题目详情页面。您可点击右侧“进入在线编程模式"开始编写您的代码。
 Hint::page::problem_files: 您可以将文件或压缩包拖拽至对应区域来上传文件。点击文件名在线编辑或按住 Ctrl 后点击文件名下载单个文件。

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.25.4",
+  "version": "4.25.5",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -13,7 +13,7 @@
     "@blueprintjs/core": "^3.51.0",
     "@blueprintjs/icons": "^3.30.2",
     "@hydrooj/utils": "workspace:*",
-    "@types/jquery": "^3.5.6",
+    "@types/jquery": "^3.5.7",
     "@types/json-schema": "^7.0.9",
     "@types/katex": "^0.11.1",
     "@types/sockjs-client": "^1.5.1",
@@ -31,10 +31,10 @@
     "emojis-keywords": "2.0.0",
     "emojis-list": "2.1.0",
     "esbuild-loader": "^2.16.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.0.1",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-import-resolver-webpack": "^0.13.1",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
     "fancy-log": "^1.3.3",
@@ -53,9 +53,9 @@
     "jquery.transit": "^0.9.12",
     "mini-css-extract-plugin": "^1.6.2",
     "moment": "^2.29.1",
-    "monaco-editor": "^0.29.0",
+    "monaco-editor": "^0.29.1",
     "monaco-editor-webpack-plugin": "^4.2.0",
-    "nanoid": "^3.1.29",
+    "nanoid": "^3.1.30",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "pickadate": "^3.6.4",
@@ -90,19 +90,19 @@
     "wastyle": "^0.0.5",
     "web-streams-polyfill": "^3.1.1",
     "webpack": "^4.46.0",
-    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
     "webpackbar": "^5.0.0-3"
   },
   "dependencies": {
-    "esbuild": "^0.13.4",
+    "esbuild": "^0.13.6",
     "fs-extra": "^10.0.0",
     "js-yaml": "^4.1.0",
     "jsesc": "^3.0.2",
     "katex": "^0.13.18",
     "lodash": "^4.17.21",
     "markdown-it": "^12.2.0",
-    "markdown-it-anchor": "^8.3.1",
+    "markdown-it-anchor": "^8.4.1",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-imsize": "^2.0.1",
     "markdown-it-mark": "^3.0.1",

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

@@ -12,8 +12,7 @@ function onBeforeUnload(e) {
   e.returnValue = '';
 }
 
-const page = new NamedPage('home_files', () => {
-  function ensureAndGetSelectedFiles() {
+function ensureAndGetSelectedFiles() {
   const files = _.map(
     $('.home-files tbody [data-checkbox-group="user_files"]:checked'),
     (ch) => $(ch).closest('tr').attr('data-filename'),
@@ -23,9 +22,9 @@ const page = new NamedPage('home_files', () => {
     return null;
   }
   return files;
-  }
+}
 
-  async function handleClickUpload(files) {
+async function handleClickUpload(files) {
   if (!files) {
     const input = document.createElement('input');
     input.type = 'file';
@@ -94,9 +93,9 @@ const page = new NamedPage('home_files', () => {
   } finally {
     dialog.close();
   }
-  }
+}
 
-  async function handleClickRemoveSelected() {
+async function handleClickRemoveSelected() {
   const selectedFiles = ensureAndGetSelectedFiles();
   if (selectedFiles === null) return;
   const action = await new ConfirmDialog({
@@ -116,20 +115,20 @@ const page = new NamedPage('home_files', () => {
   } catch (error) {
     Notification.error(error.message);
   }
-  }
+}
 
-  /**
+/**
  * @param {JQuery.DragOverEvent<HTMLElement, undefined, HTMLElement, HTMLElement>} ev
  */
-  function handleDragOver(ev) {
+function handleDragOver(ev) {
   ev.preventDefault();
   // TODO display a drag-drop allowed hint
-  }
+}
 
-  /**
+/**
  * @param {JQuery.DropEvent<HTMLElement, undefined, HTMLElement, HTMLElement>} ev
  */
-  function handleDrop(ev) {
+function handleDrop(ev) {
   ev.preventDefault();
   if (!$('[name="upload_testdata"]').length) {
     Notification.error(i18n("You don't have permission to upload file."));
@@ -150,8 +149,9 @@ const page = new NamedPage('home_files', () => {
     }
   }
   handleClickUpload(files);
-  }
+}
 
+const page = new NamedPage('home_files', () => {
   const clip = new Clipboard('.home-files .col--name', {
     text: (trigger) => {
       const filename = trigger.closest('[data-filename]').getAttribute('data-filename');

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

@@ -3,6 +3,7 @@ import { NamedPage } from 'vj/misc/Page';
 import Notification from 'vj/components/notification';
 import { ConfirmDialog, ActionDialog, Dialog } from 'vj/components/dialog/index';
 import download from 'vj/components/zipDownloader';
+import createHint from 'vj/components/hint';
 import request from 'vj/utils/request';
 import pjax from 'vj/utils/pjax';
 import tpl from 'vj/utils/tpl';
@@ -210,6 +211,7 @@ const page = new NamedPage('problem_files', () => {
       ? ev.currentTarget.closest('[data-filename]').getAttribute('data-filename')
       // eslint-disable-next-line no-alert
       : prompt('Filename');
+    if (!filename) return;
     const filesize = ev
       ? +ev.currentTarget.closest('[data-size]').getAttribute('data-size')
       : 0;
@@ -251,6 +253,10 @@ const page = new NamedPage('problem_files', () => {
   $(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/utils/tpl.js

@@ -13,10 +13,10 @@ export default function tpl(pieces, ...substitutions) {
   return result;
 }
 
-tpl.typoMsg = function (msg) {
+tpl.typoMsg = function (msg, raw = false) {
   return tpl`
     <div class="typo">
-      <p>${msg}</p>
+      <p>${raw ? { html: msg, templateRaw: true } : msg}</p>
     </div>
   `;
 };