Show badges on message avatars where applicable

ts/components/conversation/Message.stories.tsx

@@ -31,6 +31,8 @@ import { getDefaultConversation } from '../../test-both/helpers/getDefaultConver
 import { WidthBreakpoint } from '../_util';
 
 import { fakeAttachment } from '../../test-both/helpers/fakeAttachment';
+import { getFakeBadge } from '../../test-both/helpers/getFakeBadge';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -95,6 +97,7 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   attachments: overrideProps.attachments,
   author: overrideProps.author || getDefaultConversation(),
+  authorBadge: overrideProps.authorBadge,
   reducedMotion: boolean('reducedMotion', false),
   bodyRanges: overrideProps.bodyRanges,
   canReply: true,
@@ -176,6 +179,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   status: overrideProps.status || 'sent',
   text: overrideProps.text || text('text', ''),
   textPending: boolean('textPending', overrideProps.textPending || false),
+  theme: ThemeType.light,
   timestamp: number('timestamp', overrideProps.timestamp || Date.now()),
 });
 
@@ -538,6 +542,17 @@ story.add('Avatar in Group', () => {
   return <Message {...props} />;
 });
 
+story.add('Badge in Group', () => {
+  const props = createProps({
+    authorBadge: getFakeBadge(),
+    conversationType: 'group',
+    status: 'sent',
+    text: 'Hello it is me, the saxophone.',
+  });
+
+  return <Message {...props} />;
+});
+
 story.add('Sticker', () => {
   const props = createProps({
     attachments: [

ts/components/conversation/Message.tsx

@@ -62,6 +62,7 @@ import type {
   LocalizerType,
   ThemeType,
 } from '../../types/Util';
+import type { BadgeType } from '../../badges/types';
 import type {
   ContactNameColorType,
   ConversationColorType,
@@ -145,6 +146,7 @@ export type PropsData = {
     ConversationType,
     | 'acceptedMessageRequest'
     | 'avatarPath'
+    | 'badges'
     | 'color'
     | 'id'
     | 'isMe'
@@ -155,6 +157,7 @@ export type PropsData = {
     | 'title'
     | 'unblurredAvatarPath'
   >;
+  authorBadge: undefined | BadgeType;
   reducedMotion?: boolean;
   conversationType: ConversationTypeType;
   attachments?: Array<AttachmentType>;
@@ -203,7 +206,7 @@ export type PropsHousekeeping = {
   containerWidthBreakpoint: WidthBreakpoint;
   i18n: LocalizerType;
   interactionMode: InteractionModeType;
-  theme?: ThemeType;
+  theme: ThemeType;
   disableMenu?: boolean;
   disableScroll?: boolean;
   collapseMetadata?: boolean;
@@ -1188,7 +1191,7 @@ export class Message extends React.PureComponent<Props, State> {
   }
 
   public renderAvatar(): JSX.Element | undefined {
-    const { author, i18n, showContactModal } = this.props;
+    const { author, authorBadge, i18n, showContactModal, theme } = this.props;
 
     if (!this.hasAvatar()) {
       return undefined;
@@ -1204,6 +1207,7 @@ export class Message extends React.PureComponent<Props, State> {
         <Avatar
           acceptedMessageRequest={author.acceptedMessageRequest}
           avatarPath={author.avatarPath}
+          badge={authorBadge}
           color={author.color}
           conversationType="direct"
           i18n={i18n}
@@ -1219,6 +1223,7 @@ export class Message extends React.PureComponent<Props, State> {
           profileName={author.profileName}
           sharedGroupNames={author.sharedGroupNames}
           size={28}
+          theme={theme}
           title={author.title}
           unblurredAvatarPath={author.unblurredAvatarPath}
         />

ts/components/conversation/MessageDetail.stories.tsx

@@ -15,6 +15,8 @@ import { ReadStatus } from '../../messages/MessageReadStatus';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
+import { getFakeBadge } from '../../test-both/helpers/getFakeBadge';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -25,6 +27,7 @@ const defaultMessage: MessageDataPropsType = {
     id: 'some-id',
     title: 'Max',
   }),
+  authorBadge: getFakeBadge(),
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,
@@ -61,6 +64,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
 
   i18n,
   interactionMode: 'keyboard',
+  theme: ThemeType.light,
 
   showSafetyNumber: action('showSafetyNumber'),
 

ts/components/conversation/MessageDetail.tsx

@@ -14,7 +14,7 @@ import type {
   PropsData as MessagePropsDataType,
 } from './Message';
 import { Message } from './Message';
-import type { LocalizerType } from '../../types/Util';
+import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
 import { groupBy } from '../../util/mapUtil';
 import type { ContactNameColorType } from '../../types/Colors';
@@ -60,6 +60,7 @@ export type PropsData = {
 
   showSafetyNumber: (contactId: string) => void;
   i18n: LocalizerType;
+  theme: ThemeType;
 } & Pick<MessagePropsType, 'interactionMode'>;
 
 export type PropsBackboneActions = Pick<
@@ -288,6 +289,7 @@ export class MessageDetail extends React.Component<Props> {
       showExpiredOutgoingTapToViewToast,
       showForwardMessageModal,
       showVisualAttachment,
+      theme,
     } = this.props;
 
     return (
@@ -350,6 +352,7 @@ export class MessageDetail extends React.Component<Props> {
               log.warn('MessageDetail: deleteMessageForEveryone called!');
             }}
             showVisualAttachment={showVisualAttachment}
+            theme={theme}
           />
         </div>
         <table className="module-message-detail__info">

ts/components/conversation/Quote.stories.tsx

@@ -26,6 +26,7 @@ import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { WidthBreakpoint } from '../_util';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -36,6 +37,7 @@ const defaultMessageProps: MessagesProps = {
     id: 'some-id',
     title: 'Person X',
   }),
+  authorBadge: undefined,
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,
@@ -90,6 +92,7 @@ const defaultMessageProps: MessagesProps = {
   showVisualAttachment: action('default--showVisualAttachment'),
   status: 'sent',
   text: 'This is really interesting.',
+  theme: ThemeType.light,
   timestamp: Date.now(),
 };
 

ts/components/conversation/Timeline.stories.tsx

@@ -47,6 +47,7 @@ const items: Record<string, TimelineItemType> = {
       author: getDefaultConversation({
         phoneNumber: '(202) 555-2001',
       }),
+      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -67,6 +68,7 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
+      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -100,6 +102,7 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
+      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -189,6 +192,7 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
+      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -210,6 +214,7 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
+      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -231,6 +236,7 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
+      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -252,6 +258,7 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
+      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -273,6 +280,7 @@ const items: Record<string, TimelineItemType> = {
     type: 'message',
     data: {
       author: getDefaultConversation({}),
+      authorBadge: undefined,
       canDeleteForEveryone: false,
       canDownload: true,
       canReply: true,
@@ -390,6 +398,7 @@ const renderItem = ({
     nextItem={undefined}
     i18n={i18n}
     interactionMode="keyboard"
+    theme={ThemeType.light}
     containerElementRef={containerElementRef}
     containerWidthBreakpoint={containerWidthBreakpoint}
     conversationId=""

ts/components/conversation/TimelineItem.stories.tsx

@@ -16,6 +16,7 @@ import { CallMode } from '../../types/Calling';
 import { AvatarColors } from '../../types/Colors';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { WidthBreakpoint } from '../_util';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -53,6 +54,7 @@ const getDefaultProps = () => ({
   id: 'asdf',
   isSelected: false,
   interactionMode: 'keyboard' as const,
+  theme: ThemeType.light,
   selectMessage: action('selectMessage'),
   reactToMessage: action('reactToMessage'),
   checkForAccount: action('checkForAccount'),

ts/components/conversation/TimelineItem.tsx

@@ -148,7 +148,7 @@ type PropsLocalType = {
   renderUniversalTimerNotification: () => JSX.Element;
   i18n: LocalizerType;
   interactionMode: InteractionModeType;
-  theme?: ThemeType;
+  theme: ThemeType;
   previousItem: undefined | TimelineItemType;
   nextItem: undefined | TimelineItemType;
 };

ts/models/messages.ts

@@ -134,6 +134,8 @@ import type { LinkPreviewType } from '../types/message/LinkPreviews';
 import * as log from '../logging/log';
 import * as Bytes from '../Bytes';
 import { computeHash } from '../Crypto';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+import { getPreferredBadgeSelector } from '../state/selectors/badges';
 
 /* eslint-disable camelcase */
 /* eslint-disable more/no-then */
@@ -392,6 +394,13 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
         ourConversationId,
         ourNumber: window.textsecure.storage.user.getNumber(),
         ourUuid: window.textsecure.storage.user.getCheckedUuid().toString(),
+        preferredBadgeSelector: (
+          ...args: Parameters<PreferredBadgeSelectorType>
+        ) => {
+          const state = window.reduxStore.getState();
+          const preferredBadgeSelector = getPreferredBadgeSelector(state);
+          return preferredBadgeSelector(...args);
+        },
         regionCode: window.storage.get('regionCode', 'ZZ'),
         accountSelector: (identifier?: string) => {
           const state = window.reduxStore.getState();

ts/state/selectors/badges.ts

@@ -51,12 +51,14 @@ export const getBadgesSelector = createSelector(
     }
 );
 
+export type PreferredBadgeSelectorType = (
+  conversationBadges: ReadonlyArray<Pick<BadgeType, 'id'>>
+) => undefined | BadgeType;
+
 export const getPreferredBadgeSelector = createSelector(
   getBadgesById,
-  badgesById =>
-    (
-      conversationBadges: ReadonlyArray<Pick<BadgeType, 'id'>>
-    ): undefined | BadgeType => {
+  (badgesById): PreferredBadgeSelectorType =>
+    conversationBadges => {
       const firstId: undefined | string = conversationBadges[0]?.id;
       if (!firstId) {
         return undefined;

ts/state/selectors/conversations.ts

@@ -49,6 +49,8 @@ import { getPinnedConversationIds } from './items';
 import { getPropsForBubble } from './message';
 import type { CallSelectorType, CallStateType } from './calling';
 import { getActiveCall, getCallSelector } from './calling';
+import type { PreferredBadgeSelectorType } from './badges';
+import { getPreferredBadgeSelector } from './badges';
 import type { AccountSelectorType } from './accounts';
 import { getAccountSelector } from './accounts';
 import * as log from '../../logging/log';
@@ -793,6 +795,7 @@ export const getMessageSelector = createSelector(
   getMessages,
   getSelectedMessage,
   getConversationSelector,
+  getPreferredBadgeSelector,
   getRegionCode,
   getUserNumber,
   getUserUuid,
@@ -806,6 +809,7 @@ export const getMessageSelector = createSelector(
     messageLookup: MessageLookupType,
     selectedMessage: SelectedMessageType | undefined,
     conversationSelector: GetConversationByIdType,
+    preferredBadgeSelector: PreferredBadgeSelectorType,
     regionCode: string,
     ourNumber: string,
     ourUuid: UUIDStringType,
@@ -826,6 +830,7 @@ export const getMessageSelector = createSelector(
         ourConversationId,
         ourNumber,
         ourUuid,
+        preferredBadgeSelector,
         regionCode,
         selectedMessageId: selectedMessage?.id,
         selectedMessageCounter: selectedMessage?.counter,

ts/state/selectors/message.ts

@@ -63,6 +63,7 @@ import type {
 } from '../ducks/conversations';
 
 import type { AccountSelectorType } from './accounts';
+import type { PreferredBadgeSelectorType } from './badges';
 import type { CallSelectorType, CallStateType } from './calling';
 import type {
   GetConversationByIdType,
@@ -81,6 +82,7 @@ import {
   someSendStatus,
 } from '../../messages/MessageSendState';
 import * as log from '../../logging/log';
+import type { BadgeType } from '../../badges/types';
 
 const THREE_HOURS = 3 * 60 * 60 * 1000;
 
@@ -106,6 +108,7 @@ export type GetPropsForBubbleOptions = Readonly<{
   ourConversationId: string;
   ourNumber?: string;
   ourUuid: UUIDStringType;
+  preferredBadgeSelector: PreferredBadgeSelectorType;
   selectedMessageId?: string;
   selectedMessageCounter?: number;
   regionCode: string;
@@ -307,6 +310,7 @@ const getAuthorForMessage = createSelectorCreator(memoizeByRoot)(
     const {
       acceptedMessageRequest,
       avatarPath,
+      badges,
       color,
       id,
       isMe,
@@ -321,6 +325,7 @@ const getAuthorForMessage = createSelectorCreator(memoizeByRoot)(
     const unsafe = {
       acceptedMessageRequest,
       avatarPath,
+      badges,
       color,
       id,
       isMe,
@@ -345,6 +350,19 @@ const getCachedAuthorForMessage = createSelectorCreator(memoizeByRoot, isEqual)(
   (_, author): PropsData['author'] => author
 );
 
+const getAuthorBadgeForMessage: (
+  message: MessageWithUIFieldsType,
+  options: {
+    preferredBadgeSelector: PreferredBadgeSelectorType;
+  }
+) => undefined | BadgeType = createSelectorCreator(memoizeByRoot, isEqual)(
+  // `memoizeByRoot` requirement
+  identity,
+  (_, { preferredBadgeSelector }) => preferredBadgeSelector,
+  getAuthorForMessage,
+  (_, preferredBadgeSelector, author) => preferredBadgeSelector(author.badges)
+);
+
 export const getPreviewsForMessage = createSelectorCreator(memoizeByRoot)(
   // `memoizeByRoot` requirement
   identity,
@@ -496,6 +514,7 @@ export type GetPropsForMessageOptions = Pick<
   | 'ourConversationId'
   | 'ourUuid'
   | 'ourNumber'
+  | 'preferredBadgeSelector'
   | 'selectedMessageId'
   | 'selectedMessageCounter'
   | 'regionCode'
@@ -637,6 +656,7 @@ export const getPropsForMessage: (
   getAttachmentsForMessage,
   processBodyRanges,
   getCachedAuthorForMessage,
+  getAuthorBadgeForMessage,
   getPreviewsForMessage,
   getReactionsForMessage,
   getPropsForQuote,
@@ -646,6 +666,7 @@ export const getPropsForMessage: (
     attachments: Array<AttachmentType>,
     bodyRanges: BodyRangesType | undefined,
     author: PropsData['author'],
+    authorBadge: undefined | BadgeType,
     previews: Array<LinkPreviewType>,
     reactions: PropsData['reactions'],
     quote: PropsData['quote'],
@@ -654,6 +675,7 @@ export const getPropsForMessage: (
     return {
       attachments,
       author,
+      authorBadge,
       bodyRanges,
       previews,
       quote,

ts/state/smart/MessageDetail.tsx

@@ -8,7 +8,7 @@ import { MessageDetail } from '../../components/conversation/MessageDetail';
 
 import { mapDispatchToProps } from '../actions';
 import type { StateType } from '../reducer';
-import { getIntl, getInteractionMode } from '../selectors/user';
+import { getIntl, getInteractionMode, getTheme } from '../selectors/user';
 import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
 import { renderReactionPicker } from './renderReactionPicker';
@@ -22,6 +22,7 @@ export type OwnProps = Omit<
   | 'renderAudioAttachment'
   | 'renderEmojiPicker'
   | 'renderReactionPicker'
+  | 'theme'
 >;
 
 const mapStateToProps = (
@@ -72,6 +73,7 @@ const mapStateToProps = (
 
     i18n: getIntl(state),
     interactionMode: getInteractionMode(state),
+    theme: getTheme(state),
 
     showSafetyNumber,