refactor: Migrate WarningsViewModel to React

src/i18n/en-US.json

@@ -824,7 +824,6 @@
   "modalConversationRemoveMessage": "{{user}} won’t be able to send or receive messages in this conversation.",
   "modalConversationRemoveServicesMessage": "Current services will be removed from the conversation. New services will not be allowed.",
   "modalConversationRevokeLinkAction": "Revoke link",
-  "modalConversationRevokeLinkCloseBtn": "Close window, Revoke the link?",
   "modalConversationRevokeLinkHeadline": "Revoke the link?",
   "modalConversationRevokeLinkMessage": "New guests will not be able to join with this link. Current guests will still have access.",
   "modalConversationTooManyMembersHeadline": "The group is full",

src/page/template/wire-main.htm

@@ -64,7 +64,6 @@ <h1 class="visually-hidden" data-bind="text: t('accessibility.headings.historyEx
         #include('panel/message-details.htm')
       </div>
     </div>
-    #include('modals.htm')
     <!-- /ko -->
     <app-lock-container params="clientRepository: $root.content.repositories.client"></app-lock-container>
     <warnings-container></warnings-container>

src/script/calling/CallingRepository.test.ts

@@ -21,7 +21,6 @@ import 'jsdom-worker';
 
 import ko, {Subscription} from 'knockout';
 import {amplify} from 'amplify';
-import {WebAppEvents} from '@wireapp/webapp-events';
 import {CONV_TYPE, CALL_TYPE, STATE as CALL_STATE, REASON, Wcall} from '@wireapp/avs';
 import {CallingRepository} from 'src/script/calling/CallingRepository';
 import {EventRepository} from 'src/script/event/EventRepository';
@@ -31,7 +30,6 @@ import {CallState} from 'src/script/calling/CallState';
 import {User} from 'src/script/entity/User';
 import {MediaType} from 'src/script/media/MediaType';
 import {Conversation} from 'src/script/entity/Conversation';
-import {ModalsViewModel} from 'src/script/view_model/ModalsViewModel';
 import {serverTimeHandler} from 'src/script/time/serverTimeHandler';
 import {createRandomUuid} from 'Util/util';
 import {TestFactory} from 'test/helper/TestFactory';
@@ -40,6 +38,7 @@ import {CALL_MESSAGE_TYPE} from './enum/CallMessageType';
 import {CALL} from '../event/Client';
 import {UserRepository} from '../user/UserRepository';
 import {LEAVE_CALL_REASON} from './enum/LeaveCallReason';
