chore: color value_source for deployment values (#9922)

* chore: Return populated options vs a blank
* Strip secret values

site/src/components/DeploySettingsLayout/Option.tsx

@@ -3,6 +3,7 @@ import { PropsWithChildren, FC } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { DisabledBadge, EnabledBadge } from "./Badges";
 import Box, { BoxProps } from "@mui/material/Box";
+import { combineClasses } from "utils/combineClasses";
 
 export const OptionName: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles();
@@ -58,21 +59,34 @@ 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
+            ? theme.palette.primary.dark
+            : 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 ? theme.palette.primary.main : theme.palette.divider
+          }`,
+        "& .option-config-flag": {
+          backgroundColor: source ? "rgba(0, 0, 0, 0.7)" : undefined,
+        },
+        ...boxProps.sx,
       }}
     />
   );
@@ -82,6 +96,7 @@ export const OptionConfigFlag = (props: BoxProps) => {
   return (
     <Box
       {...props}
+      className={combineClasses([props.className, "option-config-flag"])}
       sx={{
         fontSize: 10,
         fontWeight: 600,

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>