From 89e25fb7e39e3960894ca345933ab9e602a163a1 Mon Sep 17 00:00:00 2001
From: Alvaro <110414366+alvaro-signal@users.noreply.github.com>
Date: Thu, 6 Oct 2022 09:18:48 -0600
Subject: [PATCH] Clicking a group in groups-in-common takes you to that
 conversation

---
 .../ConversationDetails.stories.tsx                 |  1 +
 .../conversation-details/ConversationDetails.tsx    |  8 +++++++-
 .../ConversationDetailsGroups.tsx                   | 13 ++++++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/ts/components/conversation/conversation-details/ConversationDetails.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetails.stories.tsx
index 4d00cdfa1..dc6f74ba9 100644
--- a/ts/components/conversation/conversation-details/ConversationDetails.stories.tsx
+++ b/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 () => {
diff --git a/ts/components/conversation/conversation-details/ConversationDetails.tsx b/ts/components/conversation/conversation-details/ConversationDetails.tsx
index f8e31a96e..927a794dc 100644
--- a/ts/components/conversation/conversation-details/ConversationDetails.tsx
+++ b/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}
         />
       )}
 
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx b/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx
index 0b73826f0..ee1be5a44 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx
+++ b/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"