coder · BrunoQuaresma · Oct 18, 2022 · Oct 18, 2022 · Oct 18, 2022 · Oct 18, 2022
diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx
@@ -6,7 +6,7 @@ import React from "react"
 
 export const Header: React.FC<{
   title: string | JSX.Element
-  description: string | JSX.Element
+  description?: string | JSX.Element
   secondary?: boolean
   docsHref?: string
 }> = ({ title, description, docsHref, secondary }) => {
@@ -18,7 +18,9 @@ export const Header: React.FC<{
         <h1 className={`${styles.title} ${secondary ? "secondary" : ""}`}>
           {title}
         </h1>
-        <span className={styles.description}>{description}</span>
+        {description && (
+          <span className={styles.description}>{description}</span>
+        )}
       </div>
 
       {docsHref && (

diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React, { PropsWithChildren } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
+import { DisabledBadge, EnabledBadge } from "./Badges"
 
 export const OptionName: React.FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
@@ -14,27 +15,71 @@ export const OptionDescription: React.FC<PropsWithChildren> = ({
   return <span className={styles.optionDescription}>{children}</span>
 }
 
+const NotSet: React.FC = () => {
+  const styles = useStyles()
+
+  return <span className={styles.optionValue}>Not set</span>
+}
+
 export const OptionValue: React.FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
+
+  if (typeof children === "boolean") {
+    return children ? <EnabledBadge /> : <DisabledBadge />
+  }
+
+  if (Array.isArray(children)) {
+    if (children.length === 0) {
+      return <NotSet />
+    }
+
+    return (
+      <ul className={styles.optionValueList}>
+        {children.map((item) => (
+          <li key={item} className={styles.optionValue}>
+            {item}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+
+  if (children === "") {
+    return <NotSet />
+  }
+
   return <span className={styles.optionValue}>{children}</span>
 }
 
 const useStyles = makeStyles((theme) => ({
   optionName: {
     display: "block",
   },
+
   optionDescription: {
     display: "block",
     color: theme.palette.text.secondary,
     fontSize: 14,
     marginTop: theme.spacing(0.5),
   },
+
   optionValue: {
     fontSize: 14,
     fontFamily: MONOSPACE_FONT_FAMILY,
+    overflowWrap: "anywhere",
+    userSelect: "all",
 
     "& ul": {
       padding: theme.spacing(2),
     },
   },
+
+  optionValueList: {
+    margin: 0,
+    padding: 0,
+    listStylePosition: "inside",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5),
+  },
 }))
diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -0,0 +1,64 @@
+import { makeStyles } from "@material-ui/core/styles"
+import Table from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
+import TableHead from "@material-ui/core/TableHead"
+import TableRow from "@material-ui/core/TableRow"
+import { DeploymentFlags } from "api/typesGenerated"
+import {
+  OptionDescription,
+  OptionName,
+  OptionValue,
+} from "components/DeploySettingsLayout/Option"
+import React from "react"
+
+const OptionsTable: React.FC<{ options: Partial<DeploymentFlags> }> = ({
+  options,
+}) => {
+  const styles = useStyles()
+
+  return (
+    <TableContainer>
+      <Table className={styles.table}>
+        <TableHead>
+          <TableRow>
+            <TableCell width="50%">Option</TableCell>
+            <TableCell width="50%">Value</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Object.values(options).map((option) => {
+            return (
+              <TableRow key={option.flag}>
+                <TableCell>
+                  <OptionName>{option.name}</OptionName>
+                  <OptionDescription>{option.description}</OptionDescription>
+                </TableCell>
+
+                <TableCell>
+                  <OptionValue>{option.value}</OptionValue>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  table: {
+    "& td": {
+      paddingTop: theme.spacing(3),
+      paddingBottom: theme.spacing(3),
+    },
+
+    "& td:last-child, & th:last-child": {
+      paddingLeft: theme.spacing(4),
+    },
+  },
+}))
+
+export default OptionsTable