8000 feat: create experimental template embed page for dynamic params by jaaydenh · Pull Request #17999 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: create experimental template embed page for dynamic params #17999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jun 23, 2025
Merged

feat: create experimental template embed page for dynamic params #17999

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
78429ba
feat: update template embed page for dynamic params
jaaydenh Apr 27, 2025
ae7cf11
fix: fix types
jaaydenh Apr 27, 2025
e63b45c
fix: cleanup
jaaydenh May 22, 2025
793aaa2
chore: cleanup
jaaydenh May 22, 2025
a02e6df
fix: fix commits
jaaydenh May 22, 2025
62b54d5
chore: cleanup
jaaydenh May 22, 2025
1caf277
fix: remove usages of experimentalFormContext
jaaydenh Jun 20, 2025
a0505bb
feat: add shadcn skeleton
jaaydenh Jun 20, 2025
d9af4b2
fix: get things working correctly
jaaydenh Jun 20, 2025
e9671b9
feat: add a separator component
jaaydenh Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: remove usages of experimentalFormContext
  • Loading branch information
@jaaydenh
jaaydenh committed Jun 23, 2025
commit 1caf277e4dac5c3ce43d3d41fce729105ec9fc01
87 changes: 15 additions & 72 deletions site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedExperimentRouter.tsx
View file
Open in desktop
8000
Original file line number Diff line number Diff line change
@@ -1,92 +1,35 @@
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 { ExperimentalFormContext } from "pages/CreateWorkspacePage/ExperimentalFormContext";
import type { FC } from "react";
import { useQuery } from "react-query";
import { useParams } from "react-router-dom";
import TemplateEmbedPage from "./TemplateEmbedPage";
import TemplateEmbedPageExperimental from "./TemplateEmbedPageExperimental";

const TemplateEmbedExperimentRouter: 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: () => {
const templateId = templateQuery.data.id;
const localStorageKey = optOutKey(templateId);
const storedOptOutString = localStorage.getItem(localStorageKey);

let optOutResult: boolean;

if (storedOptOutString !== null) {
optOutResult = storedOptOutString === "true";
} else {
optOutResult = Boolean(
templateQuery.data.use_classic_parameter_flow,
);
}

return {
templateId: templateId,
optedOut: optOutResult,
};
},
}
: { enabled: false },
templateByName(organizationName, templateName),
);

if (dynamicParametersEnabled) {
if (optOutQuery.isLoading) {
return <Loader />;
}
if (!optOutQuery.data) {
return <ErrorAlert error={optOutQuery.error} />;
}

const toggleOptedOut = () => {
const key = optOutKey(optOutQuery.data.templateId);
const storedValue = localStorage.getItem(key);

const current = storedValue
? storedValue === "true"
: Boolean(templateQuery.data?.use_classic_parameter_flow);

localStorage.setItem(key, (!current).toString());
optOutQuery.refetch();
};
return (
<ExperimentalFormContext.Provider value={{ toggleOptedOut }}>
{optOutQuery.data.optedOut ? (
<TemplateEmbedPage />
) : (
<TemplateEmbedPageExperimental />
)}
</ExperimentalFormContext.Provider>
);
if (templateQuery.isError) {
return <ErrorAlert error={templateQuery.error} />;
}
if (!templateQuery.data) {
return <Loader />;
}

return <TemplateEmbedPage />;
return (
<>
{templateQuery.data?.use_classic_parameter_flow ? (
<TemplateEmbedPage />
) : (
<TemplateEmbedPageExperimental />
)}
</>
);
};

export default TemplateEmbedExperimentRouter;

const optOutKey = (id: string) => `parameters.${id}.optOut`;
16 changes: 1 addition & 15 deletions site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,18 @@ import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import { API } from "api/api";
import type { Template, TemplateVersionParameter } from "api/typesGenerated";
import { Button as ShadcnButton } from "components/Button/Button";
import { FormSection, VerticalForm } from "components/Form/Form";
import { Loader } from "components/Loader/Loader";
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
import { useClipboard } from "hooks/useClipboard";
import { CheckIcon, CopyIcon } from "lucide-react";
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
import { type FC, useContext, useEffect, useState } from "react";
import { type FC, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import { useQuery } from "react-query";
import { pageTitle } from "utils/page";
import { getInitialRichParameterValues } from "utils/richParameters";
import { paramsUsedToCreateWorkspace } from "utils/workspace";
import { ExperimentalFormContext } from "../../CreateWorkspacePage/ExperimentalFormContext";

type ButtonValues = Record<string, string>;

Expand Down Expand Up @@ -66,7 +64,6 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
template,
templateParameters,
}) => {
const experimentalFormContext = useContext(ExperimentalFormContext);
const [buttonValues, setButtonValues] = useState<ButtonValues | undefined>();
const clipboard = useClipboard({
textToCopy: getClipboardCopyContent(
Expand Down Expand Up @@ -102,17 +99,6 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
) : (
<div className="flex items-start gap-12">
<div className="max-w-3xl">
{experimentalFormContext && (
<div className="mb-4">
<ShadcnButton
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
Try out the new workspace creation flow ✨
</ShadcnButton>
</div>
)}
<VerticalForm>
<FormSection
title="Creation mode"
Expand Down
14 changes: 0 additions & 14 deletions site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,10 @@ import {
Diagnostics,
DynamicParameter,
} from "modules/workspaces/DynamicParameter/DynamicParameter";
import { ExperimentalFormContext } from "pages/CreateWorkspacePage/ExperimentalFormContext";
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
import {
type FC,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
Expand Down Expand Up @@ -141,7 +139,6 @@ const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
error,
sendMessage,
}) => {
const experimentalFormContext = useContext(ExperimentalFormContext);
const [buttonValues, setButtonValues] = useState<ButtonValues | undefined>();
const [localParameters, setLocalParameters] = useState<
Record<string, string>
Expand Down Expand Up @@ -205,17 +202,6 @@ const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
<>
<div className="flex items-start gap-12">
<div className="flex flex-col gap-5 max-w-screen-md">
{experimentalFormContext && (
<div>
<Button
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
Go back to the classic template embed flow
</Button>
</div>
)}
{Boolean(error) && <ErrorAlert error={error} />}
{diagnostics.length > 0 && <Diagnostics diagnostics={diagnostics} />}
<div className="flex flex-col">
Expand Down
0