filter groups at the render level, rather than the data fetching level (#19115)

aslilac · web-flow · commit d15973ad0a87 · 2025-07-31T21:12:46.000+01:00
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx
@@ -40,7 +40,7 @@ const meta = {
 			},
 		],
 		user: MockUserOwner,
-		permissions: { viewDeploymentConfig: true },
+		permissions: { createTemplates: true, createUser: true },
 	},
 	decorators: [withGlobalSnackbar, withAuthProvider, withDashboardProvider],
 } satisfies Meta<typeof NotificationsPage>;
@@ -74,13 +74,19 @@ export const ToggleNotification: Story = {
 
 export const NonAdmin: Story = {
 	parameters: {
-		permissions: { viewDeploymentConfig: false },
+		permissions: { createTemplates: false, createUser: false },
 	},
 };
 
-export const TemplateCreator: Story = {
+export const TemplateAdmin: Story = {
 	parameters: {
-		permissions: { viewDeploymentConfig: false, createTemplates: true },
+		permissions: { createTemplates: true, createUser: false },
+	},
+};
+
+export const UserAdmin: Story = {
+	parameters: {
+		permissions: { createTemplates: false, createUser: true },
 	},
 };
 
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -28,6 +28,7 @@ import {
 	methodIcons,
 	methodLabels,
 } from "modules/notifications/utils";
+import type { Permissions } from "modules/permissions";
 import { type FC, Fragment } from "react";
 import { useEffect } from "react";
 import { Helmet } from "react-helmet-async";
@@ -46,22 +47,7 @@ const NotificationsPage: FC = () => {
 			},
 			{
 				...systemNotificationTemplates(),
-				select: (data: NotificationTemplate[]) => {
-					const groups = selectTemplatesByGroup(data);
-
-					let displayedGroups: Record<string, NotificationTemplate[]> = {
-						// Members only have access to the "Workspace Notifications" group.
-						"Workspace Events": groups["Workspace Events"],
-					};
-
-					if (permissions.viewDeploymentConfig) {
-						displayedGroups = groups;
-					} else if (permissions.createTemplates) {
-						displayedGroups["Template Events"] = groups["Template Events"];
-					}
-
-					return displayedGroups;
-				},
+				select: (data: NotificationTemplate[]) => selectTemplatesByGroup(data),
 			},
 			notificationDispatchMethods(),
 		],
@@ -110,6 +96,10 @@ const NotificationsPage: FC = () => {
 				{ready ? (
 					<Stack spacing={4}>
 						{Object.entries(templatesByGroup.data).map(([group, templates]) => {
+							if (!canSeeNotificationGroup(group, permissions)) {
+								return null;
+							}
+
 							const allDisabled = templates.some((tpl) => {
 								return notificationIsDisabled(disabledPreferences.data, tpl);
 							});
@@ -218,6 +208,22 @@ const NotificationsPage: FC = () => {
 
 export default NotificationsPage;
 
+function canSeeNotificationGroup(
+	group: string,
+	permissions: Permissions,
+): boolean {
+	switch (group) {
+		case "Workspace Events":
+			return true;
+		case "Template Events":
+			return permissions.createTemplates;
+		case "User Events":
+			return permissions.createUser;
+		default:
+			return false;
+	}
+}
+
 function notificationIsDisabled(
 	disabledPreferences: Record<string, boolean>,
 	tmpl: NotificationTemplate,
