Merge pull request #4033 from Northeastern-Electric-Racing/#4032-maintenance-calendar-notifications

chpy04 · web-flow · commit a751f2e0e861 · 2026-03-18T08:31:16.000-04:00
#4032 notification ui in event modal
diff --git a/src/backend/src/services/notifications.services.ts b/src/backend/src/services/notifications.services.ts
@@ -118,7 +118,7 @@ export default class NotificationsService {
   }
 
   /**
-   * Sends the design review slack notifications for all design reviews scheduled for today
+   * Sends Slack notifications for all events scheduled for today whose event type has sendSlackNotifications enabled
    */
   static async sendEventSlackNotifications() {
     const endOfToday = startOfDayTomorrow();
@@ -142,6 +142,8 @@ export default class NotificationsService {
         optionalMembers: { include: { userSettings: true } },
         userCreated: { include: { userSettings: true } },
         scheduledTimes: true,
+        teams: true,
+        eventType: true,
         workPackages: {
           include: {
             wbsElement: true,
@@ -156,12 +158,18 @@ export default class NotificationsService {
       }
     });
 
-    const desginReviewEventTeamMap = new Map<string, EventWithAttendees[]>();
+    const eventTeamMap = new Map<string, EventWithAttendees[]>();
 
     events.forEach((event) => {
-      // Get all unique teams from all work packages associated with this event
+      // Collect unique team Slack IDs: first from teams directly on the event, then from work packages
       const teamSlackIds = new Set<string>();
 
+      event.teams.forEach((team) => {
+        if (team.slackId) {
+          teamSlackIds.add(team.slackId);
+        }
+      });
+
       event.workPackages.forEach((workPackage) => {
         workPackage.project.teams.forEach((team) => {
           if (team.slackId) {
@@ -171,7 +179,7 @@ export default class NotificationsService {
       });
 
       teamSlackIds.forEach((teamSlackId) => {
-        const currentEvents = desginReviewEventTeamMap.get(teamSlackId);
+        const currentEvents = eventTeamMap.get(teamSlackId);
         const eventWithAttendees = {
           ...event,
           attendees: event.requiredMembers.concat(event.optionalMembers).concat(event.userCreated),
@@ -181,20 +189,20 @@ export default class NotificationsService {
         if (currentEvents) {
           currentEvents.push(eventWithAttendees);
         } else {
-          desginReviewEventTeamMap.set(teamSlackId, [eventWithAttendees]);
+          eventTeamMap.set(teamSlackId, [eventWithAttendees]);
         }
       });
     });
 
-    // Send the notifications to each team for their respective design reviews
-    const promises = Array.from(desginReviewEventTeamMap).map(async ([slackId, events]) => {
+    // Send the notifications to each team for their respective events
+    const promises = Array.from(eventTeamMap).map(async ([slackId, events]) => {
       const messageBlock = events
         .map((event) => {
           const zoomLink = event.zoomLink ? `<${event.zoomLink}|Zoom Link>\n` : '';
           const questionDocLink = event.questionDocumentLink ? `<${event.questionDocumentLink}|Question Doc Link>\n` : '';
 
-          // Get work package names for this event
           const workPackageNames = event.workPackages.map((wp) => wp.wbsElement.name).join(', ');
+          const workPackagesPart = workPackageNames ? ` (${workPackageNames})` : '';
 
           // Get the earliest scheduled start time for display
           const [earliestSlot] = event.scheduledTimes
@@ -203,17 +211,17 @@ export default class NotificationsService {
           const timeDisplay = earliestSlot ? formatTimeForSlack(new Date(earliestSlot.startTime!)) : 'TBD';
 
           return (
-            `${usersToSlackPings(event.attendees ?? [])} ${event.title} (${workPackageNames}) ` +
+            `${usersToSlackPings(event.attendees ?? [])} *${event.eventType.name}*: ${event.title}${workPackagesPart} ` +
             `will be having an event today at ${timeDisplay} ET! ` +
             zoomLink +
             questionDocLink
           );
         })
         .join('\n\n');
 
-      // messageBlock will be empty if there are design reviews with no attendees
+      // messageBlock will be empty if there are events with no attendees
       if (messageBlock !== '')
-        await sendMessage(slackId, ':calendar: :clock9: Upcoming Design Reviews! :clock9: :calendar: \n\n\n' + messageBlock);
+        await sendMessage(slackId, ':calendar: :clock9: Upcoming Events! :clock9: :calendar: \n\n\n' + messageBlock);
     });
 
     await Promise.all(promises);
diff --git a/src/backend/src/utils/notifications.utils.ts b/src/backend/src/utils/notifications.utils.ts
@@ -1,4 +1,4 @@
-import { Task as Prisma_Task, WBS_Element, Event, Work_Package } from '@prisma/client';
+import { Task as Prisma_Task, WBS_Element, Event, Work_Package, Team, Event_Type } from '@prisma/client';
 import { UserWithSettings } from './auth.utils.js';
 import { ScheduleSlot } from 'shared';
 
@@ -10,6 +10,8 @@ export type TaskWithAssignees = Prisma_Task & {
 export type EventWithAttendees = Event & {
   attendees: UserWithSettings[];
   scheduledTimes: ScheduleSlot[];
+  teams: Team[];
+  eventType: Event_Type;
   workPackages: (Work_Package & {
     wbsElement: WBS_Element;
   })[];
diff --git a/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/EventType/EventTypeFormModal.tsx b/src/frontend/src/pages/AdminToolsPage/ScheduleConfig/EventType/EventTypeFormModal.tsx
@@ -1,11 +1,11 @@
-import { Box, FormHelperText, Typography, Checkbox, FormControl, Select, MenuItem } from '@mui/material';
+import { Box, FormHelperText, Typography, Checkbox, FormControl, Select, MenuItem, Tooltip } from '@mui/material';
 import NERFormModal from '../../../../components/NERFormModal';
 import ReactHookTextField from '../../../../components/ReactHookTextField';
 import { useToast } from '../../../../hooks/toasts.hooks';
 import { useForm, Controller } from 'react-hook-form';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { EventType } from 'shared';
 import useFormPersist from 'react-hook-form-persist';
 import { FormStorageKey } from '../../../../utils/form';
@@ -116,6 +116,16 @@ export const EventTypeFormModal: React.FC<EventTypeFormModalProps> = ({ open, on
     setValue
   });
 
+  const watchTeams = watch('teams');
+  const watchWorkPackage = watch('workPackage');
+  const notificationsDisabled = !watchTeams && !watchWorkPackage;
+
+  useEffect(() => {
+    if (notificationsDisabled) {
+      setValue('sendSlackNotifications', false);
+    }
+  }, [notificationsDisabled, setValue]);
+
   const onFormSubmit = async (data: EventTypeFormValues) => {
     try {
       await onSubmit(data);
@@ -829,12 +839,22 @@ export const EventTypeFormModal: React.FC<EventTypeFormModalProps> = ({ open, on
             control={control}
             name="sendSlackNotifications"
             render={({ field: { onChange, value } }) => (
-              <Checkbox checked={value} onChange={onChange} sx={{ color: 'white', '&.Mui-checked': { color: 'white' } }} />
+              <Checkbox
+                checked={value}
+                onChange={onChange}
+                disabled={notificationsDisabled}
+                sx={{ color: 'white', '&.Mui-checked': { color: 'white' } }}
+              />
             )}
           />
-          <NotificationsIcon sx={{ color: 'white', mr: 1 }} />
+          <Tooltip
+            title={notificationsDisabled ? 'Slack notifications cannot be sent without teams or work packages enabled' : ''}
+            placement="right"
+          >
+            <NotificationsIcon sx={{ color: notificationsDisabled ? 'rgba(255,255,255,0.3)' : 'white', mr: 1 }} />
+          </Tooltip>
           <Box sx={{ flex: 1 }}>
-            <Typography variant="body2" sx={{ color: 'white' }}>
+            <Typography variant="body2" sx={{ color: notificationsDisabled ? 'rgba(255,255,255,0.3)' : 'white' }}>
               Send Slack Notifications
             </Typography>
           </Box>
diff --git a/src/frontend/src/pages/CalendarPage/Components/EventModal.tsx b/src/frontend/src/pages/CalendarPage/Components/EventModal.tsx
@@ -54,6 +54,8 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import Tooltip from '@mui/material/Tooltip';
 import { convertDayToInt, convertIntToDay } from '../../../utils/calendar.utils';
 import EditSeriesConfirmationModal from './EditSeriesConfirmationModal';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 
 export interface EventFormValues {
   title: string;
@@ -237,6 +239,9 @@ const EventModal: React.FC<BaseEventModalProps> = ({
   const [pendingPayload, setPendingPayload] = useState<EventPayload | null>(null);
   const [pendingFormData, setPendingFormData] = useState<EventFormValues | null>(null);
 
+  // used in edit mode for ability to send notifs when wp changes
+  const [workPackageIds, setWorkPackageIds] = useState<string[]>(initialValues?.workPackageIds ?? []);
+
   // Fetch preview of other schedule slots that would be affected when editing with "edit all in series"
   const isEditMode = !!initialValues;
   const scheduleSlotId = initialValues?.selectedScheduleSlotId;
@@ -1151,6 +1156,43 @@ const EventModal: React.FC<BaseEventModalProps> = ({
               )}
             </Box>
           )}
+          {/* Notification Section */}
+          {selectedEventType && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              <NotificationsIcon sx={{ color: 'text.secondary' }} />
+              <Tooltip
+                arrow
+                placement="right"
+                title={
+                  !selectedEventType.sendSlackNotifications
+                    ? 'Slack notifications are disabled for this event type.'
+                    : selectedTeams.length || workPackageIds.length
+                      ? 'Slack notifications will be sent for this event.'
+                      : ''
+                }
+              >
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, cursor: 'default' }}>
+                  <Typography variant="body2" color={'text.disabled'} fontWeight={500}>
+                    {selectedEventType.sendSlackNotifications ? 'On' : 'Off'}
+                  </Typography>
+                  {selectedEventType.sendSlackNotifications && !selectedTeams.length && !workPackageIds.length && (
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                      <WarningAmberIcon sx={{ color: 'error.main', fontSize: 18 }} />
+                      <Typography variant="body2" color="error.main">
+                        Add{' '}
+                        {selectedEventType.teams && selectedEventType.workPackage
+                          ? 'a team or work package'
+                          : selectedEventType.teams
+                            ? 'a team'
+                            : 'a work package'}{' '}
+                        to send notifications
+                      </Typography>
+                    </Box>
+                  )}
+                </Box>
+              </Tooltip>
+            </Box>
+          )}
           {/* Required Members Section */}
           {selectedEventType?.requiredMembers && (
             <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
@@ -1417,7 +1459,9 @@ const EventModal: React.FC<BaseEventModalProps> = ({
                     value={workPackageOptions.find((wp) => value?.[0] === wp.id) || null}
                     onChange={(_, newValue) => {
                       if (newValue?.id !== 'loading') {
-                        onChange(newValue ? [newValue.id] : []);
+                        const ids = newValue ? [newValue.id] : [];
+                        onChange(ids);
+                        setWorkPackageIds(ids);
                       }
                     }}
                     getOptionLabel={(option) => option.label}
diff --git a/src/frontend/src/pages/CalendarPage/EventClickPopup.tsx b/src/frontend/src/pages/CalendarPage/EventClickPopup.tsx
@@ -39,7 +39,7 @@ import EditEventModal from './Components/EditEventModal';
 import DeleteSeriesConfirmationModal from './Components/DeleteSeriesConfirmationModal';
 import { useToast } from '../../hooks/toasts.hooks';
 import NERDeleteModal from '../../components/NERDeleteModal';
-
+import NotificationsIcon from '@mui/icons-material/Notifications';
 import { getPendingReason } from '../../utils/calendar.utils';
 
 export const getStatusIcon = (status: string, isLarge?: boolean) => {
@@ -436,6 +436,9 @@ export const EventClickContent: React.FC<EventClickContentProps> = ({
             <Typography variant="body2" sx={{ flex: 1 }}>
               <b>Status:</b> {event.status}
             </Typography>
+            {specificEventType?.sendSlackNotifications && (event.teams.length > 0 || event.workPackages.length > 0) && (
+              <NotificationsIcon sx={{ color: 'white', fontSize: 18, mt: '3px', flexShrink: 0 }} />
+            )}
           </Stack>
         )}
 
