Merge pull request #2838 from glific/enhancements/adding-back-button

Added back button in forms

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;
 }

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 = (
+  <MemoryRouter>
+    <Heading backLink={'/back-link'} formTitle={'Heading Title'} />
+  </MemoryRouter>
+);
+
+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();
+    });
+  });
+});

src/components/UI/Heading/Heading.tsx

@@ -15,19 +15,17 @@ export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink }
   return (
     <div className={styles.Heading} data-testid="heading">
       <div className={styles.HeadingWrapper}>
-        <div className={styles.HeadingTitle}>
-          {backLink && (
-            <BackIcon
-              onClick={() => navigate(backLink)}
-              className={styles.BackIcon}
-              data-testid="back-button"
-            />
-          )}
-          <div className={styles.TitleText}>{formTitle}</div>
-          {helpData ? <HelpIcon helpData={helpData} /> : ''}
+        <div className={styles.BackIcon}>
+          {backLink && <BackIcon onClick={() => navigate(backLink)} data-testid="back-button" />}
         </div>
-        <div className={styles.TextHeading}>
-          {showHeaderHelp ? `Please enter below details.` : ''}
+        <div>
+          <div className={styles.HeadingTitle}>
+            <div className={styles.TitleText}>{formTitle}</div>
+            {!helpData ? <HelpIcon helpData={helpData} /> : ''}
+          </div>
+          <div className={styles.TextHeading}>
+            {showHeaderHelp ? `Please enter below details.` : ''}
+          </div>
         </div>
       </div>
     </div>

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}`}
     />
   );
 };

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"
     />
   );
 };

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 = <Heading formTitle={formTitle} />;
-
-  const backLink = backLinkButton ? (
-    <div className={styles.BackLink}>
-      <Link to={backLinkButton.link}>
-        <BackIcon />
-        {backLinkButton.text}
-      </Link>
-    </div>
-  ) : null;
+  let heading = <Heading backLink={backLinkButton} formTitle={formTitle} />;
 
   return (
     <div
@@ -641,7 +628,6 @@ export const FormLayout = ({
     >
       {dialogBox}
       {!noHeading && heading}
-      {backLink}
       {form}
     </div>
   );

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'}
       />
       <div className={styles.Simulator}>
         <Simulator

src/containers/Search/Search.tsx

@@ -501,6 +501,7 @@ export const Search = ({ type, search, searchId, ...props }: SearchProps) => {
         type={type}
         afterSave={saveHandler}
         helpData={searchInfo}
+        backLinkButton="/search"
       />
     </>
   );

src/containers/SheetIntegration/SheetIntegration.tsx

@@ -123,6 +123,7 @@ export const SheetIntegration = () => {
       listItem="sheet"
       icon={sheetIcon}
       languageSupport={false}
+      backLinkButton="/sheet-integration"
     />
   );
 };

src/containers/Template/Form/Template.tsx

@@ -1007,6 +1007,7 @@ const Template = ({
       afterSave={!defaultAttribute.isHsm ? afterSave : undefined}
       type={mode}
       copyNotification={copyMessage}
+      backLinkButton={`/${redirectionLink}`}
     />
   );
 };

src/containers/Trigger/Trigger.tsx

@@ -470,6 +470,7 @@ export const Trigger = () => {
       icon={triggerIcon}
       customStyles={styles.Triggers}
       helpData={triggerInfo}
+      backLinkButton="/trigger"
     />
   );
 };