Skip to content

Commit abea8ec

Browse files
jaaydenhjaaydenh
committed
fix: improvements to UX and flow
1 parent 7f56518 commit abea8ec

File tree

7 files changed

+176
-142
lines changed

7 files changed

+176
-142
lines changed

‎site/src/components/Badge/Badge.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const badgeVariants = cva(
2222
"border border-solid border-border-warning bg-surface-orange text-content-warning shadow",
2323
destructive:
2424
"border border-solid border-border-destructive bg-surface-red text-highlight-red shadow",
25+
green: "border border-solid border-surface-green bg-surface-green text-highlight-green shadow",
2526
},
2627
size: {
2728
xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5",

‎site/src/components/EphemeralParametersDialog/EphemeralParametersDialog.tsx

Lines changed: 59 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import type { TemplateVersionParameter } from "api/typesGenerated";
22
import { Button } from "components/Button/Button";
3-
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
4-
import { Link } from "components/Link/Link";
3+
import {
4+
Dialog,
5+
DialogContent,
6+
DialogDescription,
7+
DialogFooter,
8+
DialogHeader,
9+
DialogTitle,
10+
} from "components/Dialog/Dialog";
511
import type { FC } from "react";
12+
import { useNavigate } from "react-router-dom";
613

714
interface EphemeralParametersDialogProps {
815
open: boolean;
@@ -11,6 +18,7 @@ interface EphemeralParametersDialogProps {
1118
ephemeralParameters: TemplateVersionParameter[];
1219
workspaceOwner: string;
1320
workspaceName: string;
21+
templateVersionId: string;
1422
}
1523

1624
export const EphemeralParametersDialog: FC<EphemeralParametersDialogProps> = ({
@@ -20,42 +28,57 @@ export const EphemeralParametersDialog: FC<EphemeralParametersDialogProps> = ({
2028
ephemeralParameters,
2129
workspaceOwner,
2230
workspaceName,
31+
templateVersionId,
2332
}) => {
24-
const parametersPageUrl = `/@${workspaceOwner}/${workspaceName}/settings/parameters`;
33+
const navigate = useNavigate();
2534

26-
const description = (
27-
<>
28-
<p>This workspace template has ephemeral parameters that will be reset to their default values:</p>
29-
<div style={{ margin: "16px 0" }}>
30-
{ephemeralParameters.map((param) => (
31-
<div key={param.name} style={{ marginBottom: "8px" }}>
32-
<strong>{param.display_name || param.name}</strong>
33-
{param.description && (
34-
<div style={{ fontSize: "14px", color: "#666" }}>
35-
{param.description}
36-
</div>
37-
)}
38-
</div>
39-
))}
40-
</div>
41-
<p>You can continue without setting values for these parameters, or go to the workspace parameters page to configure them.</p>
42-
<div style={{ marginTop: "16px" }}>
43-
<Button asChild onClick={onClose}>
44-
<Link to={parametersPageUrl}>Go to Parameters Page</Link>
45-
</Button>
46-
</div>
47-
</>
48-
);
35+
const handleGoToParameters = () => {
36+
onClose();
37+
navigate(
38+
`/@${workspaceOwner}/${workspaceName}/settings/parameters?templateVersionId=${templateVersionId}`,
39+
);
40+
};
4941

5042
return (
51-
<ConfirmDialog
52-
open={open}
53-
onClose={onClose}
54-
onConfirm={onContinue}
55-
title="Ephemeral Parameters Detected"
56-
confirmText="Continue Without Setting"
57-
description={description}
58-
type="info"
59-
/>
43+
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
44+
<DialogContent>
45+
<DialogHeader>
46+
<DialogTitle>Ephemeral Parameters Detected</DialogTitle>
47+
<DialogDescription>
48+
This workspace template has{" "}
49+
<strong className="text-content-primary">
50+
{ephemeralParameters.length}
51+
</strong>{" "}
52+
ephemeral parameters that will be reset to their default values
53+
</DialogDescription>
54+
<DialogDescription>
55+
{ephemeralParameters.map((param) => (
56+
<div key={param.name}>
57+
<p className="text-content-primary m-0 font-bold">
58+
{param.display_name || param.name}
59+
</p>
60+
{param.description && (
61+
<p className="m-0 text-sm text-content-secondary">
62+
{param.description}
63+
</p>
64+
)}
65+
</div>
66+
))}
67+
</DialogDescription>
68+
<DialogDescription>
69+
Would you like to go to the workspace parameters page to review and
70+
update these parameters before continuing?
71+
</DialogDescription>
72+
</DialogHeader>
73+
<DialogFooter>
74+
<Button onClick={onContinue} variant="outline">
75+
Continue
76+
</Button>
77+
<Button onClick={handleGoToParameters}>
78+
Go to workspace parameters
79+
</Button>
80+
</DialogFooter>
81+
</DialogContent>
82+
</Dialog>
6083
);
61-
};
84+
};

‎site/src/components/EphemeralParametersDialog/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { EphemeralParametersDialog } from "./EphemeralParametersDialog";
1+
export { EphemeralParametersDialog } from "./EphemeralParametersDialog";

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
LinkIcon,
4141
Settings,
4242
TriangleAlert,
43+
Hourglass,
4344
} from "lucide-react";
4445
import { type FC, useEffect, useId, useRef, useState } from "react";
4546
import type { AutofillBuildParameter } from "utils/richParameters";
@@ -162,6 +163,23 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
162163
</Tooltip>
163164
</TooltipProvider>
164165
)}
166+
{parameter.ephemeral && (
167+
<TooltipProvider delayDuration={100}>
168+
<Tooltip>
169+
<TooltipTrigger asChild>
170+
<span className="flex items-center">
171+
<Badge size="sm" variant="green" border="none">
172+
<Hourglass />
173+
Ephemeral
174+
</Badge>
175+
</span>
176+
</TooltipTrigger>
177+
<TooltipContent className="max-w-xs">
178+
This parameter only applies for a single workspace start
179+
</TooltipContent>
180+
</Tooltip>
181+
</TooltipProvider>
182+
)}
165183
{isPreset && (
166184
<TooltipProvider delayDuration={100}>
167185
<Tooltip>

‎site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useTheme } from "@emotion/react";
2-
import { Button } from "components/Button/Button";
32
import visuallyHidden from "@mui/utils/visuallyHidden";
43
import { API } from "api/api";
54
import type {
65
TemplateVersionParameter,
76
Workspace,
87
WorkspaceBuildParameter,
98
} from "api/typesGenerated";
9+
import { Button } from "components/Button/Button";
1010
import { FormFields } from "components/Form/Form";
1111
import { TopbarButton } from "components/FullPageLayout/Topbar";
1212
import {
@@ -27,8 +27,8 @@ import { useFormik } from "formik";
2727
import { ChevronDownIcon } from "lucide-react";
2828
import type { FC } from "react";
2929
import { useQuery } from "react-query";
30+
import { useNavigate } from "react-router-dom";
3031
import { docs } from "utils/docs";
31-
import { Link } from "components/Link/Link";
3232
import { getFormHelpers } from "utils/formUtils";
3333
import {
3434
type AutofillBuildParameter,
@@ -98,42 +98,47 @@ const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
9898
}) => {
9999
const theme = useTheme();
100100
const popover = usePopover();
101+
const navigate = useNavigate();
102+
103+
if (
104+
!workspace.template_use_classic_parameter_flow &&
105+
ephemeralParameters &&
106+
ephemeralParameters.length > 0
107+
) {
108+
const handleGoToParameters = () => {
109+
popover.setOpen(false);
110+
navigate(
111+
`/@${workspace.owner_name}/${workspace.name}/settings/parameters`,
112+
);
113+
};
101114

102-
// For templates that don't use classic parameter flow, show different UI
103-
if (!workspace.template_use_classic_parameter_flow && ephemeralParameters && ephemeralParameters.length > 0) {
104-
const parametersPageUrl = `/@${workspace.owner_name}/${workspace.name}/settings/parameters`;
105-
106115
return (
107-
<div
108-
css={{
109-
color: theme.palette.text.secondary,
110-
padding: 20,
111-
}}
112-
>
113-
<HelpTooltipTitle>Ephemeral Parameters</HelpTooltipTitle>
114-
<HelpTooltipText css={{ marginBottom: 16 }}>
115-
This template has ephemeral parameters that must be configured on the workspace parameters page:
116-
</HelpTooltipText>
117-
118-
<div css={{ marginBottom: 16 }}>
116+
<div className="flex flex-col gap-4 p-5">
117+
<h1 className="text-xl m-0 text-content-primary font-semibold leading-none ">
118+
Ephemeral Parameters
119+
</h1>
120+
<p className="m-0 text-sm text-content-secondary">
121+
This template has ephemeral parameters that must be configured on the
122+
workspace parameters page
123+
</p>
124+
125+
<div className="flex flex-col gap-2">
119126
{ephemeralParameters.map((param) => (
120-
<div key={param.name} css={{ marginBottom: 8 }}>
121-
<strong>{param.display_name || param.name}</strong>
127+
<div key={param.name} className="flex flex-col gap-2">
128+
<p className="text-content-primary m-0 font-bold">
129+
{param.display_name || param.name}
130+
</p>
122131
{param.description && (
123-
<div css={{ fontSize: 14, color: theme.palette.text.secondary }}>
132+
<div className="m-0 text-sm text-content-secondary">
124133
{param.description}
125134
</div>
126135
)}
127136
</div>
128137
))}
129138
</div>
130-
131-
<Button
132-
asChild
133-
css={{ width: "100%" }}
134-
onClick={() => popover.setOpen(false)}
135-
>
136-
<Link to={parametersPageUrl}>Go to Parameters Page</Link>
139+
140+
<Button className="w-full" onClick={handleGoToParameters}>
141+
Go to workspace parameters
137142
</Button>
138143
</div>
139144
);

0 commit comments

Comments
 (0)