Merge branch 'main' into emotional-damage

coder · aslilac · Sep 29, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 28, 2023
commit f8f9ed2747256d6575bf7419f2bf07ba19cf1898
diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -5,7 +5,9 @@ import { useTheme } from "@mui/system";
 import { DisabledBadge, EnabledBadge } from "./Badges";
 import { css } from "@emotion/react";
 
-export const OptionName: FC<PropsWithChildren> = ({ children }) => {
+export const OptionName: FC<PropsWithChildren> = (props) => {
+  const { children } = props;
+
   return (
     <span
       css={{
@@ -17,8 +19,10 @@ export const OptionName: FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
+export const OptionDescription: FC<PropsWithChildren> = (props) => {
+  const { children } = props;
   const theme = useTheme();
+
   return (
     <span
       css={{
@@ -33,7 +37,12 @@ export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
+interface OptionValueProps {
+  children?: boolean | number | string | string[];
+}
+
+export const OptionValue: FC<OptionValueProps> = (props) => {
+  const { children } = props;
   const theme = useTheme();
 
   const optionStyles = css`
@@ -55,15 +64,15 @@ export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
     return <span css={optionStyles}>{children}</span>;
   }
 
+  if (!children || children.length < 1) {
+    return <span css={optionStyles}>Not set</span>;
+  }
+
   if (typeof children === "string") {
     return <span css={optionStyles}>{children}</span>;
   }
 
   if (Array.isArray(children)) {
-    if (children.length === 0) {
-      return <span css={optionStyles}>Not set</span>;
-    }
-
     return (
       <ul
         css={{
@@ -84,21 +93,24 @@ export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
     );
   }
 
-  if (children === "") {
-    return <span css={optionStyles}>Not set</span>;
-  }
-
   return <span css={optionStyles}>{JSON.stringify(children)}</span>;
 };
 
+interface OptionConfigProps extends BoxProps {
+  source?: boolean;
+}
+
 // 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) => {
+export const OptionConfig = (props: OptionConfigProps) => {
+  const { source, sx, ...attrs } = props;
+  const theme = useTheme();
+  const borderColor = source
+    ? theme.palette.primary.main
+    : theme.palette.divider;
+
   return (
     <Box
-      {...boxProps}
+      {...attrs}
       sx={{
         fontSize: 13,
         fontFamily: MONOSPACE_FONT_FAMILY,
@@ -111,35 +123,37 @@ export const OptionConfig = ({
         alignItems: "center",
         borderRadius: 0.25,
         padding: (theme) => theme.spacing(0, 1),
-        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,
+        border: `1px solid ${borderColor}`,
+        ...sx,
       }}
     />
   );
 };
 
-export const OptionConfigFlag = (props: BoxProps) => {
+interface OptionConfigFlagProps extends BoxProps {
+  source?: boolean;
+}
+
+export const OptionConfigFlag = (props: OptionConfigFlagProps) => {
+  const { children, source, sx, ...attrs } = props;
+
   return (
     <Box
-      {...props}
-      className={combineClasses([props.className, "option-config-flag"])}
+      {...attrs}
       sx={{
         fontSize: 10,
         fontWeight: 600,
         margin: (theme) => theme.spacing(0, 0.75, 0, -0.5),
         display: "block",
-        backgroundColor: (theme) => theme.palette.divider,
+        backgroundColor: (theme) =>
+          source ? "rgba(0, 0, 0, 0.7)" : theme.palette.divider,
         lineHeight: 1,
         padding: (theme) => theme.spacing(0.25, 0.5),
         borderRadius: 0.25,
-        ...props.sx,
+        ...sx,
       }}
-    />
+    >
+      {children}
+    </Box>
   );
 };