diff --git a/site/src/components/ParameterInput/ParameterInput.stories.tsx b/site/src/components/ParameterInput/ParameterInput.stories.tsx index a5b79c5f85fd7..9cf1a0ad32a7f 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 638acdac7a35b..74cb5cc07efd6 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 0554389fd3924..bc2a890e3d50b 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: {}, } pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy