Merge branch 'develop' into 2136-design-review-calendar-design-review-edit-page

Author: RChandler234

src/backend/src/services/design-reviews.services.ts

@@ -162,7 +162,11 @@ export default class DesignReviewsService {
     for (const memberUserSetting of memberUserSettings) {
       if (memberUserSetting.slackId) {
         try {
-          await sendSlackDesignReviewNotification(memberUserSetting.slackId, designReview.designReviewId);
+          await sendSlackDesignReviewNotification(
+            memberUserSetting.slackId,
+            designReview.designReviewId,
+            designReview.wbsElement.name
+          );
         } catch (err: unknown) {
           if (err instanceof Error) {
             throw new HttpException(500, `Failed to send slack notification: ${err.message}`);
@@ -321,19 +325,22 @@ export default class DesignReviewsService {
     if (!isUserOnDesignReview(submitter, designReviewTransformer(designReview)))
       throw new HttpException(400, 'Current user is not in the list of this design reviews members');
 
-    // Update user schedule settings
-    const validAvailability = validateMeetingTimes(availability);
+    availability.forEach((time) => {
+      if (time < 0 || time > 83) {
+        throw new HttpException(400, 'Availability times have to be in range 0-83');
+      }
+    });
 
     await prisma.schedule_Settings.upsert({
       where: { userId: submitter.userId },
       update: {
-        availability: validAvailability
+        availability
       },
       create: {
         userId: submitter.userId,
         personalGmail: '',
         personalZoomLink: '',
-        availability: validAvailability
+        availability
       }
     });
 
@@ -353,7 +360,7 @@ export default class DesignReviewsService {
 
       // If all requested attendees have confirmed their schedule, mark design review as confirmed
       if (
-        designReview.confirmedMembers.length ===
+        updatedDesignReview.confirmedMembers.length ===
         designReview.requiredMembers.length + designReview.optionalMembers.length
       ) {
         await prisma.design_Review.update({

src/backend/src/utils/slack.utils.ts

@@ -91,11 +91,15 @@ export const sendReimbursementRequestDeniedNotification = async (slackId: string
   }
 };
 
-export const sendSlackDesignReviewNotification = async (slackId: string, designReviewId: string) => {
+export const sendSlackDesignReviewNotification = async (
+  slackId: string,
+  designReviewId: string,
+  designReviewName: string
+) => {
   if (process.env.NODE_ENV !== 'production') return; // don't send msgs unless in prod
-  const msg = `You have been invited to a Design Review!`;
-  const fullLink = `https://finishlinebyner.com/design-reviews/${designReviewId}`;
-  const linkButtonText = 'RSVP for the Design Review';
+  const msg = `You have been invited to the ${designReviewName} Design Review!`;
+  const fullLink = `https://finishlinebyner.com/settings/preferences?drId=${designReviewId}`;
+  const linkButtonText = 'Confirm Availability';
 
   try {
     await sendMessage(slackId, msg, fullLink, linkButtonText);

src/backend/tests/design-reviews.test.ts

@@ -535,14 +535,7 @@ describe('Design Reviews', () => {
       vi.spyOn(prisma.design_Review, 'findUnique').mockResolvedValue(prismaDesignReview5);
       await expect(() =>
         DesignReviewsService.markUserConfirmed(prismaDesignReview5.designReviewId, [0, 85], batman)
-      ).rejects.toThrow(new HttpException(400, 'Meeting times have to be in range 0-83'));
-    });
-
-    test('Availabilities were invalid - non-consecutive', async () => {
-      vi.spyOn(prisma.design_Review, 'findUnique').mockResolvedValue(prismaDesignReview5);
-      await expect(() =>
-        DesignReviewsService.markUserConfirmed(prismaDesignReview5.designReviewId, [1, 3], batman)
-      ).rejects.toThrow(new HttpException(400, 'Meeting times have to be consecutive'));
+      ).rejects.toThrow(new HttpException(400, 'Availability times have to be in range 0-83'));
     });
   });
 });

src/frontend/src/apis/design-reviews.api.ts

@@ -57,3 +57,15 @@ export const getSingleDesignReview = async (id: string) => {
     transformResponse: (data) => designReviewTransformer(JSON.parse(data))
   });
 };
+
+/**
+ * Deletes a design review
+ * @param id the ID of the design review to delete
+ */
+export const deleteDesignReview = async (id: string) => {
+  return axios.delete(apiUrls.designReviewDelete(id));
+};
+
+export const markUserConfirmed = async (id: string, payload: { availability: number[] }) => {
+  return axios.post<DesignReview>(apiUrls.designReviewMarkUserConfirmed(id), payload);
+};

src/frontend/src/components/Tabs.tsx

@@ -13,9 +13,10 @@ interface TabProps {
   baseUrl: string; //the URL that all the tab URLs extend
   defaultTab: string; //tab that the tabs component defaults to
   id: string;
+  noUnderline?: boolean;
 }
 
-const NERTabs = ({ setTab, tabsLabels, baseUrl, defaultTab, id }: TabProps) => {
+const NERTabs = ({ setTab, tabsLabels, baseUrl, defaultTab, id, noUnderline = false }: TabProps) => {
   const tabUrlValues = tabsLabels.map((tab) => tab.tabUrlValue);
   const match = useRouteMatch<{ tabValueString: string }>(`${baseUrl}/:tabValueString`);
   const tabValueString = match?.params?.tabValueString;
@@ -39,7 +40,7 @@ const NERTabs = ({ setTab, tabsLabels, baseUrl, defaultTab, id }: TabProps) => {
     <Tabs value={tabValue} onChange={handleTabChange} aria-label={`${id}-tabs`}>
       {tabsLabels.map((tab, idx) => (
         <Tab
-          sx={{ borderBottom: 1, borderColor: 'divider' }}
+          sx={noUnderline ? {} : { borderBottom: 1, borderColor: 'divider' }}
           label={tab.tabName}
           aria-label={tab.tabUrlValue}
           value={idx}

src/frontend/src/hooks/design-reviews.hooks.ts

@@ -5,12 +5,15 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { DesignReview, TeamType, WbsNumber, DesignReviewStatus } from 'shared';
 import {
+  deleteDesignReview,
   editDesignReview,
   createDesignReviews,
   getAllDesignReviews,
   getAllTeamTypes,
-  getSingleDesignReview
+  getSingleDesignReview,
+  markUserConfirmed
 } from '../apis/design-reviews.api';
+import { useCurrentUser } from './users.hooks';
 
 export interface CreateDesignReviewsPayload {
   dateScheduled: Date;
@@ -96,14 +99,56 @@ export const useAllTeamTypes = () => {
   });
 };
 
+/**
+ * Custom react hook to delete a design review
+ */
+
+export const useDeleteDesignReview = (id: string) => {
+  const queryClient = useQueryClient();
+  return useMutation<DesignReview, Error>(
+    ['design-reviews', 'delete'],
+    async () => {
+      const { data } = await deleteDesignReview(id);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['design-reviews']);
+      }
+    }
+  );
+};
+
 /**
  * Custom react hook to get a single design review
  *
  * @returns a single design review
  */
-export const useSingleDesignReview = (id: string) => {
-  return useQuery<DesignReview, Error>(['design-reviews', id], async () => {
-    const { data } = await getSingleDesignReview(id);
-    return data;
-  });
+export const useSingleDesignReview = (id?: string) => {
+  return useQuery<DesignReview, Error>(
+    ['design-reviews', id],
+    async () => {
+      const { data } = await getSingleDesignReview(id!);
+      return data;
+    },
+    { enabled: !!id }
+  );
+};
+
+export const useMarkUserConfirmed = (id: string) => {
+  const user = useCurrentUser();
+  const queryClient = useQueryClient();
+  return useMutation<DesignReview, Error, { availability: number[] }>(
+    ['design-reviews', 'mark-confirmed'],
+    async (designReviewPayload: { availability: number[] }) => {
+      const { data } = await markUserConfirmed(id, designReviewPayload);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['design-reviews']);
+        queryClient.invalidateQueries(['users', user.userId, 'schedule-settings']);
+      }
+    }
+  );
 };

src/frontend/src/pages/AdminToolsPage/AdminToolsAttendeeDesignReviewInfo.tsx

@@ -1,6 +1,16 @@
 import React, { useState } from 'react';
-import PageBlock from '../../layouts/PageBlock';
-import { TextField, FormControl, FormLabel, Select, MenuItem, SelectChangeEvent, TableCell, TableRow } from '@mui/material';
+import {
+  TextField,
+  FormControl,
+  FormLabel,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+  TableCell,
+  TableRow,
+  Grid,
+  Typography
+} from '@mui/material';
 import AdminToolTable from './AdminToolTable';
 
 const AdminToolsAttendeeDesignReviewInfo: React.FC = () => {
@@ -37,7 +47,10 @@ const AdminToolsAttendeeDesignReviewInfo: React.FC = () => {
   ));
 
   return (
-    <PageBlock title="Attendee Design Review Information">
+    <Grid>
+      <Typography variant="h5" color="red" borderBottom={1} borderColor={'white'} gutterBottom>
+        Design Review Attendee Info
+      </Typography>
       <FormControl fullWidth sx={{ marginBottom: 2 }}>
         <FormLabel htmlFor="search-by-name">Search by team member name</FormLabel>
         <TextField id="search-by-name" variant="outlined" value={searchQuery} onChange={handleSearchChange} fullWidth />
@@ -68,7 +81,7 @@ const AdminToolsAttendeeDesignReviewInfo: React.FC = () => {
         ]}
         rows={attendeeRows}
       />
-    </PageBlock>
+    </Grid>
   );
 };
 

src/frontend/src/pages/AdminToolsPage/AdminToolsBOMConfig.tsx

@@ -1,12 +1,15 @@
-import { Grid } from '@mui/material';
-import PageBlock from '../../layouts/PageBlock';
+import { Grid, Typography } from '@mui/material';
 import ManufacturerTable from './BOMConfig/ManufacturerTable';
 import MaterialTypeTable from './BOMConfig/MaterialTypeTable';
 import UnitTable from './BOMConfig/UnitTable';
+import { Box } from '@mui/system';
 
 const AdminToolsBOMConfig: React.FC = () => {
   return (
-    <PageBlock title="Bill of Material Config">
+    <Box>
+      <Typography variant="h5" gutterBottom borderBottom={1} color="red" borderColor={'white'}>
+        Bill of Materials Config
+      </Typography>
       <Grid container spacing="3%">
         <Grid item direction="column" xs={12} md={6}>
           <ManufacturerTable />
@@ -18,7 +21,7 @@ const AdminToolsBOMConfig: React.FC = () => {
           <UnitTable />
         </Grid>
       </Grid>
-    </PageBlock>
+    </Box>
   );
 };
 

src/frontend/src/pages/AdminToolsPage/AdminToolsFinanceConfig.tsx

@@ -1,11 +1,13 @@
-import { Grid } from '@mui/material';
-import PageBlock from '../../layouts/PageBlock';
+import { Box, Grid, Typography } from '@mui/material';
 import VendorsTable from './FinanceConfig/VendorsTable';
 import AccountCodesTable from './FinanceConfig/AccountCodesTable';
 
 const AdminToolsFinanceConfig: React.FC = () => {
   return (
-    <PageBlock title="Finance Config">
+    <Box padding="5px">
+      <Typography variant="h5" gutterBottom borderBottom={1} color="red" borderColor={'white'}>
+        Finance Config
+      </Typography>
       <Grid container spacing="3%">
         <Grid item direction="column" xs={12} md={6}>
           <VendorsTable />
@@ -14,7 +16,7 @@ const AdminToolsFinanceConfig: React.FC = () => {
           <AccountCodesTable />
         </Grid>
       </Grid>
-    </PageBlock>
+    </Box>
   );
 };
 

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

@@ -16,6 +16,7 @@ import AdminToolsProjectsConfig from './AdminToolsProjectsConfig';
 import { useState } from 'react';
 import NERTabs from '../../components/Tabs';
 import { routes } from '../../utils/routes';
+import { Box } from '@mui/system';
 
 const AdminToolsPage: React.FC = () => {
   const currentUser = useCurrentUser();
@@ -42,10 +43,12 @@ const AdminToolsPage: React.FC = () => {
 
   const UserManagementTab = () => {
     return isUserAdmin ? (
-      <>
-        <AdminToolsUserManagement />
+      <Box>
+        <Box mb={2}>
+          <AdminToolsUserManagement />
+        </Box>
         <TeamsTools />
-      </>
+      </Box>
     ) : (
       <AdminToolsUserManagement />
     );
@@ -66,13 +69,16 @@ const AdminToolsPage: React.FC = () => {
     <PageLayout
       title="Admin Tools"
       tabs={
-        <NERTabs
-          setTab={setTabIndex}
-          tabsLabels={tabs}
-          baseUrl={routes.ADMIN_TOOLS}
-          defaultTab={defaultTab}
-          id="admin-tools-tabs"
-        />
+        <Box borderBottom={1} borderColor={'divider'} width={'100%'}>
+          <NERTabs
+            noUnderline
+            setTab={setTabIndex}
+            tabsLabels={tabs}
+            baseUrl={routes.ADMIN_TOOLS}
+            defaultTab={defaultTab}
+            id="admin-tools-tabs"
+          />
+        </Box>
       }
     >
       {tabIndex === 0 ? (
@@ -82,10 +88,12 @@ const AdminToolsPage: React.FC = () => {
       ) : tabIndex === 2 ? (
         <AdminToolsFinanceConfig />
       ) : (
-        <>
-          <AdminToolsSlackUpcomingDeadlines />
+        <Box>
+          <Box pb={2}>
+            <AdminToolsSlackUpcomingDeadlines />
+          </Box>
           <AdminToolsAttendeeDesignReviewInfo />
-        </>
+        </Box>
       )}
     </PageLayout>
   );