Color the value source for a deployment value

Emyrk · Emyrk · commit e1a899795d12 · 2023-09-28T16:24:33.000-05:00
diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -58,21 +58,27 @@ export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
   return <span className={styles.optionValue}>{JSON.stringify(children)}</span>;
 };
 
-export const OptionConfig = (props: BoxProps) => {
+// OptionalConfig takes a source bool to indicate if the Option is the source of the configured value.
+export const OptionConfig = ({
+  source,
+  ...boxProps
+}: { source?: boolean } & BoxProps) => {
   return (
     <Box
-      {...props}
+      {...boxProps}
       sx={{
         fontSize: 13,
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontWeight: 600,
-        backgroundColor: (theme) => theme.palette.background.paperLight,
+        backgroundColor: (theme) =>
+          source ? "green" : 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,
+        border: (theme) =>
+          `1px solid ${source ? "lightgreen" : theme.palette.divider}`,
+        ...boxProps.sx,
       }}
     />
   );
diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -58,25 +58,25 @@ const OptionsTable: FC<{
                     }}
                   >
                     {option.flag && (
-                      <OptionConfig>
+                      <OptionConfig source={option.value_source === "flag"}>
                         <OptionConfigFlag>CLI</OptionConfigFlag>
                         --{option.flag}
                       </OptionConfig>
                     )}
                     {option.flag_shorthand && (
-                      <OptionConfig>
+                      <OptionConfig source={option.value_source === "flag"}>
                         <OptionConfigFlag>CLI</OptionConfigFlag>-
                         {option.flag_shorthand}
                       </OptionConfig>
                     )}
                     {option.env && (
-                      <OptionConfig>
+                      <OptionConfig source={option.value_source === "env"}>
                         <OptionConfigFlag>ENV</OptionConfigFlag>
                         {option.env}
                       </OptionConfig>
                     )}
                     {option.yaml && (
-                      <OptionConfig>
+                      <OptionConfig source={option.value_source === "yaml"}>
                         <OptionConfigFlag>YAML</OptionConfigFlag>
                         {option.yaml}
                       </OptionConfig>
