Support for GV1 -> GV2 migration

ts/components/conversation/GroupV1Migration.stories.tsx

@@ -0,0 +1,78 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+/* eslint-disable-next-line max-classes-per-file */
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+
+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 = {
+  title: 'Alice',
+  number: '+1 (300) 555-000',
+  id: 'guid-1',
+  markedUnread: false,
+  type: 'direct' as const,
+  lastUpdated: Date.now(),
+};
+
+const contact2 = {
+  title: 'Bob',
+  number: '+1 (300) 555-000',
+  id: 'guid-2',
+  markedUnread: false,
+  type: 'direct' as const,
+  lastUpdated: Date.now(),
+};
+
+const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  droppedMembers: overrideProps.droppedMembers || [contact1],
+  i18n,
+  invitedMembers: overrideProps.invitedMembers || [contact2],
+});
+
+const stories = storiesOf('Components/Conversation/GroupV1Migration', module);
+
+stories.add('Single dropped and single invited member', () => (
+  <GroupV1Migration {...createProps()} />
+));
+
+stories.add('Multiple dropped and invited members', () => (
+  <GroupV1Migration
+    {...createProps({
+      invitedMembers: [contact1, contact2],
+      droppedMembers: [contact1, contact2],
+    })}
+  />
+));
+
+stories.add('Just invited members', () => (
+  <GroupV1Migration
+    {...createProps({
+      invitedMembers: [contact1, contact1, contact2, contact2],
+      droppedMembers: [],
+    })}
+  />
+));
+
+stories.add('Just dropped members', () => (
+  <GroupV1Migration
+    {...createProps({
+      invitedMembers: [],
+      droppedMembers: [contact1, contact1, contact2, contact2],
+    })}
+  />
+));
+
+stories.add('No dropped or invited members', () => (
+  <GroupV1Migration
+    {...createProps({
+      invitedMembers: [],
+      droppedMembers: [],
+    })}
+  />
+));

ts/components/conversation/GroupV1Migration.tsx

@@ -0,0 +1,100 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+
+import { LocalizerType } from '../../types/Util';
+import { ConversationType } from '../../state/ducks/conversations';
+import { Intl } from '../Intl';
+import { ContactName } from './ContactName';
+import { ModalHost } from '../ModalHost';
+import { GroupV1MigrationDialog } from '../GroupV1MigrationDialog';
+
+export type PropsDataType = {
+  droppedMembers: Array<ConversationType>;
+  invitedMembers: Array<ConversationType>;
+};
+
+export type PropsHousekeepingType = {
+  i18n: LocalizerType;
+};
+
+export type PropsType = PropsDataType & PropsHousekeepingType;
+
+export function GroupV1Migration(props: PropsType): React.ReactElement {
+  const { droppedMembers, i18n, invitedMembers } = props;
+  const [showingDialog, setShowingDialog] = React.useState(false);
+
+  const showDialog = React.useCallback(() => {
+    setShowingDialog(true);
+  }, [setShowingDialog]);
+
+  const dismissDialog = React.useCallback(() => {
+    setShowingDialog(false);
+  }, [setShowingDialog]);
+
+  return (
+    <div className="module-group-v1-migration">
+      <div className="module-group-v1-migration--icon" />
+      <div className="module-group-v1-migration--text">
+        {i18n('GroupV1--Migration--was-upgraded')}
+      </div>
+      {renderUsers(invitedMembers, i18n, 'GroupV1--Migration--invited')}
+      {renderUsers(droppedMembers, i18n, 'GroupV1--Migration--removed')}
+      <button
+        type="button"
+        className="module-group-v1-migration--button"
+        onClick={showDialog}
+      >
+        {i18n('GroupV1--Migration--learn-more')}
+      </button>
+      {showingDialog ? (
+        <ModalHost onClose={dismissDialog}>
+          <GroupV1MigrationDialog
+            droppedMembers={droppedMembers}
+            hasMigrated
+            i18n={i18n}
+            invitedMembers={invitedMembers}
+            learnMore={() =>
+              window.log.warn('GroupV1Migration: Modal called learnMore()')
+            }
+            migrate={() =>
+              window.log.warn('GroupV1Migration: Modal called migrate()')
+            }
+            onClose={dismissDialog}
+          />
+        </ModalHost>
+      ) : null}
+    </div>
+  );
+}
+
+function renderUsers(
+  members: Array<ConversationType>,
+  i18n: LocalizerType,
+  keyPrefix: string
+): React.ReactElement | null {
+  if (!members || members.length === 0) {
+    return null;
+  }
+
+  const className = 'module-group-v1-migration--text';
+
+  if (members.length === 1) {
+    return (
+      <div className={className}>
+        <Intl
+          i18n={i18n}
+          id={`${keyPrefix}--one`}
+          components={[<ContactName title={members[0].title} i18n={i18n} />]}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {i18n(`${keyPrefix}--many`, [members.length.toString()])}
+    </div>
+  );
+}

ts/components/conversation/TimelineItem.tsx

@@ -42,6 +42,10 @@ import {
   GroupV2Change,
   PropsDataType as GroupV2ChangeProps,
 } from './GroupV2Change';
+import {
+  GroupV1Migration,
+  PropsDataType as GroupV1MigrationProps,
+} from './GroupV1Migration';
 import { SmartContactRendererType } from '../../groupChange';
 import { ResetSessionNotification } from './ResetSessionNotification';
 import {
@@ -85,6 +89,10 @@ type GroupV2ChangeType = {
   type: 'groupV2Change';
   data: GroupV2ChangeProps;
 };
+type GroupV1MigrationType = {
+  type: 'groupV1Migration';
+  data: GroupV1MigrationProps;
+};
 type ResetSessionNotificationType = {
   type: 'resetSessionNotification';
   data: null;
@@ -97,6 +105,7 @@ type ProfileChangeNotificationType = {
 export type TimelineItemType =
   | CallHistoryType
   | GroupNotificationType
+  | GroupV1MigrationType
   | GroupV2ChangeType
   | LinkNotificationType
   | MessageType
@@ -187,6 +196,10 @@ export class TimelineItem extends React.PureComponent<PropsType> {
           i18n={i18n}
         />
       );
+    } else if (item.type === 'groupV1Migration') {
+      notification = (
+        <GroupV1Migration {...this.props} {...item.data} i18n={i18n} />
+      );
     } else if (item.type === 'resetSessionNotification') {
       notification = (
         <ResetSessionNotification {...this.props} {...item.data} i18n={i18n} />