From 2fedce16df05b2f57b67a12fec54a8ce63c66ff7 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 27 May 2024 13:36:26 +1000
Subject: [PATCH] feat: invite a friend flow done

consolidate help desk buttons into one component
---
 ts/components/buttons/HelpDeskButton.tsx      | 24 +++++++++++++++++++
 ts/components/buttons/index.ts                | 12 +++++++++-
 .../leftpane/LeftPaneSectionHeader.tsx        |  2 ++
 .../leftpane/overlay/OverlayInvite.tsx        | 23 ++++++------------
 .../leftpane/overlay/OverlayMessage.tsx       | 20 ++++------------
 .../choose-action/OverlayChooseAction.tsx     | 10 ++++----
 6 files changed, 53 insertions(+), 38 deletions(-)
 create mode 100644 ts/components/buttons/HelpDeskButton.tsx

diff --git a/ts/components/buttons/HelpDeskButton.tsx b/ts/components/buttons/HelpDeskButton.tsx
new file mode 100644
index 000000000..b58069e97
--- /dev/null
+++ b/ts/components/buttons/HelpDeskButton.tsx
@@ -0,0 +1,24 @@
+import { shell } from 'electron';
+import { SessionIconButton, SessionIconSize } from '../icon';
+import { SessionIconButtonProps } from '../icon/SessionIconButton';
+
+export const HelpDeskButton = (
+  props: Omit<SessionIconButtonProps, 'iconType' | 'iconSize'> & { iconSize?: SessionIconSize }
+) => {
+  return (
+    <SessionIconButton
+      aria-label="Help desk link"
+      {...props}
+      iconType="question"
+      iconSize={props.iconSize || 10}
+      iconPadding={props.iconPadding || '2px'}
+      padding={props.padding || '0'}
+      dataTestId="session-link-helpdesk"
+      onClick={() => {
+        void shell.openExternal(
+          'https://sessionapp.zendesk.com/hc/en-us/articles/4439132747033-How-do-Session-ID-usernames-work'
+        );
+      }}
+    />
+  );
+};
diff --git a/ts/components/buttons/index.ts b/ts/components/buttons/index.ts
index 063e46fec..f7703d4e9 100644
--- a/ts/components/buttons/index.ts
+++ b/ts/components/buttons/index.ts
@@ -1,5 +1,15 @@
+import { CopyToClipboardButton, CopyToClipboardIcon } from './CopyToClipboardButton';
+import { HelpDeskButton } from './HelpDeskButton';
 import { MenuButton } from './MenuButton';
 import { PanelButton, PanelButtonGroup } from './PanelButton';
 import { PanelIconButton } from './PanelIconButton';
 
