Migration: Use pendingMember roles, better 'you were invited'

ts/components/GroupV1MigrationDialog.stories.tsx

@@ -36,6 +36,10 @@ function booleanOr(value: boolean | undefined, defaultValue: boolean): boolean {
 }
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  areWeInvited: boolean(
+    'areWeInvited',
+    booleanOr(overrideProps.areWeInvited, false)
+  ),
   droppedMembers: overrideProps.droppedMembers || [contact1],
   hasMigrated: boolean(
     'hasMigrated',
@@ -63,6 +67,17 @@ stories.add('Migrated, basic', () => {
   );
 });
 
+stories.add('Migrated, you are invited', () => {
+  return (
+    <GroupV1MigrationDialog
+      {...createProps({
+        hasMigrated: true,
+        areWeInvited: true,
+      })}
+    />
+  );
+});
+
 stories.add('Not yet migrated, multiple dropped and invited members', () => {
   return (
     <GroupV1MigrationDialog

ts/components/GroupV1MigrationDialog.tsx

@@ -16,6 +16,7 @@ export type ActionSpec = {
 type CallbackType = () => unknown;
 
 export type DataPropsType = {
+  readonly areWeInvited: boolean;
   readonly droppedMembers: Array<ConversationType>;
   readonly hasMigrated: boolean;
   readonly invitedMembers: Array<ConversationType>;
@@ -37,6 +38,7 @@ function focusRef(el: HTMLElement | null) {
 
 export const GroupV1MigrationDialog = React.memo((props: PropsType) => {
   const {
+    areWeInvited,
     droppedMembers,
     hasMigrated,
     i18n,
@@ -76,12 +78,23 @@ export const GroupV1MigrationDialog = React.memo((props: PropsType) => {
             {keepHistory}
           </div>
         </div>
-        {renderMembers(
-          invitedMembers,
-          'GroupV1--Migration--info--invited',
-          i18n
+        {areWeInvited ? (
+          <div className="module-group-v2-migration-dialog__item">
+            <div className="module-group-v2-migration-dialog__item__bullet" />
+            <div className="module-group-v2-migration-dialog__item__content">
+              {i18n('GroupV1--Migration--info--invited--you')}
+            </div>
+          </div>
+        ) : (
+          <>
+            {renderMembers(
+              invitedMembers,
+              'GroupV1--Migration--info--invited',
+              i18n
+            )}
+            {renderMembers(droppedMembers, droppedMembersKey, i18n)}
+          </>
         )}
-        {renderMembers(droppedMembers, droppedMembersKey, i18n)}
       </div>
       {renderButtons(hasMigrated, onClose, migrate, i18n)}
     </div>

ts/components/conversation/GroupV1Migration.stories.tsx

@@ -4,6 +4,8 @@
 /* eslint-disable-next-line max-classes-per-file */
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
+import { isBoolean } from 'lodash';
+import { boolean } from '@storybook/addon-knobs';
 
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
@@ -30,6 +32,10 @@ const contact2 = {
 };
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  areWeInvited: boolean(
+    'areWeInvited',
+    isBoolean(overrideProps.areWeInvited) ? overrideProps.areWeInvited : false
+  ),
   droppedMembers: overrideProps.droppedMembers || [contact1],
   i18n,
   invitedMembers: overrideProps.invitedMembers || [contact2],
@@ -37,6 +43,14 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
 
 const stories = storiesOf('Components/Conversation/GroupV1Migration', module);
 
+stories.add('You were invited', () => (
+  <GroupV1Migration
+    {...createProps({
+      areWeInvited: true,
+    })}
+  />
+));
+
 stories.add('Single dropped and single invited member', () => (
   <GroupV1Migration {...createProps()} />
 ));

ts/components/conversation/GroupV1Migration.tsx

@@ -11,6 +11,7 @@ import { ModalHost } from '../ModalHost';
 import { GroupV1MigrationDialog } from '../GroupV1MigrationDialog';
 
 export type PropsDataType = {
+  areWeInvited: boolean;
   droppedMembers: Array<ConversationType>;
   invitedMembers: Array<ConversationType>;
 };
@@ -22,7 +23,7 @@ export type PropsHousekeepingType = {
 export type PropsType = PropsDataType & PropsHousekeepingType;
 
 export function GroupV1Migration(props: PropsType): React.ReactElement {
-  const { droppedMembers, i18n, invitedMembers } = props;
+  const { areWeInvited, droppedMembers, i18n, invitedMembers } = props;
   const [showingDialog, setShowingDialog] = React.useState(false);
 
   const showDialog = React.useCallback(() => {
@@ -39,8 +40,16 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
       <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')}
+      {areWeInvited ? (
+        <div className="module-group-v1-migration--text">
+          {i18n('GroupV1--Migration--invited--you')}
+        </div>
+      ) : (
+        <>
+          {renderUsers(invitedMembers, i18n, 'GroupV1--Migration--invited')}
+          {renderUsers(droppedMembers, i18n, 'GroupV1--Migration--removed')}
+        </>
+      )}
       <button
         type="button"
         className="module-group-v1-migration--button"
@@ -51,6 +60,7 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
       {showingDialog ? (
         <ModalHost onClose={dismissDialog}>
           <GroupV1MigrationDialog
+            areWeInvited
             droppedMembers={droppedMembers}
             hasMigrated
             i18n={i18n}