Add badges to avatars in group dialogs

ts/components/conversation/GroupV1Migration.stories.tsx

@@ -12,6 +12,7 @@ import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
 import type { PropsType } from './GroupV1Migration';
 import { GroupV1Migration } from './GroupV1Migration';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -33,8 +34,10 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
     isBoolean(overrideProps.areWeInvited) ? overrideProps.areWeInvited : false
   ),
   droppedMembers: overrideProps.droppedMembers || [contact1],
+  getPreferredBadge: () => undefined,
   i18n,
   invitedMembers: overrideProps.invitedMembers || [contact2],
+  theme: ThemeType.light,
 });
 
 const stories = storiesOf('Components/Conversation/GroupV1Migration', module);

ts/components/conversation/GroupV1Migration.tsx

@@ -5,8 +5,9 @@ import * as React from 'react';
 
 import { Button, ButtonSize, ButtonVariant } from '../Button';
 import { SystemMessage } from './SystemMessage';
-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 { Intl } from '../Intl';
 import { ContactName } from './ContactName';
 import { GroupV1MigrationDialog } from '../GroupV1MigrationDialog';
@@ -19,13 +20,22 @@ export type PropsDataType = {
 };
 
 export type PropsHousekeepingType = {
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
+  theme: ThemeType;
 };
 
 export type PropsType = PropsDataType & PropsHousekeepingType;
 
 export function GroupV1Migration(props: PropsType): React.ReactElement {
-  const { areWeInvited, droppedMembers, i18n, invitedMembers } = props;
+  const {
+    areWeInvited,
+    droppedMembers,
+    getPreferredBadge,
+    i18n,
+    invitedMembers,
+    theme,
+  } = props;
   const [showingDialog, setShowingDialog] = React.useState(false);
 
   const showDialog = React.useCallback(() => {
@@ -77,11 +87,13 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
         <GroupV1MigrationDialog
           areWeInvited={areWeInvited}
           droppedMembers={droppedMembers}
+          getPreferredBadge={getPreferredBadge}
           hasMigrated
           i18n={i18n}
           invitedMembers={invitedMembers}
           migrate={() => log.warn('GroupV1Migration: Modal called migrate()')}
           onClose={dismissDialog}
+          theme={theme}
         />
       ) : null}
     </>

ts/components/conversation/Timeline.stories.tsx

@@ -457,8 +457,10 @@ const renderTypingBubble = () => (
   />
 );
 
-const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  getPreferredBadge: () => undefined,
   i18n,
+  theme: React.useContext(StorybookThemeContext),
 
   haveNewest: boolean('haveNewest', overrideProps.haveNewest !== false),
   haveOldest: boolean('haveOldest', overrideProps.haveOldest !== false),
@@ -494,13 +496,13 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
 });
 
 story.add('Oldest and Newest', () => {
-  const props = createProps();
+  const props = useProps();
 
   return <Timeline {...props} />;
 });
 
 story.add('With active message request', () => {
-  const props = createProps({
+  const props = useProps({
     isIncomingMessageRequest: true,
   });
 
@@ -508,7 +510,7 @@ story.add('With active message request', () => {
 });
 
 story.add('Without Newest Message', () => {
-  const props = createProps({
+  const props = useProps({
     haveNewest: false,
   });
 
@@ -516,7 +518,7 @@ story.add('Without Newest Message', () => {
 });
 
 story.add('Without newest message, active message request', () => {
-  const props = createProps({
+  const props = useProps({
     haveOldest: false,
     isIncomingMessageRequest: true,
   });
@@ -525,7 +527,7 @@ story.add('Without newest message, active message request', () => {
 });
 
 story.add('Without Oldest Message', () => {
-  const props = createProps({
+  const props = useProps({
     haveOldest: false,
     scrollToIndex: -1,
   });
@@ -534,7 +536,7 @@ story.add('Without Oldest Message', () => {
 });
 
 story.add('Empty (just hero)', () => {
-  const props = createProps({
+  const props = useProps({
     items: [],
   });
 
@@ -542,7 +544,7 @@ story.add('Empty (just hero)', () => {
 });
 
 story.add('Last Seen', () => {
-  const props = createProps({
+  const props = useProps({
     oldestUnreadIndex: 13,
     totalUnread: 2,
   });
@@ -551,7 +553,7 @@ story.add('Last Seen', () => {
 });
 
 story.add('Target Index to Top', () => {
-  const props = createProps({
+  const props = useProps({
     scrollToIndex: 0,
   });
 
@@ -559,7 +561,7 @@ story.add('Target Index to Top', () => {
 });
 
 story.add('Typing Indicator', () => {
-  const props = createProps({
+  const props = useProps({
     typingContactId: UUID.generate().toString(),
   });
 
@@ -567,7 +569,7 @@ story.add('Typing Indicator', () => {
 });
 
 story.add('With invited contacts for a newly-created group', () => {
-  const props = createProps({
+  const props = useProps({
     invitedContactsForNewlyCreatedGroup: [
       getDefaultConversation({
         id: 'abc123',
@@ -584,7 +586,7 @@ story.add('With invited contacts for a newly-created group', () => {
 });
 
 story.add('With "same name in direct conversation" warning', () => {
-  const props = createProps({
+  const props = useProps({
     warning: {
       type: ContactSpoofingType.DirectConversationWithSameTitle,
       safeConversation: getDefaultConversation(),
@@ -596,7 +598,7 @@ story.add('With "same name in direct conversation" warning', () => {
 });
 
 story.add('With "same name in group conversation" warning', () => {
-  const props = createProps({
+  const props = useProps({
     warning: {
       type: ContactSpoofingType.MultipleGroupMembersWithSameTitle,
       acknowledgedGroupNameCollisions: {},

ts/components/conversation/Timeline.tsx

@@ -17,8 +17,9 @@ import Measure from 'react-measure';
 
 import { ScrollDownButton } from './ScrollDownButton';
 
-import type { AssertProps, LocalizerType } from '../../types/Util';
+import type { AssertProps, LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 import { assert } from '../../util/assert';
 import { missingCaseError } from '../../util/missingCaseError';
 import { createRefMerger } from '../../util/refMerger';
@@ -102,7 +103,9 @@ type PropsHousekeepingType = {
   warning?: WarningType;
   contactSpoofingReview?: ContactSpoofingReviewPropType;
 
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
+  theme: ThemeType;
 
   renderItem: (props: {
     actionProps: PropsActionsType;
@@ -1312,6 +1315,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       clearInvitedUuidsForNewlyCreatedGroup,
       closeContactSpoofingReview,
       contactSpoofingReview,
+      getPreferredBadge,
       i18n,
       id,
       invitedContactsForNewlyCreatedGroup,
@@ -1325,6 +1329,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       removeMember,
       reviewGroupMemberNameCollision,
       reviewMessageRequestNameCollision,
+      theme,
     } = this.props;
     const {
       shouldShowScrollDownButton,
@@ -1561,8 +1566,10 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
         {Boolean(invitedContactsForNewlyCreatedGroup.length) && (
           <NewlyCreatedGroupInvitedContactsDialog
             contacts={invitedContactsForNewlyCreatedGroup}
+            getPreferredBadge={getPreferredBadge}
             i18n={i18n}
             onClose={clearInvitedUuidsForNewlyCreatedGroup}
+            theme={theme}
           />
         )}