Merge pull request #1537 from Northeastern-Electric-Racing/#1183-delete-team-endpoint

#1183 Delete Team Endpoint

Author: RChandler234

src/backend/src/controllers/teams.controllers.ts

@@ -85,4 +85,15 @@ export default class TeamsController {
       next(error);
     }
   }
+
+  static async deleteTeam(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { teamId } = req.params;
+      const deleter = await getCurrentUser(res);
+      await TeamsService.deleteTeam(deleter, teamId);
+      return res.status(204).json({ message: `Successfully deleted team with id ${teamId}` });
+    } catch (error: unknown) {
+      next(error);
+    }
+  }
 }

src/backend/src/routes/teams.routes.ts

@@ -29,6 +29,7 @@ teamsRouter.post(
   TeamsController.editDescription
 );
 teamsRouter.post('/:teamId/set-head', intMinZero(body('userId')), validateInputs, TeamsController.setTeamHead);
+teamsRouter.post('/:teamId/delete', TeamsController.deleteTeam);
 teamsRouter.post(
   '/create',
   nonEmptyString(body('teamName')),

src/backend/src/services/teams.services.ts

@@ -3,7 +3,12 @@ import { User } from '@prisma/client';
 import teamQueryArgs from '../prisma-query-args/teams.query-args';
 import prisma from '../prisma/prisma';
 import teamTransformer from '../transformers/teams.transformer';
-import { NotFoundException, AccessDeniedException, HttpException } from '../utils/errors.utils';
+import {
+  NotFoundException,
+  AccessDeniedException,
+  HttpException,
+  AccessDeniedAdminOnlyException
+} from '../utils/errors.utils';
 import { getUsers } from '../utils/users.utils';
 import { isUnderWordCount } from 'shared';
 
@@ -159,10 +164,23 @@ export default class TeamsService {
       },
       ...teamQueryArgs
     });
-
     return teamTransformer(updateTeam);
   }
 
