From d66ce9ad6a263e020f1c6e8b9f0a621807da010e Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Fri, 28 Mar 2025 10:07:42 -0700
Subject: [PATCH] Fix group link wrapping in convo details

---
 _locales/en/messages.json                     |  4 ++++
 .../components/ConversationDetails.scss       |  7 +++++++
 .../GroupLinkManagement.tsx                   | 20 +++++++++++++++++--
 .../conversation-details/PanelRow.tsx         |  2 +-
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 02a4eab02381..6a200e83235f 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -5659,6 +5659,10 @@
     "messageformat": "Require an admin to approve new members joining via the group link",
     "description": "Description for the require new member admin approval select area"
   },
+  "icu:GroupLinkManagement__CopyGroupLinkButtonLabel": {
+    "messageformat": "Copy signal.group link to keyboard",
+    "description": "GroupLinkManagement > Header > Group link text > Button (looks like normal text) > Accessibility label"
+  },
   "icu:PendingInvites--tab-requests": {
     "messageformat": "Requests ({count, number})",
     "description": "Label for the tab to view pending requests"
diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss
index 4e1b7d3fb15c..7708ac690dae 100644
--- a/stylesheets/components/ConversationDetails.scss
+++ b/stylesheets/components/ConversationDetails.scss
@@ -377,6 +377,13 @@
       color: light-dark(variables.$color-gray-60, variables.$color-gray-25);
     }
 
+    &__info .ConversationDetails__panel-row__group-link {
+      @include mixins.button-reset();
+      & {
+        word-break: break-all;
+      }
+    }
+
     &__right {
       position: relative;
       color: variables.$color-gray-45;
diff --git a/ts/components/conversation/conversation-details/GroupLinkManagement.tsx b/ts/components/conversation/conversation-details/GroupLinkManagement.tsx
index 358e7400e8b9..e931c12afafe 100644
--- a/ts/components/conversation/conversation-details/GroupLinkManagement.tsx
+++ b/ts/components/conversation/conversation-details/GroupLinkManagement.tsx
@@ -14,6 +14,7 @@ import { Select } from '../../Select';
 import { SignalService as Proto } from '../../../protobuf';
 
 import { copyGroupLink } from '../../../util/copyLinksWithToast';
+import { drop } from '../../../util/drop';
 import { useDelayedRestoreFocus } from '../../../hooks/useRestoreFocus';
 import { useUniqueId } from '../../../hooks/useUniqueId';
 
@@ -67,7 +68,22 @@ export function GroupLinkManagement({
     conversation.groupLink &&
     conversation.accessControlAddFromInviteLink !==
       AccessControlEnum.UNSATISFIABLE;
-  const groupLinkInfo = hasGroupLink ? conversation.groupLink : '';
+
+  let groupLinkInfo: JSX.Element | undefined;
+  if (hasGroupLink) {
+    groupLinkInfo = (
+      <button
+        type="button"
+        className="ConversationDetails__panel-row__group-link"
+        aria-label={i18n('icu:GroupLinkManagement__CopyGroupLinkButtonLabel')}
+        onClick={() => {
+          drop(copyGroupLink(conversation.groupLink ?? ''));
+        }}
+      >
+        {conversation.groupLink}
+      </button>
+    );
+  }
 
   const [hasGenerateNewLinkDialog, setHasGenerateNewLinkDialog] =
     useState(false);
@@ -138,7 +154,7 @@ export function GroupLinkManagement({
               ref={!isAdmin ? focusRef : undefined}
               onClick={() => {
                 if (conversation.groupLink) {
-                  void copyGroupLink(conversation.groupLink);
+                  drop(copyGroupLink(conversation.groupLink));
                 }
               }}
             />
diff --git a/ts/components/conversation/conversation-details/PanelRow.tsx b/ts/components/conversation/conversation-details/PanelRow.tsx
index 27aad58b91e0..ce6d31e887ac 100644
--- a/ts/components/conversation/conversation-details/PanelRow.tsx
+++ b/ts/components/conversation/conversation-details/PanelRow.tsx
@@ -11,7 +11,7 @@ export type Props = {
   disabled?: boolean;
   icon?: React.ReactNode;
   label: string | React.ReactNode;
-  info?: string;
+  info?: string | React.ReactNode;
   right?: string | React.ReactNode;
   actions?: React.ReactNode;
   onClick?: () => void;