diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialogExperimental.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialogExperimental.tsx index 04bb92a5e79b2..bc21b289a082b 100644 --- a/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialogExperimental.tsx +++ b/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialogExperimental.tsx @@ -47,14 +47,13 @@ export const UpdateBuildParametersDialogExperimental: FC< This template has{" "} - {missedParameters.length} new parameter + {missedParameters.length} ephemeral parameter {missedParameters.length === 1 ? "" : "s"} {" "} - that must be configured to complete the update. + that need to be configured before continuing. Ephemeral parameters may depend on values of non-ephemeral parameters. - Would you like to go to the workspace parameters page to review and - update these parameters before continuing? + Please go to the workspace settings page to provide values for these ephemeral parameters before continuing. diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx index b02e4473eb57f..3076c5a1d4003 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx @@ -12,7 +12,7 @@ import { StarOffIcon, } from "lucide-react"; import type { FC } from "react"; -import { BuildParametersPopover } from "./BuildParametersPopover"; +import { ConditionalBuildParametersPopover } from "./ConditionalBuildParametersPopover"; export interface ActionButtonProps { loading?: boolean; @@ -74,7 +74,7 @@ export const StartButton: FC = ({ return (
{mainButton} - = ({ {loading ? <>Restarting… : <>Restart…} - void; + label: string; +} + +export const ConditionalBuildParametersPopover: FC = ({ + workspace, + disabled, + label, + onSubmit, +}) => { + const [isDialogOpen, setIsDialogOpen] = useState(false); + + const { data: parameters } = useQuery({ + queryKey: ["workspace", workspace.id, "parameters"], + queryFn: () => API.getWorkspaceParameters(workspace), + }); + + const ephemeralParameters = parameters + ? parameters.templateVersionRichParameters.filter((p) => p.ephemeral) + : []; + + // If using classic parameter flow, render the original BuildParametersPopover + if (workspace.template_use_classic_parameter_flow) { + return ( + + ); + } + + // For experimental flow, show dialog directing to workspace settings + const handleClick = () => { + if (ephemeralParameters.length > 0) { + setIsDialogOpen(true); + } else { + // If no ephemeral parameters, proceed with the action + onSubmit(); + } + }; + + return ( + <> + + + {label} + + + setIsDialogOpen(false)} + missedParameters={ephemeralParameters} + workspaceOwnerName={workspace.owner_name} + workspaceName={workspace.name} + templateVersionId={workspace.latest_build.template_version_id} + /> + + ); +}; \ No newline at end of file diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx index 864f5938975bd..e7b74c31489ca 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx @@ -2,7 +2,7 @@ import type { Workspace } from "api/typesGenerated"; import { TopbarButton } from "components/FullPageLayout/Topbar"; import { BugIcon } from "lucide-react"; import type { FC } from "react"; -import { BuildParametersPopover } from "./BuildParametersPopover"; +import { ConditionalBuildParametersPopover } from "./ConditionalBuildParametersPopover"; import type { ActionButtonProps } from "./Buttons"; type DebugButtonProps = Omit & { @@ -29,7 +29,7 @@ export const DebugButton: FC = ({ return (
{mainAction} - & { enableBuildParameters: boolean; @@ -29,7 +29,7 @@ export const RetryButton: FC = ({ return (
{mainAction} - - {standardParameters.length > 0 && ( + {(standardParameters.length > 0 || ephemeralParameters.length > 0) && (

Parameters

These are the settings used by your template. Immutable parameters cannot be modified once the workspace is created. + Ephemeral parameters only apply for a single workspace start.

- {standardParameters.map((parameter, index) => { + {/* Render all parameters together, with ephemeral parameters marked */} + {parameters.map((parameter, index) => { const currentParameterValueIndex = form.values.rich_parameter_values?.findIndex( (p) => p.name === parameter.name, @@ -241,57 +243,30 @@ export const WorkspaceParametersPageViewExperimental: FC< const isDisabled = disabled || parameter.styling?.disabled || - !parameter.mutable || + (!parameter.ephemeral && !parameter.mutable) || isSubmitting; return ( - - handleChange(parameter, parameterField, value) - } - autofill={false} - disabled={isDisabled} - value={formValue} - /> - ); - })} -
- )} - - {ephemeralParameters.length > 0 && ( -
-
-

Ephemeral Parameters

-

- These parameters only apply for a single workspace start -

-
- -
- {ephemeralParameters.map((parameter, index) => { - const actualIndex = standardParameters.length + index; - const parameterField = `rich_parameter_values.${actualIndex}`; - const isDisabled = - disabled || parameter.styling?.disabled || isSubmitting; - - return ( +
+ {parameter.ephemeral && ( +
+ + Ephemeral + +
+ )} handleChange(parameter, parameterField, value) } autofill={false} disabled={isDisabled} - value={ - form.values?.rich_parameter_values?.[index]?.value || "" - } + value={formValue} /> - ); - })} -
+
+ ); + })}
)}