feat: add notification warning alert to Tasks page

ssncferreira · ssncferreira · commit 104c72702387 · 2025-11-25T16:16:49.000Z
diff --git a/site/src/modules/notifications/utils.tsx b/site/src/modules/notifications/utils.tsx
@@ -1,4 +1,8 @@
 import { MailIcon, WebhookIcon } from "lucide-react";
+import type {
+	NotificationPreference,
+	NotificationTemplate,
+} from "../../api/typesGenerated";
 
 // TODO: This should be provided by the auto generated types from codersdk
 const notificationMethods = ["smtp", "webhook"] as const;
@@ -26,3 +30,35 @@ export const castNotificationMethod = (value: string) => {
 		)}`,
 	);
 };
+
+export function isTaskNotification(tmpl: NotificationTemplate): boolean {
+	return tmpl.group === "Task Events";
+}
+
+// Determines if a notification is disabled based on user preferences and system defaults
+// A notification is considered disabled if:
+// 1. It's NOT enabled by default AND the user hasn't set any preference (undefined), OR
+// 2. The user has explicitly disabled it in their preferences
+// Returns true if disabled, false if enabled
+export function notificationIsDisabled(
+	disabledPreferences: Record<string, boolean>,
+	tmpl: NotificationTemplate,
+): boolean {
+	return (
+		(!tmpl.enabled_by_default && disabledPreferences[tmpl.id] === undefined) ||
+		disabledPreferences[tmpl.id]
+	);
+}
+
+// Transforms an array of NotificationPreference objects into a map
+// where the key is the template ID and the value is whether it's disabled
+// Example: [{ id: "abc", disabled: true }, { id: "def", disabled: false }]
+export function selectDisabledPreferences(data: NotificationPreference[]) {
+	return data.reduce(
+		(acc, pref) => {
+			acc[pref.id] = pref.disabled;
+			return acc;
+		},
+		{} as Record<string, boolean>,
+	);
+}
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
@@ -1,9 +1,11 @@
 import { API } from "api/api";
 import { templates } from "api/queries/templates";
 import type { TasksFilter } from "api/typesGenerated";
+import { Alert } from "components/Alert/Alert";
 import { Badge } from "components/Badge/Badge";
 import { Button, type ButtonProps } from "components/Button/Button";
 import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
+import { Link } from "components/Link/Link";
 import { Margins } from "components/Margins/Margins";
 import {
 	PageHeader,
@@ -13,10 +15,19 @@ import {
 import { useAuthenticated } from "hooks";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
 import { TaskPrompt } from "modules/tasks/TaskPrompt/TaskPrompt";
-import type { FC } from "react";
-import { useQuery } from "react-query";
+import { type FC, useState } from "react";
+import { useQueries, useQuery } from "react-query";
 import { cn } from "utils/cn";
 import { pageTitle } from "utils/page";
+import {
+	systemNotificationTemplates,
+	userNotificationPreferences,
+} from "../../api/queries/notifications";
+import {
+	isTaskNotification,
+	notificationIsDisabled,
+	selectDisabledPreferences,
+} from "../../modules/notifications/utils";
 import { TasksTable } from "./TasksTable";
 import { UsersCombobox } from "./UsersCombobox";
 
@@ -50,10 +61,54 @@ const TasksPage: FC = () => {
 	const displayedTasks =
 		tab.value === "waiting-for-input" ? idleTasks : tasksQuery.data;
 
+	// Fetch notification preferences and templates
+	const [disabledPreferencesQuery, systemTemplatesQuery] = useQueries({
+		queries: [
+			{
+				...userNotificationPreferences(user.id),
+				select: selectDisabledPreferences,
+			},
+			systemNotificationTemplates(),
+		],
+	});
+
+	const disabledPreferences = disabledPreferencesQuery.data ?? {};
+
+	// Check if ALL task notifications are disabled
+	// Returns true only when all task notification templates are disabled.
+	// If even one is enabled, returns false and the warning won't show.
+	const taskNotificationsDisabled = systemTemplatesQuery.data
+		?.filter(isTaskNotification)
+		.every((template) => notificationIsDisabled(disabledPreferences, template));
+
+	// Check localStorage for task notifications warning dismissal
+	const [alertDismissed, setAlertDismissed] = useState(
+		localStorage.getItem("tasksNotificationWarningDismissed") === "true",
+	);
+
 	return (
 		<>
 			<title>{pageTitle("AI Tasks")}</title>
 			<Margins>
+				{taskNotificationsDisabled && !alertDismissed && (
+					<div className="mt-6">
+						<Alert
+							severity="warning"
+							dismissible
+							onDismiss={() => {
+								setAlertDismissed(true);
+								localStorage.setItem(
+									"tasksNotificationWarningDismissed",
+									"true",
+								);
+							}}
+						>
+							Your notifications for tasks status changes are disabled. Go to{" "}
+							<Link href="/settings/notifications">Account Settings</Link> to
+							change it.
+						</Alert>
+					</div>
+				)}
 				<PageHeader>
 					<span className="flex flex-row gap-2">
 						<PageHeaderTitle>Tasks</PageHeaderTitle>
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -16,18 +16,18 @@ import {
 	updateUserNotificationPreferences,
 	userNotificationPreferences,
 } from "api/queries/notifications";
-import type {
-	NotificationPreference,
-	NotificationTemplate,
-} from "api/typesGenerated";
+import type { NotificationTemplate } from "api/typesGenerated";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "hooks";
 import {
 	castNotificationMethod,
+	isTaskNotification,
 	methodIcons,
 	methodLabels,
+	notificationIsDisabled,
+	selectDisabledPreferences,
 } from "modules/notifications/utils";
 import type { Permissions } from "modules/permissions";
 import { type FC, Fragment, useEffect } from "react";
@@ -181,6 +181,17 @@ const NotificationsPage: FC = () => {
 																			[tmpl.id]: !checked,
 																		},
 																	});
+
+																	// Clear the Tasks page warning dismissal when enabling a task notification
+																	// This ensures that if the user disables task notifications again later,
+																	// they will see the warning banner again.
+																	if (isTaskNotification(tmpl) && checked) {
+																		localStorage.setItem(
+																			"tasksNotificationWarningDismissed",
+																			"false",
+																		);
+																	}
+
 																	displaySuccess(
 																		"Notification preferences updated",
 																	);
@@ -241,26 +252,6 @@ function canSeeNotificationGroup(
 	}
 }
 
-function notificationIsDisabled(
-	disabledPreferences: Record<string, boolean>,
-	tmpl: NotificationTemplate,
-): boolean {
-	return (
-		(!tmpl.enabled_by_default && disabledPreferences[tmpl.id] === undefined) ||
-		!!disabledPreferences[tmpl.id]
-	);
-}
-
-function selectDisabledPreferences(data: NotificationPreference[]) {
-	return data.reduce(
-		(acc, pref) => {
-			acc[pref.id] = pref.disabled;
-			return acc;
-		},
-		{} as Record<string, boolean>,
-	);
-}
-
 const styles = {
 	listHeader: (theme) => ({
 		background: theme.palette.background.paper,
