Add badges to safety number change dialog

ts/components/App.tsx

@@ -26,6 +26,7 @@ export const App = ({
   cancelMessagesPendingConversationVerification,
   conversationsStoppingMessageSendBecauseOfVerification,
   hasInitialLoadCompleted,
+  getPreferredBadge,
   i18n,
   isCustomizingPreferredReactions,
   numberOfMessagesPendingBecauseOfVerification,
@@ -52,6 +53,7 @@ export const App = ({
           conversationsStoppingMessageSendBecauseOfVerification
         }
         hasInitialLoadCompleted={hasInitialLoadCompleted}
+        getPreferredBadge={getPreferredBadge}
         i18n={i18n}
         isCustomizingPreferredReactions={isCustomizingPreferredReactions}
         numberOfMessagesPendingBecauseOfVerification={
@@ -61,6 +63,7 @@ export const App = ({
           renderCustomizingPreferredReactionsModal
         }
         renderSafetyNumber={renderSafetyNumber}
+        theme={theme}
         verifyConversationsStoppingMessageSend={
           verifyConversationsStoppingMessageSend
         }

ts/components/CallManager.stories.tsx

@@ -23,6 +23,7 @@ import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGr
 import { setupI18n } from '../util/setupI18n';
 import type { Props as SafetyNumberViewerProps } from '../state/smart/SafetyNumberViewer';
 import enMessages from '../../_locales/en/messages.json';
+import { ThemeType } from '../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -67,6 +68,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
   declineCall: action('decline-call'),
   getGroupCallVideoFrameSource: (_: string, demuxId: number) =>
     fakeGetGroupCallVideoFrameSource(demuxId),
+  getPreferredBadge: () => undefined,
   getPresentingSources: action('get-presenting-sources'),
   hangUp: action('hang-up'),
   i18n,
@@ -98,6 +100,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
   setOutgoingRing: action('set-outgoing-ring'),
   startCall: action('start-call'),
   stopRingtone: action('stop-ringtone'),
+  theme: ThemeType.light,
   toggleParticipants: action('toggle-participants'),
   togglePip: action('toggle-pip'),
   toggleScreenRecordingPermissionsDialog: action(

ts/components/CallManager.tsx

@@ -26,6 +26,7 @@ import {
   GroupCallJoinState,
 } from '../types/Calling';
 import type { ConversationType } from '../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type {
   AcceptCallType,
   CancelCallType,
@@ -39,7 +40,7 @@ import type {
   SetRendererCanvasType,
   StartCallType,
 } from '../state/ducks/calling';
-import type { LocalizerType } from '../types/Util';
+import type { LocalizerType, ThemeType } from '../types/Util';
 import type { UUIDStringType } from '../types/UUID';
 import { missingCaseError } from '../util/missingCaseError';
 
@@ -58,6 +59,7 @@ export type PropsType = {
     conversationId: string,
     demuxId: number
   ) => VideoFrameSource;
+  getPreferredBadge: PreferredBadgeSelectorType;
   getPresentingSources: () => void;
   incomingCall?:
     | {
@@ -96,6 +98,7 @@ export type PropsType = {
   setRendererCanvas: (_: SetRendererCanvasType) => void;
   stopRingtone: () => unknown;
   hangUp: (_: HangUpType) => void;
+  theme: ThemeType;
   togglePip: () => void;
   toggleScreenRecordingPermissionsDialog: () => unknown;
   toggleSettings: () => void;
@@ -116,6 +119,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
   isGroupCallOutboundRingEnabled,
   keyChangeOk,
   getGroupCallVideoFrameSource,
+  getPreferredBadge,
   getPresentingSources,
   me,
   openSystemPreferencesAction,
@@ -129,6 +133,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
   setRendererCanvas,
   setOutgoingRing,
   startCall,
+  theme,
   toggleParticipants,
   togglePip,
   toggleScreenRecordingPermissionsDialog,
@@ -343,6 +348,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
         <SafetyNumberChangeDialog
           confirmText={i18n('continueCall')}
           contacts={activeCall.conversationsWithSafetyNumberChanges}
+          getPreferredBadge={getPreferredBadge}
           i18n={i18n}
           onCancel={() => {
             hangUp({ conversationId: activeCall.conversation.id });
@@ -351,6 +357,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
             keyChangeOk({ conversationId: activeCall.conversation.id });
           }}
           renderSafetyNumber={renderSafetyNumberViewer}
+          theme={theme}
         />
       ) : null}
     </>

ts/components/Inbox.tsx

@@ -7,7 +7,8 @@ import type * as Backbone from 'backbone';
 import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
 import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
 import type { ConversationType } from '../state/ducks/conversations';
-import type { LocalizerType } from '../types/Util';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+import type { LocalizerType, ThemeType } from '../types/Util';
 
 type InboxViewType = Backbone.View & {
   onEmpty?: () => void;
@@ -22,11 +23,13 @@ export type PropsType = {
   cancelMessagesPendingConversationVerification: () => void;
   conversationsStoppingMessageSendBecauseOfVerification: Array<ConversationType>;
   hasInitialLoadCompleted: boolean;
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   isCustomizingPreferredReactions: boolean;
   numberOfMessagesPendingBecauseOfVerification: number;
   renderCustomizingPreferredReactionsModal: () => JSX.Element;
   renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
+  theme: ThemeType;
   verifyConversationsStoppingMessageSend: () => void;
 };
 
@@ -34,11 +37,13 @@ export const Inbox = ({
   cancelMessagesPendingConversationVerification,
   conversationsStoppingMessageSendBecauseOfVerification,
   hasInitialLoadCompleted,
+  getPreferredBadge,
   i18n,
   isCustomizingPreferredReactions,
   numberOfMessagesPendingBecauseOfVerification,
   renderCustomizingPreferredReactionsModal,
   renderSafetyNumber,
+  theme,
   verifyConversationsStoppingMessageSend,
 }: PropsType): JSX.Element => {
   const hostRef = useRef<HTMLDivElement | null>(null);
@@ -82,10 +87,12 @@ export const Inbox = ({
       <SafetyNumberChangeDialog
         confirmText={confirmText}
         contacts={conversationsStoppingMessageSendBecauseOfVerification}
+        getPreferredBadge={getPreferredBadge}
         i18n={i18n}
         onCancel={cancelMessagesPendingConversationVerification}
         onConfirm={verifyConversationsStoppingMessageSend}
         renderSafetyNumber={renderSafetyNumber}
+        theme={theme}
       />
     );
   }

ts/components/SafetyNumberChangeDialog.stories.tsx

@@ -9,6 +9,8 @@ import { SafetyNumberChangeDialog } from './SafetyNumberChangeDialog';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
+import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
+import { getFakeBadge } from '../test-both/helpers/getFakeBadge';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -48,11 +50,15 @@ const contactWithNothing = getDefaultConversation({
   title: 'Unknown contact',
 });
 
+const useTheme = () => React.useContext(StorybookThemeContext);
+
 storiesOf('Components/SafetyNumberChangeDialog', module)
   .add('Single Contact Dialog', () => {
+    const theme = useTheme();
     return (
       <SafetyNumberChangeDialog
         contacts={[contactWithAllData]}
+        getPreferredBadge={() => undefined}
         i18n={i18n}
         onCancel={action('cancel')}
         onConfirm={action('confirm')}
@@ -60,14 +66,17 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
           action('renderSafetyNumber');
           return <div>This is a mock Safety Number View</div>;
         }}
+        theme={theme}
       />
     );
   })
   .add('Different Confirmation Text', () => {
+    const theme = useTheme();
     return (
       <SafetyNumberChangeDialog
         confirmText="You are awesome"
         contacts={[contactWithAllData]}
+        getPreferredBadge={() => undefined}
         i18n={i18n}
         onCancel={action('cancel')}
         onConfirm={action('confirm')}
@@ -75,10 +84,12 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
           action('renderSafetyNumber');
           return <div>This is a mock Safety Number View</div>;
         }}
+        theme={theme}
       />
     );
   })
   .add('Multi Contact Dialog', () => {
+    const theme = useTheme();
     return (
       <SafetyNumberChangeDialog
         contacts={[
@@ -87,6 +98,7 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
           contactWithJustNumber,
           contactWithNothing,
         ]}
+        getPreferredBadge={() => undefined}
         i18n={i18n}
         onCancel={action('cancel')}
         onConfirm={action('confirm')}
@@ -94,10 +106,34 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
           action('renderSafetyNumber');
           return <div>This is a mock Safety Number View</div>;
         }}
+        theme={theme}
+      />
+    );
+  })
+  .add('Multiple contacts, all with badges', () => {
+    const theme = useTheme();
+    return (
+      <SafetyNumberChangeDialog
+        contacts={[
+          contactWithAllData,
+          contactWithJustProfile,
+          contactWithJustNumber,
+          contactWithNothing,
+        ]}
+        getPreferredBadge={() => getFakeBadge()}
+        i18n={i18n}
+        onCancel={action('cancel')}
+        onConfirm={action('confirm')}
+        renderSafetyNumber={() => {
+          action('renderSafetyNumber');
+          return <div>This is a mock Safety Number View</div>;
+        }}
+        theme={theme}
       />
     );
   })
   .add('Scroll Dialog', () => {
+    const theme = useTheme();
     return (
       <SafetyNumberChangeDialog
         contacts={[
@@ -112,6 +148,7 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
           contactWithAllData,
           contactWithAllData,
         ]}
+        getPreferredBadge={() => undefined}
         i18n={i18n}
         onCancel={action('cancel')}
         onConfirm={action('confirm')}
@@ -119,6 +156,7 @@ storiesOf('Components/SafetyNumberChangeDialog', module)
           action('renderSafetyNumber');
           return <div>This is a mock Safety Number View</div>;
         }}
+        theme={theme}
       />
     );
   });

