Move the safety number viewer into modal

ts/components/GlobalModalContainer.tsx

@@ -10,6 +10,9 @@ type PropsType = {
   // ProfileEditor
   isProfileEditorVisible: boolean;
   renderProfileEditor: () => JSX.Element;
+  // SafetyNumberModal
+  safetyNumberModalContactId?: string;
+  renderSafetyNumber: () => JSX.Element;
 };
 
 export const GlobalModalContainer = ({
@@ -19,7 +22,14 @@ export const GlobalModalContainer = ({
   // ProfileEditor
   isProfileEditorVisible,
   renderProfileEditor,
+  // SafetyNumberModal
+  safetyNumberModalContactId,
+  renderSafetyNumber,
 }: PropsType): JSX.Element | null => {
+  if (safetyNumberModalContactId) {
+    return renderSafetyNumber();
+  }
+
   if (contactModalState) {
     return renderContactModal();
   }

ts/components/SafetyNumberModal.tsx

@@ -0,0 +1,31 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { Modal } from './Modal';
+import {
+  SafetyNumberViewer,
+  PropsType as SafetyNumberViewerPropsType,
+} from './SafetyNumberViewer';
+
+type PropsType = {
+  toggleSafetyNumberModal: () => unknown;
+} & SafetyNumberViewerPropsType;
+
+export const SafetyNumberModal = ({
+  i18n,
+  toggleSafetyNumberModal,
+  ...safetyNumberViewerProps
+}: PropsType): JSX.Element | null => {
+  return (
+    <Modal
+      hasXButton
+      i18n={i18n}
+      moduleClassName="module-SafetyNumberViewer__modal"
+      onClose={() => toggleSafetyNumberModal()}
+      title={i18n('SafetyNumberModal__title')}
+    >
+      <SafetyNumberViewer i18n={i18n} {...safetyNumberViewerProps} />
+    </Modal>
+  );
+};

ts/components/SafetyNumberViewer.stories.tsx

@@ -50,12 +50,6 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   generateSafetyNumber: action('generate-safety-number'),
   i18n,
   safetyNumber: text('safetyNumber', overrideProps.safetyNumber || 'XXX'),
-  safetyNumberChanged: boolean(
-    'safetyNumberChanged',
-    overrideProps.safetyNumberChanged !== undefined
-      ? overrideProps.safetyNumberChanged
-      : false
-  ),
   toggleVerified: action('toggle-verified'),
   verificationDisabled: boolean(
     'verificationDisabled',
@@ -95,16 +89,6 @@ story.add('Verification Disabled', () => {
   );
 });
 
-story.add('Safety Number Changed', () => {
-  return (
-    <SafetyNumberViewer
-      {...createProps({
-        safetyNumberChanged: true,
-      })}
-    />
-  );
-});
-
 story.add('Safety Number (dialog close)', () => {
   return (
     <SafetyNumberViewer

ts/components/SafetyNumberViewer.tsx

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import { Button, ButtonVariant } from './Button';
 import { ConversationType } from '../state/ducks/conversations';
-import { LocalizerType } from '../types/Util';
 import { Intl } from './Intl';
+import { LocalizerType } from '../types/Util';
 
 export type PropsType = {
   contact?: ConversationType;
@@ -12,7 +13,6 @@ export type PropsType = {
   i18n: LocalizerType;
   onClose?: () => void;
   safetyNumber: string;
-  safetyNumberChanged?: boolean;
   toggleVerified: (contact: ConversationType) => void;
   verificationDisabled: boolean;
 };
@@ -23,7 +23,6 @@ export const SafetyNumberViewer = ({
   i18n,
   onClose,
   safetyNumber,
-  safetyNumberChanged,
   toggleVerified,
   verificationDisabled,
 }: PropsType): JSX.Element | null => {
@@ -42,9 +41,7 @@ export const SafetyNumberViewer = ({
   if (!contact.phoneNumber) {
     return (
       <div className="module-SafetyNumberViewer">
-        <div className="module-SafetyNumberViewer__verify-container">
-          {i18n('cannotGenerateSafetyNumber')}
-        </div>
+        {i18n('cannotGenerateSafetyNumber')}
       </div>
     );
   }
@@ -59,9 +56,6 @@ export const SafetyNumberViewer = ({
 
   const { isVerified } = contact;
   const verifiedStatusKey = isVerified ? 'isVerified' : 'isNotVerified';
-  const safetyNumberChangedKey = safetyNumberChanged
-    ? 'changedRightAfterVerify'
-    : 'yourSafetyNumberWith';
   const verifyButtonText = isVerified ? i18n('unverify') : i18n('verify');
 
   return (
@@ -73,16 +67,6 @@ export const SafetyNumberViewer = ({
           </button>
         </div>
       )}
-      <div className="module-SafetyNumberViewer__verification-label">
-        <Intl
-          i18n={i18n}
-          id={safetyNumberChangedKey}
-          components={{
-            name1: boldName,
-            name2: boldName,
-          }}
-        />
-      </div>
       <div className="module-SafetyNumberViewer__number">
         {safetyNumber || getPlaceholder()}
       </div>
@@ -95,18 +79,16 @@ export const SafetyNumberViewer = ({
         )}
         <Intl i18n={i18n} id={verifiedStatusKey} components={[boldName]} />
       </div>
-      <div className="module-SafetyNumberViewer__verify-container">
-        <button
-          className="module-SafetyNumberViewer__button--verify"
+      <div className="module-SafetyNumberViewer__button">
+        <Button
           disabled={verificationDisabled}
           onClick={() => {
             toggleVerified(contact);
           }}
-          tabIndex={0}
-          type="button"
+          variant={ButtonVariant.Secondary}
         >
           {verifyButtonText}
-        </button>
+        </Button>
       </div>
     </div>
   );

ts/state/ducks/globalModals.ts

@@ -7,6 +7,7 @@ export type GlobalModalsStateType = {
   readonly contactModalState?: ContactModalStateType;
   readonly isProfileEditorVisible: boolean;
   readonly profileEditorHasError: boolean;
+  readonly safetyNumberModalContactId?: string;
 };
 
 // Actions
@@ -16,6 +17,7 @@ const SHOW_CONTACT_MODAL = 'globalModals/SHOW_CONTACT_MODAL';
 const TOGGLE_PROFILE_EDITOR = 'globalModals/TOGGLE_PROFILE_EDITOR';
 export const TOGGLE_PROFILE_EDITOR_ERROR =
   'globalModals/TOGGLE_PROFILE_EDITOR_ERROR';
+const TOGGLE_SAFETY_NUMBER_MODAL = 'globalModals/TOGGLE_SAFETY_NUMBER_MODAL';
 
 export type ContactModalStateType = {
   contactId: string;
@@ -39,11 +41,17 @@ export type ToggleProfileEditorErrorActionType = {
   type: typeof TOGGLE_PROFILE_EDITOR_ERROR;
 };
 
+type ToggleSafetyNumberModalActionType = {
+  type: typeof TOGGLE_SAFETY_NUMBER_MODAL;
+  payload: string | undefined;
+};
+
 export type GlobalModalsActionType =
   | HideContactModalActionType
   | ShowContactModalActionType
   | ToggleProfileEditorActionType
-  | ToggleProfileEditorErrorActionType;
+  | ToggleProfileEditorErrorActionType
+  | ToggleSafetyNumberModalActionType;
 
 // Action Creators
 
@@ -52,6 +60,7 @@ export const actions = {
   showContactModal,
   toggleProfileEditor,
   toggleProfileEditorHasError,
+  toggleSafetyNumberModal,
 };
 
 function hideContactModal(): HideContactModalActionType {
@@ -81,6 +90,15 @@ function toggleProfileEditorHasError(): ToggleProfileEditorErrorActionType {
   return { type: TOGGLE_PROFILE_EDITOR_ERROR };
 }
 
+function toggleSafetyNumberModal(
+  safetyNumberModalContactId?: string
+): ToggleSafetyNumberModalActionType {
+  return {
+    type: TOGGLE_SAFETY_NUMBER_MODAL,
+    payload: safetyNumberModalContactId,
+  };
+}
+
 // Reducer
 
 export function getEmptyState(): GlobalModalsStateType {
@@ -122,5 +140,12 @@ export function reducer(
     };
   }
 
+  if (action.type === TOGGLE_SAFETY_NUMBER_MODAL) {
+    return {
+      ...state,
+      safetyNumberModalContactId: action.payload,
+    };
+  }
+
   return state;
 }

ts/state/smart/GlobalModalContainer.tsx

@@ -8,6 +8,7 @@ import { GlobalModalContainer } from '../../components/GlobalModalContainer';
 import { StateType } from '../reducer';
 import { SmartProfileEditorModal } from './ProfileEditorModal';
 import { SmartContactModal } from './ContactModal';
+import { SmartSafetyNumberModal } from './SafetyNumberModal';
 
 const FilteredSmartProfileEditorModal = SmartProfileEditorModal;
 
@@ -24,6 +25,11 @@ const mapStateToProps = (state: StateType) => {
     ...state.globalModals,
     renderContactModal,
     renderProfileEditor,
+    renderSafetyNumber: () => (
+      <SmartSafetyNumberModal
+        contactID={String(state.globalModals.safetyNumberModalContactId)}
+      />
+    ),
   };
 };
 

ts/state/smart/SafetyNumberModal.tsx

@@ -0,0 +1,27 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { connect } from 'react-redux';
+import { mapDispatchToProps } from '../actions';
+import { SafetyNumberModal } from '../../components/SafetyNumberModal';
+import { StateType } from '../reducer';
+import { getContactSafetyNumber } from '../selectors/safetyNumber';
+import { getConversationSelector } from '../selectors/conversations';
+import { getIntl } from '../selectors/user';
+
+export type Props = {
+  contactID: string;
+};
+
+const mapStateToProps = (state: StateType, props: Props) => {
+  return {
+    ...props,
+    ...getContactSafetyNumber(state, props),
+    contact: getConversationSelector(state)(props.contactID),
+    i18n: getIntl(state),
+  };
+};
+
+const smart = connect(mapStateToProps, mapDispatchToProps);
+
+export const SmartSafetyNumberModal = smart(SafetyNumberModal);

ts/util/lint/exceptions.json

@@ -106,38 +106,6 @@
     "updated": "2018-09-18T19:19:27.699Z",
     "reasonDetail": "Very limited in what HTML can be injected - dark/light options specify colors for the light/dark parts of QRCode"
   },
-  {
-    "rule": "jQuery-$(",
-    "path": "js/views/key_verification_view.js",
-    "line": "      this.$('.key-verification-wrapper').append(this.view.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-02-26T18:44:56.450Z",
-    "reasonDetail": "Adding sub-view to DOM"
-  },
-  {
-    "rule": "jQuery-$(",
-    "path": "js/views/key_verification_view.js",
-    "line": "    template: () => $('#key-verification').html(),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-02-26T18:44:56.450Z",
-    "reasonDetail": "Static selector, read-only access"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "js/views/key_verification_view.js",
-    "line": "      this.$('.key-verification-wrapper').append(this.view.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-02-26T18:44:56.450Z",
-    "reasonDetail": "Adding sub-view to DOM"
-  },
-  {
-    "rule": "jQuery-html(",
-    "path": "js/views/key_verification_view.js",
-    "line": "    template: () => $('#key-verification').html(),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-02-26T18:44:56.450Z",
-    "reasonDetail": "Static selector, read-only access"
-  },
   {
     "rule": "jQuery-wrap(",
     "path": "node_modules/@chanzuckerberg/axe-storybook-testing/node_modules/ansi-styles/index.js",
@@ -14101,4 +14069,4 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-09-17T21:02:59.414Z"
   }
-]
+]

ts/views/conversation_view.ts

@@ -2125,10 +2125,9 @@ export class ConversationView extends window.Backbone.View<ConversationModel> {
       conversation = window.ConversationController.get(id);
     }
     if (conversation) {
-      const view = new Whisper.KeyVerificationPanelView({
-        model: conversation,
-      });
-      this.listenBack(view);
+      window.reduxActions.globalModals.toggleSafetyNumberModal(
+        conversation.get('id')
+      );
     }
   }