Update JS dependencies (#17357)

* Update JS dependencies

- Upgrade to eslint 8 and add new plugin rules
- Adapt to various API changes
- Rebuild SVGs

* fix webpack warning on license

* order options alphabetically

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

.eslintrc

@@ -117,7 +117,7 @@ rules:
   import/no-amd: [0]
   import/no-anonymous-default-export: [0]
   import/no-commonjs: [0]
-  import/no-cycle: [2, {ignoreExternal: true}]
+  import/no-cycle: [2, {ignoreExternal: true, maxDepth: 1}]
   import/no-default-export: [0]
   import/no-deprecated: [0]
   import/no-dynamic-require: [0]
@@ -371,6 +371,7 @@ rules:
   unicorn/no-fn-reference-in-iterator: [0]
   unicorn/no-for-loop: [0]
   unicorn/no-hex-escape: [0]
+  unicorn/no-invalid-remove-event-listener: [2]
   unicorn/no-keyword-prefix: [0]
   unicorn/no-lonely-if: [2]
   unicorn/no-nested-ternary: [0]
@@ -385,6 +386,7 @@ rules:
   unicorn/no-unreadable-array-destructuring: [0]
   unicorn/no-unsafe-regex: [0]
   unicorn/no-unused-properties: [2]
+  unicorn/no-useless-fallback-in-spread: [2]
   unicorn/no-useless-length-check: [2]
   unicorn/no-useless-spread: [2]
   unicorn/no-useless-undefined: [0]
@@ -434,6 +436,7 @@ rules:
   unicorn/require-number-to-fixed-digits-argument: [2]
   unicorn/require-post-message-target-origin: [0]
   unicorn/string-content: [0]
+  unicorn/template-indent: [2]
   unicorn/throw-new-error: [2]
   use-isnan: [2]
   valid-typeof: [2, {requireStringLiterals: true}]

jest.config.js

@@ -1,6 +1,6 @@
 export default {
   rootDir: 'web_src',
-  setupFilesAfterEnv: ['jest-extended'],
+  setupFilesAfterEnv: ['jest-extended/all'],
   testEnvironment: 'jsdom',
   testMatch: ['<rootDir>/**/*.test.js'],
   testTimeout: 20000,

package.json

@@ -7,25 +7,25 @@
   },
   "dependencies": {
     "@claviska/jquery-minicolors": "2.3.5",
-    "@primer/octicons": "15.0.1",
+    "@primer/octicons": "16.0.0",
     "add-asset-webpack-plugin": "2.0.1",
-    "codemirror": "5.62.2",
+    "codemirror": "5.63.3",
-    "css-loader": "6.2.0",
+    "css-loader": "6.4.0",
-    "dropzone": "5.9.2",
+    "dropzone": "5.9.3",
     "easymde": "2.15.0",
-    "esbuild-loader": "2.15.0",
+    "esbuild-loader": "2.16.0",
     "escape-goat": "4.0.0",
     "fast-glob": "3.2.7",
     "font-awesome": "4.7.0",
     "jquery": "3.6.0",
     "jquery.are-you-sure": "1.9.0",
-    "less": "4.1.1",
+    "less": "4.1.2",
-    "less-loader": "10.0.1",
+    "less-loader": "10.2.0",
     "license-checker-webpack-plugin": "0.2.1",
-    "mermaid": "8.11.5",
+    "mermaid": "8.13.3",
-    "mini-css-extract-plugin": "2.2.0",
+    "mini-css-extract-plugin": "2.4.2",
-    "monaco-editor": "0.27.0",
+    "monaco-editor": "0.29.1",
-    "monaco-editor-webpack-plugin": "4.1.2",
+    "monaco-editor-webpack-plugin": "5.0.0",
     "pretty-ms": "7.0.1",
     "sortablejs": "1.14.0",
     "swagger-ui-dist": "4.0.0-beta.4",
@@ -35,26 +35,26 @@
     "vue-calendar-heatmap": "0.8.4",
     "vue-loader": "15.9.8",
     "vue-template-compiler": "2.6.14",
-    "webpack": "5.50.0",
+    "webpack": "5.58.2",
-    "webpack-cli": "4.8.0",
+    "webpack-cli": "4.9.1",
-    "workbox-routing": "6.2.4",
+    "workbox-routing": "6.3.0",
-    "workbox-strategies": "6.2.4",
+    "workbox-strategies": "6.3.0",
     "worker-loader": "3.0.8",
-    "wrap-ansi": "8.0.0"
+    "wrap-ansi": "8.0.1"
   },
   "devDependencies": {
     "editorconfig-checker": "4.0.2",
-    "eslint": "7.32.0",
+    "eslint": "8.0.1",
-    "eslint-plugin-html": "6.1.2",
+    "eslint-plugin-html": "6.2.0",
-    "eslint-plugin-import": "2.24.0",
+    "eslint-plugin-import": "2.25.2",
-    "eslint-plugin-unicorn": "35.0.0",
+    "eslint-plugin-unicorn": "37.0.1",
-    "eslint-plugin-vue": "7.16.0",
+    "eslint-plugin-vue": "7.19.1",
-    "jest": "27.0.6",
+    "jest": "27.3.0",
-    "jest-extended": "0.11.5",
+    "jest-extended": "1.1.0",
     "stylelint": "13.13.1",
     "stylelint-config-standard": "22.0.0",
-    "svgo": "2.4.0",
+    "svgo": "2.7.0",
-    "updates": "12.1.0"
+    "updates": "12.2.2"
   },
   "browserslist": [
     "defaults",

public/img/svg/octicon-bell-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-bell-fill" width="16" height="16" aria-hidden="true"><path d="M8 16c.9 0 1.7-.6 1.9-1.5.1-.3-.1-.5-.4-.5h-3c-.3 0-.5.2-.4.5.2.9 1 1.5 1.9 1.5zM3 5c0-2.8 2.2-5 5-5s5 2.2 5 5v3l1.7 2.6c.2.2.3.5.3.8 0 .8-.7 1.5-1.5 1.5h-11c-.8.1-1.5-.6-1.5-1.4 0-.3.1-.6.3-.8L3 8.1V5z"/></svg>

public/img/svg/octicon-iterations.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-iterations" width="16" height="16" aria-hidden="true"><path d="M2.5 7.25a4.75 4.75 0 0 1 9.5 0 .75.75 0 0 0 1.5 0 6.25 6.25 0 1 0-6.25 6.25H12v2.146c0 .223.27.335.427.177l2.896-2.896a.25.25 0 0 0 0-.354l-2.896-2.896a.25.25 0 0 0-.427.177V12H7.25A4.75 4.75 0 0 1 2.5 7.25z"/></svg>

public/img/svg/octicon-person-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-person-fill" width="16" height="16" aria-hidden="true"><path d="M4.243 4.757a3.757 3.757 0 1 1 5.851 3.119 6.006 6.006 0 0 1 3.9 5.339.75.75 0 0 1-.715.784H2.721a.75.75 0 0 1-.714-.784 6.006 6.006 0 0 1 3.9-5.34 3.753 3.753 0 0 1-1.664-3.118z"/></svg>

public/img/svg/octicon-single-select.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16" class="svg octicon-select-single" width="16" height="16" aria-hidden="true"><path d="m5.06 7.356 2.795 2.833c.08.081.21.081.29 0l2.794-2.833c.13-.131.038-.356-.145-.356H5.206c-.183 0-.275.225-.145.356z"/><path fill-rule="evenodd" d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 15H2.75A1.75 1.75 0 0 1 1 13.25V2.75zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25H2.75z"/></svg>
+<svg viewBox="0 0 16 16" class="svg octicon-single-select" width="16" height="16" aria-hidden="true"><path d="m5.06 7.356 2.795 2.833c.08.081.21.081.29 0l2.794-2.833c.13-.131.038-.356-.145-.356H5.206c-.183 0-.275.225-.145.356z"/><path fill-rule="evenodd" d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 15H2.75A1.75 1.75 0 0 1 1 13.25V2.75zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25H2.75z"/></svg>

public/img/svg/octicon-stack.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-stack" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.122.392a1.75 1.75 0 0 1 1.756 0l5.003 2.902c.83.481.83 1.68 0 2.162L8.878 8.358a1.75 1.75 0 0 1-1.756 0L2.119 5.456a1.25 1.25 0 0 1 0-2.162L7.122.392zM8.125 1.69a.25.25 0 0 0-.25 0l-4.63 2.685 4.63 2.685a.25.25 0 0 0 .25 0l4.63-2.685-4.63-2.685zM1.601 7.789a.75.75 0 0 1 1.025-.273l5.249 3.044a.25.25 0 0 0 .25 0l5.249-3.044a.75.75 0 0 1 .752 1.298l-5.248 3.044a1.75 1.75 0 0 1-1.756 0L1.874 8.814A.75.75 0 0 1 1.6 7.789zm0 3.5a.75.75 0 0 1 1.025-.273l5.249 3.044a.25.25 0 0 0 .25 0l5.249-3.044a.75.75 0 0 1 .752 1.298l-5.248 3.044a1.75 1.75 0 0 1-1.756 0l-5.248-3.044a.75.75 0 0 1-.273-1.025z"/></svg>

public/img/svg/octicon-telescope-fill.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg octicon-telescope-fill" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.531 10.21a.75.75 0 0 1 .944.253l2.644 3.864a.75.75 0 1 1-1.238.847L9 12.424v2.826a.75.75 0 0 1-1.5 0v-2.826l-1.881 2.75a.75.75 0 0 1-1.238-.848l2.048-2.992a.75.75 0 0 1 .293-.252l1.81-.871zM11.905.42a1.5 1.5 0 0 1 2.144.49l1.692 2.93a1.5 1.5 0 0 1-.649 2.102L2.895 11.815a1.5 1.5 0 0 1-1.95-.602l-.68-1.176a1.5 1.5 0 0 1 .455-1.99L11.905.422zM3.279 8.119l.835 1.445 1.355-.653-.947-1.64-1.243.848zm7.728-1.874L9.6 3.808l1.243-.848 1.52 2.631-1.356.653z"/></svg>

web_src/js/features/codeeditor.js

@@ -6,11 +6,11 @@ const languagesByExt = {};
 const baseOptions = {
   fontFamily: 'var(--fonts-monospace)',
   fontSize: 14, // https://github.com/microsoft/monaco-editor/issues/2242
+  guides: {bracketPairs: false, indentation: false},
   links: false,
   minimap: {enabled: false},
   occurrencesHighlight: false,
   overviewRulerLanes: 0,
-  renderIndentGuides: false,
   renderLineHighlight: 'all',
   renderLineHighlightOnlyWhenFocus: true,
   renderWhitespace: 'none',

web_src/js/markup/mermaid.js

@@ -11,7 +11,7 @@ function displayError(el, err) {
 export async function renderMermaid(els) {
   if (!els || !els.length) return;
 
-  const mermaid = await import(/* webpackChunkName: "mermaid" */'mermaid');
+  const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
 
   mermaid.initialize({
     mermaid: {

webpack.config.js

@@ -216,6 +216,9 @@ export default {
       override: {
         'jquery.are-you-sure@*': {licenseName: 'MIT'},
       },
+      ignore: [
+        'font-awesome',
+      ],
     }) : new AddAssetPlugin('js/licenses.txt', `Licenses are disabled during development`),
   ],
   performance: {