Update shared groups when opening dialog

ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx

@@ -31,6 +31,7 @@ const getCommonProps = () => ({
   onClose: action('onClose'),
   showContactModal: action('showContactModal'),
   toggleSignalConnectionsModal: action('toggleSignalConnectionsModal'),
+  updateSharedGroups: action('updateSharedGroups'),
   removeMember: action('removeMember'),
   theme: ThemeType.light,
 });

ts/components/conversation/ContactSpoofingReviewDialog.tsx

@@ -54,6 +54,7 @@ export type PropsType = {
   blockConversation: (conversationId: string) => unknown;
   deleteConversation: (conversationId: string) => unknown;
   toggleSignalConnectionsModal: () => void;
+  updateSharedGroups: (conversationId: string) => void;
   getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   onClose: () => void;
@@ -79,6 +80,7 @@ export function ContactSpoofingReviewDialog(props: PropsType): JSX.Element {
     conversationId,
     deleteConversation,
     toggleSignalConnectionsModal,
+    updateSharedGroups,
     getPreferredBadge,
     i18n,
     onClose,
@@ -199,6 +201,7 @@ export function ContactSpoofingReviewDialog(props: PropsType): JSX.Element {
             conversation={possiblyUnsafe.conversation}
             getPreferredBadge={getPreferredBadge}
             toggleSignalConnectionsModal={toggleSignalConnectionsModal}
+            updateSharedGroups={updateSharedGroups}
             i18n={i18n}
             theme={theme}
             isSignalConnection={possiblyUnsafe.isSignalConnection}
@@ -235,6 +238,7 @@ export function ContactSpoofingReviewDialog(props: PropsType): JSX.Element {
             conversation={safe.conversation}
             getPreferredBadge={getPreferredBadge}
             toggleSignalConnectionsModal={toggleSignalConnectionsModal}
+            updateSharedGroups={updateSharedGroups}
             i18n={i18n}
             onClick={() => {
               showContactModal(safe.conversation.id);
@@ -328,6 +332,7 @@ export function ContactSpoofingReviewDialog(props: PropsType): JSX.Element {
                       toggleSignalConnectionsModal={
                         toggleSignalConnectionsModal
                       }
+                      updateSharedGroups={updateSharedGroups}
                       getPreferredBadge={getPreferredBadge}
                       i18n={i18n}
                       theme={theme}

ts/components/conversation/ContactSpoofingReviewDialogPerson.stories.tsx

@@ -26,6 +26,7 @@ export default {
     i18n,
     onClick: action('onClick'),
     toggleSignalConnectionsModal: action('toggleSignalConnectionsModal'),
+    updateSharedGroups: action('updateSharedGroups'),
     getPreferredBadge: () => undefined,
     conversation: getDefaultConversation(),
     theme: ThemeType.light,

ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactNode } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import type { ConversationType } from '../../state/ducks/conversations';
 import type { LocalizerType, ThemeType } from '../../types/Util';
@@ -22,6 +22,7 @@ export type PropsType = Readonly<{
   i18n: LocalizerType;
   onClick?: () => void;
   toggleSignalConnectionsModal: () => void;
+  updateSharedGroups: (conversationId: string) => void;
   theme: ThemeType;
   oldName: string | undefined;
   isSignalConnection: boolean;
@@ -34,6 +35,7 @@ export function ContactSpoofingReviewDialogPerson({
   i18n,
   onClick,
   toggleSignalConnectionsModal,
+  updateSharedGroups,
   theme,
   oldName,
   isSignalConnection,
@@ -43,6 +45,11 @@ export function ContactSpoofingReviewDialogPerson({
     '<ContactSpoofingReviewDialogPerson> expected a direct conversation'
   );
 
+  useEffect(() => {
+    // Kick off the expensive hydration of the current sharedGroupNames
+    updateSharedGroups(conversation.id);
+  }, [conversation.id, updateSharedGroups]);
+
   const newName = conversation.profileName || conversation.title;
 
   let callout: JSX.Element | undefined;

ts/state/smart/ContactSpoofingReviewDialog.tsx

@@ -48,6 +48,7 @@ export function SmartContactSpoofingReviewDialog(
     blockConversation,
     deleteConversation,
     removeMember,
+    updateSharedGroups,
   } = useConversationsActions();
   const { showContactModal, toggleSignalConnectionsModal } =
     useGlobalModalActions();
@@ -79,6 +80,7 @@ export function SmartContactSpoofingReviewDialog(
     getPreferredBadge,
     i18n,
     removeMember,
+    updateSharedGroups,
     showContactModal,
     toggleSignalConnectionsModal,
     theme,