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 = ({ children }) => { const styles = useStyles(); @@ -57,6 +58,45 @@ export const OptionValue: FC<{ children?: unknown }> = ({ children }) => { return {JSON.stringify(children)}; }; +export const OptionConfig = (props: BoxProps) => { + return ( + 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 ( + 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..d2f1ec48c51d3 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,33 @@ const OptionsTable: FC<{ {option.name} {option.description} + + {option.flag && ( + + CLI + --{option.flag} + + )} + {option.flag_shorthand && ( + + CLI- + {option.flag_shorthand} + + )} + {option.env && ( + + ENV + {option.env} + + )} +