+import {usePrimaryModalState} from '../components/Modals/PrimaryModal';
 
 const createSelfParticipant = () => {
   const selfUser = new User();
@@ -103,12 +102,7 @@ describe('CallingRepository', () => {
       spyOn(wCall, 'start');
       callingRepository.startCall(conversationId, conversationType, callType).catch(done);
       setTimeout(() => {
-        expect(amplify.publish).toHaveBeenCalledWith(
-          WebAppEvents.WARNING.MODAL,
-          ModalsViewModel.TYPE.CONFIRM,
-          jasmine.any(Object),
-        );
-
+        expect(usePrimaryModalState.getState().currentModalId).not.toBeNull();
         expect(wCall.start).not.toHaveBeenCalled();
         done();
       }, 10);

src/script/calling/CallingRepository.ts

@@ -58,7 +58,6 @@ import {flatten} from 'Util/ArrayUtil';
 import {roundLogarithmic} from 'Util/NumberUtil';
 
 import {Config} from '../Config';
-import {ModalsViewModel} from '../view_model/ModalsViewModel';
 import {CALL_MESSAGE_TYPE} from './enum/CallMessageType';
 import {CallingEvent, EventBuilder} from '../conversation/EventBuilder';
 import {EventRepository} from '../event/EventRepository';
@@ -85,6 +84,7 @@ import Warnings from '../view_model/WarningsContainer';
 import {PayloadBundleState} from '@wireapp/core/src/main/conversation';
 import {Core} from '../service/CoreSingleton';
 import {LEAVE_CALL_REASON} from './enum/LeaveCallReason';
+import PrimaryModal from '../components/Modals/PrimaryModal';
 
 interface MediaStreamQuery {
   audio?: boolean;
@@ -498,12 +498,11 @@ export class CallingRepository {
 
       if (participant) {
         this.leaveCall(activeCall.conversationId, LEAVE_CALL_REASON.USER_TURNED_UNVERIFIED);
-        amplify.publish(
-          WebAppEvents.WARNING.MODAL,
-          ModalsViewModel.TYPE.ACKNOWLEDGE,
+        PrimaryModal.show(
+          PrimaryModal.type.ACKNOWLEDGE,
           {
-            action: {
-              title: t('callDegradationAction'),
+            primaryAction: {
+              text: t('callDegradationAction'),
             },
             text: {
               message: t('callDegradationDescription', participant.user.name()),
@@ -531,9 +530,8 @@ export class CallingRepository {
 
   private warnOutdatedClient(conversationId: QualifiedId) {
     const brandName = Config.getConfig().BRAND_NAME;
-    amplify.publish(
-      WebAppEvents.WARNING.MODAL,
-      ModalsViewModel.TYPE.ACKNOWLEDGE,
+    PrimaryModal.show(
+      PrimaryModal.type.ACKNOWLEDGE,
       {
         close: () => this.acceptVersionWarning(conversationId),
         text: {
@@ -1745,7 +1743,7 @@ export class CallingRepository {
     }
 
     return new Promise((resolve, reject) => {
-      amplify.publish(WebAppEvents.WARNING.MODAL, ModalsViewModel.TYPE.CONFIRM, {
+      PrimaryModal.show(PrimaryModal.type.CONFIRM, {
         primaryAction: {
           action: () => {
             if (activeCall.state() === CALL_STATE.INCOMING) {
@@ -1784,7 +1782,7 @@ export class CallingRepository {
         title: t('modalNoAudioInputTitle'),
       },
     };
-    amplify.publish(WebAppEvents.WARNING.MODAL, ModalsViewModel.TYPE.CONFIRM, modalOptions);
+    PrimaryModal.show(PrimaryModal.type.CONFIRM, modalOptions);
   }
 
   private showNoCameraModal(): void {
@@ -1800,7 +1798,7 @@ export class CallingRepository {
         title: t('modalNoCameraTitle'),
       },
     };
-    amplify.publish(WebAppEvents.WARNING.MODAL, ModalsViewModel.TYPE.ACKNOWLEDGE, modalOptions);
+    PrimaryModal.show(PrimaryModal.type.ACKNOWLEDGE, modalOptions);
   }
 
   //##############################################################################

src/script/client/ClientRepository.ts

@@ -32,7 +32,6 @@ import {Logger, getLogger} from 'Util/Logger';
 import {loadValue} from 'Util/StorageUtil';
 import {SIGN_OUT_REASON} from '../auth/SignOutReason';
 import {StorageKey} from '../storage/StorageKey';
-import {ModalsViewModel} from '../view_model/ModalsViewModel';
 import {ClientEntity} from './ClientEntity';
 import {ClientMapper} from './ClientMapper';
 import type {ClientService} from './ClientService';
@@ -43,6 +42,7 @@ import {ClientRecord, StorageRepository} from '../storage';
 import {ClientState} from './ClientState';
 import {matchQualifiedIds} from 'Util/QualifiedId';
 import {Core} from '../service/CoreSingleton';
+import PrimaryModal from '../components/Modals/PrimaryModal';
 
 export type UserClientEntityMap = {[userId: string]: ClientEntity[]};
 export type QualifiedUserClientEntityMap = {[domain: string]: UserClientEntityMap};
@@ -308,7 +308,7 @@ export class ClientRepository {
         await this.deleteLocalTemporaryClient();
         amplify.publish(WebAppEvents.LIFECYCLE.SIGN_OUT, SIGN_OUT_REASON.USER_REQUESTED, true);
       } else {
-        amplify.publish(WebAppEvents.WARNING.MODAL, ModalsViewModel.TYPE.OPTION, {
+        PrimaryModal.show(PrimaryModal.type.OPTION, {
           preventClose: true,
           primaryAction: {
             action: (clearData: boolean) => {
@@ -568,9 +568,8 @@ export class ClientRepository {
     const localClients = await this.getClientsForSelf();
     const removedClient = localClients.find(client => client.id === clientId);
     if (removedClient?.isLegalHold()) {
-      amplify.publish(
-        WebAppEvents.WARNING.MODAL,
-        ModalsViewModel.TYPE.ACKNOWLEDGE,
+      PrimaryModal.show(
+        PrimaryModal.type.ACKNOWLEDGE,
         {
           text: {
             message: t('modalLegalHoldDeactivatedMessage'),

src/script/components/InputBar/index.tsx

@@ -66,7 +66,6 @@ import {MessageRepository, OutgoingQuote} from '../../conversation/MessageReposi
 import {StorageRepository} from '../../storage';
 import {MentionEntity} from '../../message/MentionEntity';
 import {Config} from '../../Config';
-import {ModalsViewModel} from '../../view_model/ModalsViewModel';
 import {ConversationError} from '../../error/ConversationError';
 import {MessageHasher} from '../../message/MessageHasher';
 import {QuoteEntity} from '../../message/QuoteEntity';
@@ -81,10 +80,12 @@ import useScrollSync from '../../hooks/useScrollSync';
 import useResizeTarget from '../../hooks/useResizeTarget';
 import useDropFiles from '../../hooks/useDropFiles';
 import useTextAreaFocus from '../../hooks/useTextAreaFocus';
+
 import {StyledApp, THEME_ID, useMatchMedia} from '@wireapp/react-ui-kit';
 import ControlButtons from '../../page/message-list/InputBarControls/ControlButtons';
 import Icon from 'Components/Icon';
 import GiphyButton from '../../page/message-list/InputBarControls/GiphyButton';
+import PrimaryModal from '../Modals/PrimaryModal';
 
 const CONFIG = {
   ...Config.getConfig(),
@@ -94,7 +95,7 @@ const CONFIG = {
 const showWarningModal = (title: string, message: string): void => {
   // Timeout needed for display warning modal - we need to update modal
   setTimeout(() => {
-    amplify.publish(WebAppEvents.WARNING.MODAL, ModalsViewModel.TYPE.ACKNOWLEDGE, {
+    PrimaryModal.show(PrimaryModal.type.ACKNOWLEDGE, {
       text: {message, title},
     });
   }, 0);

src/script/components/Modals/PrimaryModal/PrimaryModal.test.tsx

@@ -0,0 +1,81 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {render, fireEvent, act} from '@testing-library/react';
+import PrimaryModal from '.';
+import {PrimaryModalComponent} from './PrimaryModal';
+
+describe('PrimaryModal', () => {
+  it('does not render when no item is in the queue', async () => {
+    const {getByTestId} = render(<PrimaryModalComponent />);
+    const PrimaryModalWrapper = getByTestId('primary-modals-container');
+    expect(PrimaryModalWrapper.children[0].getAttribute('style')).toBe('display: none;');
+  });
+
+  it('correctly calls action callback', async () => {
+    const {getByTestId} = render(<PrimaryModalComponent />);
+    const actionCallback = jest.fn();
+    act(() => {
+      PrimaryModal.show(PrimaryModal.type.CONFIRM, {
+        primaryAction: {
+          action: actionCallback,
+          text: 'test-text',
+        },
+        secondaryAction: {
+          action: () => {},
+          text: 'secondary-text',
+        },
+        text: {
+          message: 'test-message',
+          title: 'test-title',
+        },
+      });
+    });
+
+    const actionButton = getByTestId('do-action');
+    fireEvent.click(actionButton);
+
+    expect(actionCallback).toHaveBeenCalledTimes(1);
+  });
+  it('correctly calls secondary action callback', async () => {
+    const {getByTestId} = render(<PrimaryModalComponent />);
+    const secondaryActionCallback = jest.fn();
+    act(() => {
+      PrimaryModal.show(PrimaryModal.type.CONFIRM, {
+        primaryAction: {
+          action: () => {},
+          text: 'test-text',
+        },
+        secondaryAction: {
+          action: secondaryActionCallback,
+          text: 'secondary-text',
+        },
+        text: {
+          message: 'test-message',
+          title: 'test-title',
+        },
+      });
+    });
+
+    const secondaryActionButton = getByTestId('do-secondary');
+    fireEvent.click(secondaryActionButton);
+
+    expect(secondaryActionCallback).toHaveBeenCalledTimes(1);
+  });
+});