Update JS dependencies (#15033)

* Update JS dependencies

- Update all JS dependencies
- For octicons, rename trashcan to trash
- For svgo, migrate to v2 api, output seems to have slightly changed but icons look the same
- For stylelint, update config, fix custom property duplicates
- For monaco, drop legacy Edge support
- For eslint, enable new rules, fix new issues
- For less-loader, remove deprecated import syntax

* update svgo usage in generate-images and rebuild logo.svg with it

web_src/js/features/eventsource.sharedworker.js

@@ -46,9 +46,8 @@ class Source {
   listen(eventType) {
     if (this.listening[eventType]) return;
     this.listening[eventType] = true;
-    const self = this;
     this.eventSource.addEventListener(eventType, (event) => {
-      self.notifyClients({
+      this.notifyClients({
         type: eventType,
         data: event.data
       });

web_src/js/features/projects.js

@@ -1,7 +1,7 @@
-const {csrf} = window.config;
+const {csrf, PageIsProjects} = window.config;
 
 export default async function initProject() {
-  if (!window.config || !window.config.PageIsProjects) {
+  if (!PageIsProjects) {
     return;
   }
 

web_src/js/index.js

@@ -247,7 +247,6 @@ function initReactionSelector(parent) {
   parent.find(`${reactions}a.label`).popup({position: 'bottom left', metadata: {content: 'title', title: 'none'}});
 
   parent.find(`.select-reaction > .menu > .item, ${reactions}a.label`).on('click', function (e) {
-    const vm = this;
     e.preventDefault();
 
     if ($(this).hasClass('disabled')) return;
@@ -263,7 +262,7 @@ function initReactionSelector(parent) {
       }
     }).done((resp) => {
       if (resp && (resp.html || resp.empty)) {
-        const content = $(vm).closest('.content');
+        const content = $(this).closest('.content');
         let react = content.find('.segment.reactions');
         if ((!resp.empty || resp.html === '') && react.length > 0) {
           react.remove();
@@ -343,13 +342,12 @@ function reload() {
 
 function initImagePaste(target) {
   target.each(function () {
-    const field = this;
-    field.addEventListener('paste', async (e) => {
+    this.addEventListener('paste', async (e) => {
       for (const img of getPastedImages(e)) {
         const name = img.name.substr(0, img.name.lastIndexOf('.'));
-        insertAtCursor(field, `![${name}]()`);
+        insertAtCursor(this, `![${name}]()`);
         const data = await uploadFile(img);
-        replaceAndKeepCursor(field, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
+        replaceAndKeepCursor(this, `![${name}]()`, `![${name}](${AppSubUrl}/attachments/${data.uuid})`);
         const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
         $('.files').append(input);
       }
@@ -2667,12 +2665,10 @@ $(document).ready(async () => {
   });
 
   $('.issue-action').on('click', function () {
-    let {action} = this.dataset;
-    let {elementId} = this.dataset;
-    const issueIDs = $('.issue-checkbox').children('input:checked').map(function () {
-      return this.dataset.issueId;
+    let {action, elementId, url} = this.dataset;
+    const issueIDs = $('.issue-checkbox').children('input:checked').map((_, el) => {
+      return el.dataset.issueId;
     }).get().join();
-    const {url} = this.dataset;
     if (elementId === '0' && url.substr(-9) === '/assignee') {
       elementId = '';
       action = 'clear';
@@ -3107,9 +3103,8 @@ function initVueComponents() {
       $(this.$el).find('.poping.up').popup();
       $(this.$el).find('.dropdown').dropdown();
       this.setCheckboxes();
-      const self = this;
       Vue.nextTick(() => {
-        self.$refs.search.focus();
+        this.$refs.search.focus();
       });
     },
 
@@ -3266,14 +3261,12 @@ function initVueComponents() {
       },
 
       searchRepos() {
-        const self = this;
-
         this.isLoading = true;
 
         if (!this.reposTotalCount) {
           const totalCountSearchURL = `${this.suburl}/api/v1/repos/search?sort=updated&order=desc&uid=${this.uid}&team_id=${this.teamId}&q=&page=1&mode=`;
           $.getJSON(totalCountSearchURL, (_result, _textStatus, request) => {
-            self.reposTotalCount = request.getResponseHeader('X-Total-Count');
+            this.reposTotalCount = request.getResponseHeader('X-Total-Count');
           });
         }
 
@@ -3282,19 +3275,19 @@ function initVueComponents() {
         const searchedQuery = this.searchQuery;
 
         $.getJSON(searchedURL, (result, _textStatus, request) => {
-          if (searchedURL === self.searchURL) {
-            self.repos = result.data;
+          if (searchedURL === this.searchURL) {
+            this.repos = result.data;
             const count = request.getResponseHeader('X-Total-Count');
-            if (searchedQuery === '' && searchedMode === '' && self.archivedFilter === 'both') {
-              self.reposTotalCount = count;
+            if (searchedQuery === '' && searchedMode === '' && this.archivedFilter === 'both') {
+              this.reposTotalCount = count;
             }
-            Vue.set(self.counts, `${self.reposFilter}:${self.archivedFilter}:${self.privateFilter}`, count);
-            self.finalPage = Math.floor(count / self.searchLimit) + 1;
-            self.updateHistory();
+            Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, count);
+            this.finalPage = Math.floor(count / this.searchLimit) + 1;
+            this.updateHistory();
           }
         }).always(() => {
-          if (searchedURL === self.searchURL) {
-            self.isLoading = false;
+          if (searchedURL === this.searchURL) {
+            this.isLoading = false;
           }
         });
       },

web_src/less/_base.less

@@ -38,12 +38,12 @@
   --color-secondary-dark-5: #818181;
   --color-secondary-dark-6: #717171;
   --color-secondary-dark-7: #626262;
-  --color-secondary-dark-7: #525252;
-  --color-secondary-dark-8: #434343;
-  --color-secondary-dark-8: #333333;
-  --color-secondary-dark-9: #242424;
-  --color-secondary-dark-10: #141414;
-  --color-secondary-dark-11: #040404;
+  --color-secondary-dark-8: #525252;
+  --color-secondary-dark-9: #434343;
+  --color-secondary-dark-10: #333333;
+  --color-secondary-dark-11: #242424;
+  --color-secondary-dark-12: #141414;
+  --color-secondary-dark-13: #040404;
   --color-secondary-light-1: #e5e5e5;
   --color-secondary-light-2: #ebebeb;
   --color-secondary-light-3: #f2f2f2;
@@ -103,10 +103,9 @@
   --color-menu: #ffffff;
   --color-card: #ffffff;
   --color-markdown-table-row: #00000008;
-  --color-markdown-code-block: #00000008;
+  --color-markdown-code-block: #00000010;
   --color-button: #ffffff;
   --color-code-bg: #ffffff;
-  --color-markdown-code-block: #00000010;
   --color-secondary-bg: #f4f4f4;
   --color-expand-button: #d8efff;
   /* backgrounds */

web_src/less/_tribute.less

@@ -1,4 +1,4 @@
-@import "~tributejs/dist/tribute.css";
+@import "tributejs/dist/tribute.css";
 
 .tribute-container {
   box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);

web_src/less/index.less

@@ -1,4 +1,4 @@
-@import "~font-awesome/css/font-awesome.css";
+@import "font-awesome/css/font-awesome.css";
 
 @import "./variables.less";
 @import "./shared/issuelist.less";

web_src/less/themes/theme-arc-green.less

@@ -33,12 +33,12 @@
   --color-secondary-dark-5: #8c93a4;
   --color-secondary-dark-6: #9aa0af;
   --color-secondary-dark-7: #a8adba;
-  --color-secondary-dark-7: #b6bac5;
-  --color-secondary-dark-8: #c4c7d0;
-  --color-secondary-dark-8: #d2d4db;
-  --color-secondary-dark-9: #dfe1e6;
-  --color-secondary-dark-10: #edeef1;
-  --color-secondary-dark-11: #fbfbfc;
+  --color-secondary-dark-8: #b6bac5;
+  --color-secondary-dark-9: #c4c7d0;
+  --color-secondary-dark-10: #d2d4db;
+  --color-secondary-dark-11: #dfe1e6;
+  --color-secondary-dark-12: #edeef1;
+  --color-secondary-dark-13: #fbfbfc;
   --color-secondary-light-1: #373b46;
   --color-secondary-light-2: #292c34;
   --color-secondary-light-3: #1c1e23;