Fix storybook

BrunoQuaresma · BrunoQuaresma · commit ca11cd248f2f · 2023-12-06T13:03:31.000Z
diff --git a/site/src/api/queries/debug.ts b/site/src/api/queries/debug.ts
@@ -2,24 +2,27 @@ import * as API from "api/api";
 import { HealthSettings } from "api/typesGenerated";
 import { QueryClient, UseMutationOptions } from "react-query";
 
+export const HEALTH_QUERY_KEY = ["health"];
+export const HEALTH_QUERY_SETTINGS_KEY = ["health", "settings"];
+
 export const health = () => ({
-  queryKey: ["health"],
+  queryKey: HEALTH_QUERY_KEY,
   queryFn: async () => API.getHealth(),
 });
 
 export const refreshHealth = (queryClient: QueryClient) => {
   return {
     mutationFn: async () => {
-      await queryClient.cancelQueries(["health"]);
+      await queryClient.cancelQueries(HEALTH_QUERY_KEY);
       const newHealthData = await API.getHealth(true);
-      queryClient.setQueryData(["health"], newHealthData);
+      queryClient.setQueryData(HEALTH_QUERY_KEY, newHealthData);
     },
   };
 };
 
 export const healthSettings = () => {
   return {
-    queryKey: ["health", "settings"],
+    queryKey: HEALTH_QUERY_SETTINGS_KEY,
     queryFn: API.getHealthSettings,
   };
 };
@@ -30,8 +33,8 @@ export const updateHealthSettings = (
   return {
     mutationFn: API.updateHealthSettings,
     onSuccess: async (_, newSettings) => {
-      await queryClient.invalidateQueries(["health"]);
-      queryClient.setQueryData(["health", "settings"], newSettings);
+      await queryClient.invalidateQueries(HEALTH_QUERY_KEY);
+      queryClient.setQueryData(HEALTH_QUERY_SETTINGS_KEY, newSettings);
     },
   };
 };
diff --git a/site/src/pages/HealthPage/storybook.tsx b/site/src/pages/HealthPage/storybook.tsx
@@ -0,0 +1,33 @@
+import { useQueryClient } from "react-query";
+import {
+  reactRouterParameters,
+  reactRouterOutlet,
+  RouteDefinition,
+} from "storybook-addon-react-router-v6";
+import { MockHealth, MockHealthSettings } from "testHelpers/entities";
+import { Meta } from "@storybook/react";
+import { HEALTH_QUERY_KEY, HEALTH_QUERY_SETTINGS_KEY } from "api/queries/debug";
+
+type MetaOptions = {
+  element: RouteDefinition;
+  path: string;
+};
+
+export const generateMeta = ({ element, path }: MetaOptions): Meta => {
+  return {
+    parameters: {
+      layout: "fullscreen",
+      reactRouter: reactRouterParameters({
+        routing: reactRouterOutlet({ path: `/health/${path}` }, element),
+      }),
+    },
+    decorators: [
+      (Story) => {
+        const queryClient = useQueryClient();
+        queryClient.setQueryData(HEALTH_QUERY_KEY, MockHealth);
+        queryClient.setQueryData(HEALTH_QUERY_SETTINGS_KEY, MockHealthSettings);
+        return <Story />;
+      },
+    ],
+  };
+};
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -3148,3 +3148,7 @@ export const DeploymentHealthUnhealthy: TypesGen.HealthcheckReport = {
     },
   },
 };
+
+export const MockHealthSettings: TypesGen.HealthSettings = {
+  dismissed_healthchecks: [],
+};
