From 66ee8a3f637747ff9a7fa1df2a5bf752ced9f826 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 2 Apr 2024 12:49:59 +0530 Subject: [PATCH 1/5] added back buttons in forms --- src/components/UI/Heading/Heading.module.css | 1 + src/containers/Collection/Collection.tsx | 2 ++ src/containers/Flow/Flow.tsx | 1 + src/containers/Form/FormLayout.tsx | 19 +++---------------- .../InteractiveMessage/InteractiveMessage.tsx | 1 + src/containers/Search/Search.tsx | 1 + .../SheetIntegration/SheetIntegration.tsx | 1 + src/containers/Template/Form/Template.tsx | 1 + src/containers/Trigger/Trigger.tsx | 1 + 9 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/UI/Heading/Heading.module.css b/src/components/UI/Heading/Heading.module.css index 03fbb8e55..9b1a15be0 100644 --- a/src/components/UI/Heading/Heading.module.css +++ b/src/components/UI/Heading/Heading.module.css @@ -17,6 +17,7 @@ align-items: center; font-weight: 700; font-size: 38px; + /* gap: 10px; */ } .HeadingWrapper { diff --git a/src/containers/Collection/Collection.tsx b/src/containers/Collection/Collection.tsx index 70b79cca4..16e98ecf2 100644 --- a/src/containers/Collection/Collection.tsx +++ b/src/containers/Collection/Collection.tsx @@ -44,6 +44,7 @@ export const Collection = () => { const { t } = useTranslation(); const location = useLocation(); const groups: boolean = location.pathname.includes('group'); + const redirectLink = groups ? '/group/collection' : '/collection'; const groupType = groups ? WA_GROUPS_COLLECTION : CONTACTS_COLLECTION; const searchQuery = groups ? GROUP_SEARCH_QUERY : SEARCH_QUERY; const searchVariables = groups @@ -212,6 +213,7 @@ export const Collection = () => { listItem="group" icon={collectionIcon} helpData={collectionInfo} + backLinkButton={redirectLink} /> ); }; diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx index ba8525261..901b32642 100644 --- a/src/containers/Flow/Flow.tsx +++ b/src/containers/Flow/Flow.tsx @@ -281,6 +281,7 @@ export const Flow = () => { copyNotification={t('Copy of the flow has been created!')} customHandler={customHandler} helpData={flowInfo} + backLinkButton="/flow" /> ); }; diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx index abd6291f4..75b1ba4c7 100644 --- a/src/containers/Form/FormLayout.tsx +++ b/src/containers/Form/FormLayout.tsx @@ -18,7 +18,7 @@ import { GET_ROLE_NAMES } from 'graphql/queries/Role'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; import { Heading } from 'components/UI/Heading/Heading'; import DeleteIcon from 'assets/images/icons/Delete/White.svg?react'; -import BackIcon from 'assets/images/icons/Back.svg?react'; +import BackIcon from 'assets/images/icons/BackIconFlow.svg?react'; import { organizationHasDynamicRole } from 'common/utils'; import { getUserRole } from 'context/role'; import styles from './FormLayout.module.css'; @@ -61,10 +61,7 @@ export interface FormLayoutProps { title?: string; cancelAction?: Function; getLanguageId?: Function; - backLinkButton?: { - text: string; - link: string; - }; + backLinkButton?: string; isAttachment?: boolean; getMediaId?: any; customStyles?: any; @@ -623,16 +620,7 @@ export const FormLayout = ({ formTitle = `Add a new ${listItemName}`; // case when adding a new item } - let heading = ; - - const backLink = backLinkButton ? ( -
- - - {backLinkButton.text} - -
- ) : null; + let heading = ; return (
{dialogBox} {!noHeading && heading} - {backLink} {form}
); diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index b992f876a..81ff59c06 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -836,6 +836,7 @@ export const InteractiveMessage = () => { saveOnPageChange={false} buttonState={{ text: t('Validating URL'), status: validatingURL }} helpData={interactiveMessageInfo} + backLinkButton={'/interactive-message'} />
{ type={type} afterSave={saveHandler} helpData={searchInfo} + backLinkButton="/search" /> ); diff --git a/src/containers/SheetIntegration/SheetIntegration.tsx b/src/containers/SheetIntegration/SheetIntegration.tsx index c0f3c7b0f..6936d739e 100644 --- a/src/containers/SheetIntegration/SheetIntegration.tsx +++ b/src/containers/SheetIntegration/SheetIntegration.tsx @@ -123,6 +123,7 @@ export const SheetIntegration = () => { listItem="sheet" icon={sheetIcon} languageSupport={false} + backLinkButton="/sheet-integration" /> ); }; diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx index 89400c36c..6ee82e3e1 100644 --- a/src/containers/Template/Form/Template.tsx +++ b/src/containers/Template/Form/Template.tsx @@ -1007,6 +1007,7 @@ const Template = ({ afterSave={!defaultAttribute.isHsm ? afterSave : undefined} type={mode} copyNotification={copyMessage} + backLinkButton={`/${redirectionLink}`} /> ); }; diff --git a/src/containers/Trigger/Trigger.tsx b/src/containers/Trigger/Trigger.tsx index d892fc535..77ed6f645 100644 --- a/src/containers/Trigger/Trigger.tsx +++ b/src/containers/Trigger/Trigger.tsx @@ -470,6 +470,7 @@ export const Trigger = () => { icon={triggerIcon} customStyles={styles.Triggers} helpData={triggerInfo} + backLinkButton="/trigger" /> ); }; From ab4d47e2aa26a35aab5c270dfb4f8423712958c0 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 2 Apr 2024 12:51:36 +0530 Subject: [PATCH 2/5] minor refactoring --- src/components/UI/Heading/Heading.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/UI/Heading/Heading.module.css b/src/components/UI/Heading/Heading.module.css index 9b1a15be0..03fbb8e55 100644 --- a/src/components/UI/Heading/Heading.module.css +++ b/src/components/UI/Heading/Heading.module.css @@ -17,7 +17,6 @@ align-items: center; font-weight: 700; font-size: 38px; - /* gap: 10px; */ } .HeadingWrapper { From 5d0a80fee4bdbfe1136e000e5a9a240ab191850f Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Thu, 4 Apr 2024 16:16:50 +0530 Subject: [PATCH 3/5] fixed failing cypress test cases --- src/containers/Collection/Collection.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/Collection/Collection.tsx b/src/containers/Collection/Collection.tsx index 1d3d05b5e..41ead2045 100644 --- a/src/containers/Collection/Collection.tsx +++ b/src/containers/Collection/Collection.tsx @@ -44,7 +44,7 @@ export const Collection = () => { const { t } = useTranslation(); const location = useLocation(); const groups: boolean = location.pathname.includes('group'); - const redirectLink = groups ? '/group/collection' : '/collection'; + const redirectLink = groups ? 'group/collection' : 'collection'; const groupType = groups ? WA_GROUPS_COLLECTION : CONTACTS_COLLECTION; const searchQuery = groups ? GROUP_SEARCH_QUERY : SEARCH_QUERY; const searchVariables = groups @@ -213,7 +213,7 @@ export const Collection = () => { listItem="group" icon={collectionIcon} helpData={collectionInfo} - backLinkButton={redirectLink} + backLinkButton={`/${redirectLink}`} /> ); }; From 8b50b8e4b0f1a2e340f23686b9b165be1c82e024 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Fri, 5 Apr 2024 15:33:14 +0530 Subject: [PATCH 4/5] aligned button and title --- src/components/UI/Heading/Heading.module.css | 3 +++ src/components/UI/Heading/Heading.tsx | 28 +++++++++++--------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/components/UI/Heading/Heading.module.css b/src/components/UI/Heading/Heading.module.css index 03fbb8e55..e984691f3 100644 --- a/src/components/UI/Heading/Heading.module.css +++ b/src/components/UI/Heading/Heading.module.css @@ -21,6 +21,9 @@ .HeadingWrapper { margin-left: 46px; + display: flex; + gap: 10px; + align-items: center; } .TextHeading { diff --git a/src/components/UI/Heading/Heading.tsx b/src/components/UI/Heading/Heading.tsx index b60f587a7..47c60a798 100644 --- a/src/components/UI/Heading/Heading.tsx +++ b/src/components/UI/Heading/Heading.tsx @@ -15,19 +15,21 @@ export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink } return (
-
- {backLink && ( - navigate(backLink)} - className={styles.BackIcon} - data-testid="back-button" - /> - )} -
{formTitle}
- {helpData ? : ''} -
-
- {showHeaderHelp ? `Please enter below details.` : ''} + {backLink && ( + navigate(backLink)} + className={styles.BackIcon} + data-testid="back-button" + /> + )} +
+
+
{formTitle}
+ {!helpData ? : ''} +
+
+ {showHeaderHelp ? `Please enter below details.` : ''} +
From 84867262f09859154ae2ee617ef7beb6eaaafb6e Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Mon, 8 Apr 2024 11:55:54 +0530 Subject: [PATCH 5/5] added test cases --- src/components/UI/Heading/Heading.module.css | 5 ++- src/components/UI/Heading/Heading.test.tsx | 36 ++++++++++++++++++++ src/components/UI/Heading/Heading.tsx | 10 ++---- 3 files changed, 41 insertions(+), 10 deletions(-) create mode 100644 src/components/UI/Heading/Heading.test.tsx diff --git a/src/components/UI/Heading/Heading.module.css b/src/components/UI/Heading/Heading.module.css index e984691f3..6af767b1d 100644 --- a/src/components/UI/Heading/Heading.module.css +++ b/src/components/UI/Heading/Heading.module.css @@ -23,7 +23,7 @@ margin-left: 46px; display: flex; gap: 10px; - align-items: center; + align-items: flex-start; } .TextHeading { @@ -37,7 +37,6 @@ } .BackIcon { - margin-left: -10px; - margin-right: 10px; cursor: pointer; + margin-top: 10px; } diff --git a/src/components/UI/Heading/Heading.test.tsx b/src/components/UI/Heading/Heading.test.tsx new file mode 100644 index 000000000..18c2d1129 --- /dev/null +++ b/src/components/UI/Heading/Heading.test.tsx @@ -0,0 +1,36 @@ +import { describe } from 'vitest'; +import { Heading } from './Heading'; +import { fireEvent, render, waitFor } from '@testing-library/react'; +import { MemoryRouter } from 'react-router'; + +const wrapper = ( + + + +); + +const mockedUsedNavigate = vi.fn(); +vi.mock('react-router-dom', async () => ({ + ...(await vi.importActual('react-router-dom')), + useNavigate: () => mockedUsedNavigate, +})); + +describe('Heading', () => { + test('it should have Heading Title as heading', async () => { + const { getByText } = render(wrapper); + + await waitFor(() => { + expect(getByText('Heading Title')).toBeInTheDocument(); + }); + }); + + test('it should navigate to the back link', async () => { + const { getByTestId } = render(wrapper); + + fireEvent.click(getByTestId('back-button')); + + await waitFor(() => { + expect(mockedUsedNavigate).toHaveBeenCalled(); + }); + }); +}); diff --git a/src/components/UI/Heading/Heading.tsx b/src/components/UI/Heading/Heading.tsx index 47c60a798..fd6e65c3d 100644 --- a/src/components/UI/Heading/Heading.tsx +++ b/src/components/UI/Heading/Heading.tsx @@ -15,13 +15,9 @@ export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink } return (
- {backLink && ( - navigate(backLink)} - className={styles.BackIcon} - data-testid="back-button" - /> - )} +
+ {backLink && navigate(backLink)} data-testid="back-button" />} +
{formTitle}