diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx index 99d2bb5b577ce..bbe185a75e068 100644 --- a/site/.storybook/preview.jsx +++ b/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); } diff --git a/site/src/@types/storybook.d.ts b/site/src/@types/storybook.d.ts index bd59ec1a93c6b..82507741d5621 100644 --- a/site/src/@types/storybook.d.ts +++ b/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; diff --git a/site/src/api/queries/notifications.ts b/site/src/api/queries/notifications.ts index c08956b0700de..3c54ffc949c89 100644 --- a/site/src/api/queries/notifications.ts +++ b/site/src/api/queries/notifications.ts @@ -65,27 +65,21 @@ export const systemNotificationTemplates = () => { export function selectTemplatesByGroup( data: NotificationTemplate[], ): Record { - const grouped = data.reduce( - (acc, tpl) => { - if (!acc[tpl.group]) { - acc[tpl.group] = []; - } - acc[tpl.group].push(tpl); - return acc; - }, - {} as Record, - ); - - // Sort templates within each group - for (const group in grouped) { - grouped[group].sort((a, b) => a.name.localeCompare(b.name)); + const grouped: Record = {}; + 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 = {}; for (const group of sortedGroups) { - sortedGrouped[group] = grouped[group]; + sortedGrouped[group] = grouped[group].sort((a, b) => + a.name.localeCompare(b.name), + ); } return sortedGrouped; diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.stories.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.stories.tsx index b7b75fc134fae..43420b1867220 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.stories.tsx +++ b/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 }) => {