frontend: Adding Chip Support for MultiSelect (#2742)

lyft · Jul 24, 2023 · d02032b · d02032b
1 parent 6546319
commit d02032b
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 16 deletions.
diff --git a/frontend/packages/core/src/Input/select.tsx b/frontend/packages/core/src/Input/select.tsx
@@ -13,6 +13,8 @@ import {
 } from "@mui/material";
 import { flatten } from "lodash";
 
+import { Chip } from "../chip";
+
 const StyledFormHelperText = styled(MuiFormHelperText)({
   alignItems: "center",
   display: "flex",
@@ -139,7 +141,7 @@ const StyledSelect = styled(BaseSelect)({
     marginTop: "5px",
     border: "none",
     boxShadow: "0px 5px 15px rgba(53, 72, 212, 0.2)",
-    maxHeight: "50vh",
+    maxHeight: "25vh",
   },
 
   ".MuiSelect-icon": {
@@ -240,7 +242,7 @@ const calculateDefaultOptions = (
   return options;
 };
 
-export interface SelectProps extends Pick<MuiSelectProps, "disabled" | "error"> {
+export interface SelectProps extends Pick<MuiSelectProps, "disabled" | "error" | "value"> {
   defaultOption?: number | string;
   helperText?: string;
   label?: string;
@@ -258,6 +260,7 @@ const Select = ({
   name,
   options,
   onChange,
+  value,
 }: SelectProps) => {
   // Flattens all options and sub grouped options for easier retrieval
   const flatOptions: BaseSelectOptions[] = flattenBaseSelectOptions(options);
@@ -277,13 +280,18 @@ const Select = ({
   }, []);
 
   const updateSelectedOption = event => {
-    const { value } = event.target;
+    const targetValue = event.target.value;
+
     // handle if selecting a header option
-    if (!value) {
+    if (!targetValue) {
       return;
     }
-    setSelectedIdx(flatOptions.findIndex(opt => opt?.value === value || opt?.label === value));
-    onChange && onChange(value);
+
+    setSelectedIdx(
+      flatOptions.findIndex(opt => opt?.value === targetValue || opt?.label === targetValue)
+    );
+
+    onChange && onChange(targetValue);
   };
 
   if (flatOptions.length === 0) {
@@ -296,7 +304,7 @@ const Select = ({
       {flatOptions.length && (
         <StyledSelect
           id={`${name}-select`}
-          value={flatOptions[selectedIdx]?.value || flatOptions[selectedIdx].label}
+          value={value ?? (flatOptions[selectedIdx]?.value || flatOptions[selectedIdx].label)}
           onChange={updateSelectedOption}
           label={label}
         >
@@ -319,6 +327,7 @@ export interface MultiSelectProps extends Pick<MuiSelectProps, "disabled" | "err
   label?: string;
   name: string;
   selectOptions: SelectOption[];
+  chipDisplay?: boolean;
   onChange?: (values: Array<string>) => void;
 }
 
@@ -330,6 +339,7 @@ const MultiSelect = ({
   label,
   name,
   selectOptions,
+  chipDisplay = false,
   onChange,
 }: MultiSelectProps) => {
   // Flattens all options and sub grouped options for easier retrieval
@@ -372,6 +382,15 @@ const MultiSelect = ({
           value={selectedValues()}
           onChange={updateSelectedOptions}
           label={label}
+          {...(chipDisplay && {
+            renderValue: (selected: string[]) => (
+              <div style={{ display: "flex", gap: "4px" }}>
+                {selected.sort().map(value => (
+                  <Chip variant="neutral" label={value} key={value} size="small" />
+                ))}
+              </div>
+            ),
+          })}
         >
           {selectOptions?.map(option => renderSelectItems(option))}
         </StyledSelect>

diff --git a/frontend/packages/core/src/chip.tsx b/frontend/packages/core/src/chip.tsx
@@ -14,7 +14,8 @@ const CHIP_VARIANTS = [
   "success",
 ] as const;
 
-export interface ChipProps extends Pick<MuiChipProps, "label" | "size" | "icon"> {
+export interface ChipProps
+  extends Pick<MuiChipProps, "clickable" | "onClick" | "label" | "size" | "icon"> {
   /**
    * Variant of chip.
    *

diff --git a/...d/workflows/redisexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap b/...d/workflows/redisexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`renders correctly 1`] = `
         Fault Type
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1vvefhl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-ltyw4k-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
       >
         <div
           aria-expanded="false"

diff --git a/...end/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap b/...end/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`renders correctly 1`] = `
               Fault Type
             </label>
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1vvefhl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-ltyw4k-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-expanded="false"

diff --git a/.../workflows/serverexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap b/.../workflows/serverexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap
@@ -134,7 +134,7 @@ exports[`renders correctly 1`] = `
         Fault Type
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1vvefhl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-ltyw4k-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
       >
         <div
           aria-expanded="false"
@@ -342,7 +342,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
         Upstream Cluster Type
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1vvefhl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-ltyw4k-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
       >
         <div
           aria-expanded="false"
@@ -442,7 +442,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
         Fault Type
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1vvefhl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-ltyw4k-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
       >
         <div
           aria-expanded="false"

diff --git a/...nd/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap b/...nd/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap
@@ -150,7 +150,7 @@ exports[`renders correctly 1`] = `
               Fault Type
             </label>
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1vvefhl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-ltyw4k-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-expanded="false"
@@ -377,7 +377,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
               Upstream Cluster Type
             </label>
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1vvefhl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-ltyw4k-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-expanded="false"
@@ -477,7 +477,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
               Fault Type
             </label>
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1vvefhl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-ltyw4k-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-expanded="false"