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

jaaydenh · web-flow · commit 6877142a0e2e · 2025-06-23T15:47:30.000-04:00
resolves coder/preview#58
diff --git a/site/package.json b/site/package.json
@@ -64,6 +64,7 @@
 		"@radix-ui/react-radio-group": "1.2.3",
 		"@radix-ui/react-scroll-area": "1.2.3",
 		"@radix-ui/react-select": "2.1.4",
+		"@radix-ui/react-separator": "1.1.7",
 		"@radix-ui/react-slider": "1.2.2",
 		"@radix-ui/react-slot": "1.1.1",
 		"@radix-ui/react-switch": "1.1.1",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/Separator/Separator.tsx b/site/src/components/Separator/Separator.tsx
@@ -0,0 +1,30 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+/**
+ * Copied from shadc/ui on 06/20/2025
+ * @see {@link https://ui.shadcn.com/docs/components/separator}
+ */
+import type * as React from "react";
+
+import { cn } from "utils/cn";
+
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };
diff --git a/site/src/components/Skeleton/Skeleton.tsx b/site/src/components/Skeleton/Skeleton.tsx
@@ -0,0 +1,17 @@
+/**
+ * Copied from shadc/ui on 06/20/2025
+ * @see {@link https://ui.shadcn.com/docs/components/skeleton}
+ */
+import { cn } from "utils/cn";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn("bg-surface-tertiary animate-pulse rounded-md", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -52,7 +52,7 @@ interface DynamicParameterProps {
 	onChange: (value: string) => void;
 	disabled?: boolean;
 	isPreset?: boolean;
-	autofill: boolean;
+	autofill?: boolean;
 }
 
 export const DynamicParameter: FC<DynamicParameterProps> = ({
@@ -873,7 +873,6 @@ interface DiagnosticsProps {
 	diagnostics: PreviewParameter["diagnostics"];
 }
 
-// Displays a diagnostic with a border, icon and background color
 export const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
 	return (
 		<div className="flex flex-col gap-4">
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -29,8 +29,8 @@ import { type FormikContextType, useFormik } from "formik";
 import type { ExternalAuthPollingState } from "hooks/useExternalAuth";
 import { ArrowLeft, CircleHelp } from "lucide-react";
 import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters";
-import { Diagnostics } from "modules/workspaces/DynamicParameter/DynamicParameter";
 import {
+	Diagnostics,
 	DynamicParameter,
 	getInitialParameterValues,
 	useValidationSchemaForDynamicParameters,
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedExperimentRouter.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedExperimentRouter.tsx
@@ -0,0 +1,35 @@
+import { templateByName } from "api/queries/templates";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Loader } from "components/Loader/Loader";
+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 { organization: organizationName = "default", template: templateName } =
+		useParams() as { organization?: string; template: string };
+	const templateQuery = useQuery(
+		templateByName(organizationName, templateName),
+	);
+
+	if (templateQuery.isError) {
+		return <ErrorAlert error={templateQuery.error} />;
+	}
+	if (!templateQuery.data) {
+		return <Loader />;
+	}
+
+	return (
+		<>
+			{templateQuery.data?.use_classic_parameter_flow ? (
+				<TemplateEmbedPage />
+			) : (
+				<TemplateEmbedPageExperimental />
+			)}
+		</>
+	);
+};
+
+export default TemplateEmbedExperimentRouter;
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -97,8 +97,8 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 			{!buttonValues || !templateParameters ? (
 				<Loader />
 			) : (
-				<div css={{ display: "flex", alignItems: "flex-start", gap: 48 }}>
-					<div css={{ flex: 1, maxWidth: 400 }}>
+				<div className="flex items-start gap-12">
+					<div className="max-w-3xl">
 						<VerticalForm>
 							<FormSection
 								title="Creation mode"
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx
diff --git a/site/src/router.tsx b/site/src/router.tsx

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ interface DynamicParameterProps {`
`52`	`52`	`onChange: (value: string) => void;`
`53`	`53`	`disabled?: boolean;`
`54`	`54`	`isPreset?: boolean;`
`55`		`- autofill: boolean;`
	`55`	`+ autofill?: boolean;`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`export const DynamicParameter: FC<DynamicParameterProps> = ({`
`@@ -873,7 +873,6 @@ interface DiagnosticsProps {`
`873`	`873`	`diagnostics: PreviewParameter["diagnostics"];`
`874`	`874`	`}`
`875`	`875`
`876`		`-// Displays a diagnostic with a border, icon and background color`
`877`	`876`	`export const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {`
`878`	`877`	`return (`
`879`	`878`	`<div className="flex flex-col gap-4">`