fix/Button for whatsapp form (#3661)

* Fix: add new button

* fix: button

* fix:Button image

* Fix: css

* fix: remove delete icon

Author: priyanshu6238

src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.module.css

@@ -8,7 +8,7 @@
   min-height: 36px !important;
 }
 
-.SearchBar>fieldset {
+.SearchBar > fieldset {
   border: none !important;
 }
 
@@ -127,6 +127,9 @@
   z-index: 20;
   min-width: 150px;
 }
+.IconSize {
+  font-size: 1.2rem !important;
+}
 
 .MoreListItem {
   padding: 5px 10px;

src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.test.tsx

@@ -150,7 +150,7 @@ describe('<WhatsAppFormList />', () => {
   });
 
   test('deactivate a form successfully when inactive button is clicked', async () => {
-    const { getByText, getAllByRole, getByTestId } = render(wrapper([deactivateWhatsappForm]));
+    const { getByText, getAllByRole, getByTestId, getAllByTestId } = render(wrapper([deactivateWhatsappForm]));
     const notificationSpy = vi.spyOn(Notification, 'setNotification');
 
     const select = getAllByRole('combobox')[0];
@@ -164,8 +164,8 @@ describe('<WhatsAppFormList />', () => {
       expect(getByText('This is form name')).toBeInTheDocument();
     });
 
-    fireEvent.click(getByTestId('MoreIcon'));
-    fireEvent.click(getByText('Deactivate'));
+    const deactivateIcon = await waitFor(() => getAllByTestId('deactivate-icon')[0]);
+    fireEvent.click(deactivateIcon);
 
     await waitFor(() => {
       expect(getByTestId('dialogTitle')).toBeInTheDocument();
@@ -181,7 +181,7 @@ describe('<WhatsAppFormList />', () => {
   });
 
   test('shows error message when deactivate API fails', async () => {
-    const { getByText, getAllByRole, getByTestId } = render(wrapper([deactivateWhatsappFormError]));
+    const { getByText, getAllByRole, getByTestId, getAllByTestId } = render(wrapper([deactivateWhatsappFormError]));
     const errorSpy = vi.spyOn(Notification, 'setErrorMessage');
 
     const select = getAllByRole('combobox')[0];
@@ -195,8 +195,8 @@ describe('<WhatsAppFormList />', () => {
       expect(getByText('This is form name')).toBeInTheDocument();
     });
 
-    fireEvent.click(getByTestId('MoreIcon'));
-    fireEvent.click(getByText('Deactivate'));
+    const deactivateIcon = await waitFor(() => getAllByTestId('deactivate-icon')[0]);
+    fireEvent.click(deactivateIcon);
 
     await waitFor(() => {
       expect(getByTestId('dialogTitle')).toBeInTheDocument();

src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.tsx

@@ -10,6 +10,9 @@ import { GET_WHATSAPP_FORM, LIST_WHATSAPP_FORMS } from 'graphql/queries/WhatsApp
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { formatError } from '../WhatsAppForms';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+
 import styles from './WhatsAppFormList.module.css';
 
 const columnStyles = [styles.Name, styles.status, styles.Label, styles.Actions];
@@ -128,12 +131,12 @@ export const WhatsAppFormList = () => {
   const additionalAction = (item: any) => {
     const deactivateAction = {
       label: 'Deactivate',
+      icon: <HighlightOffIcon className={styles.IconSize} data-testid="deactivate-icon" />,
       parameter: 'id',
       dialog: (id: string) => {
         setFormId(id);
         setDialogType('inactive');
       },
-      insideMore: true,
     };
 
     const publishAction = {
@@ -148,13 +151,12 @@ export const WhatsAppFormList = () => {
 
     const activateAction = {
       label: 'Activate',
+      icon: <AddCircleOutlineIcon className={styles.IconSize} data-testid="activate-icon" />,
       parameter: 'id',
       dialog: (id: string) => {
         setFormId(id);
-        setDialogType('activate');
         activateForm({ variables: { activateWhatsappFormId: id } });
       },
-      insideMore: true,
     };
 
     let actions = [];