Skip to content

Commit 1f9acc3

Browse files
aqandrewaqandrew
committed
refactor: replace deprecated Popover in BuildParametersPopover
1 parent 1242cbe commit 1f9acc3

File tree

3 files changed

+106
-27
lines changed

3 files changed

+106
-27
lines changed

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

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,6 @@ import type {
77
WorkspaceBuildParameter,
88
} from "api/typesGenerated";
99
import { Button } from "components/Button/Button";
10-
import {
11-
Popover,
12-
PopoverContent,
13-
PopoverTrigger,
14-
usePopover,
15-
} from "components/deprecated/Popover/Popover";
1610
import { FormFields } from "components/Form/Form";
1711
import { TopbarButton } from "components/FullPageLayout/Topbar";
1812
import {
@@ -21,13 +15,18 @@ import {
2115
HelpTooltipText,
2216
HelpTooltipTitle,
2317
} from "components/HelpTooltip/HelpTooltip";
18+
import { Link } from "components/Link/Link";
2419
import { Loader } from "components/Loader/Loader";
20+
import {
21+
Popover,
22+
PopoverContent,
23+
PopoverTrigger,
24+
} from "components/Popover/Popover";
2525
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
2626
import { useFormik } from "formik";
2727
import { ChevronDownIcon } from "lucide-react";
28-
import type { FC } from "react";
28+
import { useState, type FC } from "react";
2929
import { useQuery } from "react-query";
30-
import { useNavigate } from "react-router";
3130
import { docs } from "utils/docs";
3231
import { getFormHelpers } from "utils/formUtils";
3332
import {
@@ -48,6 +47,7 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
4847
label,
4948
onSubmit,
5049
}) => {
50+
const [isOpen, setIsOpen] = useState(false);
5151
const { data: parameters } = useQuery({
5252
queryKey: ["workspace", workspace.id, "parameters"],
5353
queryFn: () => API.getWorkspaceParameters(workspace),
@@ -57,8 +57,8 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
5757
: undefined;
5858

5959
return (
60-
<Popover>
61-
<PopoverTrigger>
60+
<Popover open={isOpen} onOpenChange={setIsOpen}>
61+
<PopoverTrigger asChild>
6262
<TopbarButton
6363
data-testid="build-parameters-button"
6464
disabled={disabled}
@@ -68,15 +68,13 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
6868
<span css={{ ...visuallyHidden }}>{label}</span>
6969
</TopbarButton>
7070
</PopoverTrigger>
71-
<PopoverContent
72-
horizontal="right"
73-
css={{ ".MuiPaper-root": { width: 304 } }}
74-
>
71+
<PopoverContent align="end" className="w-[304px]">
7572
<BuildParametersPopoverContent
7673
workspace={workspace}
7774
ephemeralParameters={ephemeralParameters}
7875
buildParameters={parameters?.buildParameters}
7976
onSubmit={onSubmit}
77+
setIsOpen={setIsOpen}
8078
/>
8179
</PopoverContent>
8280
</Popover>
@@ -88,30 +86,23 @@ interface BuildParametersPopoverContentProps {
8886
ephemeralParameters?: TemplateVersionParameter[];
8987
buildParameters?: WorkspaceBuildParameter[];
9088
onSubmit: (buildParameters: WorkspaceBuildParameter[]) => void;
89+
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
9190
}
9291

9392
const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
9493
workspace,
9594
ephemeralParameters,
9695
buildParameters,
9796
onSubmit,
97+
setIsOpen,
9898
}) => {
9999
const theme = useTheme();
100-
const popover = usePopover();
101-
const navigate = useNavigate();
102100

103101
if (
104102
!workspace.template_use_classic_parameter_flow &&
105103
ephemeralParameters &&
106104
ephemeralParameters.length > 0
107105
) {
108-
const handleGoToParameters = () => {
109-
popover.setOpen(false);
110-
navigate(
111-
`/@${workspace.owner_name}/${workspace.name}/settings/parameters`,
112-
);
113-
};
114-
115106
return (
116107
<div className="flex flex-col gap-4 p-5">
117108
<p className="m-0 text-sm text-content-secondary">
@@ -137,9 +128,12 @@ const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
137128
</ul>
138129
</div>
139130

140-
<Button className="w-full" onClick={handleGoToParameters}>
131+
<Link
132+
href={`/@${workspace.owner_name}/${workspace.name}/settings/parameters`}
133+
className="self-start"
134+
>
141135
Go to workspace parameters
142-
</Button>
136+
</Link>
143137
</div>
144138
);
145139
}
@@ -165,7 +159,7 @@ const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
165159
<Form
166160
onSubmit={(buildParameters) => {
167161
onSubmit(buildParameters);
168-
popover.setOpen(false);
162+
setIsOpen(false);
169163
}}
170164
ephemeralParameters={ephemeralParameters}
171165
buildParameters={buildParameters.map(

‎site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.stories.tsx

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { MockWorkspace } from "testHelpers/entities";
1+
import {
2+
MockNonClassicParameterFlowWorkspace,
3+
MockTemplateVersionParameter6,
4+
MockWorkspace,
5+
} from "testHelpers/entities";
26
import type { Meta, StoryObj } from "@storybook/react-vite";
37
import { expect, userEvent, waitFor, within } from "storybook/test";
48
import { RetryButton } from "./RetryButton";
@@ -52,3 +56,63 @@ export const WithOpenBuildParameters: Story = {
5256
});
5357
},
5458
};
59+
60+
export const WithOpenEphemeralBuildParameters: Story = {
61+
args: {
62+
enableBuildParameters: true,
63+
workspace: MockWorkspace,
64+
},
65+
parameters: {
66+
queries: [
67+
{
68+
key: ["workspace", MockWorkspace.id, "parameters"],
69+
data: {
70+
templateVersionRichParameters: [MockTemplateVersionParameter6],
71+
buildParameters: [],
72+
},
73+
},
74+
],
75+
},
76+
play: async ({ canvasElement, step }) => {
77+
const screen = within(canvasElement);
78+
79+
await step("open popover", async () => {
80+
await userEvent.click(screen.getByTestId("build-parameters-button"));
81+
await waitFor(() =>
82+
expect(screen.getByText("Build Options")).toBeInTheDocument(),
83+
);
84+
});
85+
},
86+
};
87+
88+
export const WithOpenEphemeralBuildParametersNotClassic: Story = {
89+
args: {
90+
enableBuildParameters: true,
91+
workspace: MockNonClassicParameterFlowWorkspace,
92+
},
93+
parameters: {
94+
queries: [
95+
{
96+
key: [
97+
"workspace",
98+
MockNonClassicParameterFlowWorkspace.id,
99+
"parameters",
100+
],
101+
data: {
102+
templateVersionRichParameters: [MockTemplateVersionParameter6],
103+
buildParameters: [],
104+
},
105+
},
106+
],
107+
},
108+
play: async ({ canvasElement, step }) => {
109+
const screen = within(canvasElement);
110+
111+
await step("open popover", async () => {
112+
await userEvent.click(screen.getByTestId("build-parameters-button"));
113+
await waitFor(() =>
114+
expect(screen.getByText("Build Options")).toBeInTheDocument(),
115+
);
116+
});
117+
},
118+
};

‎site/src/testHelpers/entities.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1598,6 +1598,12 @@ export const MockPendingWorkspace: TypesGen.Workspace = {
15981598
},
15991599
};
16001600

1601+
export const MockNonClassicParameterFlowWorkspace: TypesGen.Workspace = {
1602+
...MockWorkspace,
1603+
id: "test-non-classic-parameter-flow-workspace",
1604+
template_use_classic_parameter_flow: false,
1605+
};
1606+
16011607
// just over one page of workspaces
16021608
export const MockWorkspacesResponse: TypesGen.WorkspacesResponse = {
16031609
workspaces: range(1, 27).map((id: number) => ({
@@ -1695,6 +1701,21 @@ const MockTemplateVersionParameter5: TypesGen.TemplateVersionParameter = {
16951701
ephemeral: false,
16961702
};
16971703

1704+
export const MockTemplateVersionParameter6: TypesGen.TemplateVersionParameter =
1705+
{
1706+
name: "ephemeral_parameter",
1707+
type: "string",
1708+
form_type: "input",
1709+
description: "This is ephemeral parameter",
1710+
description_plaintext: "Markdown: This is ephemeral parameter",
1711+
default_value: "abc",
1712+
mutable: true,
1713+
icon: "/icon/folder.svg",
1714+
options: [],
1715+
required: true,
1716+
ephemeral: true,
1717+
};
1718+
16981719
export const MockTemplateVersionVariable1: TypesGen.TemplateVersionVariable = {
16991720
name: "first_variable",
17001721
description: "This is first variable.",

0 commit comments

Comments
 (0)