Skip to content

Commit d639e6b

Browse files
BrunoQuaresmaBrunoQuaresma
authored
feat(site): Ask for missing template variables in the template editor (#7108)
1 parent c39c0dc commit d639e6b

File tree

5 files changed

+256
-18
lines changed

5 files changed

+256
-18
lines changed

‎site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import Dialog from "@material-ui/core/Dialog"
3+
import DialogContent from "@material-ui/core/DialogContent"
4+
import DialogContentText from "@material-ui/core/DialogContentText"
5+
import DialogTitle from "@material-ui/core/DialogTitle"
6+
import { DialogProps } from "components/Dialogs/Dialog"
7+
import { FC, useEffect, useState } from "react"
8+
import { FormFields, VerticalForm } from "components/Form/Form"
9+
import { TemplateVersionVariable, VariableValue } from "api/typesGenerated"
10+
import DialogActions from "@material-ui/core/DialogActions"
11+
import Button from "@material-ui/core/Button"
12+
import { VariableInput } from "pages/CreateTemplatePage/VariableInput"
13+
import { Loader } from "components/Loader/Loader"
14+
15+
export type MissingTemplateVariablesDialogProps = Omit<
16+
DialogProps,
17+
"onSubmit"
18+
> & {
19+
onClose: () => void
20+
onSubmit: (values: VariableValue[]) => void
21+
missingVariables?: TemplateVersionVariable[]
22+
}
23+
24+
export const MissingTemplateVariablesDialog: FC<
25+
MissingTemplateVariablesDialogProps
26+
> = ({ missingVariables, onSubmit, ...dialogProps }) => {
27+
const styles = useStyles()
28+
const [variableValues, setVariableValues] = useState<VariableValue[]>([])
29+
30+
// Pre-fill the form with the default values when missing variables are loaded
31+
useEffect(() => {
32+
if (!missingVariables) {
33+
return
34+
}
35+
setVariableValues(
36+
missingVariables.map((v) => ({ name: v.name, value: v.value })),
37+
)
38+
}, [missingVariables])
39+
40+
return (
41+
<Dialog
42+
{...dialogProps}
43+
scroll="body"
44+
aria-labelledby="update-build-parameters-title"
45+
maxWidth="xs"
46+
data-testid="dialog"
47+
>
48+
<DialogTitle
49+
id="update-build-parameters-title"
50+
classes={{ root: styles.title }}
51+
>
52+
Template variables
53+
</DialogTitle>
54+
<DialogContent className={styles.content}>
55+
<DialogContentText className={styles.info}>
56+
There are a few missing template variable values. Please fill them in.
57+
</DialogContentText>
58+
<VerticalForm
59+
className={styles.form}
60+
id="updateVariables"
61+
onSubmit={(e) => {
62+
e.preventDefault()
63+
onSubmit(variableValues)
64+
}}
65+
>
66+
{missingVariables ? (
67+
<FormFields>
68+
{missingVariables.map((variable, index) => {
69+
return (
70+
<VariableInput
71+
defaultValue={variable.value}
72+
variable={variable}
73+
key={variable.name}
74+
onChange={async (value) => {
75+
setVariableValues((prev) => {
76+
prev[index] = {
77+
name: variable.name,
78+
value,
79+
}
80+
return [...prev]
81+
})
82+
}}
83+
/>
84+
)
85+
})}
86+
</FormFields>
87+
) : (
88+
<Loader />
89+
)}
90+
</VerticalForm>
91+
</DialogContent>
92+
<DialogActions disableSpacing className={styles.dialogActions}>
93+
<Button color="primary" fullWidth type="submit" form="updateVariables">
94+
Submit
95+
</Button>
96+
<Button
97+
fullWidth
98+
type="button"
99+
variant="outlined"
100+
onClick={dialogProps.onClose}
101+
>
102+
Cancel
103+
</Button>
104+
</DialogActions>
105+
</Dialog>
106+
)
107+
}
108+
109+
const useStyles = makeStyles((theme) => ({
110+
title: {
111+
padding: theme.spacing(3, 5),
112+
113+
"& h2": {
114+
fontSize: theme.spacing(2.5),
115+
fontWeight: 400,
116+
},
117+
},
118+
119+
content: {
120+
padding: theme.spacing(0, 5, 0, 5),
121+
},
122+
123+
info: {
124+
margin: 0,
125+
},
126+
127+
form: {
128+
paddingTop: theme.spacing(4),
129+
},
130+
131+
infoTitle: {
132+
fontSize: theme.spacing(2),
133+
fontWeight: 600,
134+
display: "flex",
135+
alignItems: "center",
136+
gap: theme.spacing(1),
137+
},
138+
139+
formFooter: {
140+
flexDirection: "column",
141+
},
142+
143+
dialogActions: {
144+
padding: theme.spacing(5),
145+
flexDirection: "column",
146+
gap: theme.spacing(1),
147+
},
148+
}))

‎site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx

+31-15
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ import {
99
ProvisionerJobLog,
1010
Template,
1111
TemplateVersion,
12+
TemplateVersionVariable,
13+
VariableValue,
1214
WorkspaceResource,
1315
} from "api/typesGenerated"
16+
import { AlertBanner } from "components/AlertBanner/AlertBanner"
1417
import { Avatar } from "components/Avatar/Avatar"
1518
import { AvatarData } from "components/AvatarData/AvatarData"
1619
import { bannerHeight } from "components/DeploymentBanner/DeploymentBannerView"
@@ -36,6 +39,7 @@ import {
3639
RenameFileDialog,
3740
} from "./FileDialog"
3841
import { FileTreeView } from "./FileTreeView"
42+
import { MissingTemplateVariablesDialog } from "./MissingTemplateVariablesDialog"
3943
import { MonacoEditor } from "./MonacoEditor"
4044
import { PublishTemplateVersionDialog } from "./PublishTemplateVersionDialog"
4145
import {
@@ -58,7 +62,11 @@ export interface TemplateVersionEditorProps {
5862
onCancelPublish: () => void
5963
publishingError: unknown
6064
isAskingPublishParameters: boolean
65+
isPromptingMissingVariables: boolean
6166
isPublishing: boolean
67+
missingVariables?: TemplateVersionVariable[]
68+
onSubmitMissingVariableValues: (values: VariableValue[]) => void
69+
onCancelSubmitMissingVariableValues: () => void
6270
}
6371

6472
const topbarHeight = 80
@@ -91,6 +99,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
9199
isPublishing,
92100
buildLogs,
93101
resources,
102+
isPromptingMissingVariables,
103+
missingVariables,
104+
onSubmitMissingVariableValues,
105+
onCancelSubmitMissingVariableValues,
94106
}) => {
95107
const [selectedTab, setSelectedTab] = useState(() => {
96108
// If resources are provided, show them by default!
@@ -143,7 +155,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
143155
return
144156
}
145157
if (
146-
previousVersion.current.job.status === "running" &&
158+
["running", "pending"].includes(previousVersion.current.job.status) &&
147159
templateVersion.job.status === "succeeded"
148160
) {
149161
setSelectedTab(1)
@@ -363,22 +375,24 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
363375
selectedTab === 0 ? "" : "hidden"
364376
}`}
365377
>
366-
{buildLogs && (
378+
{templateVersion.job.error && (
379+
<AlertBanner
380+
severity="error"
381+
text={templateVersion.job.error}
382+
/>
383+
)}
384+
385+
{buildLogs && buildLogs.length > 0 && (
367386
<WorkspaceBuildLogs
368387
templateEditorPane
369388
hideTimestamps
370389
logs={buildLogs}
371390
/>
372391
)}
373-
{templateVersion.job.error && (
374-
<div className={styles.buildLogError}>
375-
{templateVersion.job.error}
376-
</div>
377-
)}
378392
</div>
379393

380394
<div
381-
className={`${styles.panel} ${styles.resources} ${
395+
className={`${styles.panel} ${
382396
selectedTab === 1 ? "" : "hidden"
383397
}`}
384398
>
@@ -410,6 +424,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
410424
isPublishing={isPublishing}
411425
defaultName={templateVersion.name}
412426
/>
427+
428+
<MissingTemplateVariablesDialog
429+
open={isPromptingMissingVariables}
430+
onClose={onCancelSubmitMissingVariableValues}
431+
onSubmit={onSubmitMissingVariableValues}
432+
missingVariables={missingVariables}
433+
/>
413434
</>
414435
)
415436
}
@@ -570,13 +591,8 @@ const useStyles = makeStyles<
570591
},
571592
buildLogs: {
572593
display: "flex",
573-
flexDirection: "column-reverse",
594+
flexDirection: "column",
574595
overflowY: "auto",
575-
},
576-
buildLogError: {
577-
whiteSpace: "pre-wrap",
578-
},
579-
resources: {
580-
// padding: 16,
596+
gap: theme.spacing(1),
581597
},
582598
}))

‎site/src/pages/CreateTemplatePage/VariableInput.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ const VariableField: React.FC<VariableInputProps> = ({
9090

9191
return (
9292
<TextField
93+
autoComplete="off"
9394
id={variable.name}
9495
size="small"
9596
disabled={disabled}

‎site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,19 @@ export const TemplateVersionEditorPage: FC = () => {
8787
}
8888
resources={editorState.context.resources}
8989
buildLogs={editorState.context.buildLogs}
90+
isPromptingMissingVariables={editorState.matches("promptVariables")}
91+
missingVariables={editorState.context.missingVariables}
92+
onSubmitMissingVariableValues={(values) => {
93+
sendEvent({
94+
type: "SET_MISSING_VARIABLE_VALUES",
95+
values,
96+
})
97+
}}
98+
onCancelSubmitMissingVariableValues={() => {
99+
sendEvent({
100+
type: "CANCEL_MISSING_VARIABLE_VALUES",
101+
})
102+
}}
90103
/>
91104
)}
92105
</>

0 commit comments

Comments
 (0)