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>

2 files changed, 55 insertions, 63 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('/');