Notifications v2

src/components/Notifications/ManageNotificaitons.tsx

@@ -14,6 +14,9 @@ import {
   Checkbox,
   Paper,
   IconButton,
+  Select,
+  MenuItem,
+  FormControl,
 } from '@mui/material';
 import { ErrorOutline, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
 const Long_Notification_Length = 130;
@@ -26,6 +29,15 @@ interface Notification {
   timestamp: string;
 }
 
+const categoryOptions = [
+  { label: 'All Categories', value: '' },
+  { label: 'Incident', value: 'incident' },
+  { label: 'Schema Change', value: 'schema_change' },
+  { label: 'Job Failure', value: 'job_failure' },
+  { label: 'Late Run', value: 'late_run' },
+  { label: 'dbt Test Failure', value: 'dbt_test_failure' },
+];
+
 const ManageNotifications = ({
   tabWord,
   checkedRows,
@@ -44,9 +56,12 @@ const ManageNotifications = ({
 
   const message_status = tabWord === 'read' ? 1 : tabWord === 'unread' ? 0 : '';
   const readQuery = tabWord === 'all' ? '' : `&read_status=${message_status}`;
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+
+  const categoryQuery = selectedCategory ? `&category=${selectedCategory}` : '';
 
   const { data, isLoading, mutate } = useSWR(
-    `notifications/v1?limit=${pageSize}&page=${currentPageIndex + 1}${readQuery}`
+    `notifications/v1?limit=${pageSize}&page=${currentPageIndex + 1}${readQuery}${categoryQuery}`
   );
 
   useEffect(() => {
@@ -115,6 +130,42 @@ const ManageNotifications = ({
           Select all <strong>|</strong> Showing {showingNotificationCount} of{' '}
           {data?.total_notifications || 0} notifications
         </Typography>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Typography sx={{ fontSize: '14px', color: '#0F2440CC' }}>Filter by Category:</Typography>
+
+          <FormControl size="small" sx={{ minWidth: 160 }}>
+            <Select
+              value={selectedCategory}
+              onChange={(e) => {
+                setSelectedCategory(e.target.value);
+                setCurrentPageIndex(0); // Reset to first page on filter change
+              }}
+              displayEmpty
+              sx={{
+                fontSize: '14px',
+                backgroundColor: '#fff',
+                color: '#0F2440CC',
+                borderRadius: '4px',
+                '& .MuiOutlinedInput-notchedOutline': {
+                  borderColor: '#ccc',
+                },
+                '&:hover .MuiOutlinedInput-notchedOutline': {
+                  borderColor: '#999',
+                },
+                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                  borderColor: '#1976d2',
+                },
+              }}
+            >
+              {categoryOptions.map((option) => (
+                <MenuItem key={option.value || 'all'} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
       </Box>
       <TableContainer
         component={Paper}

src/components/Notifications/PreferencesForm.tsx

@@ -19,6 +19,11 @@ type PreferencesFormInput = {
   enable_email_notifications: boolean;
   enable_discord_notifications: boolean;
   discord_webhook: string;
+  subscribe_incident_notifications: boolean;
+  subscribe_schema_change_notifications: boolean;
+  subscribe_job_failure_notifications: boolean;
+  subscribe_late_runs_notifications: boolean;
+  subscribe_dbt_test_failure_notifications: boolean;
 };
 
 const PreferencesForm = ({ showForm, setShowForm }: PreferencesFormProps) => {
@@ -41,6 +46,26 @@ const PreferencesForm = ({ showForm, setShowForm }: PreferencesFormProps) => {
   useEffect(() => {
     if (preferences && showForm) {
       setValue('enable_email_notifications', preferences.res.enable_email_notifications || false);
+      setValue(
+        'subscribe_incident_notifications',
+        preferences.res.subscribe_incident_notifications || false
+      );
+      setValue(
+        'subscribe_schema_change_notifications',
+        preferences.res.subscribe_schema_change_notifications || false
+      );
+      setValue(
+        'subscribe_job_failure_notifications',
+        preferences.res.subscribe_job_failure_notifications || false
+      );
+      setValue(
+        'subscribe_late_runs_notifications',
+        preferences.res.subscribe_late_runs_notifications || false
+      );
+      setValue(
+        'subscribe_dbt_test_failure_notifications',
+        preferences.res.subscribe_dbt_test_failure_notifications || false
+      );
     }
     if (orgPreferences && showForm) {
       setValue(
@@ -114,6 +139,64 @@ const PreferencesForm = ({ showForm, setShowForm }: PreferencesFormProps) => {
             name="discord_webhook"
           />
         )}
+        <Box sx={{ mt: 4 }}>
+          <Box sx={{ fontWeight: 600, mb: 1, fontSize: '1rem' }}>Category Subscriptions</Box>
+
+          <Controller
+            name="subscribe_incident_notifications"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label="Incident Notifications"
+              />
+            )}
+          />
+
+          <Controller
+            name="subscribe_schema_change_notifications"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label="Schema Change Notifications"
+              />
+            )}
+          />
+
+          <Controller
+            name="subscribe_job_failure_notifications"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label="Job Failure Notifications"
+              />
+            )}
+          />
+
+          <Controller
+            name="subscribe_late_runs_notifications"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label="Late Runs Notifications"
+              />
+            )}
+          />
+
+          <Controller
+            name="subscribe_dbt_test_failure_notifications"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label="dbt Test Failure Notifications"
+              />
+            )}
+          />
+        </Box>
       </Box>
     </>
   );
@@ -125,6 +208,11 @@ const PreferencesForm = ({ showForm, setShowForm }: PreferencesFormProps) => {
       // Update user preferences (email notifications)
       await httpPut(session, 'userpreferences/', {
         enable_email_notifications: values.enable_email_notifications,
+        subscribe_incident_notifications: values.subscribe_incident_notifications,
+        subscribe_schema_change_notifications: values.subscribe_schema_change_notifications,
+        subscribe_job_failure_notifications: values.subscribe_job_failure_notifications,
+        subscribe_late_runs_notifications: values.subscribe_late_runs_notifications,
+        subscribe_dbt_test_failure_notifications: values.subscribe_dbt_test_failure_notifications,
       });
 
       // Update org preferences (Discord settings) only if the user has permission