From 99f7a2d26128ecfb15685f0da88fc0a1c4ac4a61 Mon Sep 17 00:00:00 2001 From: "blink-so[bot]" <211532188+blink-so[bot]@users.noreply.github.com> Date: Tue, 17 Jun 2025 16:08:07 +0000 Subject: [PATCH 1/7] feat: add ephemeral parameter dialog for workspace start/restart - Add EphemeralParametersDialog component to inform users about ephemeral parameters - Modify WorkspaceReadyPage to check for ephemeral parameters before start/restart - Update BuildParametersPopover to show ephemeral parameter info for non-classic flow - Update WorkspaceParametersPageExperimental button text based on template version - Only trigger for templates with use_classic_parameter_flow = false Co-authored-by: jaaydenh <1858163+jaaydenh@users.noreply.github.com> --- .../EphemeralParametersDialog.tsx | 61 ++++++++++++++ .../EphemeralParametersDialog/index.ts | 1 + .../BuildParametersPopover.tsx | 49 +++++++++++- .../WorkspacePage/WorkspaceReadyPage.tsx | 79 ++++++++++++++++++- ...orkspaceParametersPageViewExperimental.tsx | 4 +- 5 files changed, 186 insertions(+), 8 deletions(-) create mode 100644 site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx create mode 100644 site/src/components/EphemeralParametersDialog/index.ts diff --git a/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx b/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx new file mode 100644 index 0000000000000..c5c79dc20a11d --- /dev/null +++ b/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx @@ -0,0 +1,61 @@ +import type { TemplateVersionParameter } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; +import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; +import { Link } from "components/Link/Link"; +import type { FC } from "react"; + +interface EphemeralParametersDialogProps { + open: boolean; + onClose: () => void; + onContinue: () => void; + ephemeralParameters: TemplateVersionParameter[]; + workspaceOwner: string; + workspaceName: string; +} + +export const EphemeralParametersDialog: FC = ({ + open, + onClose, + onContinue, + ephemeralParameters, + workspaceOwner, + workspaceName, +}) => { + const parametersPageUrl = `/@${workspaceOwner}/${workspaceName}/settings/parameters`; + + const description = ( + <> +

This workspace template has ephemeral parameters that will be reset to their default values:

+
+ {ephemeralParameters.map((param) => ( +
+ {param.display_name || param.name} + {param.description && ( +
+ {param.description} +
+ )} +
+ ))} +
+

You can continue without setting values for these parameters, or go to the workspace parameters page to configure them.

+
+ +
+ + ); + + return ( + + ); +}; \ No newline at end of file diff --git a/site/src/components/EphemeralParametersDialog/index.ts b/site/src/components/EphemeralParametersDialog/index.ts new file mode 100644 index 0000000000000..cb7d40ede3b1f --- /dev/null +++ b/site/src/components/EphemeralParametersDialog/index.ts @@ -0,0 +1 @@ +export { EphemeralParametersDialog } from "./EphemeralParametersDialog"; \ No newline at end of file diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx index d594351d8dcae..3baa384496b94 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx @@ -1,5 +1,5 @@ import { useTheme } from "@emotion/react"; -import Button from "@mui/material/Button"; +import { Button } from "components/Button/Button"; import visuallyHidden from "@mui/utils/visuallyHidden"; import { API } from "api/api"; import type { @@ -28,6 +28,7 @@ import { ChevronDownIcon } from "lucide-react"; import type { FC } from "react"; import { useQuery } from "react-query"; import { docs } from "utils/docs"; +import { Link } from "components/Link/Link"; import { getFormHelpers } from "utils/formUtils"; import { type AutofillBuildParameter, @@ -72,6 +73,7 @@ export const BuildParametersPopover: FC = ({ css={{ ".MuiPaper-root": { width: 304 } }} > = ({ }; interface BuildParametersPopoverContentProps { + workspace: Workspace; ephemeralParameters?: TemplateVersionParameter[]; buildParameters?: WorkspaceBuildParameter[]; onSubmit: (buildParameters: WorkspaceBuildParameter[]) => void; } const BuildParametersPopoverContent: FC = ({ + workspace, ephemeralParameters, buildParameters, onSubmit, @@ -95,6 +99,47 @@ const BuildParametersPopoverContent: FC = ({ const theme = useTheme(); const popover = usePopover(); + // For templates that don't use classic parameter flow, show different UI + if (!workspace.template_use_classic_parameter_flow && ephemeralParameters && ephemeralParameters.length > 0) { + const parametersPageUrl = `/@${workspace.owner_name}/${workspace.name}/settings/parameters`; + + return ( +
+ Ephemeral Parameters + + This template has ephemeral parameters that must be configured on the workspace parameters page: + + +
+ {ephemeralParameters.map((param) => ( +
+ {param.display_name || param.name} + {param.description && ( +
+ {param.description} +
+ )} +
+ ))} +
+ + +
+ ); + } + return ( <> {buildParameters && ephemeralParameters ? ( @@ -206,8 +251,6 @@ const Form: FC = ({ From 7f56518ec61d472f5527f1506d2f619bd59e649a Mon Sep 17 00:00:00 2001 From: "blink-so[bot]" <211532188+blink-so[bot]@users.noreply.github.com> Date: Tue, 17 Jun 2025 16:13:37 +0000 Subject: [PATCH 2/7] fix: use asChild prop instead of as prop for Button components - Fix TypeScript errors in EphemeralParametersDialog and BuildParametersPopover - Use correct Button component pattern with asChild and Link Co-authored-by: jaaydenh <1858163+jaaydenh@users.noreply.github.com> --- .../EphemeralParametersDialog/EphemeralParametersDialog.tsx | 4 ++-- .../WorkspaceActions/BuildParametersPopover.tsx | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx b/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx index c5c79dc20a11d..470c0c544dc4c 100644 --- a/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx +++ b/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx @@ -40,8 +40,8 @@ export const EphemeralParametersDialog: FC = ({

You can continue without setting values for these parameters, or go to the workspace parameters page to configure them.

-
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx index 3baa384496b94..d89a6f0dcb0e8 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx @@ -129,12 +129,11 @@ const BuildParametersPopoverContent: FC = ({ ); From abea8ecdb685b510011a001e05ca2e0c50ec6fd7 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Tue, 17 Jun 2025 21:37:30 +0000 Subject: [PATCH 3/7] fix: improvements to UX and flow --- site/src/components/Badge/Badge.tsx | 1 + .../EphemeralParametersDialog.tsx | 95 ++++++++++++------- .../EphemeralParametersDialog/index.ts | 2 +- .../DynamicParameter/DynamicParameter.tsx | 18 ++++ .../BuildParametersPopover.tsx | 61 ++++++------ .../WorkspacePage/WorkspaceReadyPage.tsx | 95 ++++++++++++------- ...orkspaceParametersPageViewExperimental.tsx | 46 +-------- 7 files changed, 176 insertions(+), 142 deletions(-) diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx index 3b2a5d5897eb3..12e831cd1e595 100644 --- a/site/src/components/Badge/Badge.tsx +++ b/site/src/components/Badge/Badge.tsx @@ -22,6 +22,7 @@ const badgeVariants = cva( "border border-solid border-border-warning bg-surface-orange text-content-warning shadow", destructive: "border border-solid border-border-destructive bg-surface-red text-highlight-red shadow", + green: "border border-solid border-surface-green bg-surface-green text-highlight-green shadow", }, size: { xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5", diff --git a/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx b/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx index 470c0c544dc4c..1651d8c8d038f 100644 --- a/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx +++ b/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx @@ -1,8 +1,15 @@ import type { TemplateVersionParameter } from "api/typesGenerated"; import { Button } from "components/Button/Button"; -import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; -import { Link } from "components/Link/Link"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "components/Dialog/Dialog"; import type { FC } from "react"; +import { useNavigate } from "react-router-dom"; interface EphemeralParametersDialogProps { open: boolean; @@ -11,6 +18,7 @@ interface EphemeralParametersDialogProps { ephemeralParameters: TemplateVersionParameter[]; workspaceOwner: string; workspaceName: string; + templateVersionId: string; } export const EphemeralParametersDialog: FC = ({ @@ -20,42 +28,57 @@ export const EphemeralParametersDialog: FC = ({ ephemeralParameters, workspaceOwner, workspaceName, + templateVersionId, }) => { - const parametersPageUrl = `/@${workspaceOwner}/${workspaceName}/settings/parameters`; + const navigate = useNavigate(); - const description = ( - <> -

This workspace template has ephemeral parameters that will be reset to their default values:

-
- {ephemeralParameters.map((param) => ( -
- {param.display_name || param.name} - {param.description && ( -
- {param.description} -
- )} -
- ))} -
-

You can continue without setting values for these parameters, or go to the workspace parameters page to configure them.

-
- -
- - ); + const handleGoToParameters = () => { + onClose(); + navigate( + `/@${workspaceOwner}/${workspaceName}/settings/parameters?templateVersionId=${templateVersionId}`, + ); + }; return ( - + !isOpen && onClose()}> + + + Ephemeral Parameters Detected + + This workspace template has{" "} + + {ephemeralParameters.length} + {" "} + ephemeral parameters that will be reset to their default values + + + {ephemeralParameters.map((param) => ( +
+

+ {param.display_name || param.name} +

+ {param.description && ( +

+ {param.description} +

+ )} +
+ ))} + + + Would you like to go to the workspace parameters page to review and + update these parameters before continuing? + + + + + + + + ); -}; \ No newline at end of file +}; diff --git a/site/src/components/EphemeralParametersDialog/index.ts b/site/src/components/EphemeralParametersDialog/index.ts index cb7d40ede3b1f..ebd42320613e0 100644 --- a/site/src/components/EphemeralParametersDialog/index.ts +++ b/site/src/components/EphemeralParametersDialog/index.ts @@ -1 +1 @@ -export { EphemeralParametersDialog } from "./EphemeralParametersDialog"; \ No newline at end of file +export { EphemeralParametersDialog } from "./EphemeralParametersDialog"; diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx index c3448ac7d7182..3c4aded6d2052 100644 --- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx +++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx @@ -40,6 +40,7 @@ import { LinkIcon, Settings, TriangleAlert, + Hourglass, } from "lucide-react"; import { type FC, useEffect, useId, useRef, useState } from "react"; import type { AutofillBuildParameter } from "utils/richParameters"; @@ -162,6 +163,23 @@ const ParameterLabel: FC = ({ )} + {parameter.ephemeral && ( + + + + + + + Ephemeral + + + + + This parameter only applies for a single workspace start + + + + )} {isPreset && ( diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx index d89a6f0dcb0e8..a0ff0e6c56703 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx @@ -1,5 +1,4 @@ import { useTheme } from "@emotion/react"; -import { Button } from "components/Button/Button"; import visuallyHidden from "@mui/utils/visuallyHidden"; import { API } from "api/api"; import type { @@ -7,6 +6,7 @@ import type { Workspace, WorkspaceBuildParameter, } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { FormFields } from "components/Form/Form"; import { TopbarButton } from "components/FullPageLayout/Topbar"; import { @@ -27,8 +27,8 @@ import { useFormik } from "formik"; import { ChevronDownIcon } from "lucide-react"; import type { FC } from "react"; import { useQuery } from "react-query"; +import { useNavigate } from "react-router-dom"; import { docs } from "utils/docs"; -import { Link } from "components/Link/Link"; import { getFormHelpers } from "utils/formUtils"; import { type AutofillBuildParameter, @@ -98,42 +98,47 @@ const BuildParametersPopoverContent: FC = ({ }) => { const theme = useTheme(); const popover = usePopover(); + const navigate = useNavigate(); + + if ( + !workspace.template_use_classic_parameter_flow && + ephemeralParameters && + ephemeralParameters.length > 0 + ) { + const handleGoToParameters = () => { + popover.setOpen(false); + navigate( + `/@${workspace.owner_name}/${workspace.name}/settings/parameters`, + ); + }; - // For templates that don't use classic parameter flow, show different UI - if (!workspace.template_use_classic_parameter_flow && ephemeralParameters && ephemeralParameters.length > 0) { - const parametersPageUrl = `/@${workspace.owner_name}/${workspace.name}/settings/parameters`; - return ( -
- Ephemeral Parameters - - This template has ephemeral parameters that must be configured on the workspace parameters page: - - -
+
+

+ Ephemeral Parameters +

+

+ This template has ephemeral parameters that must be configured on the + workspace parameters page +

+ +
{ephemeralParameters.map((param) => ( -
- {param.display_name || param.name} +
+

+ {param.display_name || param.name} +

{param.description && ( -
+
{param.description}
)}
))}
- -
); diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx index 7094dad7e0b12..27f7b5e3beb20 100644 --- a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx @@ -15,8 +15,8 @@ import { ConfirmDialog, type ConfirmDialogProps, } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; -import { displayError } from "components/GlobalSnackbar/utils"; import { EphemeralParametersDialog } from "components/EphemeralParametersDialog"; +import { displayError } from "components/GlobalSnackbar/utils"; import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs"; import { WorkspaceUpdateDialogs, @@ -57,10 +57,10 @@ export const WorkspaceReadyPage: FC = ({ const [ephemeralParametersDialog, setEphemeralParametersDialog] = useState<{ open: boolean; - action: 'start' | 'restart'; + action: "start" | "restart"; buildParameters?: TypesGen.WorkspaceBuildParameter[]; ephemeralParameters: TypesGen.TemplateVersionParameter[]; - }>({ open: false, action: 'start', ephemeralParameters: [] }); + }>({ open: false, action: "start", ephemeralParameters: [] }); const { mutate: mutateRestartWorkspace, isPending: isRestarting } = useMutation({ mutationFn: API.restartWorkspace, @@ -146,10 +146,8 @@ export const WorkspaceReadyPage: FC = ({ }); const checkEphemeralParameters = async ( - action: 'start' | 'restart', buildParameters?: TypesGen.WorkspaceBuildParameter[], ) => { - // Only check for ephemeral parameters if template doesn't use classic parameter flow if (workspace.template_use_classic_parameter_flow) { return { hasEphemeral: false, ephemeralParameters: [] }; } @@ -161,49 +159,62 @@ export const WorkspaceReadyPage: FC = ({ buildParameters || [], ); - const ephemeralParameters = dynamicParameters.filter(param => param.ephemeral); + const ephemeralParameters = dynamicParameters.filter( + (param) => param.ephemeral, + ); + return { hasEphemeral: ephemeralParameters.length > 0, ephemeralParameters, }; } catch (error) { - console.error('Error checking ephemeral parameters:', error); return { hasEphemeral: false, ephemeralParameters: [] }; } }; - const runLastBuild = ( + const runLastBuild = async ( buildParameters: TypesGen.WorkspaceBuildParameter[] | undefined, debug: boolean, ) => { const logLevel = debug ? "debug" : undefined; - switch (workspace.latest_build.transition) { - case "start": - startWorkspaceMutation.mutate({ - logLevel, - buildParameters, - }); - break; - case "stop": - stopWorkspaceMutation.mutate({ logLevel }); - break; - case "delete": - deleteWorkspaceMutation.mutate({ log_level: logLevel }); - break; + const { hasEphemeral, ephemeralParameters } = + await checkEphemeralParameters(buildParameters); + if (hasEphemeral) { + setEphemeralParametersDialog({ + open: true, + action: "start", + buildParameters, + ephemeralParameters, + }); + } else { + switch (workspace.latest_build.transition) { + case "start": + startWorkspaceMutation.mutate({ + logLevel, + buildParameters, + }); + break; + case "stop": + stopWorkspaceMutation.mutate({ logLevel }); + break; + case "delete": + deleteWorkspaceMutation.mutate({ log_level: logLevel }); + break; + } } }; - const handleRetry = ( + const handleRetry = async ( buildParameters?: TypesGen.WorkspaceBuildParameter[], ) => { - runLastBuild(buildParameters, false); + await runLastBuild(buildParameters, false); }; - const handleDebug = ( + const handleDebug = async ( buildParameters?: TypesGen.WorkspaceBuildParameter[], ) => { - runLastBuild(buildParameters, true); + await runLastBuild(buildParameters, true); }; return ( @@ -232,11 +243,12 @@ export const WorkspaceReadyPage: FC = ({ buildLogs={buildLogs} timings={timingsQuery.data} handleStart={async (buildParameters) => { - const { hasEphemeral, ephemeralParameters } = await checkEphemeralParameters('start', buildParameters); + const { hasEphemeral, ephemeralParameters } = + await checkEphemeralParameters(buildParameters); if (hasEphemeral) { setEphemeralParametersDialog({ open: true, - action: 'start', + action: "start", buildParameters, ephemeralParameters, }); @@ -248,11 +260,12 @@ export const WorkspaceReadyPage: FC = ({ stopWorkspaceMutation.mutate({}); }} handleRestart={async (buildParameters) => { - const { hasEphemeral, ephemeralParameters } = await checkEphemeralParameters('restart', buildParameters); + const { hasEphemeral, ephemeralParameters } = + await checkEphemeralParameters(buildParameters); if (hasEphemeral) { setEphemeralParametersDialog({ open: true, - action: 'restart', + action: "restart", buildParameters, ephemeralParameters, }); @@ -299,18 +312,32 @@ export const WorkspaceReadyPage: FC = ({ setEphemeralParametersDialog({ ...ephemeralParametersDialog, open: false })} + onClose={() => + setEphemeralParametersDialog({ + ...ephemeralParametersDialog, + open: false, + }) + } onContinue={() => { - if (ephemeralParametersDialog.action === 'start') { - startWorkspaceMutation.mutate({ buildParameters: ephemeralParametersDialog.buildParameters }); + if (ephemeralParametersDialog.action === "start") { + startWorkspaceMutation.mutate({ + buildParameters: ephemeralParametersDialog.buildParameters, + }); } else { - setConfirmingRestart({ open: true, buildParameters: ephemeralParametersDialog.buildParameters }); + setConfirmingRestart({ + open: true, + buildParameters: ephemeralParametersDialog.buildParameters, + }); } - setEphemeralParametersDialog({ ...ephemeralParametersDialog, open: false }); + setEphemeralParametersDialog({ + ...ephemeralParametersDialog, + open: false, + }); }} ephemeralParameters={ephemeralParametersDialog.ephemeralParameters} workspaceOwner={workspace.owner_name} workspaceName={workspace.name} + templateVersionId={workspace.latest_build.template_version_id} /> diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx index 7e5168f004a7e..02f8ea3699653 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx @@ -74,9 +74,6 @@ export const WorkspaceParametersPageViewExperimental: FC< validateOnChange: true, validateOnBlur: true, }); - // Group parameters by ephemeral status - const ephemeralParameters = parameters.filter((p) => p.ephemeral); - const standardParameters = parameters.filter((p) => !p.ephemeral); const disabled = workspace.outdated && @@ -204,7 +201,7 @@ export const WorkspaceParametersPageViewExperimental: FC< )}
- {standardParameters.length > 0 && ( + {parameters.length > 0 && (

Parameters

@@ -220,7 +217,7 @@ export const WorkspaceParametersPageViewExperimental: FC<

- {standardParameters.map((parameter, index) => { + {parameters.map((parameter, index) => { const currentParameterValueIndex = form.values.rich_parameter_values?.findIndex( (p) => p.name === parameter.name, @@ -260,41 +257,6 @@ export const WorkspaceParametersPageViewExperimental: FC<
)} - {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 ( - - handleChange(parameter, parameterField, value) - } - autofill={false} - disabled={isDisabled} - value={ - form.values?.rich_parameter_values?.[index]?.value || "" - } - /> - ); - })} -
-
- )} -
From 1ff698827297a9a242af84bf158534ecadb6f0a9 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Tue, 17 Jun 2025 21:41:03 +0000 Subject: [PATCH 4/7] fix: format --- site/src/components/Badge/Badge.tsx | 3 ++- .../modules/workspaces/DynamicParameter/DynamicParameter.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx index 12e831cd1e595..0d11c96d30433 100644 --- a/site/src/components/Badge/Badge.tsx +++ b/site/src/components/Badge/Badge.tsx @@ -22,7 +22,8 @@ const badgeVariants = cva( "border border-solid border-border-warning bg-surface-orange text-content-warning shadow", destructive: "border border-solid border-border-destructive bg-surface-red text-highlight-red shadow", - green: "border border-solid border-surface-green bg-surface-green text-highlight-green shadow", + green: + "border border-solid border-surface-green bg-surface-green text-highlight-green shadow", }, size: { xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5", diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx index 3c4aded6d2052..9f97d558c8f08 100644 --- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx +++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx @@ -36,11 +36,11 @@ import { useDebouncedValue } from "hooks/debounce"; import { useEffectEvent } from "hooks/hookPolyfills"; import { CircleAlert, + Hourglass, Info, LinkIcon, Settings, TriangleAlert, - Hourglass, } from "lucide-react"; import { type FC, useEffect, useId, useRef, useState } from "react"; import type { AutofillBuildParameter } from "utils/richParameters"; From c7e1fadd833aed803c90458f4c1ddf7c1c7ac440 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Tue, 17 Jun 2025 21:53:35 +0000 Subject: [PATCH 5/7] chore: update stories --- .../DynamicParameter/DynamicParameter.stories.tsx | 9 +++++++++ site/src/testHelpers/entities.ts | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx index 4d1e91d9bf3e3..db3fa2f404c53 100644 --- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx +++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx @@ -211,6 +211,15 @@ export const Immutable: Story = { }, }; +export const Ephemeral: Story = { + args: { + parameter: { + ...MockPreviewParameter, + ephemeral: true, + }, + }, +}; + export const AllBadges: Story = { args: { parameter: { diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts index c73f009c777aa..a3017cb14177a 100644 --- a/site/src/testHelpers/entities.ts +++ b/site/src/testHelpers/entities.ts @@ -3015,7 +3015,7 @@ export const MockPreviewParameter: TypesGen.PreviewParameter = { value: { valid: true, value: "" }, diagnostics: [], options: [], - ephemeral: true, + ephemeral: false, required: true, icon: "", styling: {}, From 6d69706b08a857d4ad186e1c4186d3bb823e77bc Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 18 Jun 2025 13:38:44 +0000 Subject: [PATCH 6/7] fix: remove index.ts --- site/src/components/EphemeralParametersDialog/index.ts | 1 - site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 site/src/components/EphemeralParametersDialog/index.ts diff --git a/site/src/components/EphemeralParametersDialog/index.ts b/site/src/components/EphemeralParametersDialog/index.ts deleted file mode 100644 index ebd42320613e0..0000000000000 --- a/site/src/components/EphemeralParametersDialog/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { EphemeralParametersDialog } from "./EphemeralParametersDialog"; diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx index 27f7b5e3beb20..f1d48f0fccc7b 100644 --- a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx @@ -15,7 +15,7 @@ import { ConfirmDialog, type ConfirmDialogProps, } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; -import { EphemeralParametersDialog } from "components/EphemeralParametersDialog"; +import { EphemeralParametersDialog } from "components/EphemeralParametersDialog/EphemeralParametersDialog"; import { displayError } from "components/GlobalSnackbar/utils"; import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs"; import { From 718350d84fc9d6677b4103ffc3b4ba0ff2cf4a1a Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 18 Jun 2025 14:26:22 +0000 Subject: [PATCH 7/7] chore: cleanup html --- .../EphemeralParametersDialog.tsx | 24 ++++++++-------- .../BuildParametersPopover.tsx | 28 ++++++++++--------- 2 files changed, 28 insertions(+), 24 deletions(-) diff --git a/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx b/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx index 1651d8c8d038f..d1713d920f4a9 100644 --- a/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx +++ b/site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx @@ -52,18 +52,20 @@ export const EphemeralParametersDialog: FC = ({ ephemeral parameters that will be reset to their default values - {ephemeralParameters.map((param) => ( -
-

- {param.display_name || param.name} -

- {param.description && ( -

- {param.description} +

    + {ephemeralParameters.map((param) => ( +
  • +

    + {param.display_name || param.name}

    - )} -
- ))} + {param.description && ( +

+ {param.description} +

+ )} + + ))} + Would you like to go to the workspace parameters page to review and diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx index a0ff0e6c56703..76b100fc96745 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx @@ -122,19 +122,21 @@ const BuildParametersPopoverContent: FC = ({ workspace parameters page

-
- {ephemeralParameters.map((param) => ( -
-

- {param.display_name || param.name} -

- {param.description && ( -
- {param.description} -
- )} -
- ))} +
+
    + {ephemeralParameters.map((param) => ( +
  • +

    + {param.display_name || param.name} +

    + {param.description && ( +

    + {param.description} +

    + )} +
    • + ))} +