pFad - Phonifier reborn

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx index 36cd921e28000..377424ca2f9a5 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx @@ -1,18 +1,76 @@ +import { templateByName } from "api/queries/templates"; +import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Loader } from "components/Loader/Loader"; import { useDashboard } from "modules/dashboard/useDashboard"; -import type { FC } from "react"; +import { type FC, createContext } from "react"; +import { useQuery } from "react-query"; +import { useParams } from "react-router-dom"; import CreateWorkspacePage from "./CreateWorkspacePage"; import CreateWorkspacePageExperimental from "./CreateWorkspacePageExperimental"; const CreateWorkspaceExperimentRouter: FC = () => { const { experiments } = useDashboard(); - const dynamicParametersEnabled = experiments.includes("dynamic-parameters"); + const { organization: organizationName = "default", template: templateName } = + useParams() as { organization?: string; template: string }; + const templateQuery = useQuery( + dynamicParametersEnabled + ? templateByName(organizationName, templateName) + : { enabled: false }, + ); + + const optOutQuery = useQuery( + templateQuery.data + ? { + queryKey: [ + organizationName, + "template", + templateQuery.data.id, + "optOut", + ], + queryFn: () => ({ + templateId: templateQuery.data.id, + optedOut: + localStorage.getItem(optOutKey(templateQuery.data.id)) === "true", + }), + } + : { enabled: false }, + ); + if (dynamicParametersEnabled) { - return ; + if (optOutQuery.isLoading) { + return ; + } + if (!optOutQuery.data) { + return ; + } + + const toggleOptedOut = () => { + const key = optOutKey(optOutQuery.data.templateId); + const current = localStorage.getItem(key) === "true"; + localStorage.setItem(key, (!current).toString()); + optOutQuery.refetch(); + }; + + return ( + + {optOutQuery.data.optedOut ? ( + + ) : ( + + )} + + ); } return ; }; export default CreateWorkspaceExperimentRouter; + +const optOutKey = (id: string) => `parameters.${id}.optOut`; + +export const ExperimentalFormContext = createContext< + { toggleOptedOut: () => void } | undefined +>(undefined); diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx index 5711517855ebd..0c513a1733ec9 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx @@ -69,10 +69,11 @@ const CreateWorkspacePageExperimental: FC = () => { const templateQuery = useQuery( templateByName(organizationName, templateName), ); - const templateVersionPresetsQuery = useQuery({ - ...templateVersionPresets(templateQuery.data?.active_version_id ?? ""), - enabled: templateQuery.data !== undefined, - }); + const templateVersionPresetsQuery = useQuery( + templateQuery.data + ? templateVersionPresets(templateQuery.data.active_version_id) + : { enabled: false }, + ); const permissionsQuery = useQuery( templateQuery.data ? checkAuthorization({ diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 66d0033ea6a74..8f284f7338688 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -1,5 +1,4 @@ import type { Interpolation, Theme } from "@emotion/react"; -import FormControlLabel from "@mui/material/FormControlLabel"; import FormHelperText from "@mui/material/FormHelperText"; import TextField from "@mui/material/TextField"; import type * as TypesGen from "api/typesGenerated"; @@ -29,7 +28,14 @@ import { Switch } from "components/Switch/Switch"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; import { type FormikContextType, useFormik } from "formik"; import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName"; -import { type FC, useCallback, useEffect, useMemo, useState } from "react"; +import { + type FC, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from "react"; import { getFormHelpers, nameValidator, @@ -41,12 +47,14 @@ import { useValidationSchemaForRichParameters, } from "utils/richParameters"; import * as Yup from "yup"; +import { ExperimentalFormContext } from "./CreateWorkspaceExperimentRouter"; import type { CreateWorkspaceMode, ExternalAuthPollingState, } from "./CreateWorkspacePage"; import { ExternalAuthButton } from "./ExternalAuthButton"; import type { CreateWorkspacePermissions } from "./permissions"; + export const Language = { duplicationWarning: "Duplicating a workspace only copies its parameters. No state from the old workspace is copied over.", @@ -98,6 +106,7 @@ export const CreateWorkspacePageView: FC = ({ onSubmit, onCancel, }) => { + const experimentalFormContext = useContext(ExperimentalFormContext); const [owner, setOwner] = useState(defaultOwner); const [suggestedName, setSuggestedName] = useState(() => generateWorkspaceName(), @@ -211,9 +220,20 @@ export const CreateWorkspacePageView: FC = ({ - Cancel - + <> + {experimentalFormContext && ( + + )} + + } > diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx index 0b33c27d57434..342eea1a1b396 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx @@ -22,10 +22,18 @@ import { useValidationSchemaForDynamicParameters, } from "modules/workspaces/DynamicParameter/DynamicParameter"; import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName"; -import { type FC, useCallback, useEffect, useId, useState } from "react"; +import { + type FC, + useCallback, + useContext, + useEffect, + useId, + useState, +} from "react"; import { getFormHelpers, nameValidator } from "utils/formUtils"; import type { AutofillBuildParameter } from "utils/richParameters"; import * as Yup from "yup"; +import { ExperimentalFormContext } from "./CreateWorkspaceExperimentRouter"; import type { CreateWorkspaceMode, ExternalAuthPollingState, @@ -89,6 +97,7 @@ export const CreateWorkspacePageViewExperimental: FC< owner, setOwner, }) => { + const experimentalFormContext = useContext(ExperimentalFormContext); const [suggestedName, setSuggestedName] = useState(() => generateWorkspaceName(), ); @@ -251,7 +260,7 @@ export const CreateWorkspacePageViewExperimental: FC<

New workspace {template.deprecated && Deprecated} + + {experimentalFormContext && ( + + )}