From 82b8ff1561be2a2b271f0f1940b1f0e84ab4b3ac Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 8 Jan 2024 13:21:06 +0000
Subject: [PATCH 1/2] refactor(site): improve settings option

---
 .../DeploySettingsLayout/Option.tsx           | 93 ++++++++++---------
 .../DeploySettingsLayout/OptionsTable.tsx     |  8 +-
 2 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
index 6db042e7f0870..39944c6a0c8ef 100644
--- a/site/src/components/DeploySettingsLayout/Option.tsx
+++ b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -1,6 +1,12 @@
 import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import { css, useTheme } from "@emotion/react";
-import type { HTMLAttributes, PropsWithChildren, FC } from "react";
+import {
+  type HTMLAttributes,
+  type PropsWithChildren,
+  type FC,
+  createContext,
+  useContext,
+} from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { DisabledBadge, EnabledBadge } from "../Badges/Badges";
 
@@ -104,68 +110,65 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
   return <span css={styles.option}>{JSON.stringify(value)}</span>;
 };
 
-interface OptionConfigProps extends HTMLAttributes<HTMLDivElement> {
-  source?: boolean;
-}
+type OptionConfigContextValue = {
+  isSource?: boolean;
+};
+
+const OptionConfigContext = createContext<OptionConfigContextValue>({
+  isSource: false,
+});
+
+type OptionConfigProps = HTMLAttributes<HTMLDivElement> &
+  OptionConfigContextValue;
 
