Skip to content

Commit 95e8ab5

Browse files
mtojekpull[bot]
mtojek
authored and
pull[bot]
committed
feat: Group immutable and mutable rich parameters (#5975)
1 parent 27b3573 commit 95e8ab5

File tree

4 files changed

+198
-67
lines changed

4 files changed

+198
-67
lines changed

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useMachine } from "@xstate/react"
2+
import { TemplateVersionParameter } from "api/typesGenerated"
23
import { useMe } from "hooks/useMe"
34
import { useOrganizationId } from "hooks/useOrganizationId"
45
import { FC } from "react"
@@ -58,7 +59,7 @@ const CreateWorkspacePage: FC = () => {
5859
templateName={templateName}
5960
templates={templates}
6061
selectedTemplate={selectedTemplate}
61-
templateParameters={templateParameters}
62+
templateParameters={orderedTemplateParameters(templateParameters)}
6263
templateSchema={templateSchema}
6364
createWorkspaceErrors={{
6465
[CreateWorkspaceErrors.GET_TEMPLATES_ERROR]: getTemplatesError,
@@ -104,4 +105,18 @@ const getDefaultParameterValues = (
104105
return paramValues
105106
}
106107

108+
export const orderedTemplateParameters = (
109+
templateParameters?: TemplateVersionParameter[],
110+
): TemplateVersionParameter[] => {
111+
if (!templateParameters) {
112+
return []
113+
}
114+
115+
const immutables = templateParameters.filter(
116+
(parameter) => !parameter.mutable,
117+
)
118+
const mutables = templateParameters.filter((parameter) => parameter.mutable)
119+
return [...immutables, ...mutables]
120+
}
121+
107122
export default CreateWorkspacePage

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

Lines changed: 100 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -257,48 +257,107 @@ export const CreateWorkspacePageView: FC<
257257
</div>
258258
)}
259259

260-
{/* Rich parameters */}
261-
{props.templateParameters && props.templateParameters.length > 0 && (
262-
<div className={styles.formSection}>
263-
<div className={styles.formSectionInfo}>
264-
<h2 className={styles.formSectionInfoTitle}>
265-
Rich template params
266-
</h2>
267-
<p className={styles.formSectionInfoDescription}>
268-
Those values are provided by your template&lsquo;s Terraform
269-
configuration.
270-
</p>
260+
{/* Immutable rich parameters */}
261+
{props.templateParameters &&
262+
props.templateParameters.filter((p) => !p.mutable).length > 0 && (
263+
<div className={styles.formSection}>
264+
<div className={styles.formSectionInfo}>
265+
<h2 className={styles.formSectionInfoTitle}>
266+
Immutable parameters
267+
</h2>
268+
<p className={styles.formSectionInfoDescription}>
269+
Those values are provided by your template&lsquo;s Terraform
270+
configuration. Values cannot be changed after creating the
271+
workspace.
272+
</p>
273+
</div>
274+
275+
<Stack
276+
direction="column"
277+
spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
278+
className={styles.formSectionFields}
279+
>
280+
{props.templateParameters.map(
281+
(parameter, index) =>
282+
!parameter.mutable && (
283+
<RichParameterInput
284+
{...getFieldHelpers(
285+
"rich_parameter_values[" + index + "].value",
286+
)}
287+
disabled={form.isSubmitting}
288+
index={index}
289+
key={parameter.name}
290+
onChange={(value) => {
291+
form.setFieldValue(
292+
"rich_parameter_values." + index,
293+
{
294+
name: parameter.name,
295+
value: value,
296+
},
297+
)
298+
}}
299+
parameter={parameter}
300+
initialValue={workspaceBuildParameterValue(
301+
initialRichParameterValues,
302+
parameter,
303+
)}
304+
/>
305+
),
306+
)}
307+
</Stack>
271308
</div>
272-
273-
<Stack
274-
direction="column"
275-
spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
276-
className={styles.formSectionFields}
277-
>
278-
{props.templateParameters.map((parameter, index) => (
279-
<RichParameterInput
280-
{...getFieldHelpers(
281-
"rich_parameter_values[" + index + "].value",
282-
)}
283-
disabled={form.isSubmitting}
284-
index={index}
285-
key={parameter.name}
286-
onChange={(value) => {
287-
form.setFieldValue("rich_parameter_values." + index, {
288-
name: parameter.name,
289-
value: value,
290-
})
291-
}}
292-
parameter={parameter}
293-
initialValue={workspaceBuildParameterValue(
294-
initialRichParameterValues,
295-
parameter,
296-
)}
297-
/>
298-
))}
299-
</Stack>
300-
</div>
301-
)}
309+
)}
310+
311+
{/* Mutable rich parameters */}
312+
{props.templateParameters &&
313+
props.templateParameters.filter((p) => p.mutable).length > 0 && (
314+
<div className={styles.formSection}>
315+
<div className={styles.formSectionInfo}>
316+
<h2 className={styles.formSectionInfoTitle}>
317+
Mutable parameters
318+
</h2>
319+
<p className={styles.formSectionInfoDescription}>
320+
Those values are provided by your template&lsquo;s Terraform
321+
configuration. Values can be changed after creating the
322+
workspace.
323+
</p>
324+
</div>
325+
326+
<Stack
327+
direction="column"
328+
spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
329+
className={styles.formSectionFields}
330+
>
331+
{props.templateParameters.map(
332+
(parameter, index) =>
333+
parameter.mutable && (
334+
<RichParameterInput
335+
{...getFieldHelpers(
336+
"rich_parameter_values[" + index + "].value",
337+
)}
338+
disabled={form.isSubmitting}
339+
index={index}
340+
key={parameter.name}
341+
onChange={(value) => {
342+
form.setFieldValue(
343+
"rich_parameter_values." + index,
344+
{
345+
name: parameter.name,
346+
value: value,
347+
},
348+
)
349+
}}
350+
parameter={parameter}
351+
initialValue={workspaceBuildParameterValue(
352+
initialRichParameterValues,
353+
parameter,
354+
)}
355+
/>
356+
),
357+
)}
358+
</Stack>
359+
</div>
360+
)}
302361
<FormFooter
303362
styles={formFooterStyles}
304363
onCancel={props.onCancel}

‎site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
UpdateWorkspaceErrors,
1010
WorkspaceBuildParametersPageView,
1111
} from "./WorkspaceBuildParametersPageView"
12+
import { orderedTemplateParameters } from "pages/CreateWorkspacePage/CreateWorkspacePage"
1213

