From 7404567912e89e8163412d774e9abb6ba8a700e3 Mon Sep 17 00:00:00 2001
From: brunoquaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 9 Aug 2022 16:37:25 -0300
Subject: [PATCH 1/2] feat: Support booleans for parameters input

---
 .../ParameterInput/ParameterInput.stories.tsx | 10 +++
 .../ParameterInput/ParameterInput.tsx         | 74 +++++++++++++++----
 .../CreateWorkspacePageView.stories.tsx       | 12 +++
 3 files changed, 80 insertions(+), 16 deletions(-)

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 (
+    <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
@@ -15,16 +31,14 @@ 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>
   )
 }
 
@@ -32,6 +46,7 @@ const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, sch
   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)
@@ -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}
@@ -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),
+  },
 }))
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
index 0554389fd3924..901e6c60a2304 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 you instance be?",
+      validation_contains: ["Small", "Medium", "Big"],
+    }),
+    createParameterSchema({
+      name: "disable_docker",
+      description: "Disable Docker?",
+      validation_value_type: "bool",
+      default_source_value: "false",
+    }),
   ],
   createWorkspaceErrors: {},
 }

From 09d2a0f24cd106d55a4343a6ad38f0b96484ec04 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 9 Aug 2022 18:15:26 -0300
Subject: [PATCH 2/2] Update
 site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx

Co-authored-by: Kira Pilot <kira@coder.com>
---
 .../CreateWorkspacePage/CreateWorkspacePageView.stories.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
index 901e6c60a2304..bc2a890e3d50b 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -67,7 +67,7 @@ Parameters.args = {
     createParameterSchema({
       name: "instance_size",
       default_source_value: "Big",
-      description: "How large should you instance be?",
+      description: "How large should your instance be?",
       validation_contains: ["Small", "Medium", "Big"],
     }),
     createParameterSchema({

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>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.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3437.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3437.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3437.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/3437.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>