task/WG-237-Delete-Project-Modal-React

react/src/__fixtures__/projectFixtures.ts

@@ -0,0 +1,100 @@
+import {
+  Project,
+  DesignSafeProject,
+  DesignSafeProjectCollection,
+  ProjectRequest,
+} from '../types';
+
+export const projectMock: Project = {
+  id: 1,
+  uuid: 'abc123',
+  name: 'Sample Project',
+  description: 'A sample project for testing purposes.',
+  public: true,
+  system_file: 'sample-file',
+  system_id: 'sample-id',
+  system_path: '/path/to/sample',
+  deletable: true,
+  streetview_instances: null,
+  ds_project: {
+    uuid: 'proj-uuid',
+    projectId: 'proj-id',
+    title: 'Sample DesignSafe Project',
+    value: {
+      dois: [],
+      coPis: [],
+      title: 'Hazmapper V3 PROD Map Test 2024.08.07',
+      users: [
+        {
+          inst: 'University of Texas at Austin (utexas.edu)',
+          role: 'pi',
+          email: '[email protected]',
+          fname: 'John',
+          lname: 'Gentle',
+          username: 'jgentle',
+        },
+        {
+          inst: 'University of Texas at Austin (utexas.edu)',
+          role: 'co_pi',
+          email: '[email protected]',
+          fname: 'Sophia',
+          lname: 'Massie-Perez',
+          username: 'smassie',
+        },
+      ],
+      authors: [],
+      frTypes: [],
+      nhEvent: '',
+      nhTypes: [],
+      fileObjs: [],
+      fileTags: [],
+      keywords: [],
+      nhEvents: [],
+      dataTypes: [],
+      projectId: 'PRJ-5566',
+      tombstone: false,
+      facilities: [],
+      nhLatitude: '',
+      nhLocation: '',
+      description:
+        'Hazmapper V3 PROD Map Test 2024.08.07 description required.',
+      nhLongitude: '',
+      projectType: 'None',
+      teamMembers: [],
+      awardNumbers: [],
+      guestMembers: [],
+      hazmapperMaps: [
+        {
+          name: 'v3_PROD_Hazmapper_2024-08-07_TestProject',
+          path: '/',
+          uuid: '620aeaf4-f813-4b90-ba52-bc87cfa7b07b',
+          deployment: 'production',
+        },
+      ],
+      referencedData: [],
+      associatedProjects: [],
+    },
+  },
+};
+
+export const designSafeProjectMock: DesignSafeProject = {
+  uuid: 'proj-uuid',
+  projectId: 'proj-id',
+  title: 'Sample DesignSafe Project',
+  value: {},
+};
+
+export const designSafeProjectCollectionMock: DesignSafeProjectCollection = {
+  result: [designSafeProjectMock],
+};
+
+export const projectRequestMock: ProjectRequest = {
+  name: 'New Project Request',
+  description: 'A description for the new project request.',
+  public: true,
+  system_file: 'new-project-file',
+  system_id: 'new-system-id',
+  system_path: '/path/to/new-project',
+  watch_content: true,
+  watch_users: false,
+};

react/src/components/DeleteMapModal/DeleteMapModal.module.css

@@ -0,0 +1,6 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 200px;
+}

react/src/components/DeleteMapModal/DeleteMapModal.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  render,
+  cleanup,
+  fireEvent,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import DeleteMapModal from './DeleteMapModal';
+import { Provider } from 'react-redux';
+import store from '../../redux/store';
+import { projectMock } from '../../__fixtures__/projectFixtures';
+
+jest.mock('../../hooks/projects/useProjects', () => ({
+  __esModule: true,
+  useDeleteProject: (projectId) => ({
+    mutate: jest.fn((data, { onSuccess, onError }) => {
+      if (projectId === 404) {
+        onError({ response: { status: 404 } });
+      } else {
+        onSuccess();
+      }
+    }),
+    isLoading: false,
+  }),
+}));
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+const toggleMock = jest.fn();
+const queryClient = new QueryClient();
+
+const renderComponent = async (
+  projectId = 123,
+  projectName = 'Sample Project'
+) => {
+  await act(async () => {
+    render(
+      <Provider store={store}>
+        <QueryClientProvider client={queryClient}>
+          <Router>
+            <DeleteMapModal
+              isOpen={true}
+              toggle={toggleMock}
+              projectId={projectMock.id}
+              project={projectMock}
+            />
+          </Router>
+        </QueryClientProvider>
+      </Provider>
+    );
+  });
+};
+
+describe('DeleteMapModal', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders the modal when open', async () => {
+    await renderComponent();
+    await waitFor(() => {
+      expect(screen.getByText('Delete Map: Sample Project')).toBeTruthy();
+    });
+  });
+
+  test('successfully deletes a project', async () => {
+    await renderComponent(123, 'Sample Project');
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /Delete/ }));
+    });
+
+    await waitFor(() => {
+      expect(toggleMock).toHaveBeenCalled();
+    });
+  });
+});

