Show badges in contact spoofing dialog

Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>

ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx

@@ -11,6 +11,7 @@ import { getDefaultConversation } from '../../test-both/helpers/getDefaultConver
 
 import { ContactSpoofingReviewDialog } from './ContactSpoofingReviewDialog';
 import { ContactSpoofingType } from '../../util/contactSpoofing';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -20,6 +21,7 @@ const story = storiesOf(
 );
 
 const getCommonProps = () => ({
+  getPreferredBadge: () => undefined,
   i18n,
   onBlock: action('onBlock'),
   onBlockAndReportSpam: action('onBlockAndReportSpam'),
@@ -28,6 +30,7 @@ const getCommonProps = () => ({
   onShowContactModal: action('onShowContactModal'),
   onUnblock: action('onUnblock'),
   removeMember: action('removeMember'),
+  theme: ThemeType.light,
 });
 
 story.add('Direct conversations with same title', () => (

ts/components/conversation/ContactSpoofingReviewDialog.tsx

@@ -5,8 +5,9 @@ import type { FunctionComponent, ReactChild, ReactNode } from 'react';
 import React, { useState } from 'react';
 import { concat, orderBy } from 'lodash';
 
-import type { LocalizerType } from '../../types/Util';
+import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 import {
   MessageRequestActionsConfirmation,
   MessageRequestState,
@@ -24,6 +25,7 @@ import { missingCaseError } from '../../util/missingCaseError';
 import { isInSystemContacts } from '../../util/isInSystemContacts';
 
 type PropsType = {
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   onBlock: (conversationId: string) => unknown;
   onBlockAndReportSpam: (conversationId: string) => unknown;
@@ -32,6 +34,7 @@ type PropsType = {
   onShowContactModal: (contactId: string) => unknown;
   onUnblock: (conversationId: string) => unknown;
   removeMember: (conversationId: string) => unknown;
+  theme: ThemeType;
 } & (
   | {
       type: ContactSpoofingType.DirectConversationWithSameTitle;
@@ -60,6 +63,7 @@ enum ConfirmationStateType {
 export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> =
   props => {
     const {
+      getPreferredBadge,
       i18n,
       onBlock,
       onBlockAndReportSpam,
@@ -68,6 +72,7 @@ export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> =
       onShowContactModal,
       onUnblock,
       removeMember,
+      theme,
     } = props;
 
     const [confirmationState, setConfirmationState] = useState<
@@ -177,7 +182,9 @@ export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> =
             </h2>
             <ContactSpoofingReviewDialogPerson
               conversation={possiblyUnsafeConversation}
+              getPreferredBadge={getPreferredBadge}
               i18n={i18n}
+              theme={theme}
             >
               <div className="module-ContactSpoofingReviewDialog__buttons">
                 <Button
@@ -208,10 +215,12 @@ export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> =
             <h2>{i18n('ContactSpoofingReviewDialog__safe-title')}</h2>
             <ContactSpoofingReviewDialogPerson
               conversation={safeConversation}
+              getPreferredBadge={getPreferredBadge}
               i18n={i18n}
               onClick={() => {
                 onShowContactModal(safeConversation.id);
               }}
+              theme={theme}
             />
           </>
         );
@@ -297,7 +306,9 @@ export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> =
                   <ContactSpoofingReviewDialogPerson
                     key={conversationInfo.conversation.id}
                     conversation={conversationInfo.conversation}
+                    getPreferredBadge={getPreferredBadge}
                     i18n={i18n}
+                    theme={theme}
                   >
                     {Boolean(oldName) && oldName !== newName && (
                       <div className="module-ContactSpoofingReviewDialogPerson__info__property module-ContactSpoofingReviewDialogPerson__info__property--callout">

ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx

@@ -5,7 +5,8 @@ import type { FunctionComponent, ReactNode } from 'react';
 import React from 'react';
 
 import type { ConversationType } from '../../state/ducks/conversations';
-import type { LocalizerType } from '../../types/Util';
+import type { LocalizerType, ThemeType } from '../../types/Util';
+import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 import { assert } from '../../util/assert';
 
 import { Avatar, AvatarSize } from '../Avatar';
@@ -15,12 +16,14 @@ import { SharedGroupNames } from '../SharedGroupNames';
 type PropsType = {
   children?: ReactNode;
   conversation: ConversationType;
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   onClick?: () => void;
+  theme: ThemeType;
 };
 
 export const ContactSpoofingReviewDialogPerson: FunctionComponent<PropsType> =
-  ({ children, conversation, i18n, onClick }) => {
+  ({ children, conversation, getPreferredBadge, i18n, onClick, theme }) => {
     assert(
       conversation.type === 'direct',
       '<ContactSpoofingReviewDialogPerson> expected a direct conversation'
@@ -30,10 +33,12 @@ export const ContactSpoofingReviewDialogPerson: FunctionComponent<PropsType> =
       <>
         <Avatar
           {...conversation}
+          badge={getPreferredBadge(conversation.badges)}
           conversationType={conversation.type}
           size={AvatarSize.FIFTY_TWO}
           className="module-ContactSpoofingReviewDialogPerson__avatar"
           i18n={i18n}
+          theme={theme}
         />
         <div className="module-ContactSpoofingReviewDialogPerson__info">
           <ContactName

ts/components/conversation/Timeline.tsx

@@ -1492,6 +1492,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     let contactSpoofingReviewDialog: ReactNode;
     if (contactSpoofingReview) {
       const commonProps = {
+        getPreferredBadge,
         i18n,
         onBlock,
         onBlockAndReportSpam,
@@ -1500,6 +1501,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
         onShowContactModal: showContactModal,
         onUnblock,
         removeMember,
+        theme,
       };
 
       switch (contactSpoofingReview.type) {