feat: LSDV-3025-13: Add how many filter rules are applied (#1353)

Author: juliosgarbi

src/components/Filter/Filter.styl

@@ -5,4 +5,17 @@
     margin-bottom 10px
     font-size 14px
     color #585858
-    width 220px
+    width 220px
+
+
+.button__filter-length
+  font-size 11px
+  font-weight 500
+  text-align center
+  color #030852
+  width 15px
+  height 20px
+  line-height 21px
+  border-radius 2px
+  background #d6e4ff
+  margin-left 3px

src/components/Filter/Filter.tsx

@@ -112,6 +112,7 @@ export const Filter: FC<FilterInterface> = ({
           <IconFilter />
         </Elem>
         <Elem name={'text'}>Filter</Elem>
+        {filterList.length > 0 && <Elem name={'filter-length'} data-testid={'filter-length'}>{filterList.length}</Elem>}
       </Button>
     </Dropdown.Trigger>
   );

src/components/Filter/FilterInterfaces.tsx

@@ -14,7 +14,7 @@ export interface FilterListInterface {
   operation?: string | string[] | undefined;
   value?: any;
   path?: string;
-  logic?: Logic;
+  logic?: 'and' | 'or';
 }
 
 export interface AvailableFiltersInterface {

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

@@ -124,4 +124,36 @@ describe('Filter', () => {
 
     expect(filteredContent).toStrictEqual([{ labelName: 'Car' }, { labelName: 'AirCar' }]) ;
   });
+
+  test('Should show filter length badge', () => {
+    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);
+
+    expect(screen.getByText('No filters applied')).toBeDefined();
+
+    const AddButton = filter.getByText('Add Filter');
+
+    fireEvent.click(AddButton);
+    fireEvent.click(AddButton);
+
+    const filterLength = filter.getByTestId('filter-length');
+
+    expect(filterLength.textContent).toBe('2');
+  });
 });