Add ListFilterMulti component (#843)

* Add ListFilterMulti component that supports setting array values
* Fixes to ListFilter tests to use userEvent instead of fireEvent
* Fixes to ListFilter so that it uses the mapper to generate the Select value, instead of iterating through the mapper array

Author: adhityamamallan

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

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { userEvent, render, screen } from '@/test-utils/rtl';
+
+import ListFilterMulti from '../list-filter-multi';
+
+const MOCK_LIST_FILTER_LABELS = {
+  opt1: 'Option 1',
+  opt2: 'Option 2',
+  opt3: 'Option 3',
+};
+
+type MockListFilterOption = keyof typeof MOCK_LIST_FILTER_LABELS;
+
+describe(ListFilterMulti.name, () => {
+  it('renders without errors', () => {
+    setup({});
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByText('Mock label')).toBeInTheDocument();
+    expect(screen.getByText('Mock placeholder')).toBeInTheDocument();
+  });
+
+  it('displays all the options in the select component', async () => {
+    const { user } = setup({});
+
+    const selectFilter = screen.getByRole('combobox');
+    await user.click(selectFilter);
+
+    Object.entries(MOCK_LIST_FILTER_LABELS).forEach(([_, value]) =>
+      expect(screen.getByText(value)).toBeInTheDocument()
+    );
+  });
+
+  it('calls the setQueryParams function when an option is selected', async () => {
+    const { user, mockOnChangeValues } = setup({});
+
+    const selectFilter = screen.getByRole('combobox');
+    await user.click(selectFilter);
+
+    const option1 = screen.getByText('Option 1');
+    await user.click(option1);
+
+    expect(mockOnChangeValues).toHaveBeenCalledWith(['opt1']);
+
+    await user.click(selectFilter);
+
+    const option2 = screen.getByText('Option 2');
+    await user.click(option2);
+
+    expect(mockOnChangeValues).toHaveBeenCalledWith(['opt2']);
+  });
+
+  it('calls the setQueryParams function when the filter is cleared', async () => {
+    const { user, mockOnChangeValues } = setup({
+      override: ['opt2'],
+    });
+
+    const clearButton = screen.getByLabelText('Clear all');
+    await user.click(clearButton);
+
+    expect(mockOnChangeValues).toHaveBeenCalledWith(undefined);
+  });
+});
+
+function setup({ override }: { override?: Array<MockListFilterOption> }) {
+  const mockOnChangeValues = jest.fn();
+  const user = userEvent.setup();
+  render(
+    <ListFilterMulti
+      label="Mock label"
+      placeholder="Mock placeholder"
+      values={override ?? undefined}
+      onChangeValues={mockOnChangeValues}
+      labelMap={MOCK_LIST_FILTER_LABELS}
+    />
+  );
+
+  return { user, mockOnChangeValues };
+}

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

@@ -0,0 +1,18 @@
+import { type Theme } from 'baseui';
+import type { FormControlOverrides } from 'baseui/form-control/types';
+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,
+};

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

@@ -0,0 +1,43 @@
+'use client';
+import React from 'react';
+
+import { FormControl } from 'baseui/form-control';
+import { Select, SIZE } from 'baseui/select';
+
+import getOptionsFromLabelMap from '../list-filter/helpers/get-options-from-label-map';
+
+import { overrides } from './list-filter-multi.styles';
+import { type Props } from './list-filter-multi.types';
+
+export default function ListFilterMulti<T extends string>({
+  values,
+  onChangeValues,
+  labelMap,
+  label,
+  placeholder,
+}: Props<T>) {
+  const options = getOptionsFromLabelMap(labelMap);
+  const optionsValues = values?.map((value) => ({
+    id: value,
+    label: labelMap[value],
+  }));
+
+  return (
+    <FormControl label={label} overrides={overrides.selectFormControl}>
+      <Select
+        multi
+        size={SIZE.compact}
+        value={optionsValues}
+        options={options}
+        onChange={(params) =>
+          onChangeValues(
+            params.value.length > 0
+              ? params.value.map((v) => v.id as T)
+              : undefined
+          )
+        }
+        placeholder={placeholder}
+      />
+    </FormControl>
+  );
+}

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

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

src/components/list-filter/__tests__/list-filter.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render, screen, fireEvent, act } from '@/test-utils/rtl';
+import { render, screen, userEvent } from '@/test-utils/rtl';
 
 import ListFilter from '../list-filter';
 
@@ -20,44 +20,45 @@ describe(ListFilter.name, () => {
     expect(screen.getByText('Mock placeholder')).toBeInTheDocument();
   });
 
-  it('displays all the options in the select component', () => {
-    setup({});
+  it('displays all the options in the select component', async () => {
+    const { user } = setup({});
+
     const selectFilter = screen.getByRole('combobox');
-    act(() => {
-      fireEvent.click(selectFilter);
-    });
+    await user.click(selectFilter);
+
     Object.entries(MOCK_LIST_FILTER_LABELS).forEach(([_, value]) =>
       expect(screen.getByText(value)).toBeInTheDocument()
     );
   });
 
-  it('calls the setQueryParams function when an option is selected', () => {
-    const { mockOnChangeValue } = setup({});
+  it('calls the setQueryParams function when an option is selected', async () => {
+    const { user, mockOnChangeValue } = setup({});
+
     const selectFilter = screen.getByRole('combobox');
-    act(() => {
-      fireEvent.click(selectFilter);
-    });
+    await user.click(selectFilter);
+
     const option = screen.getByText('Option 1');
-    act(() => {
-      fireEvent.click(option);
-    });
+    await user.click(option);
+
     expect(mockOnChangeValue).toHaveBeenCalledWith('opt1');
   });
 
-  it('calls the setQueryParams function when the filter is cleared', () => {
-    const { mockOnChangeValue } = setup({
+  it('calls the setQueryParams function when the filter is cleared', async () => {
+    const { user, mockOnChangeValue } = setup({
       override: 'opt2',
     });
+
     const clearButton = screen.getByLabelText('Clear value');
-    act(() => {
-      fireEvent.click(clearButton);
-    });
+    await user.click(clearButton);
+
     expect(mockOnChangeValue).toHaveBeenCalledWith(undefined);
   });
 });
 
 function setup({ override }: { override?: MockListFilterOption }) {
   const mockOnChangeValue = jest.fn();
+  const user = userEvent.setup();
+
   render(
     <ListFilter
       label="Mock label"
@@ -68,5 +69,5 @@ function setup({ override }: { override?: MockListFilterOption }) {
     />
   );
 
-  return { mockOnChangeValue };
+  return { user, mockOnChangeValue };
 }

src/components/list-filter/list-filter.tsx

@@ -16,7 +16,9 @@ export default function ListFilter<T extends string>({
   placeholder,
 }: Props<T>) {
   const options = getOptionsFromLabelMap(labelMap);
-  const optionValue = options.filter((option) => option.id === value);
+  const optionValue = value
+    ? [{ id: value, label: labelMap[value] }]
+    : undefined;
 
   return (
     <FormControl label={label} overrides={overrides.selectFormControl}>