+  /**
+   * Hard deletes the team with the given teamId
+   * @param deleter the user submitting this request
+   * @param teamId the id of the team to be deleted
+   */
+  static async deleteTeam(deleter: User, teamId: string): Promise<void> {
+    const team = await prisma.team.findUnique({ where: { teamId }, ...teamQueryArgs });
+
+    if (!team) throw new NotFoundException('Team', teamId);
+    if (!isAdmin(deleter.role)) throw new AccessDeniedAdminOnlyException('delete teams');
+
+    await prisma.team.delete({ where: { teamId }, ...teamQueryArgs });
+  }
+
   /**
    * Creates a new team in the database
    * @param submitter The submitter who is trying to create a new team

src/backend/tests/teams.test.ts

@@ -218,6 +218,42 @@ describe('Teams', () => {
     });
   });
 
+  describe('deleteTeam', () => {
+    test('deleteTeam team not found', async () => {
+      vi.spyOn(prisma.team, 'findUnique').mockResolvedValue(null);
+
+      const callDeleteTeam = async () => await TeamsService.deleteTeam(flash, 'fakeId');
+
+      const expectedException = new HttpException(404, 'Team with id: fakeId not found!');
+
+      await expect(callDeleteTeam).rejects.toThrow(expectedException);
+    });
+
+    test('deleteTeam submitter is not admin', async () => {
+      vi.spyOn(prisma.team, 'findUnique').mockResolvedValue(prismaTeam1);
+
+      const callDeleteTeam = async () => await TeamsService.deleteTeam(greenlantern, prismaTeam1.teamId);
+
+      const expectedException = new HttpException(
+        403,
+        'Access Denied: admin and app-admin only have the ability to delete teams'
+      );
+
+      await expect(callDeleteTeam).rejects.toThrow(expectedException);
+    });
+
+    test('deleteTeam works', async () => {
+      vi.spyOn(prisma.team, 'findUnique').mockResolvedValue(prismaTeam1);
+      vi.spyOn(prisma.team, 'delete').mockResolvedValue(prismaTeam1);
+
+      await TeamsService.deleteTeam(batman, prismaTeam1.teamId);
+
+      expect(prisma.team.findUnique).toHaveBeenCalledTimes(1);
+      expect(prisma.team.delete).toHaveBeenCalledTimes(1);
+      expect(prisma.team.delete).toHaveBeenCalledWith({ where: { teamId: prismaTeam1.teamId }, ...teamQueryArgs });
+    });
+  });
+
   describe('setTeamLeads', () => {
     test('setTeamLeads submitter is not the head or admin', async () => {
       vi.spyOn(prisma.team, 'findUnique').mockResolvedValue(prismaTeam1);

src/frontend/src/apis/teams.api.ts

@@ -38,6 +38,10 @@ export const setTeamHead = (id: string, userId: number) => {
   });
 };
 
+export const deleteTeam = (id: string) => {
+  return axios.post<{ message: string }>(apiUrls.teamsDelete(id));
+};
+
 export const createTeam = (payload: CreateTeamPayload) => {
   return axios.post<Team>(apiUrls.teamsCreate(), payload);
 };

src/frontend/src/hooks/teams.hooks.ts

@@ -11,6 +11,7 @@ import {
   setTeamMembers,
   setTeamDescription,
   setTeamHead,
+  deleteTeam,
   createTeam,
   setTeamLeads
 } from '../apis/teams.api';
@@ -83,6 +84,22 @@ export const useEditTeamDescription = (teamId: string) => {
   );
 };
 
+export const useDeleteTeam = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{ message: string }, Error, any>(
+    ['teams', 'delete'],
+    async (teamId: string) => {
+      const { data } = await deleteTeam(teamId);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['teams']);
+      }
+    }
+  );
+};
+
 export const useCreateTeam = () => {
   const queryClient = useQueryClient();
   return useMutation<Team, Error, CreateTeamPayload>(

src/frontend/src/pages/TeamsPage/DeleteTeamModal.tsx

@@ -0,0 +1,97 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import { useToast } from '../../hooks/toasts.hooks';
+import * as yup from 'yup';
+import { useDeleteTeam, useSingleTeam } from '../../hooks/teams.hooks';
+import { useHistory } from 'react-router-dom';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
+import NERFormModal from '../../components/NERFormModal';
+import { Typography, FormControl, FormLabel } from '@mui/material';
+import ReactHookTextField from '../../components/ReactHookTextField';
+
+interface DeleteTeamInputs {
+  teamName: string;
+}
+
+interface DeleteTeamModalProps {
+  teamId: string;
+  showModal: boolean;
+  onHide: () => void;
+}
+
+const DeleteTeamModal: React.FC<DeleteTeamModalProps> = ({ teamId, showModal, onHide }: DeleteTeamModalProps) => {
+  const { data: team, isLoading: teamIsLoading, isError: teamIsError, error: teamError } = useSingleTeam(teamId);
+  const { isLoading: deleteIsLoading, isError: deleteIsError, error: deleteError, mutateAsync } = useDeleteTeam();
+  const toast = useToast();
+  const teamNameTester = (teamName: string | undefined) =>
+    team !== undefined && teamName !== undefined && teamName.toLowerCase() === team.teamName.toLowerCase();
+  const schema = yup.object().shape({
+    teamName: yup.string().required().test('team-name-test', 'Team name does not match', teamNameTester)
+  });
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isValid }
+  } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      teamName: ''
+    },
+    mode: 'onChange'
+  });
+  const history = useHistory();
+
+  const handleConfirm = async ({ teamName }: DeleteTeamInputs) => {
+    if (team?.teamName.toLowerCase() === teamName.toLowerCase()) {
+      try {
+        await mutateAsync(teamId);
+        onHide();
+        history.goBack();
+        toast.success('Team deleted successfully!');
+      } catch (e) {
+        if (e instanceof Error) {
+          toast.error(e.message);
+        }
+      }
+    }
+  };
+
+  if (!team || teamIsLoading || deleteIsLoading) return <LoadingIndicator />;
+  if (teamIsError) return <ErrorPage message={teamError.message} />;
+  if (deleteIsError) return <ErrorPage message={deleteError?.message} />;
+
+  return (
+    <NERFormModal
+      open={showModal}
+      onHide={onHide}
+      title={`Delete Team ${team.teamName}`}
+      reset={() => reset({ teamName: '' })}
+      handleUseFormSubmit={handleSubmit}
+      onFormSubmit={handleConfirm}
+      formId="delete-team-form"
+      submitText="Delete"
+      disabled={!isValid}
+      showCloseButton
+    >
+      <Typography sx={{ marginBottom: '1rem' }}>Are you sure you want to delete Team {team.teamName}?</Typography>
+      <Typography sx={{ fontWeight: 'bold' }}>This action cannot be undone!</Typography>
+      <FormControl>
+        <FormLabel sx={{ marginTop: '1rem', marginBottom: '1rem' }}>
+          To confirm deletion, please type in the name of this team.
+        </FormLabel>
+        <ReactHookTextField
+          control={control}
+          name="teamName"
+          errorMessage={errors.teamName}
+          placeholder="Enter Team Name here"
+          sx={{ width: 1 }}
+          type="string"
+        />
+      </FormControl>
+    </NERFormModal>
+  );
+};
+
+export default DeleteTeamModal;

src/frontend/src/pages/TeamsPage/TeamSpecificPage.tsx

@@ -9,6 +9,12 @@ import ActiveProjectCardView from './ProjectCardsView';
 import DescriptionPageBlock from './DescriptionPageBlock';
 import { routes } from '../../utils/routes';
 import PageLayout from '../../components/PageLayout';
+import { Delete } from '@mui/icons-material';
+import { NERButton } from '../../components/NERButton';
+import { useCurrentUser } from '../../hooks/users.hooks';
+import { isAdmin } from 'shared';
+import { useState } from 'react';
+import DeleteTeamModal from './DeleteTeamModal';
 
 interface ParamTypes {
   teamId: string;
@@ -17,12 +23,29 @@ interface ParamTypes {
 const TeamSpecificPage: React.FC = () => {
   const { teamId } = useParams<ParamTypes>();
   const { isLoading, isError, data, error } = useSingleTeam(teamId);
+  const user = useCurrentUser();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
 
   if (isError) return <ErrorPage message={error?.message} />;
   if (isLoading || !data) return <LoadingIndicator />;
 
+  const deleteButton = (
+    <NERButton
+      variant="contained"
+      disabled={!isAdmin(user.role)}
+      startIcon={<Delete />}
+      onClick={() => setShowDeleteModal(true)}
+    >
+      Delete
+    </NERButton>
+  );
+
   return (
-    <PageLayout title={`Team ${data.teamName}`} previousPages={[{ name: 'Teams', route: routes.TEAMS }]}>
+    <PageLayout
+      headerRight={isAdmin(user.role) && deleteButton}
+      title={`Team ${data.teamName}`}
+      previousPages={[{ name: 'Teams', route: routes.TEAMS }]}
+    >
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <TeamMembersPageBlock team={data} />
@@ -40,6 +63,7 @@ const TeamSpecificPage: React.FC = () => {
           <DescriptionPageBlock team={data} />
         </Grid>
       </Grid>
+      <DeleteTeamModal teamId={teamId} showModal={showDeleteModal} onHide={() => setShowDeleteModal(false)} />
     </PageLayout>
   );
 };

src/frontend/src/utils/urls.ts

@@ -69,6 +69,7 @@ const changeRequestRequestReviewer = (id: string) => changeRequestsById(id) + '/
 /**************** Teams Endpoints ****************/
 const teams = () => `${API_URL}/teams`;
 const teamsById = (id: string) => `${teams()}/${id}`;
+const teamsDelete = (id: string) => `${teamsById(id)}/delete`;
 const teamsSetMembers = (id: string) => `${teamsById(id)}/set-members`;
 const teamsSetHead = (id: string) => `${teamsById(id)}/set-head`;
 const teamsSetDescription = (id: string) => `${teamsById(id)}/edit-description`;
@@ -155,6 +156,7 @@ export const apiUrls = {
 
   teams,
   teamsById,
+  teamsDelete,
   teamsSetMembers,
   teamsSetHead,
   teamsSetDescription,