-export { MenuButton, PanelButton, PanelButtonGroup, PanelIconButton };
+export {
+  CopyToClipboardButton,
+  CopyToClipboardIcon,
+  HelpDeskButton,
+  MenuButton,
+  PanelButton,
+  PanelButtonGroup,
+  PanelIconButton,
+};
diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx
index db980f05f..9f148b68d 100644
--- a/ts/components/leftpane/LeftPaneSectionHeader.tsx
+++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx
@@ -192,10 +192,12 @@ export const LeftPaneSectionHeader = () => {
         leftOverlayMode !== 'choose-action' &&
         leftOverlayMode !== 'message-requests' ? (
           <SessionIconButton
+            ariaLabel="Back button"
             iconSize="medium"
             iconType="chevron"
             iconRotation={90}
             onClick={returnToActionChooser}
+            dataTestId="back-button"
           />
         ) : (
           <SpacerSM />
diff --git a/ts/components/leftpane/overlay/OverlayInvite.tsx b/ts/components/leftpane/overlay/OverlayInvite.tsx
index 3e4aba00d..c0a525d54 100644
--- a/ts/components/leftpane/overlay/OverlayInvite.tsx
+++ b/ts/components/leftpane/overlay/OverlayInvite.tsx
@@ -1,7 +1,6 @@
 import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 
-import { shell } from 'electron';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
@@ -9,8 +8,9 @@ import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { UserUtils } from '../../../session/utils';
 import { Flex } from '../../basic/Flex';
 import { SpacerLG, SpacerMD, SpacerSM } from '../../basic/Text';
+import { HelpDeskButton } from '../../buttons';
 import { CopyToClipboardButton } from '../../buttons/CopyToClipboardButton';
-import { SessionIcon, SessionIconButton } from '../../icon';
+import { SessionIcon } from '../../icon';
 import { SessionInput } from '../../inputs';
 import { StyledLeftPaneOverlay } from './OverlayMessage';
 
@@ -95,7 +95,8 @@ export const OverlayInvite = () => {
               editable={false}
               centerText={true}
               isTextArea={true}
-              inputDataTestId="invite-account-id"
+              ariaLabel="Account ID"
+              inputDataTestId="your-account-id"
             />
           </StyledInputContainer>
           <SpacerMD />
@@ -106,7 +107,7 @@ export const OverlayInvite = () => {
               copyContent={ourSessionID}
               onCopyComplete={() => setIdCopied(true)}
               hotkey={true}
-              dataTestId="invite-account-id-copy"
+              dataTestId="copy-button-account-id"
             />
           </StyledButtonerContainer>
         </>
@@ -120,19 +121,9 @@ export const OverlayInvite = () => {
           <SpacerMD />
           <StyledHeadingContainer container={true} justifyContent="center" alignItems="center">
             <StyledHeading>{window.i18n('accountIDCopied')}</StyledHeading>
-            <SessionIconButton
-              aria-label="external link to Session Zendesk article explaing how Account IDs work"
-              iconType="question"
+            <HelpDeskButton
               iconColor={'var(--text-primary-color)'}
-              iconSize={10}
-              iconPadding="2px"
-              padding={'0'}
-              dataTestId="session-zendesk-account-ids"
-              onClick={() => {
-                void shell.openExternal(
-                  'https://sessionapp.zendesk.com/hc/en-us/articles/4439132747033-How-do-Session-ID-usernames-work'
-                );
-              }}
+              style={{ display: 'inline-flex' }}
             />
           </StyledHeadingContainer>
           <SpacerSM />
diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx
index 7789e818c..94f73c0d0 100644
--- a/ts/components/leftpane/overlay/OverlayMessage.tsx
+++ b/ts/components/leftpane/overlay/OverlayMessage.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 
-import { shell } from 'electron';
 import { motion } from 'framer-motion';
 import { isEmpty } from 'lodash';
 import { useDispatch } from 'react-redux';
@@ -19,7 +18,7 @@ import { NotFoundError, SnodeResponseError } from '../../../session/utils/errors
 import { THEME_GLOBALS } from '../../../themes/globals';
 import { Flex } from '../../basic/Flex';
 import { SpacerLG, SpacerMD } from '../../basic/Text';
-import { SessionIconButton } from '../../icon';
+import { HelpDeskButton } from '../../buttons';
 import { SessionInput } from '../../inputs';
 
 const StyledDescriptionContainer = styled(motion.div)`
@@ -157,6 +156,7 @@ export const OverlayMessage = () => {
       padding={'var(--margins-md)'}
     >
       <SessionInput
+        ariaLabel="New conversation input"
         autoFocus={true}
         type="text"
         placeholder={window.i18n('accountIdOrOnsEnter')}
@@ -180,20 +180,7 @@ export const OverlayMessage = () => {
             transition={{ duration: THEME_GLOBALS['--default-duration-seconds'] }}
           >
             <SessionIDDescription>{window.i18n('messageNewDescription')}</SessionIDDescription>
-            <SessionIconButton
-              aria-label="external link to Session Zendesk article explaing how Account IDs work"
-              iconType="question"
-              iconSize={10}
-              iconPadding="2px"
-              padding={'0'}
-              style={{ display: 'inline-flex' }}
-              dataTestId="session-zendesk-account-ids"
-              onClick={() => {
-                void shell.openExternal(
-                  'https://sessionapp.zendesk.com/hc/en-us/articles/4439132747033-How-do-Session-ID-usernames-work'
-                );
-              }}
-            />
+            <HelpDeskButton style={{ display: 'inline-flex' }} />
           </StyledDescriptionContainer>
           <SpacerLG />
         </>
@@ -201,6 +188,7 @@ export const OverlayMessage = () => {
 
       {!isEmpty(pubkeyOrOns) ? (
         <SessionButton
+          ariaLabel="Continue"
           text={window.i18n('continue')}
           disabled={disableNextButton}
           onClick={handleMessageButtonClick}
diff --git a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
index e40225a72..ad1951fd7 100644
--- a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
+++ b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
@@ -69,14 +69,14 @@ export const OverlayChooseAction = () => {
       >
         <ActionRow
           title={window.i18n('newMessage')}
-          ariaLabel={window.i18n('createConversationNewContact')}
+          ariaLabel={'New message button'}
           iconType={'chatBubble'}
           onClick={openNewMessage}
           dataTestId="chooser-new-conversation-button"
         />
         <ActionRow
           title={window.i18n('createGroup')}
-          ariaLabel={window.i18n('createConversationNewGroup')}
+          ariaLabel={'Create a group button'}
           iconType={'group'}
           iconSize={36}
           onClick={openCreateGroup}
@@ -84,17 +84,17 @@ export const OverlayChooseAction = () => {
         />
         <ActionRow
           title={window.i18n('joinOpenGroup')}
-          ariaLabel={window.i18n('joinACommunity')}
+          ariaLabel={'Join a community button'}
           iconType={'communities'}
           onClick={openJoinCommunity}
           dataTestId="chooser-new-community"
         />
         <ActionRow
           title={window.i18n('sessionInviteAFriend')}
-          ariaLabel={window.i18n('sessionInviteAFriend')}
+          ariaLabel={'Invite a friend button'}
           iconType={'addUser'}
           onClick={inviteAFriend}
-          dataTestId="invite-a-friend"
+          dataTestId="chooser-invite-friend"
         />
       </StyledActionRowContainer>
       <SpacerSM />