#4032 notification ui in event modal

Author: cielbellerose

src/frontend/src/pages/CalendarPage/Components/EventModal.tsx

@@ -54,6 +54,9 @@ 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 NERSwitch from '../../../components/NERSwitch';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 
 export interface EventFormValues {
   title: string;
@@ -237,6 +240,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 +1157,37 @@ const EventModal: React.FC<BaseEventModalProps> = ({
               )}
             </Box>
           )}
+          {/* Notification Section */}
+          {selectedEventType && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              <NotificationsIcon
+                sx={{ color: selectedEventType.sendSlackNotifications ? 'text.secondary' : 'text.disabled' }}
+              />
+              <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' }}>
+                  <NERSwitch checked={selectedEventType.sendSlackNotifications} disabled />
+                  {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 a team or work package to send notifications
+                      </Typography>
+                    </Box>
+                  ) : null}
+                </Box>
+              </Tooltip>
+            </Box>
+          )}
           {/* Required Members Section */}
           {selectedEventType?.requiredMembers && (
             <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
@@ -1417,7 +1454,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}