From 553ca9a98a2a736e4707b8637b413507926a7b4b Mon Sep 17 00:00:00 2001
From: Subbu Venkateswaran <svenkateswaran@atlassian.com>
Date: Tue, 17 Dec 2024 16:55:05 -0800
Subject: [PATCH] Minor UI copy changes for maintainer token role auth flow

---
 ui/src/components/AuthPage/index.tsx          | 38 +++++++++----------
 ui/src/components/AuthPage/styles.ts          |  5 ---
 ui/src/components/ConnectedPage/index.tsx     |  4 +-
 .../IncomingWebhookSectionMessage.tsx         |  9 ++++-
 4 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/ui/src/components/AuthPage/index.tsx b/ui/src/components/AuthPage/index.tsx
index 9b09168..2a6a239 100644
--- a/ui/src/components/AuthPage/index.tsx
+++ b/ui/src/components/AuthPage/index.tsx
@@ -21,14 +21,7 @@ import { AuthErrorTypes, ErrorTypes } from '../../resolverTypes';
 import { useAppContext } from '../../hooks/useAppContext';
 import { IncomingWebhookSectionMessage } from '../IncomingWebhookSectionMessage';
 import { GitLabRoles } from '../../types';
-import {
-  CopyIconWrapper,
-  FormWrapper,
-  ListItemContent,
-  ReloadButtonWrapper,
-  SectionMessageWrapper,
-  TokenRoleWrapper,
-} from './styles';
+import { CopyIconWrapper, FormWrapper, ReloadButtonWrapper, SectionMessageWrapper, TokenRoleWrapper } from './styles';
 
 const buildValidationMethod = (errorType: ErrorTypes) => {
   switch (errorType) {
@@ -260,6 +253,7 @@ export const AuthPage = () => {
   };
 
   const handleWebhookUrlCopy = useCallback(() => {
+    console.log('Copying webhook URL', webhookSetupConfig.triggerUrl);
     return navigator.clipboard
       .writeText(webhookSetupConfig.triggerUrl)
       .then(() => {
@@ -271,7 +265,7 @@ export const AuthPage = () => {
       .catch(() => {
         console.log('Error copying webhook URL');
       });
-  }, []);
+  }, [webhookSetupConfig]);
 
   const ConnectionMessage = () =>
     features.isGitlabMaintainerTokenEnabled && selectedRole === GitLabRoles.MAINTAINER ? (
@@ -324,11 +318,16 @@ export const AuthPage = () => {
       </SectionMessageWrapper>
     );
 
-  const WebhookCopyIcon = () => (
-    <Tooltip content={webhookCopyTooltipContent} testId='webhook-url-copy-tooltip'>
-      <CopyIconWrapper onClick={handleWebhookUrlCopy} data-testid='webhoook-url-copy-icon'>
-        <CopyIcon label='Copy webhook URL' />
-      </CopyIconWrapper>
+  const WebhookCopyButton = () => (
+    <Tooltip content={webhookCopyTooltipContent} testId='webhook-url-copy-tooltip' position='top-end'>
+      <Button
+        appearance='link'
+        spacing='compact'
+        onClick={handleWebhookUrlCopy}
+        iconAfter={<CopyIcon label='Copy webhook URL' />}
+      >
+        {webhookSetupConfig.triggerUrl}
+      </Button>
     </Tooltip>
   );
 
@@ -341,9 +340,7 @@ export const AuthPage = () => {
 
       <ul>
         <li>
-          <ListItemContent>
-            Create new webhook by copying the URL <WebhookCopyIcon />{' '}
-          </ListItemContent>
+          Create new webhook by copying the URL: <WebhookCopyButton />
         </li>
         <li>Add a secret token for webhook and input the same below</li>
         <li>
@@ -353,7 +350,10 @@ export const AuthPage = () => {
         <li>
           Ensure that <b>Enable SSL Verification</b> is checked
         </li>
-        <li>Webhook ID can be found as part of the URL when in edit mode</li>
+        <li>
+          Webhook ID can be found as part of the URL when in edit mode <br />
+          Example: https://gitlab.com/.../-/hooks/<b>webhook_id</b>/edit
+        </li>
       </ul>
     </SectionMessageWrapper>
   );
@@ -385,7 +385,7 @@ export const AuthPage = () => {
             )}
           </TokenRoleWrapper>
           <ConnectionMessage />
-          <IncomingWebhookSectionMessage />
+          <IncomingWebhookSectionMessage isMaintainerTokenEnabled={features.isGitlabMaintainerTokenEnabled} />
         </>
       )}
 
diff --git a/ui/src/components/AuthPage/styles.ts b/ui/src/components/AuthPage/styles.ts
index b28ad45..a429626 100644
--- a/ui/src/components/AuthPage/styles.ts
+++ b/ui/src/components/AuthPage/styles.ts
@@ -43,8 +43,3 @@ export const CopyIconWrapper = styled.button`
     color: ${token('color.icon')};
   }
 `;
-
-export const ListItemContent = styled.span`
-  display: flex;
-  align-items: center;
-`;
diff --git a/ui/src/components/ConnectedPage/index.tsx b/ui/src/components/ConnectedPage/index.tsx
index 9ea48ab..453328d 100644
--- a/ui/src/components/ConnectedPage/index.tsx
+++ b/ui/src/components/ConnectedPage/index.tsx
@@ -21,7 +21,7 @@ export const ConnectedPage = () => {
   const [groups, setGroups] = useState<GitlabAPIGroup[]>();
 
   const navigate = useNavigate();
-  const { getConnectedInfo, clearGroup } = useAppContext();
+  const { features, getConnectedInfo, clearGroup } = useAppContext();
   const { isImportInProgress } = useImportContext();
 
   const handleDisconnectGroup = async (id: number) => {
@@ -70,7 +70,7 @@ export const ConnectedPage = () => {
       <h4>Connected group</h4>
       <p>You can connect only one GitLab group to Compass at a time, and you must be an owner of that group.</p>
       <br />
-      <IncomingWebhookSectionMessage />
+      <IncomingWebhookSectionMessage isMaintainerTokenEnabled={features.isGitlabMaintainerTokenEnabled} />
       <br />
       <ConnectInfoPanel
         connectedGroup={groups[0]}
diff --git a/ui/src/components/IncomingWebhookSectionMessage.tsx b/ui/src/components/IncomingWebhookSectionMessage.tsx
index 02d039d..fbbc4c2 100644
--- a/ui/src/components/IncomingWebhookSectionMessage.tsx
+++ b/ui/src/components/IncomingWebhookSectionMessage.tsx
@@ -3,13 +3,18 @@ import WebhookIcon from './assets/WebhookIcon.svg';
 import { ForgeLink } from './ForgeLink';
 import { INCOMING_WEBHOOK_SETTINGS_PAGE_LINK } from '../constants';
 
-export const IncomingWebhookSectionMessage = () => {
+type Props = {
+  isMaintainerTokenEnabled?: boolean;
+};
+
+export const IncomingWebhookSectionMessage = ({ isMaintainerTokenEnabled = false }: Props) => {
   return (
     <IncomingWebhookSectionWrapper>
       <IncomingWebhookIcon src={WebhookIcon} />
       <div>
         <p>
-          If you're not a group owner or use the self-managed version of GitLab, you can use{' '}
+          If you're not a group owner{isMaintainerTokenEnabled ? '/maintainer' : ''} or use the self-managed version of
+          GitLab, you can use{' '}
           <ForgeLink to={INCOMING_WEBHOOK_SETTINGS_PAGE_LINK} openInNewTab>
             incoming webhooks
           </ForgeLink>{' '}