#2628 Delete Work Package Template Button

src/frontend/src/hooks/work-packages.hooks.ts

@@ -167,14 +167,14 @@ export const useAllWorkPackageTemplates = () => {
 export const useDeleteWorkPackageTemplate = () => {
   const queryClient = useQueryClient();
   return useMutation<{ message: string }, Error, string>(
-    ['work package template', 'delete'],
+    ['work package templates', 'delete'],
     async (workPackageTemplateId: string) => {
       const { data } = await deleteWorkPackageTemplate(workPackageTemplateId);
       return data;
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['work package template']);
+        queryClient.invalidateQueries(['work package templates']);
       }
     }
   );
@@ -195,7 +195,7 @@ export const useSingleWorkPackageTemplate = (workPackageTemplateId: string) => {
  */
 export const useCreateSingleWorkPackageTemplate = () => {
   return useMutation<{ message: string }, Error, WorkPackageTemplateApiInputs>(
-    ['work package template', 'create'],
+    ['work package templates', 'create'],
     async (wptPayload: WorkPackageTemplateApiInputs) => {
       const { data } = await createSingleWorkPackageTemplate(wptPayload);
       return data;

src/frontend/src/pages/AdminToolsPage/AdminToolsProjectsConfig.tsx

@@ -2,7 +2,7 @@ import { Box } from '@mui/system';
 import { Typography } from '@mui/material';
 import WorkPackageTemplateTable from './ProjectsConfig/WorkPackageTemplateTable';
 import LinkTypeTable from './ProjectsConfig/LinkTypeTable';
-import DescriptionBulletTypeTable from './ProjectsConfig/DescriptionBulletTpeTable';
+import DescriptionBulletTypeTable from './ProjectsConfig/DescriptionBulletTypeTable';
 import CarsTable from './ProjectsConfig/CarsTable';
 
 const AdminToolsProjectsConfig: React.FC = () => {

src/frontend/src/pages/AdminToolsPage/ProjectsConfig/DescriptionBulletTpeTable.tsx → src/frontend/src/pages/AdminToolsPage/ProjectsConfig/DescriptionBulletTypeTable.tsx

@@ -5,7 +5,7 @@ import { DescriptionBulletType, isAdmin } from 'shared';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 import { TableCell, TableRow, Typography } from '@mui/material';
-import CreateDescriptionBulletTypeModal from './CreateDescriptionBulletTypeModel';
+import CreateDescriptionBulletTypeModal from './CreateDescriptionBulletTypeModal';
 import EditDescriptionBulletTypeModal from './EditDescriptionBulletTypeModel';
 import { Box } from '@mui/system';
 import AdminToolTable from '../AdminToolTable';

src/frontend/src/pages/AdminToolsPage/ProjectsConfig/WorkPackageTemplateTable.tsx

@@ -1,11 +1,15 @@
-import { TableRow, TableCell, Box } from '@mui/material';
+import { TableRow, TableCell, Box, IconButton, Typography } from '@mui/material';
 import AdminToolTable from '../AdminToolTable';
 import { NERButton } from '../../../components/NERButton';
 import { isAdmin } from 'shared/src/permission-utils';
 import { useCurrentUser } from '../../../hooks/users.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
-import { useAllWorkPackageTemplates } from '../../../hooks/work-packages.hooks';
+import { useAllWorkPackageTemplates, useDeleteWorkPackageTemplate } from '../../../hooks/work-packages.hooks';
+import { Delete } from '@mui/icons-material';
+import { useState } from 'react';
+import NERModal from '../../../components/NERModal';
+import { WorkPackageTemplate } from 'shared';
 
 const WorkPackageTemplateTable = () => {
   const currentUser = useCurrentUser();
@@ -16,27 +20,55 @@ const WorkPackageTemplateTable = () => {
     error: workPackageTemplatesError
   } = useAllWorkPackageTemplates();
 
+  const [templateToDelete, setTemplateToDelete] = useState<WorkPackageTemplate>();
+
+  const { mutateAsync } = useDeleteWorkPackageTemplate();
+
   if (!workPackageTemplates || workPackageTemplatesIsLoading) return <LoadingIndicator />;
   if (workPackageTemplatesIsError) return <ErrorPage message={workPackageTemplatesError.message} />;
 
-  const workPackageTemplateRows = workPackageTemplates.map((workPackageTemplateId) => (
+  const workPackageTemplateRows = workPackageTemplates.map((workPackageTemplate) => (
     <TableRow>
       <TableCell align="left" sx={{ border: '2px solid black' }}>
-        {workPackageTemplateId.templateName}
+        {workPackageTemplate.templateName}
       </TableCell>
-      <TableCell sx={{ border: '2px solid black', verticalAlign: 'middle' }}>
-        {workPackageTemplateId.templateNotes}
+      <TableCell sx={{ border: '2px solid black', verticalAlign: 'middle' }}>{workPackageTemplate.templateNotes}</TableCell>
+      <TableCell align="center" sx={{ border: '2px solid black', verticalAlign: 'middle' }}>
+        <IconButton onClick={() => setTemplateToDelete(workPackageTemplate)}>
+          <Delete />
+        </IconButton>
       </TableCell>
     </TableRow>
   ));
 
   return (
-    <Box>
-      <AdminToolTable columns={[{ name: 'Name' }, { name: 'Description' }]} rows={workPackageTemplateRows} />
-      <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
-        {isAdmin(currentUser.role) && <NERButton variant="contained">New Work Package Template</NERButton>}
+    <>
+      <Box>
+        <AdminToolTable columns={[{ name: 'Name' }, { name: 'Description' }, { name: '' }]} rows={workPackageTemplateRows} />
+        <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
+          {isAdmin(currentUser.role) && <NERButton variant="contained">New Work Package Template</NERButton>}
+        </Box>
       </Box>
-    </Box>
+      <NERModal
+        open={!!templateToDelete}
+        title="Warning!"
+        onHide={() => setTemplateToDelete(undefined)}
+        submitText="Delete"
+        onSubmit={() => {
+          mutateAsync(templateToDelete!.workPackageTemplateId);
+          setTemplateToDelete(undefined);
+        }}
+      >
+        <Typography gutterBottom>
+          Are you sure you want to delete the work package template <i>{templateToDelete?.templateName}</i>?
+        </Typography>
+        <Typography gutterBottom>
+          This will also delete all templates blocked by this one. If you would like to delete this template only, first
+          remove all references to it from all other templates' "Blocked By" sections.
+        </Typography>
+        <Typography fontWeight="bold">This action cannot be undone!</Typography>
+      </NERModal>
+    </>
   );
 };