Skip to content

Commit f9ae105

Browse files
mtojekmtojek
authored
feat: Adjust forms to include Rich Parameters (coder#5856)
* XService: GetTemplateParameters * Rich parameter input shows up * Render option icons * Icons * WIP * For testing purposes: template * Fix: useState * WIP: dynamic validation * Yup validation * Translations * Remove temporary template * make fmt * WIP * Fix: tests * Fix: fmt * URL param * Refactor * Test: rich param value * Storybook * Fix * Refactor for testing purposes * Typo * test: string validation * Button: build parameters * Full screen page * Fix: navigate * XState done * refactor: postWorkspaceBuild * RichParameterInput rendered * Fix: bad initial value * Validation works * Maybe * Fix * Go back button * GoBack button * Form * Fix * Storybook * Fix: CreateWorkspacePage * fmt * Test * ns * fmt * All tests * feat: WorkspaceActions depend on template parameters * Fix
1 parent d5e2454 commit f9ae105

30 files changed

Lines changed: 1785 additions & 45 deletions

‎site/src/AppRouter.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import GroupsPage from "pages/GroupsPage/GroupsPage"
77
import LoginPage from "pages/LoginPage/LoginPage"
88
import { SetupPage } from "pages/SetupPage/SetupPage"
99
import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
10+
import { WorkspaceBuildParametersPage } from "pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage"
1011
import TemplatesPage from "pages/TemplatesPage/TemplatesPage"
1112
import UsersPage from "pages/UsersPage/UsersPage"
1213
import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"
@@ -213,6 +214,10 @@ export const AppRouter: FC = () => {
213214
path="change-version"
214215
element={<WorkspaceChangeVersionPage />}
215216
/>
217+
<Route
218+
path="build-parameters"
219+
element={<WorkspaceBuildParametersPage />}
220+
/>
216221
</Route>
217222
</Route>
218223
</Route>

‎site/src/api/api.ts‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import axios, { AxiosRequestHeaders } from "axios"
22
import dayjs from "dayjs"
33
import * as Types from "./types"
4-
import { WorkspaceBuildTransition } from "./types"
54
import * as TypesGen from "./typesGenerated"
65

76
export const hardCodedCSRFCookie = (): string => {
@@ -288,6 +287,15 @@ export const getTemplateVersionParameters = async (
288287
return response.data
289288
}
290289

290+
export const getTemplateVersionRichParameters = async (
291+
versionId: string,
292+
): Promise<TypesGen.TemplateVersionParameter[]> => {
293+
const response = await axios.get(
294+
`/api/v2/templateversions/${versionId}/rich-parameters`,
295+
)
296+
return response.data
297+
}
298+
291299
export const createTemplate = async (
292300
organizationId: string,
293301
data: TypesGen.CreateTemplateRequest,
@@ -390,26 +398,29 @@ export const getWorkspaceByOwnerAndName = async (
390398
return response.data
391399
}
392400

393-
const postWorkspaceBuild =
394-
(transition: WorkspaceBuildTransition) =>
395-
async (
396-
workspaceId: string,
397-
template_version_id?: string,
398-
): Promise<TypesGen.WorkspaceBuild> => {
399-
const payload = {
400-
transition,
401-
template_version_id,
402-
}
403-
const response = await axios.post(
404-
`/api/v2/workspaces/${workspaceId}/builds`,
405-
payload,
406-
)
407-
return response.data
408-
}
401+
export const postWorkspaceBuild = async (
402+
workspaceId: string,
403+
data: TypesGen.CreateWorkspaceBuildRequest,
404+
): Promise<TypesGen.WorkspaceBuild> => {
405+
const response = await axios.post(
406+
`/api/v2/workspaces/${workspaceId}/builds`,
407+
data,
408+
)
409+
return response.data
410+
}
409411

410-
export const startWorkspace = postWorkspaceBuild("start")
411-
export const stopWorkspace = postWorkspaceBuild("stop")
412-
export const deleteWorkspace = postWorkspaceBuild("delete")
412+
export const startWorkspace = (
413+
workspaceId: string,
414+
templateVersionID: string,
415+
) =>
416+
postWorkspaceBuild(workspaceId, {
417+
transition: "start",
418+
template_version_id: templateVersionID,
419+
})
420+
export const stopWorkspace = (workspaceId: string) =>
421+
postWorkspaceBuild(workspaceId, { transition: "stop" })
422+
export const deleteWorkspace = (workspaceId: string) =>
423+
postWorkspaceBuild(workspaceId, { transition: "delete" })
413424

414425
export const cancelWorkspaceBuild = async (
415426
workspaceBuildId: TypesGen.WorkspaceBuild["id"],
@@ -790,3 +801,12 @@ export const updateWorkspaceVersion = async (
790801
const template = await getTemplate(workspace.template_id)
791802
return startWorkspace(workspace.id, template.active_version_id)
792803
}
804+
805+
export const getWorkspaceBuildParameters = async (
806+
workspaceBuildId: TypesGen.WorkspaceBuild["id"],
807+
): Promise<TypesGen.WorkspaceBuildParameter[]> => {
808+
const response = await axios.get<TypesGen.WorkspaceBuildParameter[]>(
809+
`/api/v2/workspacebuilds/${workspaceBuildId}/parameters`,
810+
)
811+
return response.data
812+
}

‎site/src/components/DropdownButton/ActionCtas.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { makeStyles } from "@material-ui/core/styles"
44
import BlockIcon from "@material-ui/icons/Block"
55
import CloudQueueIcon from "@material-ui/icons/CloudQueue"
66
import UpdateOutlined from "@material-ui/icons/UpdateOutlined"
7+
import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
78
import CropSquareIcon from "@material-ui/icons/CropSquare"
89
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"
910
import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
@@ -51,6 +52,23 @@ export const ChangeVersionButton: FC<
5152
)
5253
}
5354

55+
export const BuildParametersButton: FC<
56+
React.PropsWithChildren<WorkspaceAction>
57+
> = ({ handleAction }) => {
58+
const styles = useStyles()
59+
const { t } = useTranslation("workspacePage")
60+
61+
return (
62+
<Button
63+
className={styles.actionButton}
64+
startIcon={<SettingsOutlined />}
65+
onClick={handleAction}
66+
>
67+
{t("actionButton.buildParameters")}
68+
</Button>
69+
)
70+
}
71+
5472
export const StartButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
5573
handleAction,
5674
}) => {

‎site/src/components/GoBackButton/GoBackButton.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Button from "@material-ui/core/Button"
2+
3+
interface GoBackButtonProps {
4+
onClick: () => void
5+
}
6+
7+
export const Language = {
8+
ariaLabel: "Go back",
9+
}
10+
11+
export const GoBackButton: React.FC<
12+
React.PropsWithChildren<GoBackButtonProps>
13+
> = ({ onClick }) => {
14+
return (
15+
<Button onClick={onClick} size="small" aria-label={Language.ariaLabel}>
16+
Go back
17+
</Button>
18+
)
19+
}

‎site/src/components/RichParameterInput/RichParameterInput.stories.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { Story } from "@storybook/react"
2+
import { TemplateVersionParameter } from "api/typesGenerated"
3+
import {
4+
RichParameterInput,
5+
RichParameterInputProps,
6+
} from "./RichParameterInput"
7+
8+
export default {
9+
title: "components/RichParameterInput",
10+
component: RichParameterInput,
11+
}
12+
13+
const Template: Story<RichParameterInputProps> = (
14+
args: RichParameterInputProps,
15+
) => <RichParameterInput {...args} />
16+
17+
const createTemplateVersionParameter = (
18+
partial: Partial<TemplateVersionParameter>,
19+
): TemplateVersionParameter => {
20+
return {
21+
name: "first_parameter",
22+
description: "This is first parameter.",
23+
type: "string",
24+
mutable: false,
25+
default_value: "default string",
26+
icon: "/icon/folder.svg",
27+
options: [],
28+
validation_error: "",
29+
validation_regex: "",
30+
validation_min: 0,
31+
validation_max: 0,
32+
33+
...partial,
34+
}
35+
}
36+
37+
export const Basic = Template.bind({})
38+
Basic.args = {
39+
initialValue: "initial-value",
40+
parameter: createTemplateVersionParameter({
41+
name: "project_name",
42+
description:
43+
"Customize the name of a Google Cloud project that will be created!",
44+
}),
45+
}
46+
47+
export const NumberType = Template.bind({})
48+
NumberType.args = {
49+
initialValue: "4",
50+
parameter: createTemplateVersionParameter({
51+
name: "number_parameter",
52+
type: "number",
53+
description: "Numeric parameter",
54+
}),
55+
}
56+
57+
export const BooleanType = Template.bind({})
58+
BooleanType.args = {
59+
initialValue: "false",
60+
parameter: createTemplateVersionParameter({
61+
name: "bool_parameter",
62+
type: "bool",
63+
description: "Boolean parameter",
64+
}),
65+
}
66+
67+
export const OptionsType = Template.bind({})
68+
OptionsType.args = {
69+
initialValue: "first_option",
70+
parameter: createTemplateVersionParameter({
71+
name: "options_parameter",
72+
type: "string",
73+
description: "Parameter with options",
74+
options: [
75+
{
76+
name: "First option",
77+
value: "first_option",
78+
description: "This is option 1",
79+
icon: "",
80+
},
81+
{
82+
name: "Second option",
83+
value: "second_option",
84+
description: "This is option 2",
85+
icon: "/icon/database.svg",
86+
},
87+
{
88+
name: "Third option",
89+
value: "third_option",
90+
description: "This is option 3",
91+
icon: "/icon/aws.png",
92+
},
93+
],
94+
}),
95+
}

0 commit comments

Comments
 (0)