Moving towards frontend-only solution

dannykopping · dannykopping · commit 54f2462084cd · 2024-04-16T12:06:57.000+02:00
Replaced green circle with more neutral icon to indicate enabled experiments

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,20 +949,6 @@ 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 getExternalAuthProvider = async (
   provider: string,
 ): Promise<TypesGen.ExternalAuth> => {
diff --git a/site/src/api/queries/experiments.ts b/site/src/api/queries/experiments.ts
@@ -20,10 +20,3 @@ export const availableExperiments = () => {
     queryFn: async () => API.getAvailableExperiments(),
   };
 };
-
-export const experimentsDetail = () => {
-  return {
-    queryKey: ["experimentsDetail"],
-    queryFn: async () => API.getExperimentsDetail(),
-  };
-};
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -1,18 +1,19 @@
-import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
-import { useQuery } from "react-query";
-import { deploymentDAUs } from "api/queries/deployment";
-import { entitlements } from "api/queries/entitlements";
-import { experimentsDetail } from "api/queries/experiments";
-import { pageTitle } from "utils/page";
-import { useDeploySettings } from "../DeploySettingsLayout";
-import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
+import type {FC} from "react";
+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, experiments} from "api/queries/experiments";
+import {pageTitle} from "utils/page";
+import {useDeploySettings} from "../DeploySettingsLayout";
+import {GeneralSettingsPageView} from "./GeneralSettingsPageView";
 
 const GeneralSettingsPage: FC = () => {
-  const { deploymentValues } = useDeploySettings();
+  const {deploymentValues} = useDeploySettings();
   const deploymentDAUsQuery = useQuery(deploymentDAUs());
   const entitlementsQuery = useQuery(entitlements());
-  const experimentsQuery = useQuery(experimentsDetail());
+  const enabledExperimentsQuery = useQuery(experiments());
+  const availableExperimentsQuery = useQuery(availableExperiments());
 
   return (
     <>
@@ -24,7 +25,8 @@ const GeneralSettingsPage: FC = () => {
         deploymentDAUs={deploymentDAUsQuery.data}
         deploymentDAUsError={deploymentDAUsQuery.error}
         entitlements={entitlementsQuery.data}
-        experiments={experimentsQuery.data}
+        enabledExperiments={enabledExperimentsQuery.data ?? []}
+        safeExperiments={availableExperimentsQuery.data?.safe ?? []}
       />
     </>
   );
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -40,7 +40,8 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
       },
     ],
     deploymentDAUs: MockDeploymentDAUResponse,
-    experiments: [],
+    enabledExperiments: [],
+    safeExperiments: [],
   },
 };
 
@@ -102,6 +103,6 @@ export const allExperimentsEnabled: Story = {
         hidden: false,
       },
     ],
-    experiments: [],
+    safeExperiments: [],
   },
 };
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -4,7 +4,7 @@ import type {
   SerpentOption,
   DAUsResponse,
   Entitlements,
-  ExperimentDetail,
+  Experiments,
 } from "api/typesGenerated";
 import {
   ActiveUserChart,
@@ -24,28 +24,36 @@ export type GeneralSettingsPageViewProps = {
   deploymentDAUs?: DAUsResponse;
   deploymentDAUsError: unknown;
   entitlements: Entitlements | undefined;
-  experiments?: ExperimentDetail[];
+  enabledExperiments: Experiments;
+  safeExperiments: Experiments;
 };
 
 export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
   deploymentOptions,
   deploymentDAUs,
   deploymentDAUsError,
   entitlements,
-  experiments,
+  enabledExperiments,
+  safeExperiments,
 }) => {
   const safe: string[] = [];
   const invalid: string[] = [];
 
-  if (experiments) {
-    experiments?.forEach(function (value) {
-      if (value.invalid) {
-        invalid.push(value.name);
-      } else {
-        safe.push(value.name);
+  enabledExperiments.forEach(function (exp) {
+    let found = false;
+    safeExperiments.forEach(function (name) {
+      if (exp === name) {
+        found = true;
+        return;
       }
-    });
-  }
+    })
+
+    if (found) {
+      safe.push(exp);
+    } else {
+      invalid.push(exp);
+    }
+  });
 
   return (
     <>
@@ -84,7 +92,7 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
               ))}
             </ul>
             It is recommended that you remove these experiments from your
-            configuration as they have no effect.
+            configuration as they have no effect. See <a href="https://coder.com/docs/v2/latest/cli/server#--experiments" target="_blank">the documentation</a> for more details.
           </Alert>
         )}
         <OptionsTable
diff --git a/site/src/pages/DeploySettingsPage/Option.tsx b/site/src/pages/DeploySettingsPage/Option.tsx
@@ -1,5 +1,5 @@
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
-import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
+import LabelImportant from "@mui/icons-material/LabelImportant";
 import type { FC, HTMLAttributes, PropsWithChildren } from "react";
 import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
@@ -91,11 +91,11 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
                 }}
               >
                 {isEnabled && (
-                  <CheckCircleOutlined
+                  <LabelImportant
                     css={(theme) => ({
                       width: 16,
                       height: 16,
-                      color: theme.palette.success.light,
+                      color: theme.palette.info.light,
                       margin: "0 8px",
                     })}
                   />
