Clicking a group in groups-in-common takes you to that conversation

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -78,6 +78,7 @@ const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
   showConversationNotificationsSettings: action(
     'showConversationNotificationsSettings'
   ),
+  showConversation: action('showConversation'),
   showPendingInvites: action('showPendingInvites'),
   showLightboxForMedia: action('showLightboxForMedia'),
   updateGroupAttributes: async () => {

ts/components/conversation/conversation-details/ConversationDetails.tsx

@@ -6,7 +6,10 @@ import React, { useState } from 'react';
 
 import { Button, ButtonIconType, ButtonVariant } from '../../Button';
 import { Tooltip } from '../../Tooltip';
-import type { ConversationType } from '../../../state/ducks/conversations';
+import type {
+  ConversationType,
+  ShowConversationType,
+} from '../../../state/ducks/conversations';
 import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges';
 import type { SmartChooseGroupMembersModalPropsType } from '../../../state/smart/ChooseGroupMembersModal';
 import type { SmartConfirmAdditionsModalPropsType } from '../../../state/smart/ConfirmAdditionsModal';
@@ -113,6 +116,7 @@ type ActionProps = {
   replaceAvatar: ReplaceAvatarActionType;
   saveAvatarToDisk: SaveAvatarToDiskActionType;
   showContactModal: (contactId: string, conversationId?: string) => void;
+  showConversation: ShowConversationType;
   toggleSafetyNumberModal: (conversationId: string) => unknown;
   searchInConversation: (id: string) => unknown;
   toggleAddUserToAnotherGroupModal: (contactId?: string) => void;
@@ -155,6 +159,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
   showChatColorEditor,
   showContactModal,
   showConversationNotificationsSettings,
+  showConversation,
   showGroupLinkManagement,
   showGroupV2Permissions,
   showLightboxForMedia,
@@ -530,6 +535,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
           i18n={i18n}
           groupsInCommon={groupsInCommon}
           toggleAddUserToAnotherGroupModal={toggleAddUserToAnotherGroupModal}
+          showConversation={showConversation}
         />
       )}
 

ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx

@@ -2,7 +2,10 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import type { ConversationType } from '../../../state/ducks/conversations';
+import type {
+  ConversationType,
+  ShowConversationType,
+} from '../../../state/ducks/conversations';
 import type { LocalizerType } from '../../../types/Util';
 import { Avatar } from '../../Avatar';
 import { ConversationDetailsIcon, IconType } from './ConversationDetailsIcon';
@@ -14,6 +17,7 @@ type Props = {
   i18n: LocalizerType;
   groupsInCommon: Array<ConversationType>;
   toggleAddUserToAnotherGroupModal: (contactId?: string) => void;
+  showConversation: ShowConversationType;
 };
 
 export const ConversationDetailsGroups = ({
@@ -21,6 +25,7 @@ export const ConversationDetailsGroups = ({
   i18n,
   groupsInCommon,
   toggleAddUserToAnotherGroupModal,
+  showConversation,
 }: Props): JSX.Element => {
   const [showAllGroups, setShowAllGroups] = React.useState(false);
 
@@ -44,6 +49,12 @@ export const ConversationDetailsGroups = ({
       {groupsInCommon.slice(0, groupsToShow).map(group => (
         <PanelRow
           key={group.id}
+          onClick={() =>
+            showConversation({
+              conversationId: group.id,
+              switchToAssociatedView: true,
+            })
+          }
           icon={
             <Avatar
               conversationType="group"