Add an improved Multi Select Filter component to history page filters (cadence-workflow#1032)

* Create new MultiSelectFilter component with overridden selection menu, with checkboxes and Select All
* Use component in History Page filters (type & status)
* (misc) Fix styling in Page Filters so that non-minified filters share space evenly regardless of content
* (misc) Delete unused styles from page-filters.styles.ts

Author: adhityamamallan

src/components/multi-select-filter/__tests__/multi-select-filter.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { render, screen, userEvent, within } from '@/test-utils/rtl';
+
+import MultiSelectFilter from '../multi-select-filter';
+
+jest.mock('../multi-select-menu/multi-select-menu', () =>
+  jest.fn(() => (
+    <div data-testid="multi-select-menu">Multi Select Menu Placeholder</div>
+  ))
+);
+
+const MOCK_OPTIONS_LABEL_MAP = {
+  opt1: 'Option 1',
+  opt2: 'Option 2',
+  opt3: 'Option 3',
+} as const;
+
+type MockOption = keyof typeof MOCK_OPTIONS_LABEL_MAP;
+
+describe(MultiSelectFilter.name, () => {
+  it('renders without errors', () => {
+    setup({});
+
+    expect(screen.getByText('Mock Label')).toBeInTheDocument();
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('shows multi select menu when dropdown is opened', async () => {
+    const { user } = setup({});
+
+    const selectFilter = screen.getByRole('combobox');
+    await user.click(selectFilter);
+
+    expect(screen.getByTestId('multi-select-menu')).toBeInTheDocument();
+  });
+
+  it('displays selected values correctly', () => {
+    setup({
+      values: ['opt1', 'opt3'],
+    });
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(3);
+
+    expect(within(buttons[0]).getByText('Option 1')).toBeDefined();
+    expect(within(buttons[1]).getByText('Option 3')).toBeDefined();
+    expect(within(buttons[2]).getByText('Clear all')).toBeDefined();
+  });
+
+  it('calls onChangeValues when selected values are modified', async () => {
+    const { user, mockOnChangeValues } = setup({
+      values: ['opt1', 'opt3'],
+    });
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(3);
+
+    // Delete Option 1
+    await user.click(within(buttons[0]).getByText('Delete'));
+
+    expect(mockOnChangeValues).toHaveBeenCalledWith(['opt3']);
+  });
+
+  it('calls onChangeValues when Clear All is called', async () => {
+    const { user, mockOnChangeValues } = setup({
+      values: ['opt1', 'opt3'],
+    });
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(3);
+
+    await user.click(buttons[2]);
+
+    expect(mockOnChangeValues).toHaveBeenCalledWith([]);
+  });
+
+  it('handles empty values array', () => {
+    setup({
+      values: [],
+    });
+
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByText('Mock Placeholder')).toBeInTheDocument();
+  });
+});
+
+function setup({
+  label = 'Mock Label',
+  placeholder = 'Mock Placeholder',
+  values = [],
+  optionsLabelMap = MOCK_OPTIONS_LABEL_MAP,
+}: {
+  label?: string;
+  placeholder?: string;
+  values?: Array<MockOption>;
+  optionsLabelMap?: Record<MockOption, string>;
+} = {}) {
+  const mockOnChangeValues = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <MultiSelectFilter
+      label={label}
+      placeholder={placeholder}
+      values={values}
+      onChangeValues={mockOnChangeValues}
+      optionsLabelMap={optionsLabelMap}
+    />
+  );
+
+  return { user, mockOnChangeValues };
+}

src/components/multi-select-filter/multi-select-filter.styles.ts

@@ -0,0 +1,44 @@
+import { type Theme } from 'baseui';
+import type { FormControlOverrides } from 'baseui/form-control/types';
+import { type SelectOverrides } from 'baseui/select';
+import { type TagOverrides } from 'baseui/tag';
+import { type StyleObject } from 'styletron-react';
+
+export const overrides = {
+  selectFormControl: {
+    Label: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        ...$theme.typography.LabelXSmall,
+      }),
+    },
+    ControlContainer: {
+      style: (): StyleObject => ({
+        margin: '0px',
+      }),
+    },
+  } satisfies FormControlOverrides,
+  select: {
+    Tag: {
+      props: {
+        overrides: {
+          Root: {
+            style: ({ $theme }: { $theme: Theme }) => ({
+              color: $theme.colors.contentPrimary,
+              border: `1px solid ${$theme.colors.contentPrimary}`,
+              backgroundColor: $theme.colors.backgroundSecondary,
+              marginTop: $theme.sizing.scale0,
+              marginLeft: $theme.sizing.scale0,
+              marginRight: $theme.sizing.scale0,
+              marginBottom: $theme.sizing.scale0,
+            }),
+          },
+          Action: {
+            style: ({ $theme }: { $theme: Theme }) => ({
+              marginLeft: $theme.sizing.scale100,
+            }),
+          },
+        } satisfies TagOverrides,
+      },
+    },
+  } satisfies SelectOverrides,
+};

src/components/multi-select-filter/multi-select-filter.tsx

@@ -0,0 +1,76 @@
+import { useMemo, useRef } from 'react';
+
+import { FormControl } from 'baseui/form-control';
+import { mergeOverrides } from 'baseui/helpers/overrides';
+import {
+  type ImperativeMethods,
+  Select,
+  type SelectOverrides,
+} from 'baseui/select';
+
+import { overrides } from './multi-select-filter.styles';
+import { type Props } from './multi-select-filter.types';
+import MultiSelectMenu from './multi-select-menu/multi-select-menu';
+import {
+  type MultiSelectMenuOption,
+  type Props as MenuProps,
+} from './multi-select-menu/multi-select-menu.types';
+
+export default function MultiSelectFilter<T extends string>({
+  label,
+  placeholder,
+  values,
+  onChangeValues,
+  optionsLabelMap,
+}: Props<T>) {
+  const selectValue = useMemo(
+    () => values.map((v) => ({ id: v, label: optionsLabelMap[v] })),
+    [values, optionsLabelMap]
+  );
+
+  const options = useMemo(
+    () =>
+      Object.entries<string>(optionsLabelMap).map(
+        ([id, label]) =>
+          ({
+            id,
+            label,
+          }) as MultiSelectMenuOption<T>
+      ),
+    [optionsLabelMap]
+  );
+
+  const controlRef = useRef<ImperativeMethods>(null);
+
+  return (
+    <FormControl label={label} overrides={overrides.selectFormControl}>
+      <Select
+        controlRef={controlRef}
+        multi
+        size="compact"
+        value={selectValue}
+        options={options}
+        onChange={(params) =>
+          onChangeValues(params.value.map((v) => v.id as T))
+        }
+        overrides={mergeOverrides(
+          {
+            Dropdown: {
+              component: MultiSelectMenu,
+              props: {
+                values,
+                options,
+                onChangeValues,
+                onCloseMenu: () =>
+                  controlRef.current &&
+                  controlRef.current.setDropdownOpen(false),
+              } satisfies MenuProps<T>,
+            },
+          } satisfies SelectOverrides,
+          overrides.select
+        )}
+        placeholder={placeholder}
+      />
+    </FormControl>
+  );
+}

src/components/multi-select-filter/multi-select-filter.types.ts

@@ -0,0 +1,7 @@
+export type Props<T extends string> = {
+  label: string;
+  placeholder: string;
+  values: Array<T>;
+  onChangeValues: (newValues: Array<T>) => void;
+  optionsLabelMap: Record<T, string>;
+};