Render invalid experiments warning

dannykopping · dannykopping · commit 31d5d6062d6c · 2024-04-16T12:06:56.000+02:00
Signed-off-by: Danny Kopping &lt;danny@coder.com&gt;
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -949,18 +949,19 @@ export const getAvailableExperiments =
     }
   };
 
-export const getExperimentsDetail =
-  async (): Promise<TypesGen.ExperimentDetail[]> => {
-    try {
-      const response = await axios.get("/api/v2/experiments/detail");
-      return response.data;
-    } catch (error) {
-      if (axios.isAxiosError(error) && error.response?.status === 404) {
-        return [];
-      }
-      throw error;
+export const getExperimentsDetail = async (): Promise<
+  TypesGen.ExperimentDetail[]
+> => {
+  try {
+    const response = await axios.get("/api/v2/experiments/detail");
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response?.status === 404) {
+      return [];
     }
-  };
+    throw error;
+  }
+};
 
 export const getExternalAuthProvider = async (
   provider: string,
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -3,7 +3,7 @@ import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { deploymentDAUs } from "api/queries/deployment";
 import { entitlements } from "api/queries/entitlements";
-import { availableExperiments } from "api/queries/experiments";
+import { experimentsDetail } from "api/queries/experiments";
 import { pageTitle } from "utils/page";
 import { useDeploySettings } from "../DeploySettingsLayout";
 import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
@@ -12,7 +12,7 @@ const GeneralSettingsPage: FC = () => {
   const { deploymentValues } = useDeploySettings();
   const deploymentDAUsQuery = useQuery(deploymentDAUs());
   const entitlementsQuery = useQuery(entitlements());
-  const experimentsQuery = useQuery(availableExperiments());
+  const experimentsQuery = useQuery(experimentsDetail());
 
   return (
     <>
@@ -24,7 +24,7 @@ const GeneralSettingsPage: FC = () => {
         deploymentDAUs={deploymentDAUsQuery.data}
         deploymentDAUsError={deploymentDAUsQuery.error}
         entitlements={entitlementsQuery.data}
-        safeExperiments={experimentsQuery.data?.safe ?? []}
+        experiments={experimentsQuery.data}
       />
     </>
   );
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -40,7 +40,7 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
       },
     ],
     deploymentDAUs: MockDeploymentDAUResponse,
-    safeExperiments: [],
+    experiments: [],
   },
 };
 
@@ -102,6 +102,6 @@ export const allExperimentsEnabled: Story = {
         hidden: false,
       },
     ],
-    safeExperiments: [],
+    experiments: [],
   },
 };
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -1,9 +1,10 @@
+import AlertTitle from "@mui/material/AlertTitle";
 import type { FC } from "react";
 import type {
   SerpentOption,
   DAUsResponse,
   Entitlements,
-  Experiments,
+  ExperimentDetail,
 } from "api/typesGenerated";
 import {
   ActiveUserChart,
@@ -13,6 +14,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Stack } from "components/Stack/Stack";
 import { useDeploymentOptions } from "utils/deployOptions";
 import { docs } from "utils/docs";
+import { Alert } from "../../../components/Alert/Alert";
 import { Header } from "../Header";
 import OptionsTable from "../OptionsTable";
 import { ChartSection } from "./ChartSection";
@@ -22,16 +24,29 @@ export type GeneralSettingsPageViewProps = {
   deploymentDAUs?: DAUsResponse;
   deploymentDAUsError: unknown;
   entitlements: Entitlements | undefined;
-  safeExperiments: Experiments | undefined;
+  experiments?: ExperimentDetail[];
 };
 
 export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
   deploymentOptions,
   deploymentDAUs,
   deploymentDAUsError,
   entitlements,
-  safeExperiments,
+  experiments,
 }) => {
+  const safe: string[] = [];
+  const invalid: string[] = [];
+
+  if (experiments) {
+    experiments?.forEach(function (value) {
+      if (value.invalid) {
+        invalid.push(value.name);
+      } else {
+        safe.push(value.name);
+      }
+    });
+  }
+
   return (
     <>
       <Header
@@ -58,14 +73,28 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
             </ChartSection>
           </div>
         )}
+        {invalid.length > 0 && (
+          <Alert severity="warning">
+            <AlertTitle>Invalid experiments in use:</AlertTitle>
+            <ul>
+              {invalid.map((it) => (
+                <li key={it}>
+                  <pre>{it}</pre>
+                </li>
+              ))}
+            </ul>
+            It is recommended that you remove these experiments from your
+            configuration as they have no effect.
+          </Alert>
+        )}
         <OptionsTable
           options={useDeploymentOptions(
             deploymentOptions,
             "Access URL",
             "Wildcard Access URL",
             "Experiments",
           )}
-          additionalValues={safeExperiments}
+          additionalValues={safe}
         />
       </Stack>
     </>
diff --git a/site/src/pages/DeploySettingsPage/optionValue.ts b/site/src/pages/DeploySettingsPage/optionValue.ts
@@ -41,7 +41,7 @@ export function optionValue(
       const experimentMap: Record<string, boolean> | undefined =
         additionalValues?.reduce(
           (acc, v) => {
-            return { ...acc, [v]: option.value.includes("*") ? true : false };
+            return { ...acc, [v]: option.value.includes("*") };
           },
           {} as Record<string, boolean>,
         );
