Moves startGV2Migration to redux

ts/components/CompositionArea.stories.tsx

@@ -105,7 +105,7 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   ),
   title: '',
   // GroupV1 Disabled Actions
-  onStartGroupMigration: action('onStartGroupMigration'),
+  showGV2MigrationDialog: action('showGV2MigrationDialog'),
   // GroupV2
   announcementsOnly: boolean(
     'announcementsOnly',

ts/components/CompositionArea.tsx

@@ -162,7 +162,7 @@ export type Props = Pick<
     | 'clearShowPickerHint'
   > &
   MessageRequestActionsProps &
-  Pick<GroupV1DisabledActionsPropsType, 'onStartGroupMigration'> &
+  Pick<GroupV1DisabledActionsPropsType, 'showGV2MigrationDialog'> &
   Pick<GroupV2PendingApprovalActionsPropsType, 'onCancelJoinRequest'> &
   OwnProps;
 
@@ -244,7 +244,7 @@ export function CompositionArea({
   title,
   // GroupV1 Disabled Actions
   isGroupV1AndDisabled,
-  onStartGroupMigration,
+  showGV2MigrationDialog,
   // GroupV2
   announcementsOnly,
   areWeAdmin,
@@ -561,8 +561,9 @@ export function CompositionArea({
   if (!left && isGroupV1AndDisabled) {
     return (
       <GroupV1DisabledActions
+        conversationId={conversationId}
         i18n={i18n}
-        onStartGroupMigration={onStartGroupMigration}
+        showGV2MigrationDialog={showGV2MigrationDialog}
       />
     );
   }

ts/components/GroupV1MigrationDialog.stories.tsx

@@ -35,6 +35,7 @@ const contact3: ConversationType = getDefaultConversation({
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   areWeInvited: Boolean(overrideProps.areWeInvited),
+  conversationId: '123',
   droppedMembers: overrideProps.droppedMembers || [contact3, contact1],
   getPreferredBadge: () => undefined,
   hasMigrated: Boolean(overrideProps.hasMigrated),

ts/components/GroupV1MigrationDialog.tsx

@@ -8,39 +8,62 @@ import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import { GroupDialog } from './GroupDialog';
 import { sortByTitle } from '../util/sortByTitle';
 
-type CallbackType = () => unknown;
-
 export type DataPropsType = {
+  conversationId: string;
   readonly areWeInvited: boolean;
   readonly droppedMembers: Array<ConversationType>;
   readonly hasMigrated: boolean;
   readonly invitedMembers: Array<ConversationType>;
-  readonly migrate: CallbackType;
-  readonly onClose: CallbackType;
-};
-
-export type HousekeepingPropsType = {
   readonly getPreferredBadge: PreferredBadgeSelectorType;
   readonly i18n: LocalizerType;
   readonly theme: ThemeType;
 };
 
-export type PropsType = DataPropsType & HousekeepingPropsType;
+type ActionsPropsType =
+  | {
+      initiateMigrationToGroupV2: (conversationId: string) => unknown;
+      closeGV2MigrationDialog: () => unknown;
+    }
+  | {
+      readonly migrate: () => unknown;
+      readonly onClose: () => unknown;
+    };
+
+export type PropsType = DataPropsType & ActionsPropsType;
 
 export const GroupV1MigrationDialog: React.FunctionComponent<PropsType> =
   React.memo(function GroupV1MigrationDialogInner(props: PropsType) {
     const {
       areWeInvited,
+      conversationId,
       droppedMembers,
       getPreferredBadge,
       hasMigrated,
       i18n,
       invitedMembers,
-      migrate,
-      onClose,
       theme,
     } = props;
 
+    let migrateHandler;
+    if ('migrate' in props) {
+      migrateHandler = props.migrate;
+    } else if ('initiateMigrationToGroupV2' in props) {
+      migrateHandler = () => props.initiateMigrationToGroupV2(conversationId);
+    } else {
+      throw new Error(
+        'GroupV1MigrationDialog: No conversationId or migration function'
+      );
+    }
+
+    let closeHandler;
+    if ('onClose' in props) {
+      closeHandler = props.onClose;
+    } else if ('closeGV2MigrationDialog' in props) {
+      closeHandler = props.closeGV2MigrationDialog;
+    } else {
+      throw new Error('GroupV1MigrationDialog: No close function provided');
+    }
+
     const title = hasMigrated
       ? i18n('GroupV1--Migration--info--title')
       : i18n('GroupV1--Migration--migrate--title');
@@ -60,13 +83,13 @@ export const GroupV1MigrationDialog: React.FunctionComponent<PropsType> =
         };
     if (hasMigrated) {
       primaryButtonText = i18n('Confirmation--confirm');
-      onClickPrimaryButton = onClose;
+      onClickPrimaryButton = closeHandler;
     } else {
       primaryButtonText = i18n('GroupV1--Migration--migrate');
-      onClickPrimaryButton = migrate;
+      onClickPrimaryButton = migrateHandler;
       secondaryButtonProps = {
         secondaryButtonText: i18n('cancel'),
-        onClickSecondaryButton: onClose,
+        onClickSecondaryButton: closeHandler,
       };
     }
 
@@ -74,7 +97,7 @@ export const GroupV1MigrationDialog: React.FunctionComponent<PropsType> =
       <GroupDialog
         i18n={i18n}
         onClickPrimaryButton={onClickPrimaryButton}
-        onClose={onClose}
+        onClose={closeHandler}
         primaryButtonText={primaryButtonText}
         title={title}
         {...secondaryButtonProps}

ts/components/conversation/GroupV1DisabledActions.stories.tsx

@@ -12,8 +12,9 @@ import enMessages from '../../../_locales/en/messages.json';
 const i18n = setupI18n('en', enMessages);
 
 const createProps = (): GroupV1DisabledActionsPropsType => ({
+  conversationId: '123',
   i18n,
-  onStartGroupMigration: action('onStartGroupMigration'),
+  showGV2MigrationDialog: action('showGV2MigrationDialog'),
 });
 
 export default {

ts/components/conversation/GroupV1DisabledActions.tsx

@@ -6,13 +6,15 @@ import { Intl } from '../Intl';
 import type { LocalizerType } from '../../types/Util';
 
 export type PropsType = {
+  conversationId: string;
   i18n: LocalizerType;
-  onStartGroupMigration: () => unknown;
+  showGV2MigrationDialog: (id: string) => unknown;
 };
 
 export function GroupV1DisabledActions({
+  conversationId,
   i18n,
-  onStartGroupMigration,
+  showGV2MigrationDialog,
 }: PropsType): JSX.Element {
   return (
     <div className="module-group-v1-disabled-actions">
@@ -37,7 +39,7 @@ export function GroupV1DisabledActions({
       <div className="module-group-v1-disabled-actions__buttons">
         <button
           type="button"
-          onClick={onStartGroupMigration}
+          onClick={() => showGV2MigrationDialog(conversationId)}
           tabIndex={0}
           className="module-group-v1-disabled-actions__buttons__button"
         >

ts/components/conversation/GroupV1Migration.stories.tsx

@@ -31,6 +31,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
     'areWeInvited',
     isBoolean(overrideProps.areWeInvited) ? overrideProps.areWeInvited : false
   ),
+  conversationId: '123',
   droppedMembers: overrideProps.droppedMembers || [contact1],
   getPreferredBadge: () => undefined,
   i18n,

ts/components/conversation/GroupV1Migration.tsx

@@ -15,6 +15,7 @@ import * as log from '../../logging/log';
 
 export type PropsDataType = {
   areWeInvited: boolean;
+  conversationId: string;
   droppedMembers: Array<ConversationType>;
   invitedMembers: Array<ConversationType>;
 };
@@ -30,6 +31,7 @@ export type PropsType = PropsDataType & PropsHousekeepingType;
 export function GroupV1Migration(props: PropsType): React.ReactElement {
   const {
     areWeInvited,
+    conversationId,
     droppedMembers,
     getPreferredBadge,
     i18n,
@@ -86,6 +88,7 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
       {showingDialog ? (
         <GroupV1MigrationDialog
           areWeInvited={areWeInvited}
+          conversationId={conversationId}
           droppedMembers={droppedMembers}
           getPreferredBadge={getPreferredBadge}
           hasMigrated