edit slack ids for teams

Author: chpy04

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

@@ -71,6 +71,17 @@ export default class TeamsController {
     }
   }
 
+  static async editSlackId(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { slackId } = req.body;
+      
+      const team = await TeamsService.editSlackId(req.currentUser, req.organization, req.params.teamId, slackId);
+      res.status(200).json(team);
+    } catch (error: unknown) {
+      next(error);
+    }
+  }
+
   static async setTeamHead(req: Request, res: Response, next: NextFunction) {
     try {
       const { userId } = req.body;

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

@@ -33,6 +33,13 @@ teamsRouter.post(
   TeamsController.editDescription
 );
 
+teamsRouter.post(
+  '/:teamId/edit-slackid',
+  nonEmptyString(body('slackId')),
+  validateInputs,
+  TeamsController.editSlackId
+)
+
 teamsRouter.post('/:teamId/set-head', nonEmptyString(body('userId')), validateInputs, TeamsController.setTeamHead);
 teamsRouter.post('/:teamId/delete', TeamsController.deleteTeam);
 teamsRouter.post(

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

@@ -172,6 +172,37 @@ export default class TeamsService {
     return teamTransformer(updateTeam);
   }
 
+  /**
+   * Updates the slack id of a given team
+   * @param updater the user updating
+   * @param organization the organizaiton
+   * @param teamId the id of the team
+   * @param slackId the new slack id
+   * @returns a preview of the updated team
+   */
+  static async editSlackId(updater: User, organization: Organization, teamId: string, slackId: string) {
+    const team = await TeamsService.getSingleTeam(teamId, organization);
+    if (team.dateArchived) throw new HttpException(400, 'Cannot edit the slack id of an archived team');
+
+    if (
+      !(
+        (await userHasPermission(updater.userId, organization.organizationId, isAdmin)) ||
+        updater.userId === team.head.userId
+      )
+    )
+      throw new AccessDeniedException('you must be an admin or the team head to update the slack id!');
+
+    const updatedTeam = await prisma.team.update({
+      where: { teamId },
+      data: {
+        slackId
+      },
+      ...getTeamPreviewQueryArgs(organization.organizationId)
+    });
+
+    return teamPreviewTransformer(updatedTeam);
+  }
+
   /**
    * Update the team's head of the given team to the given user
    * @param submitter The submitter of this request

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

@@ -44,6 +44,12 @@ export const setTeamDescription = (id: string, description: string) => {
   });
 };
 
+export const setTeamSlackId = (id: string, slackId: string) => {
+  return axios.post<TeamPreview>(apiUrls.teamsSetSlackId(id), {
+    slackId
+  });
+};
+
 export const setTeamHead = (id: string, userId: string) => {
   return axios.post<Team>(apiUrls.teamsSetHead(id), {
     userId

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

@@ -17,7 +17,8 @@ import {
   archiveTeam,
   getAllArchivedTeams,
   getMyTeamsWorkpackages,
-  getUsersTeams
+  getUsersTeams,
+  setTeamSlackId
 } from '../apis/teams.api';
 
 export interface CreateTeamPayload {
@@ -120,6 +121,22 @@ export const useEditTeamDescription = (teamId: string) => {
   );
 };
 
+export const useEditTeamSlackId = (teamId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation<TeamPreview, Error, string>(
+    ['teams', 'edit'],
+    async (slackId: string) => {
+      const { data } = await setTeamSlackId(teamId, slackId);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['teams']);
+      }
+    }
+  );
+};
+
 export const useDeleteTeam = () => {
   const queryClient = useQueryClient();
   return useMutation<{ message: string }, Error, string>(

src/frontend/src/pages/AdminToolsPage/AdminToolsSlackIds.tsx

@@ -4,7 +4,7 @@
  */
 
 import { NERButton } from '../../components/NERButton';
-import { Box, Link, TextField, Typography } from '@mui/material';
+import { Box, Grid, Link, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useToast } from '../../hooks/toasts.hooks';
 import {
@@ -14,8 +14,12 @@ import {
 } from '../../hooks/organizations.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
-import { Organization } from 'shared';
+import { Organization, TeamPreview } from 'shared';
 import HelpIcon from '@mui/icons-material/Help';
+import { useAllTeams } from '../../hooks/teams.hooks';
+import { fullNamePipe } from '../../utils/pipes';
+import AdminToolTable from './AdminToolTable';
+import EditTeamSlackIdFormModal from './TeamConfig/EditTeamSlackIdFormModal';
 
 interface AdminToolsWorkspaceIdViewProps {
   organization: Organization;
@@ -37,9 +41,31 @@ const AdminToolsSlackIdsView: React.FC<AdminToolsWorkspaceIdViewProps> = ({ orga
   const [sponsorshipChannelId, setSponsorshipChannelId] = useState(
     organization.sponsorshipNotificationsSlackChannelId ?? ''
   );
+  const { data: allTeams, isLoading: allTeamsIsLoading, isError: allTeamsIsError, error: allTeamsError } = useAllTeams();
+  const [clickedTeam, setClickedTeam] = useState<TeamPreview>();
+  const [showEditModal, setShowEditModal] = useState<boolean>(false);
+
+  if (!allTeams || allTeamsIsLoading) return <LoadingIndicator />;
+
+  if (allTeamsIsError) {
+    return <ErrorPage message={allTeamsError.message} />;
+  }
 
   if (isLoading) return <LoadingIndicator />;
 
+  const teamTableRows = allTeams.map((team, index) => (
+    <TableRow
+      onClick={() => {
+        setClickedTeam(team);
+        setShowEditModal(true);
+      }}
+      sx={{ color: 'inherit', textDecoration: 'none' }}
+    >
+      <TableCell sx={{ borderBottom: index === allTeams.length - 1 ? 'none' : 'default' }}>{team.teamName}</TableCell>
+      <TableCell sx={{ borderBottom: index === allTeams.length - 1 ? 'none' : 'default' }}>{team.slackId}</TableCell>
+    </TableRow>
+  ));
+
   const handleSubmitWorkspaceId = async () => {
     try {
       await setWorkspaceIdMutateAsync(workspaceId);
@@ -63,7 +89,7 @@ const AdminToolsSlackIdsView: React.FC<AdminToolsWorkspaceIdViewProps> = ({ orga
   };
 
   return (
-    <Box>
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       <Typography variant="h5" gutterBottom color={'#ef4345'} borderBottom={1} borderColor={'white'}>
         {organization.name} Slack Workspace & Channel Ids
       </Typography>
@@ -113,6 +139,25 @@ const AdminToolsSlackIdsView: React.FC<AdminToolsWorkspaceIdViewProps> = ({ orga
           </NERButton>
         </Box>
       </Box>
+      <Box>
+        <Typography variant="h5" gutterBottom borderBottom={1} color="#ef4345" borderColor={'white'}>
+          Team Slack IDs
+        </Typography>
+        <Grid container columnSpacing={2}>
+          <Grid item xs={12} md={6} sx={{ marginTop: '24px' }}>
+            <AdminToolTable columns={[{ name: 'Team Name' }, { name: 'Slack Channel ID' }]} rows={teamTableRows} />
+          </Grid>
+        </Grid>
+        {clickedTeam && (
+          <EditTeamSlackIdFormModal
+            open={!!clickedTeam}
+            handleClose={() => {
+              setClickedTeam(undefined);
+            }}
+            team={clickedTeam}
+          />
+        )}
+      </Box>
     </Box>
   );
 };

src/frontend/src/pages/AdminToolsPage/TeamConfig/EditTeamSlackIdFormModal.tsx

@@ -0,0 +1,87 @@
+import { useForm } from 'react-hook-form';
+import NERFormModal from '../../../components/NERFormModal';
+import { FormControl, FormLabel, FormHelperText, Tooltip, Typography, Link } from '@mui/material';
+import ReactHookTextField from '../../../components/ReactHookTextField';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box } from '@mui/system';
+import HelpIcon from '@mui/icons-material/Help';
+import { TeamPreview, TeamType } from 'shared';
+import { CreateTeamTypePayload } from '../../../hooks/team-types.hooks';
+import useFormPersist from 'react-hook-form-persist';
+import { FormStorageKey } from '../../../utils/form';
+import { useEffect } from 'react';
+import { useEditTeamSlackId } from '../../../hooks/teams.hooks';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useToast } from '../../../hooks/toasts.hooks';
+
+interface EditTeamSlackIdFormModalProps {
+  open: boolean;
+  handleClose: () => void;
+  team: TeamPreview;
+}
+
+const schema = yup.object().shape({
+  slackId: yup.string().required('Slack id is required')
+});
+
+const EditTeamSlackIdFormModal: React.FC<EditTeamSlackIdFormModalProps> = ({ open, handleClose, team }) => {
+  const { isLoading, mutateAsync } = useEditTeamSlackId(team.teamId);
+
+  const toast = useToast();
+
+  const onFormSubmit = async (data: { slackId: string }) => {
+    try {
+      await mutateAsync(data.slackId);
+      toast.success('Slack id updated successfully!');
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
+    handleClose();
+  };
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors }
+  } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      slackId: team.slackId
+    }
+  });
+
+  useEffect(() => {
+    reset({
+      slackId: team.slackId
+    });
+  }, [team, reset]);
+
+  if (isLoading) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <NERFormModal
+      open={open}
+      onHide={handleClose}
+      title={`${team.teamName} Slack ID`}
+      reset={() => reset({ slackId: team.slackId })}
+      handleUseFormSubmit={handleSubmit}
+      onFormSubmit={onFormSubmit}
+      formId="team-slackId-form"
+      showCloseButton
+    >
+      <FormControl>
+        <FormLabel>Slack ID</FormLabel>
+        <ReactHookTextField name="slackId" control={control} sx={{ width: 1 }} />
+        <FormHelperText error>{errors.slackId?.message}</FormHelperText>
+      </FormControl>
+    </NERFormModal>
+  );
+};
+
+export default EditTeamSlackIdFormModal;

src/frontend/src/utils/urls.ts

@@ -137,6 +137,7 @@ const completeOnboarding = () => `${teams()}/teamType/complete-onboarding`;
 const teamsSetHead = (id: string) => `${teamsById(id)}/set-head`;
 const teamsArchive = (id: string) => `${teamsById(id)}/archive`;
 const teamsSetDescription = (id: string) => `${teamsById(id)}/edit-description`;
+const teamsSetSlackId = (id: string) => `${teamsById(id)}/edit-slackid`;
 const teamsCreate = () => `${teams()}/create`;
 const teamsSetLeads = (id: string) => `${teamsById(id)}/set-leads`;
 const usersTeams = () => `${teams()}/users-teams`;
@@ -515,6 +516,7 @@ export const apiUrls = {
   teamsArchive,
   teamsSetHead,
   teamsSetDescription,
+  teamsSetSlackId,
   teamsCreate,
   teamsSetLeads,
   usersTeams,

src/shared/src/types/team-types.ts

@@ -21,4 +21,4 @@ export interface Team {
   teamType?: TeamType;
 }
 
-export type TeamPreview = Pick<Team, 'teamId' | 'teamName' | 'members' | 'head' | 'leads' | 'teamType'>;
+export type TeamPreview = Pick<Team, 'teamId' | 'teamName' | 'members' | 'head' | 'leads' | 'teamType' | 'slackId'>;