Refactor :Button option on triggers page

src/components/UI/Heading/Heading.tsx

@@ -8,7 +8,6 @@ import AddIcon from 'assets/images/add.svg?react';
 export interface HeadingProps {
   formTitle: string;
   helpData?: any;
-  showHeaderHelp?: boolean;
   backLink?: string;
   headerHelp?: string;
   button?: {
@@ -20,7 +19,13 @@ export interface HeadingProps {
   };
 }
 
-export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink, headerHelp, button }: HeadingProps) => {
+export const Heading = ({
+  formTitle,
+  helpData,
+  backLink,
+  headerHelp,
+  button,
+}: HeadingProps) => {
   const navigate = useNavigate();
   const addIcon = <AddIcon className={styles.AddIcon} />;
 
@@ -37,7 +42,7 @@ export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink,
             </div>
             {helpData ? <HelpIcon helpData={helpData} /> : ''}
           </div>
-          <div className={styles.TextHeading}>{showHeaderHelp ? headerHelp || `Please enter below details.` : ''}</div>
+          {headerHelp && <div className={styles.TextHeading}>{headerHelp}</div>}
         </div>
       </div>
       {button && button.show && (

src/containers/Consulting/Consulting.test.tsx

@@ -101,7 +101,7 @@ test('it renders consulting hours in edit mode', async () => {
   });
 });
 
-test('Click in cancel button', async () => {
+test('Click on Go Back button', async () => {
   const { getByText } = render(consultingEditForm);
 
   expect(getByText('Loading...')).toBeInTheDocument();

src/containers/ContactManagement/ContactManagement.tsx

@@ -45,7 +45,7 @@ export const ContactManagement = () => {
 
   return (
     <>
-      <Heading formTitle="Contact Management" showHeaderHelp={false} helpData={contactVariablesInfo} />
+      <Heading formTitle="Contact Management" helpData={contactVariablesInfo} />
       <div className={styles.MainContainer}>
         <div className={styles.Container}>
           <div>

src/containers/Flow/Flow.tsx

@@ -351,7 +351,7 @@ export const Flow = () => {
       customHandler={customHandler}
       helpData={flowInfo}
       backLinkButton={`/${backLink}`}
-      buttonState={{ text: 'Save', status: isTemplate }}
+      buttonState={{ text: 'Save', status: isTemplate, show: true }}
       restrictButtonStatus={{ status: isTemplate }}
     />
   );

src/containers/Form/FormLayout.tsx

@@ -53,6 +53,7 @@ export interface FormLayoutProps {
     text?: string;
     status?: boolean;
     styles?: string;
+    show?: boolean;
   };
   type?: string;
   afterSave?: Function;
@@ -76,6 +77,7 @@ export interface FormLayoutProps {
   languageAttributes?: any;
   helpData?: HelpDataProps;
   noHeading?: boolean;
+  isView?: boolean;
   partialPage?: boolean;
   confirmationState?: {
     show: boolean;
@@ -86,7 +88,10 @@ export interface FormLayoutProps {
     text?: string;
     status?: boolean;
   };
-  skipCancel?: boolean;
+  errorButtonState?: {
+    show?: boolean;
+    text?: string;
+  };
 }
 
 export const FormLayout = ({
@@ -95,9 +100,14 @@ export const FormLayout = ({
   setStates,
   validationSchema,
   listItemName,
+  isView = false,
   dialogMessage,
   formFields,
   redirectionLink,
+  errorButtonState = {
+    show: true,
+    text: 'Cancel',
+  },
   listItem,
   getItemQuery,
   createItemQuery,
@@ -118,7 +128,7 @@ export const FormLayout = ({
   advanceSearch,
   cancelAction,
   button = 'Save',
-  buttonState = { text: '', status: false, styles: '' },
+  buttonState = { text: '', status: false, styles: '', show: true },
   type,
   afterSave,
   afterDelete,
@@ -140,7 +150,6 @@ export const FormLayout = ({
   partialPage = false,
   confirmationState,
   restrictButtonStatus,
-  skipCancel = false,
 }: FormLayoutProps) => {
   const [showDialog, setShowDialog] = useState(false);
   const [formSubmitted, setFormSubmitted] = useState(false);
@@ -584,22 +593,24 @@ export const FormLayout = ({
             );
           })}
           <div className={buttonState.styles ? buttonState.styles : styles.Buttons}>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={() => {
-                formik.validateForm().then((errors) => {
-                  onSaveButtonClick(errors);
-                  formik.submitForm();
-                });
-              }}
-              className={styles.Button}
-              data-testid="submitActionButton"
-              loading={saveClick}
-              disabled={buttonState.status}
-            >
-              {buttonState.status ? buttonState.text : button}
-            </Button>
+            {buttonState.show && (
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  formik.validateForm().then((errors) => {
+                    onSaveButtonClick(errors);
+                    formik.submitForm();
+                  });
+                }}
+                className={styles.Button}
+                data-testid="submitActionButton"
+                loading={saveClick}
+                disabled={buttonState.status}
+              >
+                {buttonState.status ? buttonState.text : button}
+              </Button>
+            )}
             {additionalAction ? (
               <Button
                 variant="outlined"
@@ -618,9 +629,9 @@ export const FormLayout = ({
                 {additionalAction.label}
               </Button>
             ) : null}
-            {!skipCancel && (
+            {errorButtonState?.show && (
               <Button variant="outlined" color="secondary" onClick={cancelHandler} data-testid="cancelActionButton">
-                {t('Cancel')}
+                {errorButtonState?.text}
               </Button>
             )}
 
@@ -653,19 +664,22 @@ export const FormLayout = ({
   }
 
   let formTitle = '';
+  let headerHelp: string = `Please enter below details.`;
 
   // set title if there is a title
   if (title) {
     formTitle = title;
   } else if (type === 'copy') {
     formTitle = `Copy ${listItemName}`; // case when copying an item
   } else if (itemId) {
-    formTitle = `Edit ${listItemName}`; // case when editing a item
+    formTitle = isView ? `${listItemName}` : `Edit ${listItemName}`; // case when editing a item
   } else {
     formTitle = `Create a new ${listItemName}`; // case when adding a new item
   }
-
-  let heading = <Heading backLink={backLinkButton} formTitle={formTitle} />;
+  if (isView) {
+    headerHelp = `Please view below details.`;
+  }
+  let heading = <Heading backLink={backLinkButton} formTitle={formTitle} headerHelp={headerHelp} />;
 
   let confirmationDialog;
   if (showConfirmationDialog) {

src/containers/HSM/HSM.test.tsx

@@ -51,7 +51,7 @@ describe('Edit mode', () => {
       </MockedProvider>
     );
     await waitFor(() => {
-      expect(getByText('Edit HSM Template')).toBeInTheDocument();
+      expect(getByText('HSM Template')).toBeInTheDocument();
     });
 
     await waitFor(() => {
@@ -72,7 +72,7 @@ describe('Edit mode', () => {
     );
 
     await waitFor(() => {
-      expect(getByText('Edit HSM Template')).toBeInTheDocument();
+      expect(getByText('HSM Template')).toBeInTheDocument();
     });
 
     await waitFor(() => {
@@ -197,7 +197,7 @@ describe('Add mode', () => {
     render(template);
 
     await waitFor(() => {
-      expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
+      expect(screen.getByText('Create a new HSM Template')).toBeInTheDocument();
     });
 
     const inputs = screen.getAllByRole('textbox');
@@ -272,7 +272,7 @@ describe('Add mode', () => {
     render(template);
 
     await waitFor(() => {
-      expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
+      expect(screen.getByText('Create a new HSM Template')).toBeInTheDocument();
     });
     fireEvent.click(screen.getByText('Add buttons'));
 

src/containers/HSM/HSM.tsx

@@ -104,12 +104,16 @@ export const HSM = () => {
   let backButton = location.state?.tag?.label ? `template?tag=${location.state?.tag?.label}` : 'template';
 
   const { data: categoryList, loading: categoryLoading } = useQuery(GET_HSM_CATEGORIES);
-  const { data: shortCodes, loading: shortcodesLoading, refetch: refetchShortcodes} = useQuery(GET_SHORTCODES, {
+  const {
+    data: shortCodes,
+    loading: shortcodesLoading,
+    refetch: refetchShortcodes,
+  } = useQuery(GET_SHORTCODES, {
     variables: {
       filter: {
         isHsm: true,
       },
-    }
+    },
   });
 
   const { data: tag, loading: tagLoading } = useQuery(GET_TAGS, {
@@ -502,16 +506,6 @@ export const HSM = () => {
   };
 
   const fields = [
-    {
-      component: Checkbox,
-      name: 'isActive',
-      title: (
-        <Typography variant="h6" className={styles.IsActive}>
-          Active?
-        </Typography>
-      ),
-      darkCheckbox: true,
-    },
     {
       component: AutoComplete,
       name: 'language',
@@ -885,6 +879,7 @@ export const HSM = () => {
       <FormLayout
         {...queries}
         states={states}
+        isView={isEditing}
         setStates={setStates}
         setPayload={setPayload}
         validationSchema={isEditing ? Yup.object() : FormSchema}
@@ -896,10 +891,11 @@ export const HSM = () => {
         icon={templateIcon}
         getLanguageId={getLanguageId}
         languageSupport={false}
+        errorButtonState={{ text: isEditing ? t('Go Back') : t('Cancel'), show: true }}
         isAttachment
         getQueryFetchPolicy="cache-and-network"
         button={!isEditing ? t('Submit for Approval') : t('Save')}
-        buttonState={{ text: t('Validating URL'), status: validatingURL }}
+        buttonState={{ text: t('Validating URL'), status: validatingURL, show: !isEditing }}
         saveOnPageChange={false}
         type={mode}
         copyNotification={copyMessage}

src/containers/HSM/HSMList/HSMList.test.tsx

@@ -132,6 +132,21 @@ test('should navigate to create template page', async () => {
   expect(mockedUsedNavigate).toHaveBeenCalledWith('/template/add');
 });
 
+test('should navigate to edit template page', async () => {
+  const { getByText } = render(template(syncTemplateQuery));
+
+  await waitFor(() => {
+    expect(getByText('HSM Templates')).toBeInTheDocument();
+  });
+
+  const viewIcons = await screen.findAllByTestId('view-icon', {}, { timeout: 5000 });
+  fireEvent.click(viewIcons[0]);
+
+  await waitFor(() => {
+    expect(mockedUsedNavigate).toHaveBeenCalledWith('/template/1/edit');
+  });
+});
+
 test('should navigate to create template page with selected tag', async () => {
   const { getByText, getByTestId, getAllByRole } = render(template(syncTemplateQuery));
 

src/containers/HSM/HSMList/HSMList.tsx

@@ -21,6 +21,7 @@ import { templateInfo, templateStatusInfo } from 'common/HelpData';
 import { setNotification } from 'common/notification';
 import { WhatsAppToJsx } from 'common/RichEditor';
 import { capitalizeFirstLetter, copyToClipboardMethod, exportCsvFile, getFileExtension } from 'common/utils';
+import ViewIcon from 'assets/images/icons/ViewLight.svg?react';
 
 import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { Button } from 'components/UI/Form/Button/Button';
@@ -386,7 +387,16 @@ export const HSMList = () => {
     button.show = false;
   }
 
+  const handleView = (id: any) => {
+    navigate(`/template/${id}/edit`);
+  };
   let additionalAction: any = () => [
+    {
+      label: t('View'),
+      icon: <ViewIcon data-testid="view-icon" />,
+      parameter: 'id',
+      dialog: handleView,
+    },
     {
       label: t('Copy UUID'),
       icon: <CopyAllOutlined data-testid="copy-button" />,
@@ -443,6 +453,9 @@ export const HSMList = () => {
         {...queries}
         filterList={filterTemplateStatus}
         filters={selectedTag?.id ? { ...appliedFilters, tagIds: [parseInt(selectedTag.id)] } : appliedFilters}
+        restrictedAction={(item: any) => ({
+          edit: false,
+        })}
       />
     </>
   );

src/containers/InteractiveMessage/InteractiveMessage.tsx

@@ -1041,7 +1041,7 @@ export const InteractiveMessage = () => {
         getQueryFetchPolicy="cache-and-network"
         afterSave={afterSave}
         saveOnPageChange={false}
-        buttonState={{ text: t('Validating URL'), status: validatingURL }}
+        buttonState={{ text: t('Validating URL'), status: validatingURL, show: true }}
         helpData={interactiveMessageInfo}
         backLinkButton={`/${backButton}`}
       />

src/containers/MyAccount/MyAccount.tsx

@@ -303,7 +303,7 @@ export const MyAccount = () => {
 
   return (
     <div>
-      <Heading formTitle={t('My Account')} showHeaderHelp={false} />
+      <Heading formTitle={t('My Account')} />
       <div className={styles.MyAccount} data-testid="MyAccount">
         {userForm}
         <Typography variant="h6" className={styles.Title}>

src/containers/Profile/Contact/ContactProfile.tsx

@@ -179,7 +179,7 @@ export const ContactProfile = () => {
 
   return (
     <>
-      <Heading formTitle={t('Contact Profile')} showHeaderHelp={false} backLink={`/chat/${params.id}`} />
+      <Heading formTitle={t('Contact Profile')} backLink={`/chat/${params.id}`} />
       <Box className={styles.ContactProfile}>
         {drawer}
         <Box className={styles.ProfileBody}>{profileBodyContent}</Box>

src/containers/Search/Search.tsx

@@ -541,11 +541,12 @@ export const Search = ({
         afterSave={saveHandler}
         helpData={searchInfo}
         backLinkButton="/search"
-        skipCancel={chatFilters}
+        errorButtonState={{ text: t('Cancel'), show: !chatFilters }}
         buttonState={
           chatFilters
             ? {
                 styles: styles.Buttons,
+                show: true,
               }
             : undefined
         }

src/containers/SettingList/OrganizationFlows/OrganisationFLows.test.tsx

@@ -24,7 +24,7 @@ test('it renders component properly', async () => {
   expect(getByText('Loading...')).toBeInTheDocument();
 });
 
-test('it renders component and clicks cancel', async () => {
+test('it renders component and clicks Cancel Button', async () => {
   const { getByText } = render(wrapper);
   // loading is show initially
   expect(getByText('Loading...')).toBeInTheDocument();