feat: LSDV-3025-11: Add functionality to filter with multiple rules (#1324)

* feat: LSDV-3025-11: Add functionality to filter with multiple rules

* add new tests

* set the real content to Filter

* create new tests

* set basic test

* change the logic to enum and convert to array

* remove unusable ref

* remove filter test

* add new unit tests

Author: juliosgarbi

src/common/Select/Select.tsx

@@ -20,6 +20,7 @@ interface SelectProps {
   renderMultipleSelected?: (value: string[]) => ReactNode;
   tabIndex?: number;
   onChange?: (newValue?: string | string[]) => void;
+  dataTestid?: string;
 }
 
 interface SelectComponent<T> extends FC<T> {
@@ -74,6 +75,7 @@ export const Select: SelectComponent<SelectProps> = ({
   onChange,
   variant,
   surface,
+  dataTestid,
   tabIndex = 0,
   placeholder = 'Select value',
 }) => {
@@ -196,7 +198,7 @@ export const Select: SelectComponent<SelectProps> = ({
             if (!visible) setFocused(null);
           }}
         >
-          <Elem name="selected">
+          <Elem name="selected" data-testid={dataTestid}>
             <Elem name="value">{selected ?? placeholder}</Elem>
             <Elem name="icon" />
           </Elem>

src/components/Filter/Filter.tsx

@@ -28,6 +28,7 @@ export const Filter: FC<FilterInterface> = ({
       ...filterList,
       {
         field: availableFilters[0]?.label ?? '',
+        logic: 'and',
         operation: '',
         value: '',
         path: '',
@@ -36,19 +37,20 @@ export const Filter: FC<FilterInterface> = ({
   }, [setFilterList, availableFilters]);
 
   const onChangeRow = useCallback(
-    (index: number, { field, operation, value, path }: Partial<FilterListInterface>) => {
+    (index: number, { field, operation, value, path, logic }: Partial<FilterListInterface>) => {
       setFilterList((oldList) => {
         const newList = [...oldList];
 
         newList[index] = {
           ...newList[index],
           field: field ?? newList[index].field,
           operation: operation ?? newList[index].operation,
+          logic: logic ?? newList[index].logic,
           value: value ?? newList[index].value,
           path: path ?? newList[index].path,
         };
 
-        onChange(FilterItems(filterData, newList[index]));
+        onChange(FilterItems(filterData, newList));
 
         return newList;
       });
@@ -66,12 +68,13 @@ export const Filter: FC<FilterInterface> = ({
   }, [setFilterList]);
 
   const renderFilterList = useMemo(() => {
-    return filterList.map(({ field, operation, value }, index) => (
+    return filterList.map(({ field, operation, logic, value }, index) => (
       <Block key={index} name="filter-item">
         <FilterRow
           index={index}
           availableFilters={availableFilters}
           field={field}
+          logic={logic}
           operation={operation}
           value={value}
           onDelete={onDeleteRow}
@@ -101,7 +104,7 @@ export const Filter: FC<FilterInterface> = ({
     <Dropdown.Trigger
       content={renderFilter}
     >
-      <Button type="text" style={{ padding: 0, whiteSpace: 'nowrap' }}>
+      <Button data-cy={'filter-button'} type="text" style={{ padding: 0, whiteSpace: 'nowrap' }}>
         <Elem name={'icon'}>
           <IconFilter />
         </Elem>

src/components/Filter/FilterDropdown.tsx

@@ -8,6 +8,7 @@ interface FilterDropdownInterface {
   placeholder?: string;
   defaultValue?: string | string[] | undefined;
   optionRender?:any;
+  dataTestid?: string;
   style?:any;
 }
 
@@ -32,13 +33,15 @@ export const FilterDropdown: FC<FilterDropdownInterface> = ({
   defaultValue,
   items,
   style,
+  dataTestid,
   value,
   onChange }) => {
 
   return (
     <Select
       placeholder={placeholder}
       defaultValue={defaultValue}
+      dataTestid={dataTestid}
       value={value}
       style={{
         fontSize: 12,

src/components/Filter/FilterInput.tsx

@@ -34,6 +34,7 @@ export const FilterInput: FC<FilterInputInterface> = ({
       value={value ?? ''}
       ref={inputRef}
       placeholder={placeholder}
+      data-testid={'filter-input'}
       onChange={onChangeHandler}
       style={style}
       {...(schema ?? {})}

src/components/Filter/FilterInterfaces.tsx

@@ -1,3 +1,8 @@
+export enum Logic {
+  and = 'And',
+  or = 'Or',
+}
+
 export interface FilterInterface {
   availableFilters: AvailableFiltersInterface[];
   onChange: (filter: any) => void;
@@ -9,10 +14,11 @@ export interface FilterListInterface {
   operation?: string | string[] | undefined;
   value?: any;
   path?: string;
+  logic?: Logic;
 }
 
 export interface AvailableFiltersInterface {
   label: string;
   path: string;
   type: 'Boolean' | 'Common' | 'Number' | 'String' | string;
-}
+}

src/components/Filter/FilterRow.styl

@@ -2,7 +2,11 @@
   display flex
   flex-direction row
   align-items center
-  margin-bottom 18px
+  margin-bottom 8px
+
+  &__title-row
+    width 60px
+    text-align right
 
   &__delete
     cursor pointer

src/components/Filter/FilterRow.tsx

@@ -8,7 +8,7 @@ import { Block, Elem } from '../../utils/bem';
 import { FilterDropdown } from './FilterDropdown';
 
 import './FilterRow.styl';
-import { FilterListInterface } from './FilterInterfaces';
+import { FilterListInterface, Logic } from './FilterInterfaces';
 import { isDefined } from '../../utils/utilities';
 import { IconDelete } from '../../assets/icons';
 
@@ -19,10 +19,13 @@ interface FilterRowInterface extends FilterListInterface {
   onDelete: (index: number) => void;
 }
 
+const logicItems = Object.entries(Logic).map(([key, label]) => ({ key, label }));
+
 export const FilterRow: FC<FilterRowInterface> = ({
   field,
   operation,
   value,
+  logic,
   availableFilters,
   index,
   onChange,
@@ -33,7 +36,7 @@ export const FilterRow: FC<FilterRowInterface> = ({
   const [_inputComponent, setInputComponent] = useState(null);
 
   useEffect(() => {
-    onChange(index, { field:availableFilters[_selectedField].label, path: availableFilters[_selectedField].path, operation:'', value:'' });
+    onChange(index, { field:availableFilters[_selectedField].label, path: availableFilters[_selectedField].path });
   }, [_selectedField]);
 
   useEffect(() => {
@@ -45,24 +48,38 @@ export const FilterRow: FC<FilterRowInterface> = ({
   }, [_selectedOperation, _selectedField]);
 
   return (
-    <Block name={'filter-row'}>
+    <Block name={'filter-row'} data-testid={'filter-row'}>
       <Elem name={'column'}>
-        Where
+        {index === 0 ? <Elem name={'title-row'}>Where</Elem>: (
+          <FilterDropdown
+            value={logic}
+            items={logicItems}
+            dataTestid={'logic-dropdown'}
+            style={{ width: '60px' }}
+            onChange={(value: any) => {
+              onChange(index, { logic:logicItems[value].key });
+            }}
+          />
+        )}
       </Elem>
       <Elem name={'column'}>
         <FilterDropdown
           value={field}
           items={availableFilters}
+          dataTestid={'field-dropdown'}
           style={{ width: '140px' }}
           onChange={(value: any) => {
             setSelectedField(value);
+
+            onChange(index, { value:'' });
           }}
         />
       </Elem>
       <Elem name={'column'}>
         <FilterDropdown
           value={operation}
           items={FilterInputs?.[availableFilters[_selectedField].type]}
+          dataTestid={'operation-dropdown'}
           style={{ width: '110px' }}
           onChange={(value: any) => {
             setSelectedOperation(value);
@@ -85,6 +102,7 @@ export const FilterRow: FC<FilterRowInterface> = ({
           onClick={() => {
             onDelete(index);
           }}
+          data-testid={`delete-row-${index}`}
           name={'delete'}>
           <IconDelete />
         </Elem>

src/components/Filter/__tests__/Filter.test.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Filter } from '../Filter';
+
+describe('Filter', () => {
+  const mockOnChange = jest.fn();
+  const filterData = [
+    {
+      'labelName': 'AirPlane',
+    },
+    {
+      'labelName': 'Car',
+    },
+    {
+      'labelName': 'AirCar',
+    },
+  ];
+
+  test('Validate if filter is rendering', () => {
+    const filter = render(<Filter
+      onChange={mockOnChange}
+      filterData={filterData}
+      availableFilters={[{
+        label: 'Annotation results',
+        path: 'labelName',
+        type: 'String',
+      },
+      {
+        label: 'Confidence score',
+        path: 'score',
+        type: 'Number',
+      }]}
+    />);
+
+    const whereText = filter.getByText('Filter');
+
+    expect(whereText).toBeDefined();
+  });
+
+  test('Should delete row when delete button is clicked', () => {
+    const filter = render(<Filter
+      onChange={mockOnChange}
+      filterData={filterData}
+      availableFilters={[{
+        label: 'Annotation results',
+        path: 'labelName',
+        type: 'String',
+      },
+      {
+        label: 'Confidence score',
+        path: 'score',
+        type: 'Number',
+      }]}
+    />);
+
+    const FilterButton = filter.getByText('Filter');
+
+    fireEvent.click(FilterButton);
+
+    const AddButton = filter.getByText('Add Filter');
+
+    fireEvent.click(AddButton);
+    fireEvent.click(AddButton);
+
+    const selectBox = filter.getByTestId('logic-dropdown');
+
+    expect(selectBox.textContent).toBe('And');
+
+    fireEvent.click(selectBox);
+    fireEvent.click(screen.getByText('Or'));
+
+    expect(selectBox.textContent).toBe('Or');
+
+    fireEvent.click(screen.getByTestId('delete-row-1'));
+
+    expect(filter.getAllByTestId('filter-row')).toHaveLength(1);
+  });
+
+  test('Should filter the content', () => {
+    let filteredContent: any;
+
+    const filter = render(<Filter
+      onChange={value => {
+        filteredContent = value;
+      }}
+      filterData={filterData}
+      availableFilters={[{
+        label: 'Annotation results',
+        path: 'labelName',
+        type: 'String',
+      },
+      {
+        label: 'Confidence score',
+        path: 'score',
+        type: 'Number',
+      }]}
+    />);
+
+    const FilterButton = filter.getByText('Filter');
+
+    fireEvent.click(FilterButton);
+
+    expect(screen.getByText('No filters applied')).toBeDefined();
+
+    const AddButton = filter.getByText('Add Filter');
+
+    fireEvent.click(AddButton);
+
+    const fieldDropdown = filter.getByTestId('field-dropdown');
+    const operationDropdown = filter.getByTestId('operation-dropdown');
+
+    fireEvent.click(operationDropdown);
+    fireEvent.click(screen.getByText('not contains'));
+
+    const filterInput = filter.getByTestId('filter-input');
+
+    expect(filterInput).toBeDefined();
+
+    expect(fieldDropdown.textContent).toBe('Annotation results');
+    expect(operationDropdown.textContent).toBe('not contains');
+
+    fireEvent.change(filterInput, { target: { value: 'Plane' } });
+
+
+    expect(filteredContent).toStrictEqual([{ labelName: 'Car' }, { labelName: 'AirCar' }]) ;
+  });
+});