feat: show descriptions for parameter options (#10068)

site/src/components/RichParameterInput/RichParameterInput.stories.tsx

@@ -69,7 +69,7 @@ export const BooleanType: Story = {
   },
 };
 
-export const OptionsType: Story = {
+export const Options: Story = {
   args: {
     value: "first_option",
     id: "options_parameter",
@@ -81,19 +81,61 @@ export const OptionsType: Story = {
         {
           name: "First option",
           value: "first_option",
-          description: "This is option 1",
-          icon: "",
+          description: "",
+          icon: "/icon/fedora.svg",
         },
         {
           name: "Second option",
           value: "second_option",
-          description: "This is option 2",
+          description: "",
           icon: "/icon/database.svg",
         },
         {
           name: "Third option",
           value: "third_option",
-          description: "This is option 3",
+          description: "",
+          icon: "/icon/aws.png",
+        },
+      ],
+    }),
+  },
+};
+
+export const OptionsWithDescriptions: 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: "This is a short description.",
+          icon: "/icon/fedora.svg",
+        },
+        {
+          name: "Second option",
+          value: "second_option",
+          description:
+            "This description is a little bit longer, but still not very long.",
+          icon: "/icon/database.svg",
+        },
+        {
+          name: "Third option",
+          value: "third_option",
+          description: `
+In this description, we will explore the various ways in which this description
+is a big long boy. We'll discuss such things as, lots of words wow it's long, and
+boy howdy that's a number of sentences that this description contains. By the conclusion
+of this essay, I hope to reveal to you, the reader, that this description is just an
+absolute chonker. Just way longer than it actually needs to be. Absolutely massive.
+Very big.
+
+> Wow, that description is straight up large. –Some guy, probably
+`,
           icon: "/icon/aws.png",
         },
       ],
@@ -217,9 +259,16 @@ export const SmallBooleanType: Story = {
   },
 };
 
-export const SmallOptionsType: Story = {
+export const SmallOptions: Story = {
   args: {
-    ...OptionsType.args,
+    ...Options.args,
+    size: "small",
+  },
+};
+
+export const SmallOptionsWithDescriptions: Story = {
+  args: {
+    ...OptionsWithDescriptions.args,
     size: "small",
   },
 };

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -1,15 +1,16 @@
+import Box from "@mui/material/Box";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
-import Box from "@mui/material/Box";
-import { FC } from "react";
+import Tooltip from "@mui/material/Tooltip";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { type FC } from "react";
 import { TemplateVersionParameter } from "api/typesGenerated";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import { colors } from "theme/colors";
 import { MultiTextField } from "./MultiTextField";
-import { Interpolation, Theme } from "@emotion/react";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
   return parameter.type === "bool";
@@ -85,12 +86,8 @@ const styles = {
     height: "100%",
     objectFit: "contain",
   },
-  radioOption: (theme) => ({
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1.5),
-  }),
   optionIcon: {
+    pointerEvents: "none",
     maxHeight: 20,
     width: 20,
 
@@ -178,6 +175,9 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
   size,
   ...props
 }) => {
+  const theme = useTheme();
+  const small = size === "small";
+
   if (isBoolean(parameter)) {
     return (
       <RadioGroup
@@ -219,19 +219,46 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
             value={option.value}
             control={<Radio size="small" />}
             label={
-              <span css={styles.radioOption}>
+              <Stack direction="row" alignItems="center">
                 {option.icon && (
                   <img
                     css={styles.optionIcon}
-                    alt="Parameter icon"
                     src={option.icon}
-                    style={{
-                      pointerEvents: "none",
-                    }}
+                    alt="Parameter icon"
                   />
                 )}
-                {option.name}
-              </span>
+                {option.description ? (
+                  <Stack
+                    spacing={small ? 1 : 0}
+                    alignItems={small ? "center" : undefined}
+                    direction={small ? "row" : "column"}
+                    css={{
+                      padding: small ? undefined : `${theme.spacing(0.5)} 0`,
+                    }}
+                  >
+                    {small ? (
+                      <Tooltip
+                        title={
+                          <MemoizedMarkdown>
+                            {option.description}
+                          </MemoizedMarkdown>
+                        }
+                      >
+                        <Box>{option.name}</Box>
+                      </Tooltip>
+                    ) : (
+                      <>
+                        <span>{option.name}</span>
+                        <MemoizedMarkdown css={styles.labelCaption}>
+                          {option.description}
+                        </MemoizedMarkdown>
+                      </>
+                    )}
+                  </Stack>
+                ) : (
+                  option.name
+                )}
+              </Stack>
             }
           />
         ))}