diff --git a/src/components/UI/Heading/Heading.module.css b/src/components/UI/Heading/Heading.module.css index 03fbb8e55..6af767b1d 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: flex-start; } .TextHeading { @@ -34,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 b60f587a7..fd6e65c3d 100644 --- a/src/components/UI/Heading/Heading.tsx +++ b/src/components/UI/Heading/Heading.tsx @@ -15,19 +15,17 @@ export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink } return (
-
- {backLink && ( - navigate(backLink)} - className={styles.BackIcon} - data-testid="back-button" - /> - )} -
{formTitle}
- {helpData ? : ''} +
+ {backLink && navigate(backLink)} data-testid="back-button" />}
-
- {showHeaderHelp ? `Please enter below details.` : ''} +
+
+
{formTitle}
+ {!helpData ? : ''} +
+
+ {showHeaderHelp ? `Please enter below details.` : ''} +
diff --git a/src/containers/Collection/Collection.tsx b/src/containers/Collection/Collection.tsx index e0fbe48a6..3515afbbe 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 @@ -210,10 +211,11 @@ export const Collection = () => { listItemName="collection" dialogMessage={dialogMessage} formFields={formFields} - redirectionLink={`${groups ? 'group/' : ''}collection`} + redirectionLink={redirectLink} 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..b2f7f5756 100644 --- a/src/containers/Form/FormLayout.tsx +++ b/src/containers/Form/FormLayout.tsx @@ -1,5 +1,5 @@ import { useState, Fragment, useEffect } from 'react'; -import { Navigate, Link, useParams } from 'react-router-dom'; +import { Navigate, useParams } from 'react-router-dom'; import { Formik, Form, Field } from 'formik'; // eslint-disable-next-line no-unused-vars import { DocumentNode, ApolloError, useQuery, useMutation } from '@apollo/client'; @@ -18,7 +18,6 @@ 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 { organizationHasDynamicRole } from 'common/utils'; import { getUserRole } from 'context/role'; import styles from './FormLayout.module.css'; @@ -61,10 +60,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 +619,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" /> ); };