From 342a57b387cefd672803ad6a631092ad5a3a054a Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 8 Dec 2023 13:31:47 +0000
Subject: [PATCH 1/2] fix(site): do not show ws proxy on menu if it is not
 enabled

---
 site/src/pages/HealthPage/HealthLayout.tsx | 43 +++++++++++++---------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/site/src/pages/HealthPage/HealthLayout.tsx b/site/src/pages/HealthPage/HealthLayout.tsx
index 7944ac122c983..5fc94df521164 100644
--- a/site/src/pages/HealthPage/HealthLayout.tsx
+++ b/site/src/pages/HealthPage/HealthLayout.tsx
@@ -17,17 +17,11 @@ import { Suspense } from "react";
 import { HealthIcon } from "./Content";
 import { HealthSeverity } from "api/typesGenerated";
 import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
-
-const sections = {
-  derp: "DERP",
-  access_url: "Access URL",
-  websocket: "Websocket",
-  database: "Database",
-  workspace_proxy: "Workspace Proxy",
-} as const;
+import { useDashboard } from "components/Dashboard/DashboardProvider";
 
 export function HealthLayout() {
   const theme = useTheme();
+  const dashboard = useDashboard();
   const queryClient = useQueryClient();
   const { data: healthStatus } = useQuery({
     ...health(),
@@ -36,6 +30,18 @@ export function HealthLayout() {
   const { mutate: forceRefresh, isLoading: isRefreshing } = useMutation(
     refreshHealth(queryClient),
   );
+  const sections = {
+    derp: "DERP",
+    access_url: "Access URL",
+    websocket: "Websocket",
+    database: "Database",
+    workspace_proxy: dashboard.experiments.includes("moons")
+      ? "Workspace Proxy"
+      : undefined,
+  } as const;
+  const visibleSections = Object.keys(sections).filter(
+    (key) => sections[key as keyof typeof sections],
+  ) as Partial<typeof sections>;
 
   return (
     <>
@@ -106,13 +112,13 @@ export function HealthLayout() {
                     }}
                   >
                     {healthStatus.healthy
-                      ? Object.keys(sections).some(
-                          (key) =>
-                            healthStatus[key as keyof typeof sections]
-                              .warnings !== null &&
-                            healthStatus[key as keyof typeof sections].warnings
-                              .length > 0,
-                        )
+                      ? Object.keys(visibleSections).some((key) => {
+                          const section =
+                            healthStatus[key as keyof typeof visibleSections];
+                          return (
+                            section.warnings && section.warnings.length > 0
+                          );
+                        })
                         ? "All systems operational, but performance might be degraded"
                         : "All systems operational"
                       : "Some issues have been detected"}
@@ -145,12 +151,13 @@ export function HealthLayout() {
               </div>
 
               <nav css={{ display: "flex", flexDirection: "column", gap: 1 }}>
-                {Object.keys(sections)
+                {Object.keys(visibleSections)
                   .sort()
                   .map((key) => {
-                    const label = sections[key as keyof typeof sections];
+                    const label =
+                      visibleSections[key as keyof typeof visibleSections];
                     const healthSection =
-                      healthStatus[key as keyof typeof sections];
+                      healthStatus[key as keyof typeof visibleSections];
 
                     return (
                       <NavLink

From a4726dba57e12486e1b952528436b92b780376ab Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 8 Dec 2023 14:31:34 +0000
Subject: [PATCH 2/2] Fix storybook and visible filter

---
 .../HealthPage/AccessURLPage.stories.tsx      | 29 ++++--------------
 .../src/pages/HealthPage/DERPPage.stories.tsx | 26 ++++------------
 .../HealthPage/DERPRegionPage.stories.tsx     | 30 ++++---------------
 .../pages/HealthPage/DatabasePage.stories.tsx | 29 ++++--------------
 site/src/pages/HealthPage/HealthLayout.tsx    | 24 ++++++++++++---
 .../HealthPage/WebsocketPage.stories.tsx      | 29 ++++--------------
 .../HealthPage/WebsocketProxyPage.stories.tsx | 29 ++++--------------
 site/src/pages/HealthPage/storybook.tsx       | 30 +++++++++++++++++--
 8 files changed, 78 insertions(+), 148 deletions(-)

diff --git a/site/src/pages/HealthPage/AccessURLPage.stories.tsx b/site/src/pages/HealthPage/AccessURLPage.stories.tsx
index b57f99eeb8578..31ed1e32a2961 100644
--- a/site/src/pages/HealthPage/AccessURLPage.stories.tsx
+++ b/site/src/pages/HealthPage/AccessURLPage.stories.tsx
@@ -1,32 +1,13 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { AccessURLPage } from "./AccessURLPage";
-import { HealthLayout } from "./HealthLayout";
-import {
-  reactRouterOutlet,
-  reactRouterParameters,
-} from "storybook-addon-react-router-v6";
-import { useQueryClient } from "react-query";
-import { MockHealth } from "testHelpers/entities";
+import { generateMeta } from "./storybook";
 
 const meta: Meta = {
   title: "pages/Health/AccessURL",
-  render: HealthLayout,
-  parameters: {
-    layout: "fullscreen",
-    reactRouter: reactRouterParameters({
-      routing: reactRouterOutlet(
-        { path: "/health/access-url" },
-        <AccessURLPage />,
-      ),
-    }),
-  },
-  decorators: [
-    (Story) => {
-      const queryClient = useQueryClient();
-      queryClient.setQueryData(["health"], MockHealth);
-      return <Story />;
-    },
-  ],
+  ...generateMeta({
+    path: "/health/access-url",
+    element: <AccessURLPage />,
+  }),
 };
 
 export default meta;
diff --git a/site/src/pages/HealthPage/DERPPage.stories.tsx b/site/src/pages/HealthPage/DERPPage.stories.tsx
index be1ea969c322e..8e87d3c03b2fb 100644
--- a/site/src/pages/HealthPage/DERPPage.stories.tsx
+++ b/site/src/pages/HealthPage/DERPPage.stories.tsx
@@ -1,29 +1,13 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { DERPPage } from "./DERPPage";
-import { HealthLayout } from "./HealthLayout";
-import {
-  reactRouterOutlet,
-  reactRouterParameters,
-} from "storybook-addon-react-router-v6";
-import { useQueryClient } from "react-query";
-import { MockHealth } from "testHelpers/entities";
+import { generateMeta } from "./storybook";
 
 const meta: Meta = {
   title: "pages/Health/DERP",
-  render: HealthLayout,
-  parameters: {
-    layout: "fullscreen",
-    reactRouter: reactRouterParameters({
-      routing: reactRouterOutlet({ path: "/health/derp" }, <DERPPage />),
-    }),
-  },
-  decorators: [
-    (Story) => {
-      const queryClient = useQueryClient();
-      queryClient.setQueryData(["health"], MockHealth);
-      return <Story />;
-    },
-  ],
+  ...generateMeta({
+    path: "/health/derp",
+    element: <DERPPage />,
+  }),
 };
 
 export default meta;
diff --git a/site/src/pages/HealthPage/DERPRegionPage.stories.tsx b/site/src/pages/HealthPage/DERPRegionPage.stories.tsx
index 89ef3102a7dad..6305c2eecc7b1 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.stories.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.stories.tsx
@@ -1,36 +1,18 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { DERPRegionPage } from "./DERPRegionPage";
-import { HealthLayout } from "./HealthLayout";
-import {
-  reactRouterOutlet,
-  reactRouterParameters,
-} from "storybook-addon-react-router-v6";
-import { useQueryClient } from "react-query";
 import { MockHealth } from "testHelpers/entities";
+import { generateMeta } from "./storybook";
 
 const firstRegionId = Object.values(MockHealth.derp.regions)[0].region
   ?.RegionID;
 
 const meta: Meta = {
   title: "pages/Health/DERPRegion",
-  render: HealthLayout,
-  parameters: {
-    layout: "fullscreen",
-    reactRouter: reactRouterParameters({
-      location: { pathParams: { regionId: firstRegionId } },
-      routing: reactRouterOutlet(
-        { path: `/health/derp/regions/:regionId` },
-        <DERPRegionPage />,
-      ),
-    }),
-  },
-  decorators: [
-    (Story) => {
-      const queryClient = useQueryClient();
-      queryClient.setQueryData(["health"], MockHealth);
-      return <Story />;
-    },
-  ],
+  ...generateMeta({
+    path: "/health/derp/regions/:regionId",
+    element: <DERPRegionPage />,
+    params: { regionId: firstRegionId },
+  }),
 };
 
 export default meta;
diff --git a/site/src/pages/HealthPage/DatabasePage.stories.tsx b/site/src/pages/HealthPage/DatabasePage.stories.tsx
index 22cafd7f282ef..b250dbce68afe 100644
--- a/site/src/pages/HealthPage/DatabasePage.stories.tsx
+++ b/site/src/pages/HealthPage/DatabasePage.stories.tsx
@@ -1,32 +1,13 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { DatabasePage } from "./DatabasePage";
-import { HealthLayout } from "./HealthLayout";
-import {
-  reactRouterOutlet,
-  reactRouterParameters,
-} from "storybook-addon-react-router-v6";
-import { useQueryClient } from "react-query";
-import { MockHealth } from "testHelpers/entities";
+import { generateMeta } from "./storybook";
 
 const meta: Meta = {
   title: "pages/Health/Database",
-  render: HealthLayout,
-  parameters: {
-    layout: "fullscreen",
-    reactRouter: reactRouterParameters({
-      routing: reactRouterOutlet(
-        { path: "/health/database" },
-        <DatabasePage />,
-      ),
-    }),
-  },
-  decorators: [
-    (Story) => {
-      const queryClient = useQueryClient();
-      queryClient.setQueryData(["health"], MockHealth);
-      return <Story />;
-    },
-  ],
+  ...generateMeta({
+    path: "/health/database",
+    element: <DatabasePage />,
+  }),
 };
 
 export default meta;
diff --git a/site/src/pages/HealthPage/HealthLayout.tsx b/site/src/pages/HealthPage/HealthLayout.tsx
index 5fc94df521164..448de1665f4a3 100644
--- a/site/src/pages/HealthPage/HealthLayout.tsx
+++ b/site/src/pages/HealthPage/HealthLayout.tsx
@@ -12,7 +12,7 @@ import Tooltip from "@mui/material/Tooltip";
 import CircularProgress from "@mui/material/CircularProgress";
 import { NavLink, Outlet } from "react-router-dom";
 import { css } from "@emotion/css";
-import { kebabCase } from "lodash/fp";
+import kebabCase from "lodash/fp/kebabCase";
 import { Suspense } from "react";
 import { HealthIcon } from "./Content";
 import { HealthSeverity } from "api/typesGenerated";
@@ -39,9 +39,7 @@ export function HealthLayout() {
       ? "Workspace Proxy"
       : undefined,
   } as const;
-  const visibleSections = Object.keys(sections).filter(
-    (key) => sections[key as keyof typeof sections],
-  ) as Partial<typeof sections>;
+  const visibleSections = filterVisibleSections(sections);
 
   return (
     <>
@@ -225,3 +223,21 @@ export function HealthLayout() {
     </>
   );
 }
+
+const filterVisibleSections = <T extends object>(sections: T) => {
+  return Object.keys(sections).reduce(
+    (visible, sectionName) => {
+      const sectionValue = sections[sectionName as keyof typeof sections];
+
+      if (!sectionValue) {
+        return visible;
+      }
+
+      return {
+        ...visible,
+        [sectionName]: sectionValue,
+      };
+    },
+    {} as Partial<typeof sections>,
+  );
+};
diff --git a/site/src/pages/HealthPage/WebsocketPage.stories.tsx b/site/src/pages/HealthPage/WebsocketPage.stories.tsx
index 242ff18741c83..896bc7126ca95 100644
--- a/site/src/pages/HealthPage/WebsocketPage.stories.tsx
+++ b/site/src/pages/HealthPage/WebsocketPage.stories.tsx
@@ -1,32 +1,13 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { WebsocketPage } from "./WebsocketPage";
-import { HealthLayout } from "./HealthLayout";
-import {
-  reactRouterOutlet,
-  reactRouterParameters,
-} from "storybook-addon-react-router-v6";
-import { useQueryClient } from "react-query";
-import { MockHealth } from "testHelpers/entities";
+import { generateMeta } from "./storybook";
 
 const meta: Meta = {
   title: "pages/Health/Websocket",
-  render: HealthLayout,
-  parameters: {
-    layout: "fullscreen",
-    reactRouter: reactRouterParameters({
-      routing: reactRouterOutlet(
-        { path: "/health/derp/websocket" },
-        <WebsocketPage />,
-      ),
-    }),
-  },
-  decorators: [
-    (Story) => {
-      const queryClient = useQueryClient();
-      queryClient.setQueryData(["health"], MockHealth);
-      return <Story />;
-    },
-  ],
+  ...generateMeta({
+    path: "/health/websocket",
+    element: <WebsocketPage />,
+  }),
 };
 
 export default meta;
diff --git a/site/src/pages/HealthPage/WebsocketProxyPage.stories.tsx b/site/src/pages/HealthPage/WebsocketProxyPage.stories.tsx
index a5fbf5a8a1961..446bf1ea6f9f0 100644
--- a/site/src/pages/HealthPage/WebsocketProxyPage.stories.tsx
+++ b/site/src/pages/HealthPage/WebsocketProxyPage.stories.tsx
@@ -1,32 +1,13 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { WorkspaceProxyPage } from "./WorkspaceProxyPage";
-import { HealthLayout } from "./HealthLayout";
-import {
-  reactRouterOutlet,
-  reactRouterParameters,
-} from "storybook-addon-react-router-v6";
-import { useQueryClient } from "react-query";
-import { MockHealth } from "testHelpers/entities";
+import { generateMeta } from "./storybook";
 
 const meta: Meta = {
   title: "pages/Health/WorkspaceProxy",
-  render: HealthLayout,
-  parameters: {
-    layout: "fullscreen",
-    reactRouter: reactRouterParameters({
-      routing: reactRouterOutlet(
-        { path: "/health/workspace-proxy" },
-        <WorkspaceProxyPage />,
-      ),
-    }),
-  },
-  decorators: [
-    (Story) => {
-      const queryClient = useQueryClient();
-      queryClient.setQueryData(["health"], MockHealth);
-      return <Story />;
-    },
-  ],
+  ...generateMeta({
+    path: "/health/workspace-proxy",
+    element: <WorkspaceProxyPage />,
+  }),
 };
 
 export default meta;
diff --git a/site/src/pages/HealthPage/storybook.tsx b/site/src/pages/HealthPage/storybook.tsx
index 8a6893ebf3734..387fa6465d4f7 100644
--- a/site/src/pages/HealthPage/storybook.tsx
+++ b/site/src/pages/HealthPage/storybook.tsx
@@ -4,21 +4,32 @@ import {
   reactRouterOutlet,
   RouteDefinition,
 } from "storybook-addon-react-router-v6";
-import { MockHealth, MockHealthSettings } from "testHelpers/entities";
+import {
+  MockBuildInfo,
+  MockEntitlements,
+  MockExperiments,
+  MockHealth,
+  MockHealthSettings,
+} from "testHelpers/entities";
 import { Meta } from "@storybook/react";
 import { HEALTH_QUERY_KEY, HEALTH_QUERY_SETTINGS_KEY } from "api/queries/debug";
+import { DashboardProvider } from "components/Dashboard/DashboardProvider";
+import { HealthLayout } from "./HealthLayout";
 
 type MetaOptions = {
   element: RouteDefinition;
   path: string;
+  params?: Record<string, string>;
 };
 
-export const generateMeta = ({ element, path }: MetaOptions): Meta => {
+export const generateMeta = ({ element, path, params }: MetaOptions): Meta => {
   return {
+    render: HealthLayout,
     parameters: {
       layout: "fullscreen",
       reactRouter: reactRouterParameters({
-        routing: reactRouterOutlet({ path: `/health/${path}` }, element),
+        location: { pathParams: params },
+        routing: reactRouterOutlet({ path }, element),
       }),
     },
     decorators: [
@@ -28,6 +39,19 @@ export const generateMeta = ({ element, path }: MetaOptions): Meta => {
         queryClient.setQueryData(HEALTH_QUERY_SETTINGS_KEY, MockHealthSettings);
         return <Story />;
       },
+      (Story) => {
+        const queryClient = useQueryClient();
+        queryClient.setQueryData(["buildInfo"], MockBuildInfo);
+        queryClient.setQueryData(["entitlements"], MockEntitlements);
+        queryClient.setQueryData(["experiments"], MockExperiments);
+        queryClient.setQueryData(["appearance"], MockExperiments);
+
+        return (
+          <DashboardProvider>
+            <Story />
+          </DashboardProvider>
+        );
+      },
     ],
   };
 };