From b85d5d84919bc9552d30d264c232f8cc401dfca6 Mon Sep 17 00:00:00 2001 From: Danny Kopping Date: Wed, 17 Apr 2024 16:59:31 +0200 Subject: [PATCH] feat: add warning about use of old/removed/invalid experiments (#12962) --- .../GeneralSettingsPage.tsx | 14 +++++-- .../GeneralSettingsPageView.stories.tsx | 40 ++++++++++++++++++- .../GeneralSettingsPageView.tsx | 28 ++++++++++++- site/src/pages/DeploySettingsPage/Option.tsx | 6 +-- .../pages/DeploySettingsPage/optionValue.ts | 14 +++---- 5 files changed, 87 insertions(+), 15 deletions(-) diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx index 4f9f627a0b..2e79b36f46 100644 --- 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 { availableExperiments, experiments } from "api/queries/experiments"; import { pageTitle } from "utils/page"; import { useDeploySettings } from "../DeploySettingsLayout"; import { GeneralSettingsPageView } from "./GeneralSettingsPageView"; @@ -12,7 +12,14 @@ const GeneralSettingsPage: FC = () => { const { deploymentValues } = useDeploySettings(); const deploymentDAUsQuery = useQuery(deploymentDAUs()); const entitlementsQuery = useQuery(entitlements()); - const experimentsQuery = useQuery(availableExperiments()); + const enabledExperimentsQuery = useQuery(experiments()); + const safeExperimentsQuery = useQuery(availableExperiments()); + + const safeExperiments = safeExperimentsQuery.data?.safe ?? []; + const invalidExperiments = + enabledExperimentsQuery.data?.filter((exp) => { + return !safeExperiments.includes(exp); + }) ?? []; return ( <> @@ -24,7 +31,8 @@ const GeneralSettingsPage: FC = () => { deploymentDAUs={deploymentDAUsQuery.data} deploymentDAUsError={deploymentDAUsQuery.error} entitlements={entitlementsQuery.data} - safeExperiments={experimentsQuery.data?.safe ?? []} + invalidExperiments={invalidExperiments} + safeExperiments={safeExperiments} /> ); diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx index c945ef9381..a04270b9e3 100644 --- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx @@ -40,6 +40,7 @@ const meta: Meta = { }, ], deploymentDAUs: MockDeploymentDAUResponse, + invalidExperiments: [], safeExperiments: [], }, }; @@ -102,6 +103,43 @@ export const allExperimentsEnabled: Story = { hidden: false, }, ], - safeExperiments: [], + safeExperiments: ["shared-ports"], + invalidExperiments: ["invalid"], + }, +}; + +export const invalidExperimentsEnabled: Story = { + args: { + deploymentOptions: [ + { + name: "Access URL", + description: + "The URL that users will use to access the Coder deployment.", + flag: "access-url", + flag_shorthand: "", + value: "https://dev.coder.com", + hidden: false, + }, + { + name: "Wildcard Access URL", + description: + 'Specifies the wildcard hostname to use for workspace applications in the form "*.example.com".', + flag: "wildcard-access-url", + flag_shorthand: "", + value: "*--apps.dev.coder.com", + hidden: false, + }, + { + name: "Experiments", + description: + "Enable one or more experiments. These are not ready for production. Separate multiple experiments with commas, or enter '*' to opt-in to all available experiments.", + flag: "experiments", + value: ["invalid", "*"], + flag_shorthand: "", + hidden: false, + }, + ], + safeExperiments: ["shared-ports"], + invalidExperiments: ["invalid"], }, }; diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx index 612a4f280a..fbbe4127c9 100644 --- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx @@ -1,3 +1,4 @@ +import AlertTitle from "@mui/material/AlertTitle"; import type { FC } from "react"; import type { SerpentOption, @@ -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,7 +24,8 @@ export type GeneralSettingsPageViewProps = { deploymentDAUs?: DAUsResponse; deploymentDAUsError: unknown; entitlements: Entitlements | undefined; - safeExperiments: Experiments | undefined; + readonly invalidExperiments: Experiments | string[]; + readonly safeExperiments: Experiments | string[]; }; export const GeneralSettingsPageView: FC = ({ @@ -31,6 +34,7 @@ export const GeneralSettingsPageView: FC = ({ deploymentDAUsError, entitlements, safeExperiments, + invalidExperiments, }) => { return ( <> @@ -58,6 +62,28 @@ export const GeneralSettingsPageView: FC = ({ )} + {invalidExperiments.length > 0 && ( + + Invalid experiments in use: +
    + {invalidExperiments.map((it) => ( +
  • + 
    {it}
    +
    • + ))} +
+ It is recommended that you remove these experiments from your + configuration as they have no effect. See{" "} + + the documentation + {" "} + for more details. + + )} = (props) => { }} > {isEnabled && ( - ({ width: 16, height: 16, - color: theme.palette.success.light, + color: theme.palette.mode, margin: "0 8px", })} /> diff --git a/site/src/pages/DeploySettingsPage/optionValue.ts b/site/src/pages/DeploySettingsPage/optionValue.ts index 75435a894c..596a3333eb 100644 --- a/site/src/pages/DeploySettingsPage/optionValue.ts +++ b/site/src/pages/DeploySettingsPage/optionValue.ts @@ -38,13 +38,13 @@ export function optionValue( ([key, value]) => `"${key}"->"${value}"`, ); case "Experiments": { - const experimentMap: Record | undefined = - additionalValues?.reduce( - (acc, v) => { - return { ...acc, [v]: option.value.includes("*") ? true : false }; - }, - {} as Record, - ); + const experimentMap = additionalValues?.reduce>( + (acc, v) => { + acc[v] = option.value.includes("*"); + return acc; + }, + {}, + ); if (!experimentMap) { break;