Update JS dependencies and webpack (#14118)

* Update JS dependencies

- Update all JS dependencies
- Adapt webpack config for version 5
- Update to Less 4.0, adapting usage of removed mixin syntax
- Enable new ESLint rules and fix discovered issues

* update license-webpack-plugin to fix missing licenses

* update license-webpack-plugin once more to get webpack into the license output

* switch to license-checker-webpack-plugin again for performance

* update deps again

Co-authored-by: Lauris BH <lauris@nix.lv>

5 files changed, 64 insertions, 72 deletions

diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index b0cc1cda44..a0793d2286 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -43,53 +43,51 @@ export async function initNotificationCount() {
     return;
   }
 
-  if (NotificationSettings.EventSourceUpdateTime > 0 && !!window.EventSource) {
+  if (NotificationSettings.EventSourceUpdateTime > 0 && !!window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    if (window.SharedWorker) {
-      const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
-      worker.addEventListener('error', (event) => {
+    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
+    worker.addEventListener('error', (event) => {
+      console.error(event);
+    });
+    worker.port.onmessageerror = () => {
+      console.error('Unable to deserialize message');
+    };
+    worker.port.postMessage({
+      type: 'start',
+      url: `${window.location.origin}${AppSubUrl}/user/events`,
+    });
+    worker.port.addEventListener('message', (event) => {
+      if (!event.data || !event.data.type) {
         console.error(event);
-      });
-      worker.port.onmessageerror = () => {
-        console.error('Unable to deserialize message');
-      };
-      worker.port.postMessage({
-        type: 'start',
-        url: `${window.location.origin}${AppSubUrl}/user/events`,
-      });
-      worker.port.addEventListener('message', (event) => {
-        if (!event.data || !event.data.type) {
-          console.error(event);
+        return;
+      }
+      if (event.data.type === 'notification-count') {
+        receiveUpdateCount(event.data);
+      } else if (event.data.type === 'error') {
+        console.error(event.data);
+      } else if (event.data.type === 'logout') {
+        if (event.data !== 'here') {
           return;
         }
-        if (event.data.type === 'notification-count') {
-          receiveUpdateCount(event.data);
-        } else if (event.data.type === 'error') {
-          console.error(event.data);
-        } else if (event.data.type === 'logout') {
-          if (event.data !== 'here') {
-            return;
-          }
-          worker.port.postMessage({
-            type: 'close',
-          });
-          worker.port.close();
-          window.location.href = AppSubUrl;
-        }
-      });
-      worker.port.addEventListener('error', (e) => {
-        console.error(e);
-      });
-      worker.port.start();
-      window.addEventListener('beforeunload', () => {
         worker.port.postMessage({
           type: 'close',
         });
         worker.port.close();
+        window.location.href = AppSubUrl;
+      }
+    });
+    worker.port.addEventListener('error', (e) => {
+      console.error(e);
+    });
+    worker.port.start();
+    window.addEventListener('beforeunload', () => {
+      worker.port.postMessage({
+        type: 'close',
       });
+      worker.port.close();
+    });
 
-      return;
-    }
+    return;
   }
 
   if (NotificationSettings.MinTimeout <= 0) {
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 471adfa425..c3a70d756f 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -204,24 +204,22 @@ function initRepoStatusChecker() {
         _csrf: csrf,
       },
       complete(xhr) {
-        if (xhr.status === 200) {
-          if (xhr.responseJSON) {
-            if (xhr.responseJSON.status === 4) {
-              window.location.reload();
-              return;
-            } else if (xhr.responseJSON.status === 3) {
-              $('#repo_migrating_progress').hide();
-              $('#repo_migrating').hide();
-              $('#repo_migrating_failed').show();
-              $('#repo_migrating_failed_image').show();
-              $('#repo_migrating_failed_error').text(xhr.responseJSON.err);
-              return;
-            }
-            setTimeout(() => {
-              initRepoStatusChecker();
-            }, 2000);
+        if (xhr.status === 200 && xhr.responseJSON) {
+          if (xhr.responseJSON.status === 4) {
+            window.location.reload();
+            return;
+          } else if (xhr.responseJSON.status === 3) {
+            $('#repo_migrating_progress').hide();
+            $('#repo_migrating').hide();
+            $('#repo_migrating_failed').show();
+            $('#repo_migrating_failed_image').show();
+            $('#repo_migrating_failed_error').text(xhr.responseJSON.err);
             return;
           }
+          setTimeout(() => {
+            initRepoStatusChecker();
+          }, 2000);
+          return;
         }
         $('#repo_migrating_progress').hide();
         $('#repo_migrating').hide();
@@ -1625,16 +1623,12 @@ async function initEditor() {
     let value;
     let parts;
 
-    if (e.keyCode === 8) {
-      if ($(this).getCursorPosition() === 0) {
-        if ($section.length > 0) {
-          value = $section.last().find('a').text();
-          $(this).val(value + $(this).val());
-          $(this)[0].setSelectionRange(value.length, value.length);
-          $section.last().remove();
-          $divider.last().remove();
-        }
-      }
+    if (e.keyCode === 8 && $(this).getCursorPosition() === 0 && $section.length > 0) {
+      value = $section.last().find('a').text();
+      $(this).val(value + $(this).val());
+      $(this)[0].setSelectionRange(value.length, value.length);
+      $section.last().remove();
+      $divider.last().remove();
     }
     if (e.keyCode === 191) {
       parts = $(this).val().split('/');
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 03f5c83bca..76c1a06990 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -236,7 +236,7 @@ textarea:focus,
 .user.signin,
 .user.signup {
   @input-padding: 200px;
-  #create-page-form;
+  #create-page-form();
 
   form {
     width: 700px !important;
@@ -273,7 +273,7 @@ textarea:focus,
   &.new.repo,
   &.new.migrate,
   &.new.fork {
-    #create-page-form;
+    #create-page-form();
 
     form {
       .dropdown .text {
diff --git a/web_src/less/_organization.less b/web_src/less/_organization.less
index 7002a158f4..1a458da61d 100644
--- a/web_src/less/_organization.less
+++ b/web_src/less/_organization.less
@@ -17,7 +17,7 @@
   }
 
   &.new.org {
-    #create-page-form;
+    #create-page-form();
 
     form {
       .header {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 5f9fc954c1..f0764067f2 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -484,7 +484,7 @@
         border: 1px solid var(--color-secondary);
         background: var(--color-box-body);
         border-radius: 3px;
-        #avatar-arrow;
+        #avatar-arrow();
 
         &::after {
           border-right-color: var(--color-box-body);
@@ -555,7 +555,7 @@
 
       .content {
         margin-left: 4em;
-        #avatar-arrow;
+        #avatar-arrow();
 
         &::after {
           border-right-color: var(--color-box-body);
@@ -979,7 +979,7 @@
             }
 
             &.no-header {
-              #avatar-arrow;
+              #avatar-arrow();
 
               &::after {
                 border-right-color: var(--color-box-body);
@@ -1098,7 +1098,7 @@
       }
 
       .form {
-        #avatar-arrow;
+        #avatar-arrow();
 
         &::after {
           border-right-color: var(--color-box-body);
@@ -1195,7 +1195,7 @@
 
     .comment.form {
       .content {
-        #avatar-arrow;
+        #avatar-arrow();
 
         &::after {
           border-right-color: var(--color-box-body);
@@ -2458,7 +2458,7 @@
 }
 
 .comment-header {
-  #avatar-arrow;
+  #avatar-arrow();
   border: none !important;
   background: var(--color-box-header);
   border-bottom: 1px solid var(--color-secondary) !important;