react/src/components/DeleteMapModal/DeleteMapModal.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, SectionMessage } from '../../core-components';
+import styles from './DeleteMapModal.module.css';
+import { Project } from '../../types';
+import { useDeleteProject } from '../../hooks/projects/';
+
+type DeleteMapModalProps = {
+  isOpen: boolean;
+  toggle: () => void;
+  projectId?: number;
+  project?: Project;
+};
+
+const DeleteMapModal = ({
+  isOpen,
+  toggle: parentToggle,
+  projectId,
+  project,
+}: DeleteMapModalProps) => {
+  const [errorMessage, setErrorMessage] = useState('');
+  const { mutate: deleteProject, isLoading: isDeletingProject } =
+    useDeleteProject(projectId);
+  const handleClose = () => {
+    setErrorMessage(''); // Clear the error message
+    parentToggle(); // Call the original toggle function passed as a prop
+  };
+
+  const handleDeleteProject = () => {
+    deleteProject(undefined, {
+      onSuccess: () => {
+        handleClose();
+      },
+      onError: () => {
+        setErrorMessage('There was an error deleting your project.');
+      },
+    });
+  };
+
+  return (
+    <Modal isOpen={isOpen} toggle={handleClose} className={styles.root}>
+      <ModalHeader toggle={handleClose}>
+        Delete Map: {project?.name}{' '}
+      </ModalHeader>
+      <ModalBody>
+        {project?.deletable
+          ? 'Are you sure you want to delete this map? All associated features, metadata, and saved files will be deleted. THIS CANNOT BE UNDONE.'
+          : "This map is not able to be deleted either because the map is public or because you don't have permission."}
+      </ModalBody>
+      <ModalFooter className="justify-content-start">
+        <Button size="short" type="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        {project?.deletable ? (
+          <Button
+            size="short"
+            type="primary"
+            attr="submit"
+            isLoading={isDeletingProject}
+            onClick={handleDeleteProject}
+          >
+            Delete
+          </Button>
+        ) : (
+          <Button size="short" type="primary" attr="submit" disabled>
+            Delete
+          </Button>
+        )}
+        {errorMessage && (
+          <SectionMessage type="error">{errorMessage}</SectionMessage>
+        )}
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default DeleteMapModal;

react/src/components/Projects/ProjectListing.tsx

@@ -2,10 +2,14 @@ import React, { useState } from 'react';
 import { useProjectsWithDesignSafeInformation } from '../../hooks';
 import { Button, LoadingSpinner, Icon } from '../../core-components';
 import CreateMapModal from '../CreateMapModal/CreateMapModal';
+import DeleteMapModal from '../DeleteMapModal/DeleteMapModal';
+import { Project } from '../../types';
 import { useNavigate } from 'react-router-dom';
 
 export const ProjectListing: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedProjectForDeletion, setSelectedProjectForDeletion] =
+    useState<Project | null>(null);
   const navigate = useNavigate();
 
   const navigateToProject = (projectId) => {
@@ -16,6 +20,10 @@ export const ProjectListing: React.FC = () => {
     setIsModalOpen(!isModalOpen);
   };
 
+  const toggleDeleteModal = (project: Project | null) => {
+    setSelectedProjectForDeletion(project);
+  };
+
   const { data, isLoading, isError } = useProjectsWithDesignSafeInformation();
 
   if (isLoading) {
@@ -43,24 +51,33 @@ export const ProjectListing: React.FC = () => {
         </thead>
         <tbody>
           {data?.map((proj) => (
-            <tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
-              <td>{proj.name}</td>
-              <td>
+            <tr key={proj.id}>
+              <td onClick={() => navigateToProject(proj.uuid)}>{proj.name}</td>
+              <td onClick={() => navigateToProject(proj.uuid)}>
                 {proj.ds_project?.value.projectId}{' '}
                 {proj.ds_project?.value.title}
               </td>
               <td>
                 <Button>
                   <Icon name="edit-document"></Icon>
                 </Button>
-                <Button>
+                <Button onClick={() => toggleDeleteModal(proj)}>
                   <Icon name="trash"></Icon>
                 </Button>
               </td>
             </tr>
           ))}
         </tbody>
       </table>
+
+      {selectedProjectForDeletion && (
+        <DeleteMapModal
+          isOpen={!!selectedProjectForDeletion}
+          toggle={() => toggleDeleteModal(null)}
+          projectId={selectedProjectForDeletion.id}
+          project={selectedProjectForDeletion}
+        />
+      )}
     </>
   );
 };

react/src/hooks/projects/index.ts

@@ -1,4 +1,5 @@
 export {
+  useDeleteProject,
   useProjectsWithDesignSafeInformation,
   useProjects,
   useDsProjects,

react/src/hooks/projects/useProjects.ts

@@ -1,7 +1,7 @@
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult, useQueryClient } from 'react-query';
 import { useMemo } from 'react';
 import { Project, DesignSafeProjectCollection, ApiService } from '../../types';
-import { useGet } from '../../requests';
+import { useGet, useDelete } from '../../requests';
 
 export const useProjects = (): UseQueryResult<Project[]> => {
   const query = useGet<Project[]>({
@@ -75,3 +75,17 @@ export function useProjectsWithDesignSafeInformation(): UseQueryResult<
     error: dsProjectQuery.error || projectQuery.error,
   } as UseQueryResult<Project[]>;
 }
+
+export const useDeleteProject = (projectId: number | undefined) => {
+  const queryClient = useQueryClient();
+  const endpoint = `/projects/${projectId}/`;
+  return useDelete<void>({
+    endpoint,
+    apiService: ApiService.Geoapi,
+    options: {
+      onSuccess: () => {
+        queryClient.invalidateQueries('projects');
+      },
+    },
+  });
+};