1314
export const WorkspaceBuildParametersPage: FC = () => {
1415
const { t } = useTranslation("workspaceBuildParametersPage")
@@ -48,8 +49,13 @@ export const WorkspaceBuildParametersPage: FC = () => {
4849
</Helmet>
4950
<WorkspaceBuildParametersPageView
5051
workspace={selectedWorkspace}
51-
templateParameters={templateParameters}
52+
templateParameters={orderedTemplateParameters(templateParameters)}
5253
workspaceBuildParameters={workspaceBuildParameters}
54+
isLoading={
55+
state.matches("gettingWorkspace") ||
56+
state.matches("gettingTemplateParameters") ||
57+
state.matches("gettingWorkspaceBuildParameters")
58+
}
5359
updatingWorkspace={state.matches("updatingWorkspace")}
5460
hasErrors={state.matches("error")}
5561
updateWorkspaceErrors={{

‎site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx

Lines changed: 75 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export interface WorkspaceBuildParametersPageViewProps {
2929
templateParameters?: TypesGen.TemplateVersionParameter[]
3030
workspaceBuildParameters?: TypesGen.WorkspaceBuildParameter[]
3131

32+
isLoading: boolean
3233
initialTouched?: FormikTouched<TypesGen.CreateWorkspaceRequest>
3334
updatingWorkspace: boolean
3435
onCancel: () => void
@@ -150,7 +151,9 @@ export const WorkspaceBuildParametersPageView: FC<
150151

151152
<Maybe
152153
condition={Boolean(
153-
props.templateParameters && props.templateParameters.length === 0,
154+
!props.isLoading &&
155+
props.templateParameters &&
156+
props.templateParameters.length === 0,
154157
)}
155158
>
156159
<div className={styles.formSection}>
@@ -161,7 +164,8 @@ export const WorkspaceBuildParametersPageView: FC<
161164
</div>
162165
</Maybe>
163166

164-
{props.templateParameters &&
167+
{!props.isLoading &&
168+
props.templateParameters &&
165169
props.templateParameters.length > 0 &&
166170
props.workspaceBuildParameters && (
167171
<div className={styles.formSection}>
@@ -171,27 +175,67 @@ export const WorkspaceBuildParametersPageView: FC<
171175
spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
172176
className={styles.formSectionFields}
173177
>
174-
{props.templateParameters.map((parameter, index) => (
175-
<RichParameterInput
176-
{...getFieldHelpers(
177-
"rich_parameter_values[" + index + "].value",
178-
)}
179-
disabled={!parameter.mutable || form.isSubmitting}
180-
index={index}
181-
key={parameter.name}
182-
onChange={(value) => {
183-
form.setFieldValue("rich_parameter_values." + index, {
184-
name: parameter.name,
185-
value: value,
186-
})
187-
}}
188-
parameter={parameter}
189-
initialValue={workspaceBuildParameterValue(
190-
initialRichParameterValues,
191-
parameter,
192-
)}
193-
/>
194-
))}
178+
{props.templateParameters.filter((p) => !p.mutable).length >
179+
0 && (
180+
<div className={styles.formSectionParameterTitle}>
181+
Immutable parameters
182+
</div>
183+
)}
184+
{props.templateParameters.map(
185+
(parameter, index) =>
186+
!parameter.mutable && (
187+
<RichParameterInput
188+
{...getFieldHelpers(
189+
"rich_parameter_values[" + index + "].value",
190+
)}
191+
disabled={!parameter.mutable || form.isSubmitting}
192+
index={index}
193+
key={parameter.name}
194+
onChange={(value) => {
195+
form.setFieldValue("rich_parameter_values." + index, {
196+
name: parameter.name,
197+
value: value,
198+
})
199+
}}
200+
parameter={parameter}
201+
initialValue={workspaceBuildParameterValue(
202+
initialRichParameterValues,
203+
parameter,
204+
)}
205+
/>
206+
),
207+
)}
208+
209+
{props.templateParameters.filter((p) => p.mutable).length >
210+
0 && (
211+
<div className={styles.formSectionParameterTitle}>
212+
Mutable parameters
213+
</div>
214+
)}
215+
{props.templateParameters.map(
216+
(parameter, index) =>
217+
parameter.mutable && (
218+
<RichParameterInput
219+
{...getFieldHelpers(
220+
"rich_parameter_values[" + index + "].value",
221+
)}
222+
disabled={!parameter.mutable || form.isSubmitting}
223+
index={index}
224+
key={parameter.name}
225+
onChange={(value) => {
226+
form.setFieldValue("rich_parameter_values." + index, {
227+
name: parameter.name,
228+
value: value,
229+
})
230+
}}
231+
parameter={parameter}
232+
initialValue={workspaceBuildParameterValue(
233+
initialRichParameterValues,
234+
parameter,
235+
)}
236+
/>
237+
),
238+
)}
195239
<FormFooter
196240
styles={formFooterStyles}
197241
onCancel={props.onCancel}
@@ -279,7 +323,7 @@ const stripImmutableParameters = (
279323
}
280324
}
281325

282-
const useStyles = makeStyles(() => ({
326+
const useStyles = makeStyles((theme) => ({
283327
goBackSection: {
284328
display: "flex",
285329
width: "100%",
@@ -292,6 +336,13 @@ const useStyles = makeStyles(() => ({
292336
formSectionFields: {
293337
width: "100%",
294338
},
339+
formSectionParameterTitle: {
340+
fontSize: 20,
341+
color: theme.palette.text.primary,
342+
fontWeight: 400,
343+
margin: 0,
344+
marginBottom: theme.spacing(1),
345+
},
295346
}))
296347

297348
const useFormFooterStyles = makeStyles((theme) => ({

0 commit comments

Comments
 (0)