Allow viewing contact details from group change messages

stylesheets/components/ContactName.scss

@@ -1,6 +1,22 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+button.module-contact-name {
+  @include button-reset;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &:focus {
+    @include keyboard-mode {
+      outline: auto;
+      text-decoration: none;
+    }
+  }
+}
+
 .module-contact-name {
   &--000 {
     color: #d00b0b;

ts/components/conversation/ContactName.tsx

@@ -16,6 +16,7 @@ export type PropsType = {
   module?: string;
   preferFirstName?: boolean;
   title: string;
+  onClick?: VoidFunction;
 };
 
 export function ContactName({
@@ -26,6 +27,7 @@ export function ContactName({
   module,
   preferFirstName,
   title,
+  onClick,
 }: PropsType): JSX.Element {
   const getClassName = getClassNamesFor('module-contact-name', module);
 
@@ -35,19 +37,20 @@ export function ContactName({
   } else {
     text = title || '';
   }
-
+  const WrappingElement = onClick ? 'button' : 'span';
   return (
-    <span
+    <WrappingElement
       className={classNames(
         getClassName(''),
         contactNameColor ? getClassName(`--${contactNameColor}`) : null
       )}
       dir="auto"
+      onClick={onClick}
     >
       <Emojify text={text} />
       {(isSignalConversation || isMe) && (
         <span className="ContactModal__official-badge" />
       )}
-    </span>
+    </WrappingElement>
   );
 }

ts/state/smart/ContactName.tsx

@@ -9,29 +9,38 @@ import { ContactName } from '../../components/conversation/ContactName';
 
 import { getIntl } from '../selectors/user';
 import type { GetConversationByIdType } from '../selectors/conversations';
-import { getConversationSelector } from '../selectors/conversations';
+import {
+  getConversationSelector,
+  getSelectedConversationId,
+} from '../selectors/conversations';
 
 import type { LocalizerType } from '../../types/Util';
+import { useGlobalModalActions } from '../ducks/globalModals';
 
 type ExternalProps = {
-  conversationId: string;
+  contactId: string;
 };
 
 export function SmartContactName(props: ExternalProps): JSX.Element {
-  const { conversationId } = props;
+  const { contactId } = props;
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
   const getConversation = useSelector<StateType, GetConversationByIdType>(
     getConversationSelector
   );
 
-  const conversation = getConversation(conversationId) || {
+  const contact = getConversation(contactId) || {
     title: i18n('icu:unknownContact'),
   };
+  const currentConversationId = useSelector(getSelectedConversationId);
+  const currentConversation = getConversation(currentConversationId);
+
+  const { showContactModal } = useGlobalModalActions();
 
   return (
     <ContactName
-      firstName={conversation.firstName}
-      title={conversation.title}
+      firstName={contact.firstName}
+      title={contact.title}
+      onClick={() => showContactModal(contact.id, currentConversation.id)}
     />
   );
 }

ts/state/smart/TimelineItem.tsx

@@ -48,8 +48,8 @@ type ExternalProps = {
   unreadIndicatorPlacement: undefined | UnreadIndicatorPlacement;
 };
 
-function renderContact(conversationId: string): JSX.Element {
-  return <SmartContactName conversationId={conversationId} />;
+function renderContact(contactId: string): JSX.Element {
+  return <SmartContactName contactId={contactId} />;
 }
 
 function renderUniversalTimerNotification(): JSX.Element {