From 77b39d885fc03ace26c2b6876d189eebb6378676 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Sep 2023 17:58:34 +0000
Subject: [PATCH 1/4] feat(site): show CLI flags and env variables for the
 options

---
 site/src/api/api.ts                           |  1 +
 .../DeploySettingsLayout/Option.tsx           | 40 +++++++++++++++++++
 .../DeploySettingsLayout/OptionsTable.tsx     | 26 ++++++++++++
 3 files changed, 67 insertions(+)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 1f2bc6e815057..d52a68378516b 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -1014,6 +1014,7 @@ export interface DeploymentOption {
   readonly value: unknown;
   readonly hidden: boolean;
   readonly group?: DeploymentGroup;
+  readonly env?: string;
 }
 
 export type DeploymentConfig = {
diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
index be28bf24e73d1..427f8cf5632d2 100644
--- a/site/src/components/DeploySettingsLayout/Option.tsx
+++ b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -2,6 +2,7 @@ import { makeStyles } from "@mui/styles";
 import { PropsWithChildren, FC } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { DisabledBadge, EnabledBadge } from "./Badges";
+import Box, { BoxProps } from "@mui/material/Box";
 
 export const OptionName: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles();
@@ -57,6 +58,45 @@ export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
   return <span className={styles.optionValue}>{JSON.stringify(children)}</span>;
 };
 
+export const OptionConfig = (props: BoxProps) => {
+  return (
+    <Box
+      {...props}
+      sx={{
+        fontSize: 13,
+        fontFamily: MONOSPACE_FONT_FAMILY,
+        fontWeight: 600,
+        backgroundColor: (theme) => theme.palette.background.paperLight,
+        display: "inline-flex",
+        alignItems: "center",
+        borderRadius: 0.25,
+        padding: (theme) => theme.spacing(0, 1),
+        border: (theme) => `1px solid ${theme.palette.divider}`,
+        ...props.sx,
+      }}
+    />
+  );
+};
+
+export const OptionConfigFlag = (props: BoxProps) => {
+  return (
+    <Box
+      {...props}
+      sx={{
+        fontSize: 10,
+        fontWeight: 600,
+        margin: (theme) => theme.spacing(0, 0.75, 0, -0.5),
+        display: "block",
+        backgroundColor: (theme) => theme.palette.divider,
+        lineHeight: 1,
+        padding: (theme) => theme.spacing(0.25, 0.5),
+        borderRadius: 0.25,
+        ...props.sx,
+      }}
+    />
+  );
+};
+
 const useStyles = makeStyles((theme) => ({
   optionName: {
     display: "block",
diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
index 2c1676d477479..270fe261e290b 100644
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -6,6 +6,8 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import {
+  OptionConfig,
+  OptionConfigFlag,
   OptionDescription,
   OptionName,
   OptionValue,
@@ -13,6 +15,7 @@ import {
 import { FC } from "react";
 import { optionValue } from "./optionValue";
 import { DeploymentOption } from "api/api";
+import Box from "@mui/material/Box";
 
 const OptionsTable: FC<{
   options: DeploymentOption[];
@@ -46,6 +49,29 @@ const OptionsTable: FC<{
                 <TableCell>
                   <OptionName>{option.name}</OptionName>
                   <OptionDescription>{option.description}</OptionDescription>
+                  <Box
+                    sx={{
+                      marginTop: 3,
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: 1,
+                    }}
+                  >
+                    <OptionConfig>
+                      <OptionConfigFlag>CLI</OptionConfigFlag>
+                      --{option.flag}
+                    </OptionConfig>
+                    {option.flag_shorthand && (
+                      <OptionConfig>
+                        <OptionConfigFlag>CLI</OptionConfigFlag>
+                        --{option.flag_shorthand}
+                      </OptionConfig>
+                    )}
+                    <OptionConfig>
+                      <OptionConfigFlag>ENV</OptionConfigFlag>
+                      {option.env}
+                    </OptionConfig>
+                  </Box>
                 </TableCell>
 
                 <TableCell>

From 5e4ddca75123d98121df78367b15989cbf4ec08f Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Mon, 18 Sep 2023 18:56:55 -0300
Subject: [PATCH 2/4] Update
 site/src/components/DeploySettingsLayout/OptionsTable.tsx

Co-authored-by: Asher <ash@coder.com>
---
 site/src/components/DeploySettingsLayout/OptionsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
index 270fe261e290b..dc286739ad49d 100644
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -64,7 +64,7 @@ const OptionsTable: FC<{
                     {option.flag_shorthand && (
                       <OptionConfig>
                         <OptionConfigFlag>CLI</OptionConfigFlag>
-                        --{option.flag_shorthand}
+                        -{option.flag_shorthand}
                       </OptionConfig>
                     )}
                     <OptionConfig>

From 059bcd76b7114150f1d00ae5e9a0a1537fe3d63f Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Sep 2023 22:39:27 +0000
Subject: [PATCH 3/4] Fix format

---
 site/src/components/DeploySettingsLayout/OptionsTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
index dc286739ad49d..782ac4a271e9e 100644
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -63,8 +63,8 @@ const OptionsTable: FC<{
                     </OptionConfig>
                     {option.flag_shorthand && (
                       <OptionConfig>
-                        <OptionConfigFlag>CLI</OptionConfigFlag>
-                        -{option.flag_shorthand}
+                        <OptionConfigFlag>CLI</OptionConfigFlag>-
+                        {option.flag_shorthand}
                       </OptionConfig>
                     )}
                     <OptionConfig>

From 3c97cb9eb931438e033830b7f8ee3da2df80a310 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 19 Sep 2023 12:22:57 +0000
Subject: [PATCH 4/4] Check if options exists

---
 .../DeploySettingsLayout/OptionsTable.tsx     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
index 782ac4a271e9e..d2f1ec48c51d3 100644
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -57,20 +57,24 @@ const OptionsTable: FC<{
                       gap: 1,
                     }}
                   >
-                    <OptionConfig>
-                      <OptionConfigFlag>CLI</OptionConfigFlag>
-                      --{option.flag}
-                    </OptionConfig>
+                    {option.flag && (
+                      <OptionConfig>
+                        <OptionConfigFlag>CLI</OptionConfigFlag>
+                        --{option.flag}
+                      </OptionConfig>
+                    )}
                     {option.flag_shorthand && (
                       <OptionConfig>
                         <OptionConfigFlag>CLI</OptionConfigFlag>-
                         {option.flag_shorthand}
                       </OptionConfig>
                     )}
-                    <OptionConfig>
-                      <OptionConfigFlag>ENV</OptionConfigFlag>
-                      {option.env}
-                    </OptionConfig>
+                    {option.env && (
+                      <OptionConfig>
+                        <OptionConfigFlag>ENV</OptionConfigFlag>
+                        {option.env}
+                      </OptionConfig>
+                    )}
                   </Box>
                 </TableCell>