refactor: remove jquery from application

.eslintrc.json

@@ -13,9 +13,7 @@
     "plugin:import/typescript"
   ],
   "globals": {
-    "$": true,
     "amplify": true,
-    "jQuery": true,
     "ko": true,
     "sinon": true,
     "wire": true,

package.json

@@ -17,8 +17,6 @@
     "eslint-plugin-header": "3.1.1",
     "highlight.js": "11.6.0",
     "http-status-codes": "2.2.0",
-    "jquery": "3.6.1",
-    "jquery-mousewheel": "3.1.13",
     "js-cookie": "3.0.1",
     "jszip": "3.10.1",
     "keyboardjs": "2.7.0",
@@ -38,7 +36,6 @@
     "redux": "4.2.0",
     "redux-logdown": "1.0.4",
     "redux-thunk": "2.4.1",
-    "simplebar": "5.3.9",
     "speakingurl": "14.0.1",
     "switch-path": "1.2.0",
     "tsyringe": "4.7.0",
@@ -81,7 +78,6 @@
     "@types/react-redux": "7.1.24",
     "@types/react-transition-group": "4.4.5",
     "@types/redux-mock-store": "1.0.3",
-    "@types/simplebar": "5.3.3",
     "@types/sinon": "10.0.13",
     "@types/speakingurl": "13.0.3",
     "@types/uint32": "0.2.0",

setupTests.js

@@ -64,10 +64,6 @@ window.ko = ko;
 const {amplify} = require('amplify');
 window.amplify = amplify;
 
-const jQuery = require('jquery');
-window.jQuery = jQuery;
-window.$ = jQuery;
-
 window.wire = {
   env: {
     FEATURE: {},

src/demo/demo.html

@@ -145,27 +145,39 @@ <h1>Emoji range covered by 'emoji' fontface</h1>
     <div id="emojis"></div>
 
     <script>
-      $(() => {
+      (() => {
         // microbar
-        $('.microbar > li').click(event => {
-          const item = $(event.currentTarget);
-          $('body')
-            .removeClass()
-            .addClass('theme-' + item.text())
-            .addClass('main-accent-color-' + (item.index('li') + 1));
+        const microbar = document.querySelector('.microbar > li');
+        microbar?.addEventListener('click', event => {
+          const item = event.currentTarget;
+          const body = document.querySelector('body');
+          body.className = `theme-${item.text()} main-accent-color-${item.index('li') + 1}`;
         });
 
         let previousScroll = 0;
-        $(window).scroll(() => {
-          const scroll = $(window).scrollTop();
-          $('.microbar').toggleClass('microbar-hidden', scroll > previousScroll);
+
+        window.addEventListener('scroll', () => {
+          const scroll = window.scrollY;
+
+          if (scroll > previousScroll) {
+            microbar.classList.add('microbar-hidden');
+          } else {
+            microbar.classList.remove('microbar-hidden');
+          }
+
           previousScroll = scroll;
         });
 
         // user avatars animation
-        $('.avatar-image-loaded').click(function() {
-          const avatar = $(this).removeClass('avatar-loading-transition avatar-image-loaded');
-          window.setTimeout(() => avatar.addClass('avatar-loading-transition avatar-image-loaded'), 200);
+        const avatarLoaded = document.querySelector('.avatar-image-loaded');
+        avatarLoaded.addEventListener('click', () => {
+          avatarLoaded.classList.remove('avatar-loading-transition');
+          avatarLoaded.classList.remove('avatar-image-loaded');
+
+          setTimeout(() => {
+            avatarLoaded.classList.add('avatar-loading-transition');
+            avatarLoaded.classList.add('avatar-loading-loaded');
+          }, 200);
         });
 
         const generateEmojis = () => {
@@ -176,7 +188,7 @@ <h1>Emoji range covered by 'emoji' fontface</h1>
           const rules = styleSheets.map(sheet => Array.from(sheet.cssRules || sheet.rules || []));
           const allRules = [].concat(...rules);
           const emojiFontFace = allRules.find(
-            rule => rule.constructor.name === 'CSSFontFaceRule' && rule.style.fontFamily === 'emoji'
+            rule => rule.constructor.name === 'CSSFontFaceRule' && rule.style.fontFamily === 'emoji',
           );
           const range = emojiFontFace.style.unicodeRange || '';
           const values = range.replace(/u\+|\s/gi, '').split(',');
@@ -187,11 +199,11 @@ <h1>Emoji range covered by 'emoji' fontface</h1>
           const unicodeValues = [].concat(...ranges);
 
           return String.fromCodePoint(...unicodeValues);
-        }
+        };
 
         ko.applyBindings(() => {}, document.querySelector('#icons'));
         document.querySelector('#emojis').textContent = generateEmojis();
-      });
+      })();
     </script>
   </body>
 </html>

src/script/auth/configureEnvironment.ts

@@ -19,14 +19,10 @@
 
 import {amplify} from 'amplify';
 
-const jQuery = require('jquery');
-
 import '../event/Client';
 import '../message/MessageCategorization';
 import '../message/MessageCategory';
 import '../service/BackendEnvironment';
 import '../storage/StorageSchemata';
 
 window.amplify = amplify;
-window.jQuery = jQuery;
-window.$ = jQuery;

src/script/components/Conversation/Conversation.tsx

@@ -41,6 +41,7 @@ import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
 import {getLogger} from 'Util/Logger';
 import {safeMailOpen, safeWindowOpen} from 'Util/SanitizationUtil';
+import {incomingCssClass, removeAnimationsClass} from 'Util/util';
 
 import {ConversationState} from '../../conversation/ConversationState';
 import {Conversation as ConversationEntity} from '../../entity/Conversation';
@@ -361,7 +362,11 @@ const ConversationList: FC<ConversationListProps> = ({
   };
 
   return (
-    <div id="conversation" className={cx('conversation', {loading: !isConversationLoaded})}>
+    <div
+      id="conversation"
+      className={cx('conversation', {[incomingCssClass]: isConversationLoaded, loading: !isConversationLoaded})}
+      ref={removeAnimationsClass}
+    >
       {activeConversation && (
         <>
           <TitleBar

src/script/components/Modals/UserModal/UserModal.tsx

@@ -21,7 +21,6 @@ import React, {useState, useEffect} from 'react';
 
 import {QualifiedId} from '@wireapp/api-client/src/user';
 import cx from 'classnames';
-import {noop} from 'jquery';
 import {container} from 'tsyringe';
 
 import {Icon} from 'Components/Icon';
@@ -55,7 +54,7 @@ const brandName = Config.getConfig().BRAND_NAME;
 
 const UserModal: React.FC<UserModalProps> = ({
   userId,
-  onClose = noop,
+  onClose = () => undefined,
   userRepository,
   actionsViewModel,
   core = container.resolve(Core),

src/script/main/app.ts

@@ -666,9 +666,7 @@ class App {
   }
 
   private _registerSingleInstanceCleaning() {
-    $(window).on('beforeunload', () => {
-      this.singleInstanceHandler.deregisterInstance();
-    });
+    window.addEventListener('beforeunload', () => this.singleInstanceHandler.deregisterInstance());
   }
 
   /**
@@ -736,7 +734,7 @@ class App {
    * Subscribe to 'beforeunload' to stop calls and disconnect the WebSocket.
    */
   private _subscribeToUnloadEvents(): void {
-    $(window).on('unload', () => {
+    window.addEventListener('unload', () => {
       this.logger.info("'window.onunload' was triggered, so we will disconnect from the backend.");
       this.repository.event.disconnectWebSocket();
       this.repository.calling.destroy();
@@ -854,7 +852,7 @@ class App {
     }
 
     this.logger.warn('No internet access. Continuing when internet connectivity regained.');
-    $(window).on('online', () => _logoutOnBackend());
+    window.addEventListener('online', () => _logoutOnBackend());
   };
 
   /**
@@ -914,7 +912,7 @@ class App {
 // Setting up the App
 //##############################################################################
 
-$(async () => {
+(async () => {
   const config = Config.getConfig();
   const apiClient = container.resolve(APIClient);
   await apiClient.useVersion(config.SUPPORTED_API_VERSIONS, config.ENABLE_DEV_BACKEND_API);
@@ -938,6 +936,6 @@ $(async () => {
       app.initApp(shouldPersist ? ClientType.PERMANENT : ClientType.TEMPORARY);
     }
   }
-});
+})();
 
 export {App};

src/script/main/globals.ts

@@ -18,7 +18,6 @@
  */
 
 import {amplify} from 'amplify';
-import jQuery from 'jquery';
 import ko from 'knockout';
 
 import 'Components/icons';
@@ -29,13 +28,7 @@ import '../page/AppMain';
 import 'Util/LocalizerUtil';
 
 import '../localization/Localizer';
-import '../view_model/bindings/CommonBindings';
-import '../view_model/bindings/ConversationListBindings';
-import '../view_model/bindings/MessageListBindings';
-import '../view_model/bindings/VideoCallingBindings';
 import '../view_model/MainViewModel';
 
 window.amplify = amplify;
-// we need to publish jQuery on the window so that knockout can use it
-window.jQuery = jQuery;
 window.ko = ko;

src/script/page/MainContent/MainContent.tsx

@@ -19,6 +19,7 @@
 
 import {FC, ReactNode, useContext, useState} from 'react';
 
+import cx from 'classnames';
 import {CSSTransition, SwitchTransition} from 'react-transition-group';
 import {container} from 'tsyringe';
 
@@ -29,6 +30,7 @@ import {HistoryImport} from 'Components/HistoryImport';
 import {Icon} from 'Components/Icon';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
+import {incomingCssClass, removeAnimationsClass} from 'Util/util';
 
 import {Collection} from './panels/Collection';
 import {AboutPreferences} from './panels/preferences/AboutPreferences';
@@ -118,13 +120,21 @@ const MainContent: FC<MainContentProps> = ({
             )}
 
             {state === ContentState.PREFERENCES_ABOUT && (
-              <div id="preferences-about" className="preferences-page preferences-about">
+              <div
+                id="preferences-about"
+                className={cx('preferences-page preferences-about', incomingCssClass)}
+                ref={removeAnimationsClass}
+              >
                 <AboutPreferences />
               </div>
             )}
 
             {state === ContentState.PREFERENCES_ACCOUNT && (
-              <div id="preferences-account" className="preferences-page preferences-account">
+              <div
+                id="preferences-account"
+                className={cx('preferences-page preferences-account', incomingCssClass)}
+                ref={removeAnimationsClass}
+              >
                 <AccountPreferences
                   importFile={onFileUpload}
                   showDomain={isFederated}
@@ -138,7 +148,11 @@ const MainContent: FC<MainContentProps> = ({
             )}
 
             {state === ContentState.PREFERENCES_AV && (
-              <div id="preferences-av" className="preferences-page preferences-av">
+              <div
+                id="preferences-av"
+                className={cx('preferences-page preferences-av', incomingCssClass)}
+                ref={removeAnimationsClass}
+              >
                 <AVPreferences
                   callingRepository={repositories.calling}
                   mediaRepository={repositories.media}
@@ -148,21 +162,33 @@ const MainContent: FC<MainContentProps> = ({
             )}
 
             {state === ContentState.PREFERENCES_DEVICES && (
-              <DevicesPreferences
-                clientState={container.resolve(ClientState)}
-                conversationState={conversationState}
-                cryptographyRepository={repositories.cryptography}
-                removeDevice={contentViewModel.mainViewModel.actions.deleteClient}
-                resetSession={(userId, device, conversation) =>
-                  repositories.message.resetSession(userId, device.id, conversation)
-                }
-                userState={container.resolve(UserState)}
-                verifyDevice={(userId, device, verified) => repositories.client.verifyClient(userId, device, verified)}
-              />
+              <div
+                id="preferences-devices"
+                className={cx('preferences-page preferences-devices', incomingCssClass)}
+                ref={removeAnimationsClass}
+              >
+                <DevicesPreferences
+                  clientState={container.resolve(ClientState)}
+                  conversationState={conversationState}
+                  cryptographyRepository={repositories.cryptography}
+                  removeDevice={contentViewModel.mainViewModel.actions.deleteClient}
+                  resetSession={(userId, device, conversation) =>
+                    repositories.message.resetSession(userId, device.id, conversation)
+                  }
+                  userState={container.resolve(UserState)}
+                  verifyDevice={(userId, device, verified) =>
+                    repositories.client.verifyClient(userId, device, verified)
+                  }
+                />
+              </div>
             )}
 
             {state === ContentState.PREFERENCES_OPTIONS && (
-              <div id="preferences-options" className="preferences-page preferences-options">
+              <div
+                id="preferences-options"
+                className={cx('preferences-page preferences-options', incomingCssClass)}
+                ref={removeAnimationsClass}
+              >
                 <OptionPreferences propertiesRepository={repositories.properties} />
               </div>
             )}

src/script/ui/WindowHandler.ts

@@ -31,7 +31,7 @@ export class WindowHandler {
   }
 
   private _listenToUnhandledPromiseRejection(): void {
-    $(window).on('unhandledrejection', (event: any): void | false => {
+    window.addEventListener('unhandledrejection', (event: any): void | false => {
       const promiseRejectionEvent = event.originalEvent;
       const error = promiseRejectionEvent.reason || {};
 

src/script/util/DebugUtil.ts

@@ -77,8 +77,6 @@ export class DebugUtil {
   /** Used by QA test automation. */
   public readonly userRepository: UserRepository;
   /** Used by QA test automation. */
-  public readonly $: JQueryStatic;
-  /** Used by QA test automation. */
   public readonly Dexie: typeof Dexie;
 
   constructor(
@@ -89,7 +87,6 @@ export class DebugUtil {
     private readonly callState = container.resolve(CallState),
     private readonly core = container.resolve(Core),
   ) {
-    this.$ = $;
     this.Dexie = Dexie;
 
     const {calling, client, connection, conversation, cryptography, event, user, storage, message} = repositories;

src/script/util/util.ts

@@ -404,3 +404,15 @@ export const getSelectionPosition = (element: HTMLTextAreaElement, currentMentio
 // temporary hack that disables mls for old 'broken' desktop clients, see https://github.com/wireapp/wire-desktop/pull/6094
 export const supportsMLS = () =>
   Config.getConfig().FEATURE.ENABLE_MLS && (!Runtime.isDesktopApp() || window.systemCrypto);
+
+export const incomingCssClass = 'content-animation-incoming-horizontal-left';
+
+export const removeAnimationsClass = (element: HTMLElement | null) => {
+  if (element) {
+    element.addEventListener('animationend', () => {
+      if (element.classList.contains(incomingCssClass)) {
+        element.classList.remove(incomingCssClass);
+      }
+    });
+  }
+};