Skip to content

Commit 88040b3

Browse files
priyanshu6238akanshaaa19
priyanshu6238
and
akanshaaa19
authored
Refactor :Button option on triggers page (#3643)
* refactor: improve actions visibility in List component * remove unused 'insideMore' property from action items in multiple lists * refactor: update test cases to use data-testid for action buttons * fix: trigger listing page * fix: trigger page * refactor: update data-testid attributes for copy and edit icons in FlowList component * fix: deep scan * chore: checkout bug_bash_1126 branch in cypress testing setup * refactor: remove unused 'screen' import from TriggerList test file * refactor: trigger listing page * fix: deep scan * fix: add test case * fix: naming * fix: route * fix: label * fix: naming * fix: header naming * fix: description * refactor: add back button * fix: test case * FIx: add props to trigger * fix: back button * fix: Remove save when it is in editing mode * fix: remove save button from hsm page * fix: trigger page * fix: add global header for format layout * refactor: add global header for hsm and add test case * fix: test case * fix: add new props * fix: add new props for cancel button * fix: add new props for header * fix: view props * fix: header * fix: button logic * fix: cancel button * fix: props globally * refactor: format layout * refactor: rename props * fix: deep scan * fix: props * fix: format layout * fix: isView condition * refactor: remove console * fix: header help function * fix: test case * reafactor: isView props condition in formLayout * fix: remove undefined type from headerHelp function * fix: hsm page --------- Co-authored-by: Akansha Sakhre <asakhre2002@gmail.com>
1 parent 75d9b38 commit 88040b3

File tree

27 files changed

+194
-82
lines changed

27 files changed

+194
-82
lines changed

‎src/components/UI/Heading/Heading.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import AddIcon from 'assets/images/add.svg?react';
88
export interface HeadingProps {
99
formTitle: string;
1010
helpData?: any;
11-
showHeaderHelp?: boolean;
1211
backLink?: string;
1312
headerHelp?: string;
1413
button?: {
@@ -20,7 +19,13 @@ export interface HeadingProps {
2019
};
2120
}
2221

23-
export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink, headerHelp, button }: HeadingProps) => {
22+
export const Heading = ({
23+
formTitle,
24+
helpData,
25+
backLink,
26+
headerHelp,
27+
button,
28+
}: HeadingProps) => {
2429
const navigate = useNavigate();
2530
const addIcon = <AddIcon className={styles.AddIcon} />;
2631

@@ -37,7 +42,7 @@ export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink,
3742
</div>
3843
{helpData ? <HelpIcon helpData={helpData} /> : ''}
3944
</div>
40-
<div className={styles.TextHeading}>{showHeaderHelp ? headerHelp || `Please enter below details.` : ''}</div>
45+
{headerHelp && <div className={styles.TextHeading}>{headerHelp}</div>}
4146
</div>
4247
</div>
4348
{button && button.show && (

‎src/containers/Consulting/Consulting.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ test('it renders consulting hours in edit mode', async () => {
101101
});
102102
});
103103

104-
test('Click in cancel button', async () => {
104+
test('Click on Go Back button', async () => {
105105
const { getByText } = render(consultingEditForm);
106106

107107
expect(getByText('Loading...')).toBeInTheDocument();

‎src/containers/ContactManagement/ContactManagement.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const ContactManagement = () => {
4545

4646
return (
4747
<>
48-
<Heading formTitle="Contact Management" showHeaderHelp={false} helpData={contactVariablesInfo} />
48+
<Heading formTitle="Contact Management" helpData={contactVariablesInfo} />
4949
<div className={styles.MainContainer}>
5050
<div className={styles.Container}>
5151
<div>

‎src/containers/Flow/Flow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ export const Flow = () => {
351351
customHandler={customHandler}
352352
helpData={flowInfo}
353353
backLinkButton={`/${backLink}`}
354-
buttonState={{ text: 'Save', status: isTemplate }}
354+
buttonState={{ text: 'Save', status: isTemplate, show: true }}
355355
restrictButtonStatus={{ status: isTemplate }}
356356
/>
357357
);

‎src/containers/Form/FormLayout.tsx‎

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export interface FormLayoutProps {
5353
text?: string;
5454
status?: boolean;
5555
styles?: string;
56+
show?: boolean;
5657
};
5758
type?: string;
5859
afterSave?: Function;
@@ -76,6 +77,7 @@ export interface FormLayoutProps {
7677
languageAttributes?: any;
7778
helpData?: HelpDataProps;
7879
noHeading?: boolean;
80+
isView?: boolean;
7981
partialPage?: boolean;
8082
confirmationState?: {
8183
show: boolean;
@@ -86,7 +88,10 @@ export interface FormLayoutProps {
8688
text?: string;
8789
status?: boolean;
8890
};
89-
skipCancel?: boolean;
91+
errorButtonState?: {
92+
show?: boolean;
93+
text?: string;
94+
};
9095
}
9196

9297
export const FormLayout = ({
@@ -95,9 +100,14 @@ export const FormLayout = ({
95100
setStates,
96101
validationSchema,
97102
listItemName,
103+
isView = false,
98104
dialogMessage,
99105
formFields,
100106
redirectionLink,
107+
errorButtonState = {
108+
show: true,
109+
text: 'Cancel',
110+
},
101111
listItem,
102112
getItemQuery,
103113
createItemQuery,
@@ -118,7 +128,7 @@ export const FormLayout = ({
118128
advanceSearch,
119129
cancelAction,
120130
button = 'Save',
121-
buttonState = { text: '', status: false, styles: '' },
131+
buttonState = { text: '', status: false, styles: '', show: true },
122132
type,
123133
afterSave,
124134
afterDelete,
@@ -140,7 +150,6 @@ export const FormLayout = ({
140150
partialPage = false,
141151
confirmationState,
142152
restrictButtonStatus,
143-
skipCancel = false,
144153
}: FormLayoutProps) => {
145154
const [showDialog, setShowDialog] = useState(false);
146155
const [formSubmitted, setFormSubmitted] = useState(false);
@@ -584,22 +593,24 @@ export const FormLayout = ({
584593
);
585594
})}
586595
<div className={buttonState.styles ? buttonState.styles : styles.Buttons}>
587-
<Button
588-
variant="contained"
589-
color="primary"
590-
onClick={() => {
591-
formik.validateForm().then((errors) => {
592-
onSaveButtonClick(errors);
593-
formik.submitForm();
594-
});
595-
}}
596-
className={styles.Button}
597-
data-testid="submitActionButton"
598-
loading={saveClick}
599-
disabled={buttonState.status}
600-
>
601-
{buttonState.status ? buttonState.text : button}
602-
</Button>
596+
{buttonState.show && (
597+
<Button
598+
variant="contained"
599+
color="primary"
600+
onClick={() => {
601+
formik.validateForm().then((errors) => {
602+
onSaveButtonClick(errors);
603+
formik.submitForm();
604+
});
605+
}}
606+
className={styles.Button}
607+
data-testid="submitActionButton"
608+
loading={saveClick}
609+
disabled={buttonState.status}
610+
>
611+
{buttonState.status ? buttonState.text : button}
612+
</Button>
613+
)}
603614
{additionalAction ? (
604615
<Button
605616
variant="outlined"
@@ -618,9 +629,9 @@ export const FormLayout = ({
618629
{additionalAction.label}
619630
</Button>
620631
) : null}
621-
{!skipCancel && (
632+
{errorButtonState?.show && (
622633
<Button variant="outlined" color="secondary" onClick={cancelHandler} data-testid="cancelActionButton">
623-
{t('Cancel')}
634+
{errorButtonState?.text}
624635
</Button>
625636
)}
626637

@@ -653,19 +664,22 @@ export const FormLayout = ({
653664
}
654665

655666
let formTitle = '';
667+
let headerHelp: string = `Please enter below details.`;
656668

657669
// set title if there is a title
658670
if (title) {
659671
formTitle = title;
660672
} else if (type === 'copy') {
661673
formTitle = `Copy ${listItemName}`; // case when copying an item
662674
} else if (itemId) {
663-
formTitle = `Edit ${listItemName}`; // case when editing a item
675+
formTitle = isView ? `${listItemName}` : `Edit ${listItemName}`; // case when editing a item
664676
} else {
665677
formTitle = `Create a new ${listItemName}`; // case when adding a new item
666678
}
667-
668-
let heading = <Heading backLink={backLinkButton} formTitle={formTitle} />;
679+
if (isView) {
680+
headerHelp = `Please view below details.`;
681+
}
682+
let heading = <Heading backLink={backLinkButton} formTitle={formTitle} headerHelp={headerHelp} />;
669683

670684
let confirmationDialog;
671685
if (showConfirmationDialog) {

‎src/containers/HSM/HSM.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ describe('Edit mode', () => {
5151
</MockedProvider>
5252
);
5353
await waitFor(() => {
54-
expect(getByText('Edit HSM Template')).toBeInTheDocument();
54+
expect(getByText('HSM Template')).toBeInTheDocument();
5555
});
5656

5757
await waitFor(() => {
@@ -72,7 +72,7 @@ describe('Edit mode', () => {
7272
);
7373

7474
await waitFor(() => {
75-
expect(getByText('Edit HSM Template')).toBeInTheDocument();
75+
expect(getByText('HSM Template')).toBeInTheDocument();
7676
});
7777

7878
await waitFor(() => {
@@ -197,7 +197,7 @@ describe('Add mode', () => {
197197
render(template);
198198

199199
await waitFor(() => {
200-
expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
200+
expect(screen.getByText('Create a new HSM Template')).toBeInTheDocument();
201201
});
202202

203203
const inputs = screen.getAllByRole('textbox');
@@ -272,7 +272,7 @@ describe('Add mode', () => {
272272
render(template);
273273

274274
await waitFor(() => {
275-
expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
275+
expect(screen.getByText('Create a new HSM Template')).toBeInTheDocument();
276276
});
277277
fireEvent.click(screen.getByText('Add buttons'));
278278

‎src/containers/HSM/HSM.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,16 @@ export const HSM = () => {
104104
let backButton = location.state?.tag?.label ? `template?tag=${location.state?.tag?.label}` : 'template';
105105

106106
const { data: categoryList, loading: categoryLoading } = useQuery(GET_HSM_CATEGORIES);
107-
const { data: shortCodes, loading: shortcodesLoading, refetch: refetchShortcodes} = useQuery(GET_SHORTCODES, {
107+
const {
108+
data: shortCodes,
109+
loading: shortcodesLoading,
110+
refetch: refetchShortcodes,
111+
} = useQuery(GET_SHORTCODES, {
108112
variables: {
109113
filter: {
110114
isHsm: true,
111115
},
112-
}
116+
},
113117
});
114118

115119
const { data: tag, loading: tagLoading } = useQuery(GET_TAGS, {
@@ -502,16 +506,6 @@ export const HSM = () => {
502506
};
503507

504508
const fields = [
505-
{
506-
component: Checkbox,
507-
name: 'isActive',
508-
title: (
509-
<Typography variant="h6" className={styles.IsActive}>
510-
Active?
511-
</Typography>
512-
),
513-
darkCheckbox: true,
514-
},
515509
{
516510
component: AutoComplete,
517511
name: 'language',
@@ -885,6 +879,7 @@ export const HSM = () => {
885879
<FormLayout
886880
{...queries}
887881
states={states}
882+
isView={isEditing}
888883
setStates={setStates}
889884
setPayload={setPayload}
890885
validationSchema={isEditing ? Yup.object() : FormSchema}
@@ -896,10 +891,11 @@ export const HSM = () => {
896891
icon={templateIcon}
897892
getLanguageId={getLanguageId}
898893
languageSupport={false}
894+
errorButtonState={{ text: isEditing ? t('Go Back') : t('Cancel'), show: true }}
899895
isAttachment
900896
getQueryFetchPolicy="cache-and-network"
901897
button={!isEditing ? t('Submit for Approval') : t('Save')}
902-
buttonState={{ text: t('Validating URL'), status: validatingURL }}
898+
buttonState={{ text: t('Validating URL'), status: validatingURL, show: !isEditing }}
903899
saveOnPageChange={false}
904900
type={mode}
905901
copyNotification={copyMessage}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,21 @@ test('should navigate to create template page', async () => {
132132
expect(mockedUsedNavigate).toHaveBeenCalledWith('/template/add');
133133
});
134134

135+
test('should navigate to edit template page', async () => {
136+
const { getByText } = render(template(syncTemplateQuery));
137+
138+
await waitFor(() => {
139+
expect(getByText('HSM Templates')).toBeInTheDocument();
140+
});
141+
142+
const viewIcons = await screen.findAllByTestId('view-icon', {}, { timeout: 5000 });
143+
fireEvent.click(viewIcons[0]);
144+
145+
await waitFor(() => {
146+
expect(mockedUsedNavigate).toHaveBeenCalledWith('/template/1/edit');
147+
});
148+
});
149+
135150
test('should navigate to create template page with selected tag', async () => {
136151
const { getByText, getByTestId, getAllByRole } = render(template(syncTemplateQuery));
137152

‎src/containers/HSM/HSMList/HSMList.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { templateInfo, templateStatusInfo } from 'common/HelpData';
2121
import { setNotification } from 'common/notification';
2222
import { WhatsAppToJsx } from 'common/RichEditor';
2323
import { capitalizeFirstLetter, copyToClipboardMethod, exportCsvFile, getFileExtension } from 'common/utils';
24+
import ViewIcon from 'assets/images/icons/ViewLight.svg?react';
2425

2526
import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
2627
import { Button } from 'components/UI/Form/Button/Button';
@@ -386,7 +387,16 @@ export const HSMList = () => {
386387
button.show = false;
387388
}
388389

390+
const handleView = (id: any) => {
391+
navigate(`/template/${id}/edit`);
392+
};
389393
let additionalAction: any = () => [
394+
{
395+
label: t('View'),
396+
icon: <ViewIcon data-testid="view-icon" />,
397+
parameter: 'id',
398+
dialog: handleView,
399+
},
390400
{
391401
label: t('Copy UUID'),
392402
icon: <CopyAllOutlined data-testid="copy-button" />,
@@ -443,6 +453,9 @@ export const HSMList = () => {
443453
{...queries}
444454
filterList={filterTemplateStatus}
445455
filters={selectedTag?.id ? { ...appliedFilters, tagIds: [parseInt(selectedTag.id)] } : appliedFilters}
456+
restrictedAction={(item: any) => ({
457+
edit: false,
458+
})}
446459
/>
447460
</>
448461
);

‎src/containers/InteractiveMessage/InteractiveMessage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1041,7 +1041,7 @@ export const InteractiveMessage = () => {
10411041
getQueryFetchPolicy="cache-and-network"
10421042
afterSave={afterSave}
10431043
saveOnPageChange={false}
1044-
buttonState={{ text: t('Validating URL'), status: validatingURL }}
1044+
buttonState={{ text: t('Validating URL'), status: validatingURL, show: true }}
10451045
helpData={interactiveMessageInfo}
10461046
backLinkButton={`/${backButton}`}
10471047
/>

0 commit comments

Comments
 (0)