ui: connect delete button in new holdingpen

* ref: cern-sis/issues-inspire#533

ui/src/actions/actionTypes.ts

@@ -151,3 +151,6 @@ export const HOLDINGPEN_RESOLVE_ACTION_SUCCESS =
   'HOLDINGPEN_RESOLVE_ACTION_SUCCESS';
 export const HOLDINGPEN_RESOLVE_ACTION_ERROR =
   'HOLDINGPEN_RESOLVE_ACTION_ERROR';
+export const HOLDINGPEN_DELETE_REQUEST = 'HOLDINGPEN_DELETE_REQUEST';
+export const HOLDINGPEN_DELETE_SUCCESS = 'HOLDINGPEN_DELETE_SUCCESS';
+export const HOLDINGPEN_DELETE_ERROR = 'HOLDINGPEN_DELETE_ERROR';

ui/src/actions/holdingpen.ts

@@ -21,6 +21,9 @@ import {
   HOLDINGPEN_RESOLVE_ACTION_SUCCESS,
   HOLDINGPEN_RESOLVE_ACTION_ERROR,
   HOLDINGPEN_LOGIN_REQUEST,
+  HOLDINGPEN_DELETE_SUCCESS,
+  HOLDINGPEN_DELETE_ERROR,
+  HOLDINGPEN_DELETE_REQUEST,
 } from './actionTypes';
 import {
   BACKOFFICE_API,
@@ -35,6 +38,8 @@ import {
   notifyLoginError,
   notifyActionError,
   notifyActionSuccess,
+  notifyDeleteSuccess,
+  notifyDeleteError,
 } from '../holdingpen-new/notifications';
 import { refreshToken } from '../holdingpen-new/utils/utils';
 
@@ -318,3 +323,47 @@ export function resolveAction(
     }
   };
 }
+
+// DELETE ACTIONS
+
+export const deletingWorkflow = () => {
+  return {
+    type: HOLDINGPEN_DELETE_REQUEST,
+  };
+};
+
+export const deleteWorkflowSuccess = () => {
+  return {
+    type: HOLDINGPEN_DELETE_SUCCESS,
+  };
+};
+
+export const deleteWorkflowError = (errorPayload: { error: Error }) => {
+  return {
+    type: HOLDINGPEN_DELETE_ERROR,
+    payload: { ...errorPayload },
+  };
+};
+
+export function deleteWorkflow(
+  id: string
+): (dispatch: ActionCreator<Action>) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(deletingWorkflow());
+    try {
+      await httpClient.delete(`${BACKOFFICE_API}/${id}/`);
+
+      dispatch(deleteWorkflowSuccess());
+      notifyDeleteSuccess();
+    } catch (err) {
+      const { error } = httpErrorToActionPayload(err);
+
+      dispatch(deleteWorkflowError(error));
+      notifyDeleteError(
+        (typeof error?.error === 'string'
+          ? error?.error
+          : error?.error?.detail) || 'An error occurred'
+      );
+    }
+  };
+}

ui/src/common/components/EmptyOrChildren.tsx

@@ -18,7 +18,7 @@ const EmptyOrChildren = ({
 }: {
   data: any;
   children: JSX.Element;
-  title: string;
+  title: string | JSX.Element;
   description?: string;
 }) => {
   return isEmptyCollection(data) ? (

ui/src/holdingpen-new/components/DeleteWorkflow/DeleteWorkflow.less

@@ -0,0 +1,5 @@
+.delete-modal {
+  .ant-modal-footer {
+    border-top: none;
+  }
+}

ui/src/holdingpen-new/components/DeleteWorkflow/DeleteWorkflow.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Button, Modal } from 'antd';
+import { Action, ActionCreator } from 'redux';
+
+import './DeleteWorkflow.less';
+import { deleteWorkflow } from '../../../actions/holdingpen';
+
+const DeleteWorkflow: React.FC<{
+  dispatch: ActionCreator<Action>;
+  id: string;
+}> = ({ dispatch, id }) => {
+  const [open, setOpen] = useState(false);
+
+  const showModal = () => {
+    setOpen(true);
+  };
+
+  const hideModal = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button className="font-white bg-error" onClick={showModal}>
+        Delete
+      </Button>
+      <Modal
+        title="Modal"
+        open={open}
+        onOk={() => {
+          dispatch(deleteWorkflow(id));
+          hideModal();
+        }}
+        onCancel={hideModal}
+        okText="Confirm"
+        cancelText="Cancel"
+        className="delete-modal"
+      >
+        <p>
+          Are you sure you want to delete workflow? This operation is
+          unreversable.
+        </p>
+      </Modal>
+    </>
+  );
+};
+
+export default DeleteWorkflow;

ui/src/holdingpen-new/components/__tests__/DeleteWorkflow.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+
+import DeleteWorkflow from '../DeleteWorkflow/DeleteWorkflow';
+
+jest.mock('../../../actions/holdingpen', () => ({
+  deleteWorkflow: jest.fn((id) => ({
+    type: 'HOLDINGPEN_DELETE_REQUEST',
+    payload: id,
+  })),
+}));
+
+describe('DeleteWorkflow component', () => {
+  const mockDispatch = jest.fn();
+  const mockId = 'test-id';
+
+  beforeEach(() => {
+    mockDispatch.mockClear();
+  });
+
+  it('should render delete button', () => {
+    render(<DeleteWorkflow dispatch={mockDispatch} id={mockId} />);
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  it('should open the modal when the delete button is clicked', async () => {
+    render(<DeleteWorkflow dispatch={mockDispatch} id={mockId} />);
+
+    await waitFor(() => userEvent.click(screen.getByText('Delete')));
+
+    await waitFor(() =>
+      expect(
+        screen.getByText(
+          'Are you sure you want to delete workflow? This operation is unreversable.'
+        )
+      ).toBeVisible()
+    );
+  });
+
+  it('should call dispatch with deleteWorkflow and close the modal on confirm', async () => {
+    render(<DeleteWorkflow dispatch={mockDispatch} id={mockId} />);
+
+    await waitFor(() => userEvent.click(screen.getByText('Delete')));
+
+    await waitFor(() => userEvent.click(screen.getByText('Confirm')));
+
+    await waitFor(() =>
+      expect(mockDispatch).toHaveBeenCalledWith({
+        type: 'HOLDINGPEN_DELETE_REQUEST',
+        payload: mockId,
+      })
+    );
+  });
+});