ts/components/SafetyNumberChangeDialog.tsx

@@ -10,7 +10,8 @@ import { InContactsIcon } from './InContactsIcon';
 import { Modal } from './Modal';
 
 import type { ConversationType } from '../state/ducks/conversations';
-import type { LocalizerType } from '../types/Util';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+import type { LocalizerType, ThemeType } from '../types/Util';
 import { isInSystemContacts } from '../util/isInSystemContacts';
 
 export type SafetyNumberProps = {
@@ -21,19 +22,23 @@ export type SafetyNumberProps = {
 export type Props = {
   readonly confirmText?: string;
   readonly contacts: Array<ConversationType>;
+  readonly getPreferredBadge: PreferredBadgeSelectorType;
   readonly i18n: LocalizerType;
   readonly onCancel: () => void;
   readonly onConfirm: () => void;
   readonly renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
+  readonly theme: ThemeType;
 };
 
 export const SafetyNumberChangeDialog = ({
   confirmText,
   contacts,
+  getPreferredBadge,
   i18n,
   onCancel,
   onConfirm,
   renderSafetyNumber,
+  theme,
 }: Props): JSX.Element => {
   const [selectedContact, setSelectedContact] = React.useState<
     ConversationType | undefined
@@ -89,6 +94,7 @@ export const SafetyNumberChangeDialog = ({
               <Avatar
                 acceptedMessageRequest={contact.acceptedMessageRequest}
                 avatarPath={contact.avatarPath}
+                badge={getPreferredBadge(contact.badges)}
                 color={contact.color}
                 conversationType="direct"
                 i18n={i18n}
@@ -96,6 +102,7 @@ export const SafetyNumberChangeDialog = ({
                 name={contact.name}
                 phoneNumber={contact.phoneNumber}
                 profileName={contact.profileName}
+                theme={theme}
                 title={contact.title}
                 sharedGroupNames={contact.sharedGroupNames}
                 size={52}

ts/shims/showSafetyNumberChangeDialog.tsx

@@ -11,6 +11,8 @@ import React from 'react';
 import { unmountComponentAtNode, render } from 'react-dom';
 import type { ConversationModel } from '../models/conversations';
 import { SafetyNumberChangeDialog } from '../components/SafetyNumberChangeDialog';
+import { getPreferredBadgeSelector } from '../state/selectors/badges';
+import { getTheme } from '../state/selectors/user';
 
 export type SafetyNumberChangeViewProps = {
   confirmText?: string;
@@ -42,10 +44,15 @@ export function showSafetyNumberChangeDialog(
   dialogContainerNode = document.createElement('div');
   document.body.appendChild(dialogContainerNode);
 
+  const reduxState = window.reduxStore.getState();
+  const getPreferredBadge = getPreferredBadgeSelector(reduxState);
+  const theme = getTheme(reduxState);
+
   render(
     <SafetyNumberChangeDialog
       confirmText={options.confirmText}
       contacts={options.contacts.map(contact => contact.format())}
+      getPreferredBadge={getPreferredBadge}
       i18n={window.i18n}
       onCancel={() => {
         options.reject();
@@ -61,6 +68,7 @@ export function showSafetyNumberChangeDialog(
           props
         );
       }}
+      theme={theme}
     />,
     dialogContainerNode
   );

ts/state/smart/App.tsx

@@ -10,6 +10,7 @@ import { SmartCustomizingPreferredReactionsModal } from './CustomizingPreferredR
 import { SmartGlobalModalContainer } from './GlobalModalContainer';
 import { SmartSafetyNumberViewer } from './SafetyNumberViewer';
 import type { StateType } from '../reducer';
+import { getPreferredBadgeSelector } from '../selectors/badges';
 import { getIntl, getTheme } from '../selectors/user';
 import {
   getConversationsStoppingMessageSendBecauseOfVerification,
@@ -24,6 +25,7 @@ const mapStateToProps = (state: StateType) => {
     ...state.app,
     conversationsStoppingMessageSendBecauseOfVerification:
       getConversationsStoppingMessageSendBecauseOfVerification(state),
+    getPreferredBadge: getPreferredBadgeSelector(state),
     i18n: getIntl(state),
     isCustomizingPreferredReactions: getIsCustomizingPreferredReactions(state),
     numberOfMessagesPendingBecauseOfVerification:

ts/state/smart/CallManager.tsx

@@ -7,7 +7,7 @@ import { memoize } from 'lodash';
 import { mapDispatchToProps } from '../actions';
 import { CallManager } from '../../components/CallManager';
 import { calling as callingService } from '../../services/calling';
-import { getUserUuid, getIntl } from '../selectors/user';
+import { getUserUuid, getIntl, getTheme } from '../selectors/user';
 import { getMe, getConversationSelector } from '../selectors/conversations';
 import { getActiveCall } from '../ducks/calling';
 import type { ConversationType } from '../ducks/conversations';
@@ -35,6 +35,7 @@ import {
   notificationService,
 } from '../../services/notifications';
 import * as log from '../../logging/log';
+import { getPreferredBadgeSelector } from '../selectors/badges';
 
 function renderDeviceSelection(): JSX.Element {
   return <SmartCallingDeviceSelection />;
@@ -306,6 +307,7 @@ const mapStateToProps = (state: StateType) => ({
   bounceAppIconStop,
   availableCameras: state.calling.availableCameras,
   getGroupCallVideoFrameSource,
+  getPreferredBadge: getPreferredBadgeSelector(state),
   i18n: getIntl(state),
   isGroupCallOutboundRingEnabled: isGroupCallOutboundRingEnabled(),
   incomingCall: mapStateToIncomingCallProp(state),
@@ -320,6 +322,7 @@ const mapStateToProps = (state: StateType) => ({
   stopRingtone,
   renderDeviceSelection,
   renderSafetyNumberViewer,
+  theme: getTheme(state),
 });
 
 const smart = connect(mapStateToProps, mapDispatchToProps);