Skip to content

feat: Support booleans for parameters input #3437

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 10, 2022
Merged

feat: Support booleans for parameters input #3437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7404567
feat: Support booleans for parameters input
BrunoQuaresma Aug 9, 2022
09d2a0f
Update site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.sto…
BrunoQuaresma Aug 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions site/src/components/ParameterInput/ParameterInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,16 @@ Basic.args = {
}),
}

export const Boolean = Template.bind({})
Boolean.args = {
schema: createParameterSchema({
name: "disable_docker",
description: "Disable Docker?",
validation_value_type: "bool",
default_source_value: "false",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have testing entities for these objects?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, we don't. Do you think it would be interesting to have?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know! I haven't worked extensively with these inputs. If you think it will be used in other stories, great. If not, no worries.

}),
}

export const Contains = Template.bind({})
Contains.args = {
schema: createParameterSchema({
Expand Down
74 changes: 58 additions & 16 deletions site/src/components/ParameterInput/ParameterInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,26 @@ import Radio from "@material-ui/core/Radio"
import RadioGroup from "@material-ui/core/RadioGroup"
import { makeStyles } from "@material-ui/core/styles"
import TextField from "@material-ui/core/TextField"
import { Stack } from "components/Stack/Stack"
import { FC } from "react"
import { ParameterSchema } from "../../api/typesGenerated"
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"

const isBoolean = (schema: ParameterSchema) => {
return schema.validation_value_type === "bool"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be nice to have an enum for this

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is true, but I would wait until we use it more often or with different values.

}

const ParameterLabel: React.FC<{ schema: ParameterSchema }> = ({ schema }) => {
const styles = useStyles()

return (
<label className={styles.label} htmlFor={schema.name}>
<strong>var.{schema.name}</strong>
{schema.description && <span className={styles.labelDescription}>{schema.description}</span>}
</label>
)
}

export interface ParameterInputProps {
disabled?: boolean
schema: ParameterSchema
Expand All @@ -15,23 +31,22 @@ export interface ParameterInputProps {

export const ParameterInput: FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
const styles = useStyles()

return (
<div className={styles.root}>
<div className={styles.title}>
<h2>var.{schema.name}</h2>
{schema.description && <span>{schema.description}</span>}
</div>
<Stack direction="column" className={styles.root}>
<ParameterLabel schema={schema} />
<div className={styles.input}>
<ParameterField disabled={disabled} onChange={onChange} schema={schema} />
</div>
</div>
</Stack>
)
}

const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
if (schema.validation_contains && schema.validation_contains.length > 0) {
return (
<RadioGroup
id={schema.name}
defaultValue={schema.default_source_value}
onChange={(event) => {
onChange(event.target.value)
Expand All @@ -50,11 +65,37 @@ const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, sch
)
}

if (isBoolean(schema)) {
return (
<RadioGroup
id={schema.name}
defaultValue={schema.default_source_value}
onChange={(event) => {
onChange(event.target.value)
}}
>
<FormControlLabel
disabled={disabled}
value="true"
control={<Radio color="primary" size="small" disableRipple />}
label="True"
/>
<FormControlLabel
disabled={disabled}
value="false"
control={<Radio color="primary" size="small" disableRipple />}
label="False"
/>
</RadioGroup>
)
}

// A text field can technically handle all cases!
// As other cases become more prominent (like filtering for numbers),
// we should break this out into more finely scoped input fields.
return (
<TextField
id={schema.name}
size="small"
disabled={disabled}
placeholder={schema.default_source_value}
Expand All @@ -67,25 +108,26 @@ const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, sch

const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "column",
fontFamily: MONOSPACE_FONT_FAMILY,
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
},
title: {
label: {
display: "flex",
flexDirection: "column",
"& h2": {
margin: 0,
},
"& span": {
paddingTop: theme.spacing(1),
},
fontSize: 21,
},
labelDescription: {
fontSize: 14,
marginTop: theme.spacing(1),
},
input: {
marginTop: theme.spacing(2),
display: "flex",
flexDirection: "column",
},
checkbox: {
display: "flex",
alignItems: "center",
gap: theme.spacing(1),
},
}))
12 changes: 12 additions & 0 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,18 @@ Parameters.args = {
description: "How large should you instance be?",
validation_contains: ["Small", "Medium", "Big"],
}),
createParameterSchema({
name: "instance_size",
default_source_value: "Big",
description: "How large should your instance be?",
validation_contains: ["Small", "Medium", "Big"],
}),
createParameterSchema({
name: "disable_docker",
description: "Disable Docker?",
validation_value_type: "bool",
default_source_value: "false",
}),
],
createWorkspaceErrors: {},
}
Expand Down