Feat/system notifications

src/router/index.ts

@@ -378,6 +378,14 @@ const authenticatedRoutes = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/admin/notifications',
+    name: 'admin-notifications',
+    component: () => import('../views/admin/NotificationsView.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: '/admin/risks',
     name: 'admin-risks',

src/views/LeftSideNav.vue

@@ -140,6 +140,11 @@ const links = ref<Array<NavigationItem>>([
         name: 'admin-risk-templates',
         title: 'Risk Templates',
       },
+      {
+        name: 'admin-notifications',
+        title: 'Notifications',
+        abbr: 'NTF',
+      },
       {
         name: 'admin-import',
         title: 'Import',

src/views/PreferencesView.vue

@@ -287,6 +287,11 @@ interface UpdateNotificationPreferencesOptions {
   silent?: boolean;
 }
 
+type NotificationProviderAvailability = Record<
+  NotificationAlertChannel,
+  boolean
+>;
+
 interface SlackAvailabilityState {
   loading: boolean;
   configured: boolean;
@@ -309,6 +314,43 @@ const normalizeNotificationChannels = (
   return normalized;
 };
 
+const normalizeNotificationProviderAvailability = (
+  providers: unknown,
+): NotificationProviderAvailability => {
+  const availability: NotificationProviderAvailability = {
+    email: false,
+    slack: false,
+  };
+
+  if (!Array.isArray(providers)) {
+    return availability;
+  }
+
+  for (const provider of providers) {
+    if (!provider || typeof provider !== 'object') {
+      continue;
+    }
+
+    const providerType = (provider as { providerType?: unknown }).providerType;
+    const enabled = (provider as { enabled?: unknown }).enabled;
+
+    if (
+      (providerType === 'email' || providerType === 'slack') &&
+      typeof enabled === 'boolean'
+    ) {
+      availability[providerType] = enabled;
+    }
+  }
+
+  return availability;
+};
+
+const fallbackNotificationProviderAvailability =
+  (): NotificationProviderAvailability => ({
+    email: true,
+    slack: true,
+  });
+
 const axios = useAuthenticatedInstance();
 const user = ref<CCFUser | null>(null);
 const loading = ref(true);
@@ -320,6 +362,11 @@ const riskNotificationsAlertChannels = ref<NotificationAlertChannel[]>([]);
 const slackLinkConfigured = ref(false);
 const slackStatusLoading = ref(true);
 const isSlackLinked = ref(false);
+const notificationProvidersLoading = ref(true);
+const notificationProviderAvailability = ref<NotificationProviderAvailability>({
+  email: false,
+  slack: false,
+});
 const lastSavedPreferences = ref<SubscriptionsPreferencesPayload>({
   notifications: {
     evidence_digest: [],
@@ -336,46 +383,68 @@ let notificationUpdateQueue: Promise<void> = Promise.resolve();
 let pendingNotificationUpdateOptions: UpdateNotificationPreferencesOptions | null =
   null;
 
+const canSelectEmailAlertChannel = computed(
+  () =>
+    !notificationProvidersLoading.value &&
+    notificationProviderAvailability.value.email,
+);
+
 const canSelectSlackAlertChannel = computed(
   () =>
+    !notificationProvidersLoading.value &&
+    notificationProviderAvailability.value.slack &&
     !slackStatusLoading.value &&
     slackLinkConfigured.value &&
     isSlackLinked.value,
 );
 
-const sanitizeNotificationChannels = (
-  channels: NotificationAlertChannel[],
-): NotificationAlertChannel[] => {
-  return channels.filter(
-    (channel) => channel !== 'slack' || canSelectSlackAlertChannel.value,
-  );
+const canSelectNotificationAlertChannel = (
+  channel: NotificationAlertChannel,
+): boolean => {
+  if (channel === 'email') {
+    return canSelectEmailAlertChannel.value;
+  }
+
+  return canSelectSlackAlertChannel.value;
 };
 
-const removeSlackChannels = (
+const sanitizeNotificationChannels = (
   channels: NotificationAlertChannel[],
 ): NotificationAlertChannel[] => {
-  return channels.filter((channel) => channel !== 'slack');
+  return channels.filter((channel) => {
+    if (channel === 'slack') {
+      // Keep slack selections while Slack status is still loading to avoid
+      // dropping a valid selection before we know whether it is linked.
+      if (notificationProvidersLoading.value || slackStatusLoading.value) {
+        return true;
+      }
+
+      return canSelectNotificationAlertChannel(channel);
+    }
+
+    return canSelectNotificationAlertChannel(channel);
+  });
 };
 
-const removeUnavailableSlackSelections = () => {
-  if (slackStatusLoading.value || canSelectSlackAlertChannel.value) {
+const removeUnavailableNotificationSelections = () => {
+  if (notificationProvidersLoading.value) {
     return false;
   }
 
-  const sanitizedEvidenceDigestChannels = removeSlackChannels(
+  const sanitizedEvidenceDigestChannels = sanitizeNotificationChannels(
     evidenceDigestAlertChannels.value,
   );
-  const sanitizedTaskAvailableChannels = removeSlackChannels(
+  const sanitizedTaskAvailableChannels = sanitizeNotificationChannels(
     taskAvailableAlertChannels.value,
   );
-  const sanitizedTaskDailyDigestChannels = removeSlackChannels(
+  const sanitizedTaskDailyDigestChannels = sanitizeNotificationChannels(
     taskDailyDigestAlertChannels.value,
   );
-  const sanitizedRiskNotificationsChannels = removeSlackChannels(
+  const sanitizedRiskNotificationsChannels = sanitizeNotificationChannels(
     riskNotificationsAlertChannels.value,
   );
 
-  const hadUnavailableSlackSelection =
+  const hadUnavailableNotificationSelection =
     sanitizedEvidenceDigestChannels.length !==
       evidenceDigestAlertChannels.value.length ||
     sanitizedTaskAvailableChannels.length !==
@@ -385,7 +454,7 @@ const removeUnavailableSlackSelections = () => {
     sanitizedRiskNotificationsChannels.length !==
       riskNotificationsAlertChannels.value.length;
 
-  if (!hadUnavailableSlackSelection) {
+  if (!hadUnavailableNotificationSelection) {
     return false;
   }
 
@@ -528,8 +597,8 @@ const updateNotificationPreferences = (
   return notificationUpdateQueue;
 };
 
-const syncUnavailableSlackSelections = async () => {
-  if (!removeUnavailableSlackSelections()) {
+const syncUnavailableNotificationSelections = async () => {
+  if (!removeUnavailableNotificationSelections()) {
     return;
   }
 
@@ -544,7 +613,14 @@ const notificationChannelOptions = computed<
     disabledTooltip?: string;
   }>
 >(() => [
-  { label: 'Email', value: 'email' },
+  {
+    label: 'Email',
+    value: 'email',
+    disabled: !canSelectEmailAlertChannel.value,
+    disabledTooltip: !canSelectEmailAlertChannel.value
+      ? (emailAlertUnavailableReason.value ?? undefined)
+      : undefined,
+  },
   {
     label: 'Slack',
     value: 'slack',
@@ -567,7 +643,27 @@ const taskAvailableTooltipText = computed(() => {
     : 'Task alerts will be sent to your chosen channels.';
 });
 
+const emailAlertUnavailableReason = computed(() => {
+  if (notificationProvidersLoading.value) {
+    return 'Email alerts are unavailable until notification providers finish loading.';
+  }
+
+  if (!notificationProviderAvailability.value.email) {
+    return 'Email alerts are unavailable because email notifications are disabled for this environment.';
+  }
+
+  return null;
+});
+
 const slackAlertUnavailableReason = computed(() => {
+  if (notificationProvidersLoading.value) {
+    return 'Slack alerts are unavailable until notification providers finish loading.';
+  }
+
+  if (!notificationProviderAvailability.value.slack) {
+    return 'Slack alerts are unavailable because Slack notifications are disabled for this environment.';
+  }
+
   if (slackStatusLoading.value) {
     return 'Slack alerts are unavailable until Slack link status finishes loading.';
   }
@@ -598,14 +694,37 @@ const riskNotificationsTooltipText = computed(() =>
 // Load user data and subscriptions
 const loadUserData = async () => {
   try {
+    const notificationProvidersRequest = axios
+      .get<{
+        data: Array<{
+          providerType?: string;
+          enabled?: boolean;
+        }>;
+      }>('/api/notifications/providers')
+      .catch((error) => {
+        console.error('Error loading notification providers:', error);
+        return null;
+      });
+
+    const [userResponse, subscriptionResponse, notificationProvidersResponse] =
+      await Promise.all([
+        axios.get<{ data: CCFUser }>('/api/users/me'),
+        axios.get<{ data: SubscriptionsPreferencesResponse }>(
+          '/api/users/me/subscriptions',
+        ),
+        notificationProvidersRequest,
+      ]);
+
     // Get current user info
-    const userResponse = await axios.get<{ data: CCFUser }>('/api/users/me');
     user.value = userResponse.data.data;
 
-    // Get subscriptions status
-    const subscriptionResponse = await axios.get<{
-      data: SubscriptionsPreferencesResponse;
-    }>('/api/users/me/subscriptions');
+    notificationProviderAvailability.value =
+      notificationProvidersResponse === null
+        ? fallbackNotificationProviderAvailability()
+        : normalizeNotificationProviderAvailability(
+            notificationProvidersResponse.data.data,
+          );
+    notificationProvidersLoading.value = false;
 
     const evidenceDigestChannels = normalizeNotificationChannels(
       subscriptionResponse.data.data.notifications?.evidenceDigest,
@@ -640,12 +759,13 @@ const loadUserData = async () => {
       },
     };
 
-    await syncUnavailableSlackSelections();
+    await syncUnavailableNotificationSelections();
   } catch (error) {
     console.error('Error loading user data:', error);
     loadError.value =
       'Failed to load preferences. Please refresh the page to try again.';
   } finally {
+    notificationProvidersLoading.value = false;
     loading.value = false;
   }
 };
@@ -685,7 +805,7 @@ const onSlackLinkStatusChange = (state: SlackAvailabilityState) => {
 };
 
 watch([slackStatusLoading, canSelectSlackAlertChannel], () => {
-  void syncUnavailableSlackSelections();
+  void syncUnavailableNotificationSelections();
 });
 
 onMounted(() => {

src/views/__tests__/LeftSideNav.spec.ts

@@ -45,14 +45,29 @@ describe('LeftSideNav', () => {
 
     const systemUsersIndex = linkTexts.indexOf('System Users');
     const agentsIndex = linkTexts.indexOf('Agents');
+    const notificationsIndex = linkTexts.indexOf('Notifications');
     const risksIndex = linkTexts.indexOf('Risks');
     const subjectTemplatesIndex = linkTexts.indexOf('Subject Templates');
     const riskTemplatesIndex = linkTexts.indexOf('Risk Templates');
+    const importIndex = linkTexts.indexOf('Import');
+
+    for (const index of [
+      systemUsersIndex,
+      agentsIndex,
+      notificationsIndex,
+      risksIndex,
+      subjectTemplatesIndex,
+      riskTemplatesIndex,
+      importIndex,
+    ]) {
+      expect(index).toBeGreaterThanOrEqual(0);
+    }
 
-    expect(systemUsersIndex).toBeGreaterThanOrEqual(0);
     expect(agentsIndex).toBeGreaterThan(systemUsersIndex);
     expect(risksIndex).toBeGreaterThan(agentsIndex);
     expect(subjectTemplatesIndex).toBeGreaterThan(risksIndex);
     expect(riskTemplatesIndex).toBeGreaterThan(subjectTemplatesIndex);
+    expect(notificationsIndex).toBeGreaterThan(riskTemplatesIndex);
+    expect(importIndex).toBeGreaterThan(notificationsIndex);
   });
 });