Skip to content

Commit

Permalink
refactor: Migrate WarningsViewModel to React (#13748)
Browse files Browse the repository at this point in the history
* refactor: Migrate WarningsViewModel to React

* error message from zustand

* prepare object and check by content?.currentType

* onBgClick

* have duplicated ids

* secondary actions

* filter null actions

* simplify

* map

* alreadyOpen

* change name to primary modal

* fix tests

* first step to delete amplify

* step 2 of deleting amplify

* move to index

* fix import errors

* default values

* use react testing library
  • Loading branch information
thisisamir98 committed Oct 3, 2022
1 parent 067c432 commit 2e7cfcf
Show file tree
Hide file tree
Showing 42 changed files with 730 additions and 564 deletions.
1 change: 0 additions & 1 deletion src/i18n/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
58 changes: 0 additions & 58 deletions src/page/template/modals.htm

This file was deleted.

1 change: 0 additions & 1 deletion src/page/template/wire-main.htm
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 2 additions & 8 deletions src/script/calling/CallingRepository.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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);
Expand Down
22 changes: 10 additions & 12 deletions src/script/calling/CallingRepository.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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()),
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
}

//##############################################################################
Expand Down
9 changes: 4 additions & 5 deletions src/script/client/ClientRepository.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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};
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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'),
Expand Down
5 changes: 3 additions & 2 deletions src/script/components/InputBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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(),
Expand All @@ -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);
Expand Down
81 changes: 81 additions & 0 deletions src/script/components/Modals/PrimaryModal/PrimaryModal.test.tsx
Original file line number Diff line number Diff line change
@@ -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);
});
});
Loading

0 comments on commit 2e7cfcf

Please sign in to comment.