Make it more difficult to blur avatars

ts/components/conversation/ContactModal.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -7,6 +7,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { ContactModal, PropsType } from './ContactModal';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
@@ -16,16 +17,13 @@ const i18n = setupI18n('en', enMessages);
 
 const story = storiesOf('Components/Conversation/ContactModal', module);
 
-const defaultContact: ConversationType = {
+const defaultContact: ConversationType = getDefaultConversation({
   id: 'abcdef',
-  lastUpdated: Date.now(),
-  markedUnread: false,
   areWeAdmin: false,
   title: 'Pauline Oliveros',
-  type: 'direct',
   phoneNumber: '(333) 444-5515',
   about: '👍 Free to chat',
-};
+});
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   areWeAdmin: boolean('areWeAdmin', overrideProps.areWeAdmin || false),

ts/components/conversation/ContactModal.tsx

@@ -111,6 +111,7 @@ export const ContactModal = ({
               color={contact.color}
               conversationType="direct"
               i18n={i18n}
+              isMe={contact.isMe}
               name={contact.name}
               profileName={contact.profileName}
               sharedGroupNames={contact.sharedGroupNames}

ts/components/conversation/ConversationHeader.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { ComponentProps } from 'react';
@@ -6,6 +6,7 @@ import React, { ComponentProps } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
 import {
@@ -27,9 +28,10 @@ type ConversationHeaderStory = {
 };
 
 const commonProps = {
+  ...getDefaultConversation(),
+
   showBackButton: false,
   outgoingCallButtonStyle: OutgoingCallButtonStyle.Both,
-  markedUnread: false,
 
   i18n,
 

ts/components/conversation/ConversationHero.stories.tsx

@@ -30,6 +30,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
           about={getAbout()}
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={getTitle()}
           avatarPath={getAvatarPath()}
           name={getName()}
@@ -50,6 +51,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
           about={getAbout()}
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={getTitle()}
           avatarPath={getAvatarPath()}
           name={getName()}
@@ -70,6 +72,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
           about={getAbout()}
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={getTitle()}
           avatarPath={getAvatarPath()}
           name={getName()}
@@ -90,6 +93,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
           about={getAbout()}
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={getTitle()}
           avatarPath={getAvatarPath()}
           name={getName()}
@@ -110,6 +114,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
           about={getAbout()}
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={text('title', 'Cayce Bollard (profile)')}
           avatarPath={getAvatarPath()}
           name={text('name', '')}
@@ -130,6 +135,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
           about={getAbout()}
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={text('title', '+1 (646) 327-2700')}
           avatarPath={getAvatarPath()}
           name={text('name', '')}
@@ -148,6 +154,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
       <div style={{ width: '480px' }}>
         <ConversationHero
           i18n={i18n}
+          isMe={false}
           title={text('title', 'Unknown contact')}
           acceptedMessageRequest
           avatarPath={getAvatarPath()}
@@ -167,6 +174,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
       <div style={{ width: '480px' }}>
         <ConversationHero
           i18n={i18n}
+          isMe={false}
           title={text('title', 'Unknown contact')}
           acceptedMessageRequest={false}
           avatarPath={getAvatarPath()}
@@ -187,10 +195,12 @@ storiesOf('Components/Conversation/ConversationHero', module)
         <ConversationHero
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={text('title', 'NYC Rock Climbers')}
           name={text('groupName', 'NYC Rock Climbers')}
           conversationType="group"
           membersCount={numberKnob('membersCount', 22)}
+          sharedGroupNames={[]}
           unblurAvatar={action('unblurAvatar')}
           updateSharedGroups={updateSharedGroups}
         />
@@ -203,10 +213,12 @@ storiesOf('Components/Conversation/ConversationHero', module)
         <ConversationHero
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={text('title', 'NYC Rock Climbers')}
           name={text('groupName', 'NYC Rock Climbers')}
           conversationType="group"
           membersCount={1}
+          sharedGroupNames={[]}
           unblurAvatar={action('unblurAvatar')}
           updateSharedGroups={updateSharedGroups}
         />
@@ -219,10 +231,12 @@ storiesOf('Components/Conversation/ConversationHero', module)
         <ConversationHero
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={text('title', 'NYC Rock Climbers')}
           name={text('groupName', 'NYC Rock Climbers')}
           conversationType="group"
           membersCount={0}
+          sharedGroupNames={[]}
           unblurAvatar={action('unblurAvatar')}
           updateSharedGroups={updateSharedGroups}
         />
@@ -235,10 +249,12 @@ storiesOf('Components/Conversation/ConversationHero', module)
         <ConversationHero
           acceptedMessageRequest
           i18n={i18n}
+          isMe={false}
           title={text('title', 'Unknown group')}
           name={text('groupName', '')}
           conversationType="group"
           membersCount={0}
+          sharedGroupNames={[]}
           unblurAvatar={action('unblurAvatar')}
           updateSharedGroups={updateSharedGroups}
         />
@@ -249,11 +265,13 @@ storiesOf('Components/Conversation/ConversationHero', module)
     return (
       <div style={{ width: '480px' }}>
         <ConversationHero
+          acceptedMessageRequest
           i18n={i18n}
           isMe
           title={getTitle()}
           conversationType="direct"
           phoneNumber={getPhoneNumber()}
+          sharedGroupNames={[]}
           unblurAvatar={action('unblurAvatar')}
           updateSharedGroups={updateSharedGroups}
         />

ts/components/conversation/ConversationHero.tsx

@@ -17,7 +17,7 @@ export type Props = {
   about?: string;
   acceptedMessageRequest?: boolean;
   i18n: LocalizerType;
-  isMe?: boolean;
+  isMe: boolean;
   membersCount?: number;
   onHeightChange?: () => unknown;
   phoneNumber?: string;
@@ -179,18 +179,21 @@ export const ConversationHero = ({
         {({ measureRef }) => (
           <div className="module-conversation-hero" ref={measureRef}>
             <Avatar
-              i18n={i18n}
-              blur={avatarBlur}
-              color={color}
-              noteToSelf={isMe}
+              acceptedMessageRequest={acceptedMessageRequest}
               avatarPath={avatarPath}
+              blur={avatarBlur}
+              className="module-conversation-hero__avatar"
+              color={color}
               conversationType={conversationType}
+              i18n={i18n}
+              isMe={isMe}
               name={name}
+              noteToSelf={isMe}
               onClick={avatarOnClick}
               profileName={profileName}
-              title={title}
+              sharedGroupNames={sharedGroupNames}
               size={112}
-              className="module-conversation-hero__avatar"
+              title={title}
             />
             <h1 className="module-conversation-hero__profile-name">
               {isMe ? (

ts/components/conversation/GroupV1Migration.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 /* eslint-disable-next-line max-classes-per-file */
@@ -7,29 +7,24 @@ import { storiesOf } from '@storybook/react';
 import { isBoolean } from 'lodash';
 import { boolean } from '@storybook/addon-knobs';
 
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
 import { GroupV1Migration, PropsType } from './GroupV1Migration';
 
 const i18n = setupI18n('en', enMessages);
 
-const contact1 = {
+const contact1 = getDefaultConversation({
   title: 'Alice',
-  number: '+1 (300) 555-000',
+  phoneNumber: '+1 (300) 555-000',
   id: 'guid-1',
-  markedUnread: false,
-  type: 'direct' as const,
-  lastUpdated: Date.now(),
-};
+});
 
-const contact2 = {
+const contact2 = getDefaultConversation({
   title: 'Bob',
-  number: '+1 (300) 555-000',
+  phoneNumber: '+1 (300) 555-000',
   id: 'guid-2',
-  markedUnread: false,
-  type: 'direct' as const,
-  lastUpdated: Date.now(),
-};
+});
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   areWeInvited: boolean(

ts/components/conversation/Message.stories.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { isBoolean } from 'lodash';
 
 import { action } from '@storybook/addon-actions';
-import { boolean, number, text, select } from '@storybook/addon-knobs';
+import { boolean, number, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
 import { SignalService } from '../../protobuf';
@@ -25,6 +25,7 @@ import { computePeaks } from '../GlobalAudioContext';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
 import { pngUrl } from '../../storybook/Fixtures';
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -67,18 +68,9 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
   <MessageAudioContainer {...props} />
 );
 
-const createAuthorProp = (
-  overrides: Partial<Props['author']> = {}
-): Props['author'] => ({
-  id: 'some-id',
-  color: select('authorColor', Colors, Colors[0]),
-  ...overrides,
-  title: text('authorTitle', overrides.title || ''),
-});
-
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   attachments: overrideProps.attachments,
-  author: overrideProps.author || createAuthorProp(),
+  author: overrideProps.author || getDefaultConversation(),
   reducedMotion: boolean('reducedMotion', false),
   bodyRanges: overrideProps.bodyRanges,
   canReply: true,
@@ -220,7 +212,7 @@ story.add('Pending', () => {
 
 story.add('Collapsed Metadata', () => {
   const props = createProps({
-    author: createAuthorProp({ title: 'Fred Willard' }),
+    author: getDefaultConversation({ title: 'Fred Willard' }),
     collapseMetadata: true,
     conversationType: 'group',
     text: 'Hello there from a pal!',
@@ -254,83 +246,83 @@ story.add('Reactions (wider message)', () => {
     reactions: [
       {
         emoji: '👍',
-        from: {
+        from: getDefaultConversation({
           isMe: true,
           id: '+14155552672',
           phoneNumber: '+14155552672',
           name: 'Me',
           title: 'Me',
-        },
+        }),
         timestamp: Date.now() - 10,
       },
       {
         emoji: '👍',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552672',
           phoneNumber: '+14155552672',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now() - 10,
       },
       {
         emoji: '👍',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552673',
           phoneNumber: '+14155552673',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now() - 10,
       },
       {
         emoji: '😂',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552674',
           phoneNumber: '+14155552674',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now() - 10,
       },
       {
         emoji: '😂',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552676',
           phoneNumber: '+14155552676',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now() - 10,
       },
       {
         emoji: '😡',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552677',
           phoneNumber: '+14155552677',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now() - 10,
       },
       {
         emoji: '👎',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552678',
           phoneNumber: '+14155552678',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now() - 10,
       },
       {
         emoji: '❤️',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552679',
           phoneNumber: '+14155552679',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now() - 10,
       },
     ],
@@ -346,83 +338,83 @@ story.add('Reactions (short message)', () => {
     reactions: [
       {
         emoji: '👍',
-        from: {
+        from: getDefaultConversation({
           isMe: true,
           id: '+14155552672',
           phoneNumber: '+14155552672',
           name: 'Me',
           title: 'Me',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '👍',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552672',
           phoneNumber: '+14155552672',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '👍',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552673',
           phoneNumber: '+14155552673',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '😂',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552674',
           phoneNumber: '+14155552674',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '😂',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552676',
           phoneNumber: '+14155552676',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '😡',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552677',
           phoneNumber: '+14155552677',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '👎',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552678',
           phoneNumber: '+14155552678',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '❤️',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552679',
           phoneNumber: '+14155552679',
           name: 'Amelia Briggs',
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
     ],
@@ -433,7 +425,7 @@ story.add('Reactions (short message)', () => {
 
 story.add('Avatar in Group', () => {
   const props = createProps({
-    author: createAuthorProp({ avatarPath: pngUrl }),
+    author: getDefaultConversation({ avatarPath: pngUrl }),
     conversationType: 'group',
     status: 'sent',
     text: 'Hello it is me, the saxophone.',
@@ -1000,7 +992,7 @@ story.add('Colors', () => {
       {Colors.map(color => (
         <Message
           {...createProps({
-            author: createAuthorProp({ color }),
+            author: getDefaultConversation({ color }),
             text:
               'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
           })}

ts/components/conversation/MessageDetail.stories.tsx

@@ -9,6 +9,7 @@ import { storiesOf } from '@storybook/react';
 
 import { PropsData as MessageDataPropsType } from './Message';
 import { MessageDetail, Props } from './MessageDetail';
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
 
@@ -17,10 +18,10 @@ const i18n = setupI18n('en', enMessages);
 const story = storiesOf('Components/Conversation/MessageDetail', module);
 
 const defaultMessage: MessageDataPropsType = {
-  author: {
+  author: getDefaultConversation({
     id: 'some-id',
     title: 'Max',
-  },
+  }),
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,
@@ -39,13 +40,15 @@ const defaultMessage: MessageDataPropsType = {
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   contacts: overrideProps.contacts || [
     {
-      color: 'green',
+      ...getDefaultConversation({
+        color: 'green',
+        title: 'Just Max',
+      }),
       isOutgoingKeyError: false,
       isUnidentifiedDelivery: false,
       onSendAnyway: action('onSendAnyway'),
       onShowSafetyNumber: action('onShowSafetyNumber'),
       status: 'delivered',
-      title: 'Just Max',
     },
   ],
   errors: overrideProps.errors || [],
@@ -98,49 +101,59 @@ story.add('Message Statuses', () => {
   const props = createProps({
     contacts: [
       {
-        color: 'green',
+        ...getDefaultConversation({
+          color: 'green',
+          title: 'Max',
+        }),
         isOutgoingKeyError: false,
         isUnidentifiedDelivery: false,
         onSendAnyway: action('onSendAnyway'),
         onShowSafetyNumber: action('onShowSafetyNumber'),
         status: 'sent',
-        title: 'Max',
       },
       {
-        color: 'blue',
+        ...getDefaultConversation({
+          color: 'blue',
+          title: 'Sally',
+        }),
         isOutgoingKeyError: false,
         isUnidentifiedDelivery: false,
         onSendAnyway: action('onSendAnyway'),
         onShowSafetyNumber: action('onShowSafetyNumber'),
         status: 'sending',
-        title: 'Sally',
       },
       {
-        color: 'brown',
+        ...getDefaultConversation({
+          color: 'brown',
+          title: 'Terry',
+        }),
         isOutgoingKeyError: false,
         isUnidentifiedDelivery: false,
         onSendAnyway: action('onSendAnyway'),
         onShowSafetyNumber: action('onShowSafetyNumber'),
         status: 'partial-sent',
-        title: 'Terry',
       },
       {
-        color: 'light_green',
+        ...getDefaultConversation({
+          color: 'light_green',
+          title: 'Theo',
+        }),
         isOutgoingKeyError: false,
         isUnidentifiedDelivery: false,
         onSendAnyway: action('onSendAnyway'),
         onShowSafetyNumber: action('onShowSafetyNumber'),
         status: 'delivered',
-        title: 'Theo',
       },
       {
-        color: 'blue_grey',
+        ...getDefaultConversation({
+          color: 'blue_grey',
+          title: 'Nikki',
+        }),
         isOutgoingKeyError: false,
         isUnidentifiedDelivery: false,
         onSendAnyway: action('onSendAnyway'),
         onShowSafetyNumber: action('onShowSafetyNumber'),
         status: 'read',
-        title: 'Nikki',
       },
     ],
     message: {
@@ -191,16 +204,21 @@ story.add('All Errors', () => {
     },
     contacts: [
       {
-        color: 'green',
+        ...getDefaultConversation({
+          color: 'green',
+          title: 'Max',
+        }),
         isOutgoingKeyError: true,
         isUnidentifiedDelivery: false,
         onSendAnyway: action('onSendAnyway'),
         onShowSafetyNumber: action('onShowSafetyNumber'),
         status: 'error',
-        title: 'Max',
       },
       {
-        color: 'blue',
+        ...getDefaultConversation({
+          color: 'blue',
+          title: 'Sally',
+        }),
         errors: [
           {
             name: 'Big Error',
@@ -212,16 +230,17 @@ story.add('All Errors', () => {
         onSendAnyway: action('onSendAnyway'),
         onShowSafetyNumber: action('onShowSafetyNumber'),
         status: 'error',
-        title: 'Sally',
       },
       {
-        color: 'brown',
+        ...getDefaultConversation({
+          color: 'brown',
+          title: 'Terry',
+        }),
         isOutgoingKeyError: true,
         isUnidentifiedDelivery: true,
         onSendAnyway: action('onSendAnyway'),
         onShowSafetyNumber: action('onShowSafetyNumber'),
         status: 'error',
-        title: 'Terry',
       },
     ],
   });

ts/components/conversation/MessageDetail.tsx

@@ -15,21 +15,25 @@ import {
   PropsData as MessagePropsDataType,
 } from './Message';
 import { LocalizerType } from '../../types/Util';
-import { ColorType } from '../../types/Colors';
+import { ConversationType } from '../../state/ducks/conversations';
 import { assert } from '../../util/assert';
 
-export type Contact = {
+export type Contact = Pick<
+  ConversationType,
+  | 'acceptedMessageRequest'
+  | 'avatarPath'
+  | 'color'
+  | 'isMe'
+  | 'name'
+  | 'phoneNumber'
+  | 'profileName'
+  | 'sharedGroupNames'
+  | 'title'
+  | 'unblurredAvatarPath'
+> & {
   status: MessageStatusType | null;
 
-  acceptedMessageRequest?: boolean;
-  title: string;
-  phoneNumber?: string;
-  name?: string;
-  profileName?: string;
-  avatarPath?: string;
-  color?: ColorType;
   isOutgoingKeyError: boolean;
-  sharedGroupNames?: Array<string>;
   isUnidentifiedDelivery: boolean;
   unblurredAvatarPath?: string;
 
@@ -95,6 +99,7 @@ export class MessageDetail extends React.Component<Props> {
       acceptedMessageRequest,
       avatarPath,
       color,
+      isMe,
       name,
       phoneNumber,
       profileName,
@@ -110,6 +115,7 @@ export class MessageDetail extends React.Component<Props> {
         color={color}
         conversationType="direct"
         i18n={i18n}
+        isMe={isMe}
         name={name}
         phoneNumber={phoneNumber}
         profileName={profileName}

ts/components/conversation/ProfileChangeNotification.stories.tsx

@@ -1,10 +1,11 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
 
 import { storiesOf } from '@storybook/react';
 
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
 import { ProfileChangeNotification } from './ProfileChangeNotification';
@@ -16,14 +17,12 @@ storiesOf('Components/Conversation/ProfileChangeNotification', module)
     return (
       <ProfileChangeNotification
         i18n={i18n}
-        changedContact={{
+        changedContact={getDefaultConversation({
           id: 'some-guid',
           type: 'direct',
           title: 'Mr. Fire 🔥',
           name: 'Mr. Fire 🔥',
-          lastUpdated: Date.now(),
-          markedUnread: false,
-        }}
+        })}
         change={{
           type: 'name',
           oldName: 'Mr. Fire 🔥 Old',
@@ -36,13 +35,11 @@ storiesOf('Components/Conversation/ProfileChangeNotification', module)
     return (
       <ProfileChangeNotification
         i18n={i18n}
-        changedContact={{
+        changedContact={getDefaultConversation({
           id: 'some-guid',
           type: 'direct',
           title: 'Mr. Fire 🔥',
-          lastUpdated: Date.now(),
-          markedUnread: false,
-        }}
+        })}
         change={{
           type: 'name',
           oldName: 'Mr. Fire 🔥 Old',

ts/components/conversation/Quote.stories.tsx

@@ -21,16 +21,17 @@ import {
 import { Props, Quote } from './Quote';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 
 const i18n = setupI18n('en', enMessages);
 
 const story = storiesOf('Components/Conversation/Quote', module);
 
 const defaultMessageProps: MessagesProps = {
-  author: {
+  author: getDefaultConversation({
     id: 'some-id',
     title: 'Person X',
-  },
+  }),
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,

ts/components/conversation/ReactionViewer.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -9,6 +9,7 @@ import { storiesOf } from '@storybook/react';
 import { Props, ReactionViewer } from './ReactionViewer';
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
+import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -28,94 +29,94 @@ story.add('All Reactions', () => {
       {
         emoji: '❤️',
         timestamp: 1,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552671',
           phoneNumber: '+14155552671',
           profileName: 'Ameila Briggs',
           title: 'Amelia',
-        },
+        }),
       },
       {
         emoji: '❤️',
         timestamp: 2,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552672',
           name: 'Adam Burrel',
           title: 'Adam',
-        },
+        }),
       },
       {
         emoji: '❤️',
         timestamp: 3,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552673',
           name: 'Rick Owens',
           title: 'Rick',
-        },
+        }),
       },
       {
         emoji: '❤️',
         timestamp: 4,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552674',
           name: 'Bojack Horseman',
           title: 'Bojack',
-        },
+        }),
       },
       {
         emoji: '👍',
         timestamp: 9,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552678',
           phoneNumber: '+14155552678',
           profileName: 'Adam Burrel',
           title: 'Adam',
-        },
+        }),
       },
       {
         emoji: '👎',
         timestamp: 10,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552673',
           name: 'Rick Owens',
           title: 'Rick',
-        },
+        }),
       },
       {
         emoji: '😂',
         timestamp: 11,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552674',
           name: 'Bojack Horseman',
           title: 'Bojack',
-        },
+        }),
       },
       {
         emoji: '😮',
         timestamp: 12,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552675',
           name: 'Cayce Pollard',
           title: 'Cayce',
-        },
+        }),
       },
       {
         emoji: '😢',
         timestamp: 13,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552676',
           name: 'Foo McBarrington',
           title: 'Foo',
-        },
+        }),
       },
       {
         emoji: '😡',
         timestamp: 14,
-        from: {
+        from: getDefaultConversation({
           id: '+14155552676',
           name: 'Foo McBarrington',
           title: 'Foo',
-        },
+        }),
       },
     ],
   });
@@ -128,22 +129,22 @@ story.add('Picked Reaction', () => {
     reactions: [
       {
         emoji: '❤️',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552671',
           name: 'Amelia Briggs',
           isMe: true,
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '👍',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552671',
           phoneNumber: '+14155552671',
           profileName: 'Joel Ferrari',
           title: 'Joel',
-        },
+        }),
         timestamp: Date.now(),
       },
     ],
@@ -157,22 +158,22 @@ story.add('Picked Missing Reaction', () => {
     reactions: [
       {
         emoji: '❤️',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552671',
           name: 'Amelia Briggs',
           isMe: true,
           title: 'Amelia',
-        },
+        }),
         timestamp: Date.now(),
       },
       {
         emoji: '👍',
-        from: {
+        from: getDefaultConversation({
           id: '+14155552671',
           phoneNumber: '+14155552671',
           profileName: 'Joel Ferrari',
           title: 'Joel',
-        },
+        }),
         timestamp: Date.now(),
       },
     ],
@@ -196,11 +197,11 @@ const createReaction = (
   timestamp = Date.now()
 ) => ({
   emoji,
-  from: {
+  from: getDefaultConversation({
     id: '+14155552671',
     name,
     title: name,
-  },
+  }),
   timestamp,
 });
 

ts/components/conversation/ReactionViewer.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -8,22 +8,25 @@ import { ContactName } from './ContactName';
 import { Avatar, Props as AvatarProps } from '../Avatar';
 import { Emoji } from '../emoji/Emoji';
 import { useRestoreFocus } from '../../util/hooks';
-import { ColorType } from '../../types/Colors';
+import { ConversationType } from '../../state/ducks/conversations';
 import { emojiToData, EmojiData } from '../emoji/lib';
 
 export type Reaction = {
   emoji: string;
   timestamp: number;
-  from: {
-    id: string;
-    color?: ColorType;
-    avatarPath?: string;
-    name?: string;
-    profileName?: string;
-    title: string;
-    isMe?: boolean;
-    phoneNumber?: string;
-  };
+  from: Pick<
+    ConversationType,
+    | 'acceptedMessageRequest'
+    | 'avatarPath'
+    | 'color'
+    | 'id'
+    | 'isMe'
+    | 'name'
+    | 'phoneNumber'
+    | 'profileName'
+    | 'sharedGroupNames'
+    | 'title'
+  >;
 };
 
 export type OwnProps = {
@@ -212,9 +215,12 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
             >
               <div className="module-reaction-viewer__body__row__avatar">
                 <Avatar
+                  acceptedMessageRequest={from.acceptedMessageRequest}
                   avatarPath={from.avatarPath}
                   conversationType="direct"
+                  sharedGroupNames={from.sharedGroupNames}
                   size={32}
+                  isMe={from.isMe}
                   color={from.color}
                   name={from.name}
                   profileName={from.profileName}

ts/components/conversation/Timeline.stories.tsx

@@ -318,7 +318,9 @@ const getPhoneNumber = () => text('phoneNumber', '+1 (808) 555-1234');
 const renderHeroRow = () => (
   <ConversationHero
     about={getAbout()}
+    acceptedMessageRequest
     i18n={i18n}
+    isMe={false}
     title={getTitle()}
     avatarPath={getAvatarPath()}
     name={getName()}
@@ -333,11 +335,14 @@ const renderHeroRow = () => (
 const renderLoadingRow = () => <TimelineLoadingRow state="loading" />;
 const renderTypingBubble = () => (
   <TypingBubble
+    acceptedMessageRequest
     color="red"
     conversationType="direct"
     phoneNumber="+18005552222"
     i18n={i18n}
+    isMe={false}
     title="title"
+    sharedGroupNames={[]}
   />
 );
 
@@ -456,16 +461,14 @@ story.add('Typing Indicator', () => {
 story.add('With invited contacts for a newly-created group', () => {
   const props = createProps({
     invitedContactsForNewlyCreatedGroup: [
-      {
+      getDefaultConversation({
         id: 'abc123',
         title: 'John Bon Bon Jovi',
-        type: 'direct',
-      },
-      {
+      }),
+      getDefaultConversation({
         id: 'def456',
         title: 'Bon John Bon Jovi',
-        type: 'direct',
-      },
+      }),
     ],
   });
 

ts/components/conversation/TypingBubble.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -15,6 +15,8 @@ const i18n = setupI18n('en', enMessages);
 const story = storiesOf('Components/Conversation/TypingBubble', module);
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  acceptedMessageRequest: true,
+  isMe: false,
   i18n,
   color: select(
     'color',
@@ -29,6 +31,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     { group: 'group', direct: 'direct' },
     overrideProps.conversationType || 'direct'
   ),
+  sharedGroupNames: [],
 });
 
 story.add('Direct', () => {

ts/components/conversation/TypingBubble.tsx

@@ -1,4 +1,4 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
@@ -8,15 +8,20 @@ import { TypingAnimation } from './TypingAnimation';
 import { Avatar } from '../Avatar';
 
 import { LocalizerType } from '../../types/Util';
-import { ColorType } from '../../types/Colors';
+import { ConversationType } from '../../state/ducks/conversations';
 
-export type Props = {
-  avatarPath?: string;
-  color: ColorType;
-  name?: string;
-  phoneNumber?: string;
-  profileName?: string;
-  title: string;
+export type Props = Pick<
+  ConversationType,
+  | 'acceptedMessageRequest'
+  | 'avatarPath'
+  | 'color'
+  | 'isMe'
+  | 'name'
+  | 'phoneNumber'
+  | 'profileName'
+  | 'sharedGroupNames'
+  | 'title'
+> & {
   conversationType: 'group' | 'direct';
   i18n: LocalizerType;
 };
@@ -24,14 +29,17 @@ export type Props = {
 export class TypingBubble extends React.PureComponent<Props> {
   public renderAvatar(): JSX.Element | null {
     const {
+      acceptedMessageRequest,
       avatarPath,
       color,
+      conversationType,
+      i18n,
+      isMe,
       name,
       phoneNumber,
       profileName,
+      sharedGroupNames,
       title,
-      conversationType,
-      i18n,
     } = this.props;
 
     if (conversationType !== 'group') {
@@ -42,14 +50,17 @@ export class TypingBubble extends React.PureComponent<Props> {
       <div className="module-message__author-avatar-container">
         <div className="module-message__author-avatar">
           <Avatar
+            acceptedMessageRequest={acceptedMessageRequest}
             avatarPath={avatarPath}
             color={color}
             conversationType="direct"
             i18n={i18n}
+            isMe={isMe}
             name={name}
             phoneNumber={phoneNumber}
             profileName={profileName}
             title={title}
+            sharedGroupNames={sharedGroupNames}
             size={28}
           />
         </div>

ts/components/conversation/_contactUtil.tsx

@@ -1,10 +1,10 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
 import classNames from 'classnames';
 
-import { Avatar } from '../Avatar';
+import { Avatar, AvatarBlur } from '../Avatar';
 import { Spinner } from '../Spinner';
 
 import { LocalizerType } from '../../types/Util';
@@ -45,11 +45,15 @@ export function renderAvatar({
 
   return (
     <Avatar
+      acceptedMessageRequest={false}
       avatarPath={avatarPath}
+      blur={AvatarBlur.NoBlur}
       color="grey"
       conversationType="direct"
       i18n={i18n}
+      isMe
       title={title}
+      sharedGroupNames={[]}
       size={size}
     />
   );

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx

@@ -156,10 +156,12 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
                 color={contact.color}
                 firstName={contact.firstName}
                 i18n={i18n}
+                isMe={contact.isMe}
                 id={contact.id}
                 name={contact.name}
                 phoneNumber={contact.phoneNumber}
                 profileName={contact.profileName}
+                sharedGroupNames={contact.sharedGroupNames}
                 title={contact.title}
                 onClickRemove={() => {
                   removeSelectedContact(contact.id);

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -20,13 +20,13 @@ const story = storiesOf(
   module
 );
 
-const conversation: ConversationType = {
+const conversation: ConversationType = getDefaultConversation({
   id: '',
   lastUpdated: 0,
-  markedUnread: false,
   title: 'Some Conversation',
   type: 'group',
-};
+  sharedGroupNames: [],
+});
 
 const createProps = (hasGroupLink = false): Props => ({
   addMembers: async () => {

ts/components/conversation/conversation-details/ConversationDetailsHeader.stories.tsx

@@ -7,6 +7,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { number, text } from '@storybook/addon-knobs';
 
+import { getDefaultConversation } from '../../../test-both/helpers/getDefaultConversation';
 import { setup as setupI18n } from '../../../../js/modules/i18n';
 import enMessages from '../../../../_locales/en/messages.json';
 import { ConversationType } from '../../../state/ducks/conversations';
@@ -20,14 +21,14 @@ const story = storiesOf(
   module
 );
 
-const createConversation = (): ConversationType => ({
-  id: '',
-  markedUnread: false,
-  type: 'group',
-  lastUpdated: 0,
-  title: text('conversation title', 'Some Conversation'),
-  memberships: new Array(number('conversation members length', 0)),
-});
+const createConversation = (): ConversationType =>
+  getDefaultConversation({
+    id: '',
+    type: 'group',
+    lastUpdated: 0,
+    title: text('conversation title', 'Some Conversation'),
+    memberships: new Array(number('conversation members length', 0)),
+  });
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   conversation: createConversation(),

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -32,6 +32,7 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
         i18n={i18n}
         size={80}
         {...conversation}
+        sharedGroupNames={[]}
       />
       <div>
         <div className={bem('title')}>{conversation.title}</div>

ts/components/conversation/conversation-details/GroupLinkManagement.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -35,20 +35,20 @@ function getConversation(
   groupLink?: string,
   accessControlAddFromInviteLink?: number
 ): ConversationType {
-  return {
+  return getDefaultConversation({
     id: '',
     lastUpdated: 0,
-    markedUnread: false,
     memberships: Array(32).fill({ member: getDefaultConversation({}) }),
     pendingMemberships: Array(16).fill({ member: getDefaultConversation({}) }),
     title: 'Some Conversation',
     type: 'group',
+    sharedGroupNames: [],
     groupLink,
     accessControlAddFromInviteLink:
       accessControlAddFromInviteLink !== undefined
         ? accessControlAddFromInviteLink
         : AccessEnum.UNSATISFIABLE,
-  };
+  });
 }
 
 const createProps = (

ts/components/conversation/conversation-details/GroupV2Permissions.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -19,15 +19,15 @@ const story = storiesOf(
   module
 );
 
-const conversation: ConversationType = {
+const conversation: ConversationType = getDefaultConversation({
   id: '',
   lastUpdated: 0,
-  markedUnread: false,
   memberships: Array(32).fill({ member: getDefaultConversation({}) }),
   pendingMemberships: Array(16).fill({ member: getDefaultConversation({}) }),
   title: 'Some Conversation',
   type: 'group',
-};
+  sharedGroupNames: [],
+});
 
 class AccessEnum {
   static ANY = 0;

ts/components/conversation/conversation-details/PendingInvites.stories.tsx

@@ -27,13 +27,16 @@ const sortedGroupMembers = Array.from(Array(32)).map((_, i) =>
 );
 
 const conversation: ConversationType = {
+  acceptedMessageRequest: true,
   areWeAdmin: true,
   id: '',
   lastUpdated: 0,
   markedUnread: false,
+  isMe: false,
   sortedGroupMembers,
   title: 'Some Conversation',
   type: 'group',
+  sharedGroupNames: [],
 };
 
 const createProps = (): PropsType => ({