chore: cleanup some query handling (#15130)

site/.storybook/preview.jsx

@@ -104,15 +104,17 @@ function withQuery(Story, { parameters }) {
 
 	if (parameters.queries) {
 		for (const query of parameters.queries) {
-			if (query.data instanceof Error) {
-				// This is copied from setQueryData() but sets the error.
+			if (query.isError) {
+				// Based on `setQueryData`, but modified to set the result as an error.
 				const cache = queryClient.getQueryCache();
 				const parsedOptions = parseQueryArgs(query.key);
 				const defaultedOptions = queryClient.defaultQueryOptions(parsedOptions);
+				// Adds an uninitialized response to the cache, which we can now mutate.
 				const cachedQuery = cache.build(queryClient, defaultedOptions);
-				// Set manual data so react-query will not try to refetch.
+				// Setting `manual` prevents retries.
 				cachedQuery.setData(undefined, { manual: true });
-				cachedQuery.setState({ error: query.data });
+				// Set the `error` value and the appropriate status.
+				cachedQuery.setState({ error: query.data, status: "error" });
 			} else {
 				queryClient.setQueryData(query.key, query.data);
 			}

site/src/@types/storybook.d.ts

@@ -19,7 +19,7 @@ declare module "@storybook/react" {
 		experiments?: Experiments;
 		showOrganizations?: boolean;
 		organizations?: Organization[];
-		queries?: { key: QueryKey; data: unknown }[];
+		queries?: { key: QueryKey; data: unknown; isError?: boolean }[];
 		webSocket?: WebSocketEvent[];
 		user?: User;
 		permissions?: Partial<Permissions>;

site/src/api/queries/notifications.ts

@@ -65,27 +65,21 @@ export const systemNotificationTemplates = () => {
 export function selectTemplatesByGroup(
 	data: NotificationTemplate[],
 ): Record<string, NotificationTemplate[]> {
-	const grouped = data.reduce(
-		(acc, tpl) => {
-			if (!acc[tpl.group]) {
-				acc[tpl.group] = [];
-			}
-			acc[tpl.group].push(tpl);
-			return acc;
-		},
-		{} as Record<string, NotificationTemplate[]>,
-	);
-
-	// Sort templates within each group
-	for (const group in grouped) {
-		grouped[group].sort((a, b) => a.name.localeCompare(b.name));
+	const grouped: Record<string, NotificationTemplate[]> = {};
+	for (const template of data) {
+		if (!grouped[template.group]) {
+			grouped[template.group] = [];
+		}
+		grouped[template.group].push(template);
 	}
 
-	// Sort groups by name
+	// Sort groups by name, and sort templates within each group
 	const sortedGroups = Object.keys(grouped).sort((a, b) => a.localeCompare(b));
 	const sortedGrouped: Record<string, NotificationTemplate[]> = {};
 	for (const group of sortedGroups) {
-		sortedGrouped[group] = grouped[group];
+		sortedGrouped[group] = grouped[group].sort((a, b) =>
+			a.name.localeCompare(b.name),
+		);
 	}
 
 	return sortedGrouped;

site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.stories.tsx

@@ -53,7 +53,10 @@ export const LoadingGroup: Story = {
 
 export const GroupError: Story = {
 	parameters: {
-		queries: [groupQuery(new Error("test group error")), permissionsQuery({})],
+		queries: [
+			{ ...groupQuery(new Error("test group error")), isError: true },
+			permissionsQuery({}),
+		],
 	},
 };
 
@@ -90,7 +93,7 @@ export const MembersError: Story = {
 		queries: [
 			groupQuery(MockGroup),
 			permissionsQuery({ canUpdateGroup: true }),
-			membersQuery(new Error("test members error")),
+			{ ...membersQuery(new Error("test members error")), isError: true },
 		],
 	},
 	play: async ({ canvasElement }) => {