Apr 17, 2024 · Apr 15, 2024 · Apr 15, 2024 · Apr 15, 2024 · Apr 15, 2024 · Apr 15, 2024
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
 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";
  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 (
    <>
        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
      },
    ],
    deploymentDAUs: MockDeploymentDAUResponse,
    invalidExperiments: [],
    safeExperiments: [],
  },
 };
        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
 import AlertTitle from "@mui/material/AlertTitle";
 import type { FC } from "react";
 import type {
  SerpentOption,
 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";
  deploymentDAUs?: DAUsResponse;
  deploymentDAUsError: unknown;
  entitlements: Entitlements | undefined;
  safeExperiments: Experiments | undefined;
  readonly invalidExperiments: Experiments | string[];
  readonly safeExperiments: Experiments | string[];
 };

 export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
  deploymentDAUsError,
  entitlements,
  safeExperiments,
  invalidExperiments,
 }) => {
  return (
    <>
            </ChartSection>
          </div>
        )}
        {invalidExperiments.length > 0 && (
          <Alert severity="warning">
            <AlertTitle>Invalid experiments in use:</AlertTitle>
            <ul>
              {invalidExperiments.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. See{" "}
            <a
              href="https://coder.com/docs/v2/latest/cli/server#--experiments"
              target="_blank"
              rel="noreferrer"
            >
              the documentation
            </a>{" "}
            for more details.
          </Alert>
        )}
        <OptionsTable
          options={useDeploymentOptions(
            deploymentOptions,
diff --git a/site/src/pages/DeploySettingsPage/Option.tsx b/site/src/pages/DeploySettingsPage/Option.tsx
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 importCheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 importBuildCircleOutlinedIcon from "@mui/icons-material/BuildCircleOutlined";
 import type { FC, HTMLAttributes, PropsWithChildren } from "react";
 import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
                }}
              >
                {isEnabled && (
                  <CheckCircleOutlined
                  <BuildCircleOutlinedIcon
                    css={(theme) => ({
                      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
        ([key, value]) => `"${key}"->"${value}"`,
      );
    case "Experiments": {
      const experimentMap:Record<string, boolean> | undefined =
 additionalValues?.reduce(
 (acc, v) => {
 return{ ...acc, [v]: option.value.includes("*") ? true : false };
 },
  {} as Record<string, boolean>,
 );
      const experimentMap = additionalValues?.reduce<Record<string, boolean>>(
 (acc, v) => {
          acc[v] = option.value.includes("*");
          return acc;
        },
 {},
      );

      if (!experimentMap) {
        break;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";
Expand All		@@ -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 (
		<>
Expand All		@@ -24,7 +31,8 @@ const GeneralSettingsPage: FC = () => {
		deploymentDAUs={deploymentDAUsQuery.data}
		deploymentDAUsError={deploymentDAUsQuery.error}
		entitlements={entitlementsQuery.data}
		safeExperiments={experimentsQuery.data?.safe ?? []}
		invalidExperiments={invalidExperiments}
		safeExperiments={safeExperiments}
		/>
		</>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,6 +40,7 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
		},
		],
		deploymentDAUs: MockDeploymentDAUResponse,
		invalidExperiments: [],
		safeExperiments: [],
		},
		};
Expand DownExpand Up		@@ -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"],
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@
		import AlertTitle from "@mui/material/AlertTitle";
		import type { FC } from "react";
		import type {
		SerpentOption,
Expand All		@@ -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";
Expand All		@@ -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<GeneralSettingsPageViewProps> = ({
Expand All		@@ -31,6 +34,7 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
		deploymentDAUsError,
		entitlements,
		safeExperiments,
		invalidExperiments,
		}) => {
		return (
		<>
Expand DownExpand Up		@@ -58,6 +62,28 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
		</ChartSection>
		</div>
		)}
		{invalidExperiments.length > 0 && (
		<Alert severity="warning">
		<AlertTitle>Invalid experiments in use:</AlertTitle>
		<ul>
		{invalidExperiments.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. See{" "}
		<a
		href="https://coder.com/docs/v2/latest/cli/server#--experiments"
		target="_blank"
		rel="noreferrer"
		>
		the documentation
		</a>{" "}
		for more details.
		</Alert>
		)}
		<OptionsTable
		options={useDeploymentOptions(
		deploymentOptions,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
		importCheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
		importBuildCircleOutlinedIcon from "@mui/icons-material/BuildCircleOutlined";
		import type { FC, HTMLAttributes, PropsWithChildren } from "react";
		import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
		import { MONOSPACE_FONT_FAMILY } from "theme/constants";
Expand DownExpand Up		@@ -91,11 +91,11 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
		}}
		>
		{isEnabled && (
		<CheckCircleOutlined
		<BuildCircleOutlinedIcon
		css={(theme) => ({
		width: 16,
		height: 16,
		color: theme.palette.success.light,
		color: theme.palette.mode,
		margin: "0 8px",
		})}
		/>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -38,13 +38,13 @@ export function optionValue(
		([key, value]) => `"${key}"->"${value}"`,
		);
		case "Experiments": {
		const experimentMap:Record<string, boolean> \| undefined =
		additionalValues?.reduce(
		(acc, v) => {
		return{ ...acc, [v]: option.value.includes("*") ? true : false };
		},
		{} as Record<string, boolean>,
		);
		const experimentMap = additionalValues?.reduce<Record<string, boolean>>(
		(acc, v) => {
		acc[v] = option.value.includes("*");
		return acc;
		},
		{},
		);

		if (!experimentMap) {
		break;
Expand Down