diff --git a/site/src/components/ParameterInput/ParameterInput.stories.tsx b/site/src/components/ParameterInput/ParameterInput.stories.tsx index a5b79c5f85..9cf1a0ad32 100644 --- a/site/src/components/ParameterInput/ParameterInput.stories.tsx +++ b/site/src/components/ParameterInput/ParameterInput.stories.tsx @@ -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", + }), +} + export const Contains = Template.bind({}) Contains.args = { schema: createParameterSchema({ diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx index 638acdac7a..74cb5cc07e 100644 --- a/site/src/components/ParameterInput/ParameterInput.tsx +++ b/site/src/components/ParameterInput/ParameterInput.tsx @@ -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" +} + +const ParameterLabel: React.FC<{ schema: ParameterSchema }> = ({ schema }) => { + const styles = useStyles() + + return ( + + ) +} + export interface ParameterInputProps { disabled?: boolean schema: ParameterSchema @@ -15,16 +31,14 @@ export interface ParameterInputProps { export const ParameterInput: FC = ({ disabled, onChange, schema }) => { const styles = useStyles() + return ( -
-
-

var.{schema.name}

- {schema.description && {schema.description}} -
+ +
-
+ ) } @@ -32,6 +46,7 @@ const ParameterField: React.FC = ({ disabled, onChange, sch if (schema.validation_contains && schema.validation_contains.length > 0) { return ( { onChange(event.target.value) @@ -50,11 +65,37 @@ const ParameterField: React.FC = ({ disabled, onChange, sch ) } + if (isBoolean(schema)) { + return ( + { + onChange(event.target.value) + }} + > + } + label="True" + /> + } + label="False" + /> + + ) + } + // 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 ( = ({ 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), + }, })) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx index 0554389fd3..bc2a890e3d 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx @@ -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: {}, }