diff --git a/src/containers/ContactField/ContactFieldList/ContactFieldList.module.css b/src/containers/ContactField/ContactFieldList/ContactFieldList.module.css index ede3e4274..d9c3a107b 100644 --- a/src/containers/ContactField/ContactFieldList/ContactFieldList.module.css +++ b/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; +} diff --git a/src/containers/ContactField/ContactFieldList/ContactFieldList.tsx b/src/containers/ContactField/ContactFieldList/ContactFieldList.tsx index 5f297beda..c1d9767c6 100644 --- a/src/containers/ContactField/ContactFieldList/ContactFieldList.tsx +++ b/src/containers/ContactField/ContactFieldList/ContactFieldList.tsx @@ -24,6 +24,12 @@ const ContactFieldList = () => { const [itemToBeEdited, setItemToBeEdited] = useState(null); const [error, setError] = useState(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 = ; - const dialogMessage = t('This action cannot be undone.'); + const dialogMessage = ({ deleteItemID, deleteItemName, refetch, setDeleteItemID }: any) => { + const component = ( +
+

+ Available options:- +
+ 1. Delete only contact field (no impact on contacts). +
+ 2. Delete contact field and associated data (removes "{deleteItemName}" field from all + contacts). +

+
+ ); + + 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 ( diff --git a/src/containers/List/List.test.tsx b/src/containers/List/List.test.tsx index 90fbecb77..797dea090 100644 --- a/src/containers/List/List.test.tsx +++ b/src/containers/List/List.test.tsx @@ -95,7 +95,7 @@ describe(' 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, + }, }; }; diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index e224fe29f..548acfe12 100644 --- a/src/containers/List/List.tsx +++ b/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 diff --git a/src/containers/OrganizationList/OrganizationList.test.tsx b/src/containers/OrganizationList/OrganizationList.test.tsx index 814e5670a..182171435 100644 --- a/src/containers/OrganizationList/OrganizationList.test.tsx +++ b/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(() => {}); }); diff --git a/src/containers/OrganizationList/OrganizationList.tsx b/src/containers/OrganizationList/OrganizationList.tsx index 95540e5be..8e5cf0a63 100644 --- a/src/containers/OrganizationList/OrganizationList.tsx +++ b/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 = (

@@ -131,16 +131,18 @@ export const OrganizationList = ({ />

); - - 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 }), + }, }; }; diff --git a/src/containers/Ticket/Ticket.test.tsx b/src/containers/Ticket/Ticket.test.tsx index 9bf775118..699f63c88 100644 --- a/src/containers/Ticket/Ticket.test.tsx +++ b/src/containers/Ticket/Ticket.test.tsx @@ -18,7 +18,7 @@ test('Render component correctly with the values', async () => { render( - + , ); 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'); + }); }); diff --git a/src/graphql/mutations/ContactFields.ts b/src/graphql/mutations/ContactFields.ts index fddd6bfa3..20dac8c70 100644 --- a/src/graphql/mutations/ContactFields.ts +++ b/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 diff --git a/src/mocks/Organization.tsx b/src/mocks/Organization.tsx index 21ca0fcc3..b475ab807 100644 --- a/src/mocks/Organization.tsx +++ b/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,