feat: show descriptions for parameter options

aslilac · aslilac · commit 2b8cd5118e1e · 2023-10-04T22:51:27.000Z
diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
@@ -69,7 +69,39 @@ export const BooleanType: Story = {
   },
 };
 
-export const OptionsType: Story = {
+export const Options: Story = {
+  args: {
+    value: "first_option",
+    id: "options_parameter",
+    parameter: createTemplateVersionParameter({
+      name: "options_parameter",
+      type: "string",
+      description: "Parameter with options",
+      options: [
+        {
+          name: "First option",
+          value: "first_option",
+          description: "",
+          icon: "/icon/fedora.svg",
+        },
+        {
+          name: "Second option",
+          value: "second_option",
+          description: "",
+          icon: "/icon/database.svg",
+        },
+        {
+          name: "Third option",
+          value: "third_option",
+          description: "",
+          icon: "/icon/aws.png",
+        },
+      ],
+    }),
+  },
+};
+
+export const OptionsWithDescriptions: Story = {
   args: {
     value: "first_option",
     id: "options_parameter",
@@ -82,7 +114,7 @@ export const OptionsType: Story = {
           name: "First option",
           value: "first_option",
           description: "This is option 1",
-          icon: "",
+          icon: "/icon/fedora.svg",
         },
         {
           name: "Second option",
@@ -217,9 +249,16 @@ export const SmallBooleanType: Story = {
   },
 };
 
-export const SmallOptionsType: Story = {
+export const SmallOptions: Story = {
+  args: {
+    ...Options.args,
+    size: "small",
+  },
+};
+
+export const SmallOptionsWithDescriptions: Story = {
   args: {
-    ...OptionsType.args,
+    ...OptionsWithDescriptions.args,
     size: "small",
   },
 };
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -11,6 +11,8 @@ import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { MultiTextField } from "./MultiTextField";
 import Box from "@mui/material/Box";
 import { Theme } from "@mui/material/styles";
+import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
+import { useTheme } from "@emotion/react";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
   return parameter.type === "bool";
@@ -95,6 +97,11 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
   ...props
 }) => {
   const styles = useStyles();
+  const theme = useTheme();
+
+  const small = size === "small";
+
+  console.log(size);
 
   if (isBoolean(parameter)) {
     return (
@@ -137,19 +144,33 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
             value={option.value}
             control={<Radio size="small" />}
             label={
-              <span className={styles.radioOption}>
+              <Stack direction="row" alignItems="center">
                 {option.icon && (
                   <img
                     className={styles.optionIcon}
                     alt="Parameter icon"
                     src={option.icon}
-                    style={{
+                    css={{
                       pointerEvents: "none",
                     }}
                   />
                 )}
-                {option.name}
-              </span>
+                {option.description ? (
+                  <Stack
+                    spacing={small ? 1 : 0}
+                    alignItems={small ? "center" : undefined}
+                    css={{ padding: `${theme.spacing(0.5)} 0` }}
+                    direction={small ? "row" : "column"}
+                  >
+                    <span>{option.name}</span>
+                    <MemoizedMarkdown className={styles.labelCaption}>
+                      {option.description}
+                    </MemoizedMarkdown>
+                  </Stack>
+                ) : (
+                  option.name
+                )}
+              </Stack>
             }
           />
         ))}
@@ -281,11 +302,6 @@ const useStyles = makeStyles<Theme>((theme) => ({
     height: "100%",
     objectFit: "contain",
   },
-  radioOption: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1.5),
-  },
   optionIcon: {
     maxHeight: 20,
     width: 20,
