feat(site): show CLI flags and env variables for the options (#9757)

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 = {

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",

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,33 @@ const OptionsTable: FC<{
                 <TableCell>
                   <OptionName>{option.name}</OptionName>
                   <OptionDescription>{option.description}</OptionDescription>
+                  <Box
+                    sx={{
+                      marginTop: 3,
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: 1,
+                    }}
+                  >
+                    {option.flag && (
+                      <OptionConfig>
+                        <OptionConfigFlag>CLI</OptionConfigFlag>
+                        --{option.flag}
+                      </OptionConfig>
+                    )}
+                    {option.flag_shorthand && (
+                      <OptionConfig>
+                        <OptionConfigFlag>CLI</OptionConfigFlag>-
+                        {option.flag_shorthand}
+                      </OptionConfig>
+                    )}
+                    {option.env && (
+                      <OptionConfig>
+                        <OptionConfigFlag>ENV</OptionConfigFlag>
+                        {option.env}
+                      </OptionConfig>
+                    )}
+                  </Box>
                 </TableCell>
 
                 <TableCell>