-// OptionConfig takes a source bool to indicate if the Option is the source of the configured value.
-export const OptionConfig: FC<OptionConfigProps> = ({
-  children,
-  source,
-  ...attrs
-}) => {
+// OptionConfig takes a isSource bool to indicate if the Option is the source of the configured value.
+export const OptionConfig = ({ isSource, ...attrs }: OptionConfigProps) => {
   const theme = useTheme();
-  const borderColor = source ? undefined : theme.palette.divider;
+  const borderColor = isSource
+    ? theme.experimental.roles.active.outline
+    : theme.palette.divider;
 
   return (
-    <div
-      {...attrs}
-      css={{
-        fontSize: 13,
-        fontFamily: MONOSPACE_FONT_FAMILY,
-        fontWeight: 600,
-        backgroundColor: source
-          ? theme.palette.primary.dark
-          : theme.palette.background.paper,
-        display: "inline-flex",
-        alignItems: "center",
-        borderRadius: 2,
-        padding: "0 8px",
-        border: `1px solid ${borderColor}`,
-      }}
-    >
-      {children}
-    </div>
+    <OptionConfigContext.Provider value={{ isSource }}>
+      <div
+        {...attrs}
+        css={{
+          fontSize: 13,
+          fontFamily: MONOSPACE_FONT_FAMILY,
+          fontWeight: 600,
+          backgroundColor: theme.palette.background.paper,
+          display: "inline-flex",
+          alignItems: "center",
+          borderRadius: 4,
+          padding: 6,
+          lineHeight: 1,
+          gap: 6,
+          border: `1px solid ${borderColor}`,
+        }}
+      />
+    </OptionConfigContext.Provider>
   );
 };
 
-interface OptionConfigFlagProps extends HTMLAttributes<HTMLDivElement> {
-  source?: boolean;
-}
-
-export const OptionConfigFlag: FC<OptionConfigFlagProps> = ({
-  children,
-  source,
-  ...attrs
-}) => {
+export const OptionConfigFlag = (props: HTMLAttributes<HTMLDivElement>) => {
   const theme = useTheme();
+  const { isSource } = useContext(OptionConfigContext);
 
   return (
     <div
-      {...attrs}
+      {...props}
       css={{
         fontSize: 10,
         fontWeight: 600,
-        margin: "0 6px 0 -4px",
         display: "block",
-        backgroundColor: source ? "rgba(0, 0, 0, 0.7)" : theme.palette.divider,
+        backgroundColor: isSource
+          ? theme.experimental.roles.active.fill
+          : theme.palette.divider,
         lineHeight: 1,
         padding: "2px 4px",
-        borderRadius: 2,
+        borderRadius: 1,
       }}
-    >
-      {children}
-    </div>
+    />
   );
 };
 
diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
index 57ae0729a39d7..3f66d27309eda 100644
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -70,25 +70,25 @@ const OptionsTable: FC<OptionsTableProps> = ({ options, additionalValues }) => {
                     }}
                   >
                     {option.flag && (
-                      <OptionConfig source={option.value_source === "flag"}>
+                      <OptionConfig isSource={option.value_source === "flag"}>
                         <OptionConfigFlag>CLI</OptionConfigFlag>
                         --{option.flag}
                       </OptionConfig>
                     )}
                     {option.flag_shorthand && (
-                      <OptionConfig source={option.value_source === "flag"}>
+                      <OptionConfig isSource={option.value_source === "flag"}>
                         <OptionConfigFlag>CLI</OptionConfigFlag>-
                         {option.flag_shorthand}
                       </OptionConfig>
                     )}
                     {option.env && (
-                      <OptionConfig source={option.value_source === "env"}>
+                      <OptionConfig isSource={option.value_source === "env"}>
                         <OptionConfigFlag>ENV</OptionConfigFlag>
                         {option.env}
                       </OptionConfig>
                     )}
                     {option.yaml && (
-                      <OptionConfig source={option.value_source === "yaml"}>
+                      <OptionConfig isSource={option.value_source === "yaml"}>
                         <OptionConfigFlag>YAML</OptionConfigFlag>
                         {option.yaml}
                       </OptionConfig>

From aa39124aab3841d95ea8c48e197feea274c1da43 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 8 Jan 2024 15:46:50 +0000
Subject: [PATCH 2/2] Use nested style instead of context

---
 .../DeploySettingsLayout/Option.tsx           | 46 ++++++++-----------
 1 file changed, 18 insertions(+), 28 deletions(-)

diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
index 39944c6a0c8ef..38c6bc7b7b89f 100644
--- a/site/src/components/DeploySettingsLayout/Option.tsx
+++ b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -1,12 +1,6 @@
 import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import { css, useTheme } from "@emotion/react";
-import {
-  type HTMLAttributes,
-  type PropsWithChildren,
-  type FC,
-  createContext,
-  useContext,
-} from "react";
+import { type HTMLAttributes, type PropsWithChildren, type FC } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { DisabledBadge, EnabledBadge } from "../Badges/Badges";
 
@@ -110,16 +104,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
   return <span css={styles.option}>{JSON.stringify(value)}</span>;
 };
 
-type OptionConfigContextValue = {
-  isSource?: boolean;
-};
-
-const OptionConfigContext = createContext<OptionConfigContextValue>({
-  isSource: false,
-});
-
-type OptionConfigProps = HTMLAttributes<HTMLDivElement> &
-  OptionConfigContextValue;
+type OptionConfigProps = HTMLAttributes<HTMLDivElement> & { isSource: boolean };
 
 // OptionConfig takes a isSource bool to indicate if the Option is the source of the configured value.
 export const OptionConfig = ({ isSource, ...attrs }: OptionConfigProps) => {
@@ -129,10 +114,10 @@ export const OptionConfig = ({ isSource, ...attrs }: OptionConfigProps) => {
     : theme.palette.divider;
 
   return (
-    <OptionConfigContext.Provider value={{ isSource }}>
-      <div
-        {...attrs}
-        css={{
+    <div
+      {...attrs}
+      css={[
+        {
           fontSize: 13,
           fontFamily: MONOSPACE_FONT_FAMILY,
           fontWeight: 600,
@@ -144,26 +129,31 @@ export const OptionConfig = ({ isSource, ...attrs }: OptionConfigProps) => {
           lineHeight: 1,
           gap: 6,
           border: `1px solid ${borderColor}`,
-        }}
-      />
-    </OptionConfigContext.Provider>
+        },
+        isSource
+          ? {
+              "& .OptionConfigFlag": {
+                background: theme.experimental.roles.active.fill,
+              },
+            }
+          : undefined,
+      ]}
+    />
   );
 };
 
 export const OptionConfigFlag = (props: HTMLAttributes<HTMLDivElement>) => {
   const theme = useTheme();
-  const { isSource } = useContext(OptionConfigContext);
 
   return (
     <div
       {...props}
+      className="OptionConfigFlag"
       css={{
         fontSize: 10,
         fontWeight: 600,
         display: "block",
-        backgroundColor: isSource
-          ? theme.experimental.roles.active.fill
-          : theme.palette.divider,
+        backgroundColor: theme.palette.divider,
         lineHeight: 1,
         padding: "2px 4px",
         borderRadius: 1,