Merge branch 'master' of https://github.com/glific/glific-frontend

src/containers/ContactField/ContactFieldList/ContactFieldList.module.css

@@ -40,13 +40,17 @@
 .OtherColumnText:hover > span {
   visibility: visible;
   opacity: 1;
-  transition: visibility 0s linear 0s, opacity 900ms;
+  transition:
+    visibility 0s linear 0s,
+    opacity 900ms;
 }
 
 .OtherColumnText > span {
   visibility: hidden;
   opacity: 0;
-  transition: visibility 0s linear 300ms, opacity 300ms;
+  transition:
+    visibility 0s linear 300ms,
+    opacity 300ms;
   padding: 8px;
   margin-left: -8px;
   background: radial-gradient(white, transparent);
@@ -100,3 +104,12 @@
   margin-bottom: 0px;
   padding-bottom: 64px;
 }
+
+.DialogSubText {
+  text-align: left;
+  font-size: 16px;
+}
+
+.Title {
+  max-width: 460px !important;
+}

src/containers/ContactField/ContactFieldList/ContactFieldList.tsx

@@ -24,6 +24,12 @@ const ContactFieldList = () => {
   const [itemToBeEdited, setItemToBeEdited] = useState<EditItemShape | any>(null);
   const [error, setError] = useState<any>(null);
 
+  const [deleteContactField] = useMutation(DELETE_CONTACT_FIELDS, {
+    onError: () => {
+      setNotification('Sorry! An error occured while deleting the contact field', 'warning');
+    },
+  });
+
   let dialog;
 
   if (openDialog) {
@@ -144,7 +150,42 @@ const ContactFieldList = () => {
   };
 
   const listIcon = <ContactVariableIcon className={styles.ContactFieldIcon} color="primary.dark" />;
-  const dialogMessage = t('This action cannot be undone.');
+  const dialogMessage = ({ deleteItemID, deleteItemName, refetch, setDeleteItemID }: any) => {
+    const component = (
+      <div>
+        <p className={styles.DialogSubText}>
+          <strong> Available options:-</strong>
+          <br />
+          1. Delete only contact field (no impact on contacts).
+          <br />
+          2. Delete contact field and associated data (removes "{deleteItemName}" field from all
+          contacts).
+        </p>
+      </div>
+    );
+
+    return {
+      component,
+      props: {
+        buttonOk: 'Delete field',
+        buttonMiddle: 'Delete field & data',
+        additionalTitleStyles: styles.Title,
+        handleMiddle: () => {
+          deleteContactField({
+            variables: {
+              deleteAssoc: true,
+              id: deleteItemID,
+            },
+            onCompleted: () => {
+              setNotification('Contact field deleted successfully!');
+              refetch();
+              setDeleteItemID(null);
+            },
+          });
+        },
+      },
+    };
+  };
   const dialogTitle = t('Are you sure you want to delete this contact field record?');
 
   return (

src/containers/List/List.test.tsx

@@ -95,7 +95,7 @@ describe('<List /> actions', () => {
     const { container } = render(listButtons);
     await waitFor(() => {
       const button = container.querySelector(
-        'button.MuiButton-containedPrimary'
+        'button.MuiButton-containedPrimary',
       ) as HTMLButtonElement;
       fireEvent.click(button);
     });
@@ -155,8 +155,10 @@ describe('DialogMessage tests', () => {
       );
       return {
         component,
-        handleOkCallback: vi.fn(),
-        isConfirmed: true,
+        props: {
+          handleOk: vi.fn(),
+          disableOk: false,
+        },
       };
     };
 

src/containers/List/List.tsx

@@ -254,7 +254,7 @@ export const List = ({
     {
       variables: filterPayload(),
       fetchPolicy: 'cache-first',
-    }
+    },
   );
 
   // Get item data here
@@ -324,32 +324,35 @@ export const List = ({
   };
 
   const useDelete = (message: string | any) => {
-    let component: any = {};
-    const props = { disableOk: false, handleOk: handleDeleteItem };
     if (typeof message === 'string') {
-      component = message;
+      const props = { handleOk: handleDeleteItem };
+      return {
+        component: message,
+        props,
+      };
     } else {
       /**
        * Custom component to render
        * message should contain 3 params
        * 1. component: Component to render
-       * 2. isConfirm: To check true or false value
-       * 3. handleOkCallback: Callback action to delete item
+       * 2. props: props to pass to dialog component
        */
-      const {
-        component: componentToRender,
-        isConfirmed,
-        handleOkCallback,
-      } = message(deleteItemID, deleteItemName);
-      component = componentToRender;
-      props.disableOk = !isConfirmed;
-      props.handleOk = () => handleOkCallback({ refetch: fetchQuery, setDeleteItemID });
-    }
 
-    return {
-      component,
-      props,
-    };
+      const dialogParams = {
+        deleteItemID,
+        deleteItemName,
+        refetch: refetchValues,
+        setDeleteItemID,
+      };
+      const { component, props } = message(dialogParams);
+      if (!props.handleOk) {
+        props.handleOk = handleDeleteItem;
+      }
+      return {
+        component,
+        props,
+      };
+    }
   };
 
   let dialogBox;
@@ -390,7 +393,7 @@ export const List = ({
   function getIcons(
     // id: number | undefined,
     item: any,
-    allowedAction: any | null
+    allowedAction: any | null,
   ) {
     // there might be a case when we might want to allow certain actions for reserved items
     // currently we don't allow edit or delete for reserved items. hence return early

src/containers/OrganizationList/OrganizationList.test.tsx

@@ -1,14 +1,14 @@
-import { render, cleanup, fireEvent, act, screen } from '@testing-library/react';
+import { render, cleanup, fireEvent, act, screen, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import UserEvent from '@testing-library/user-event';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import { getAllOrganizations } from 'mocks/Organization';
+import { deleteOrganization, getAllOrganizations } from 'mocks/Organization';
 import { setUserSession } from 'services/AuthService';
 import OrganizationList from './OrganizationList';
 
 afterEach(cleanup);
-const mocks = getAllOrganizations;
+const mocks = [...getAllOrganizations, deleteOrganization];
 setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Admin'] }));
 
 const props = { openExtensionModal: false, openCustomerModal: false };
@@ -73,4 +73,5 @@ test('Update status', async () => {
   expect(confirmDeleteButton).toBeInTheDocument();
 
   fireEvent.click(confirmDeleteButton);
+  await waitFor(() => {});
 });

src/containers/OrganizationList/OrganizationList.tsx

@@ -117,7 +117,7 @@ export const OrganizationList = ({
     setNotification('Organization deleted successfully');
   };
 
-  const deleteDialogue = (id: any, name: any) => {
+  const deleteDialogue = ({ deleteItemID, deleteItemName, refetch, setDeleteItemID }: any) => {
     const component = (
       <div>
         <p className={styles.DialogSubText}>
@@ -131,16 +131,18 @@ export const OrganizationList = ({
         />
       </div>
     );
-
-    const isConfirmed = orgName === name;
+    const isConfirmed = orgName === deleteItemName;
+    console.log(orgName, deleteItemName);
     const payload = {
       isConfirmed,
-      deleteOrganizationID: id,
+      deleteOrganizationID: deleteItemID,
     };
     return {
       component,
-      handleOkCallback: (val: any) => handleDeleteInActiveOrg({ payload, ...val }),
-      isConfirmed,
+      props: {
+        disableOk: !isConfirmed,
+        handleOk: () => handleDeleteInActiveOrg({ payload, refetch, setDeleteItemID }),
+      },
     };
   };
 

src/containers/Ticket/Ticket.test.tsx

@@ -18,7 +18,7 @@ test('Render component correctly with the values', async () => {
   render(
     <MockedProvider mocks={mocks}>
       <Ticket selectedTicket={'1'} setOpenDialog={setOpenDialogMock} />
-    </MockedProvider>
+    </MockedProvider>,
   );
 
   expect(screen.getByText('Loading...')).toBeInTheDocument();
@@ -28,7 +28,9 @@ test('Render component correctly with the values', async () => {
   });
 
   // should have the heading as the issue
-  expect(screen.getByTestId('formLayout')).toHaveTextContent('Please resolve this issue');
-  // also should have remarks
-  expect(screen.getByTestId('formLayout')).toHaveTextContent('The issue was resolved');
+  await waitFor(() => {
+    expect(screen.getByTestId('formLayout')).toHaveTextContent('Please resolve this issue');
+    // also should have remarks
+    expect(screen.getByTestId('formLayout')).toHaveTextContent('The issue was resolved');
+  });
 });

src/graphql/mutations/ContactFields.ts

@@ -52,8 +52,8 @@ export const UPDATE_CONTACT_FIELDS = gql`
 `;
 
 export const DELETE_CONTACT_FIELDS = gql`
-  mutation deleteContactsField($id: ID!) {
-    deleteContactsField(id: $id) {
+  mutation deleteContactsField($id: ID!, $deleteAssoc: Boolean) {
+    deleteContactsField(id: $id, deleteAssoc: $deleteAssoc) {
       contactsField {
         valueType
         updatedAt

src/mocks/Organization.tsx

@@ -1,4 +1,4 @@
-import { UPDATE_CREDENTIAL } from 'graphql/mutations/Organization';
+import { DELETE_INACTIVE_ORGANIZATIONS, UPDATE_CREDENTIAL } from 'graphql/mutations/Organization';
 import {
   GET_ORGANIZATION,
   USER_LANGUAGES,
@@ -722,6 +722,18 @@ export const getAllOrganizations = [
   },
 ];
 
+export const deleteOrganization = {
+  request: {
+    query: DELETE_INACTIVE_ORGANIZATIONS,
+    variables: { isConfirmed: false, deleteOrganizationID: '2' },
+  },
+  result: {
+    data: {
+      organization: null,
+    },
+  },
+};
+
 export const getOrganizationBSP = {
   request: {
     query: GET_ORGANIZATION_PROVIDER,