From 4389001391eb2cc5f0c5fe35ca83bd75d2becdf5 Mon Sep 17 00:00:00 2001 From: "blink-so[bot]" <211532188+blink-so[bot]@users.noreply.github.com> Date: Mon, 16 Jun 2025 14:38:10 +0000 Subject: [PATCH 1/2] feat: implement conditional build parameters flow - Add ConditionalBuildParametersPopover component that checks template_use_classic_parameter_flow - When classic flow is false, show UpdateBuildParametersDialogExperimental for ephemeral parameters - Direct users to workspace settings page for ephemeral parameter configuration - Update WorkspaceParametersPageViewExperimental to combine standard and ephemeral parameters - Add visual indicators for ephemeral parameters in unified parameter display - Update all workspace action buttons to use conditional logic Co-authored-by: jaaydenh <1858163+jaaydenh@users.noreply.github.com> --- ...pdateBuildParametersDialogExperimental.tsx | 7 +- .../WorkspaceActions/Buttons.tsx | 6 +- .../ConditionalBuildParametersPopover.tsx | 80 +++++++++++++++++++ .../WorkspaceActions/DebugButton.tsx | 4 +- .../WorkspaceActions/RetryButton.tsx | 4 +- ...orkspaceParametersPageViewExperimental.tsx | 59 ++++---------- 6 files changed, 107 insertions(+), 53 deletions(-) create mode 100644 site/src/pages/WorkspacePage/WorkspaceActions/ConditionalBuildParametersPopover.tsx 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} - & { @@ -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} /> - ); - })} -
+
+ ); + })}
)} From 5b3ce9a0a21e09c60d231976f90037c70544d3cd Mon Sep 17 00:00:00 2001 From: "blink-so[bot]" <211532188+blink-so[bot]@users.noreply.github.com> Date: Mon, 16 Jun 2025 14:47:05 +0000 Subject: [PATCH 2/2] fix: resolve formatting issues - Remove trailing whitespace from ConditionalBuildParametersPopover.tsx - Fix import order in RetryButton.tsx to match linting requirements Co-authored-by: jaaydenh <1858163+jaaydenh@users.noreply.github.com> --- .../WorkspaceActions/ConditionalBuildParametersPopover.tsx | 4 ++-- site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/ConditionalBuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/ConditionalBuildParametersPopover.tsx index 86d0d556ab3ec..58dfbd3afb0c3 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/ConditionalBuildParametersPopover.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/ConditionalBuildParametersPopover.tsx @@ -23,7 +23,7 @@ export const ConditionalBuildParametersPopover: FC { const [isDialogOpen, setIsDialogOpen] = useState(false); - + const { data: parameters } = useQuery({ queryKey: ["workspace", workspace.id, "parameters"], queryFn: () => API.getWorkspaceParameters(workspace), @@ -66,7 +66,7 @@ export const ConditionalBuildParametersPopover: FC {label} - + setIsDialogOpen(false)} diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx index c9b454d7461d5..3031852f825f1 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx @@ -2,8 +2,8 @@ import type { Workspace } from "api/typesGenerated"; import { TopbarButton } from "components/FullPageLayout/Topbar"; import { RotateCcwIcon } from "lucide-react"; import type { FC } from "react"; -import { ConditionalBuildParametersPopover } from "./ConditionalBuildParametersPopover"; import type { ActionButtonProps } from "./Buttons"; +import { ConditionalBuildParametersPopover } from "./ConditionalBuildParametersPopover"; type RetryButtonProps = Omit & { enableBuildParameters: boolean;