fix: LSDV-5065: Set filter button active when dropdown is opened (#1368)

* fix: LSDV-5065: Set filter button active when dropdown is opened

* fix tests

* fix names

* collapse css

* add styles back to filter lenth in the filter button

Author: juliosgarbi

src/components/Filter/Filter.styl

@@ -7,15 +7,30 @@
     color #585858
     width 220px
 
+.filter-button
+  display flex
+  height 30px
+  padding 0 7px 0 0
+  cursor pointer
+  align-items center
+  border-radius 4px
 
-.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
+  &:active
+  &_active
+    background rgba(65, 60, 74, 0.08)
+
+  &__icon
+    align-items center
+    display flex
+
+  &__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

@@ -17,6 +17,7 @@ export const Filter: FC<FilterInterface> = ({
   animated = true,
 }) => {
   const [filterList, setFilterList] = useState<FilterListInterface[]>([]);
+  const [active, setActive] = useState(false);
 
   useEffect(() => {
     onChange(FilterItems(filterData, filterList));
@@ -102,19 +103,24 @@ export const Filter: FC<FilterInterface> = ({
     );
   }, [filterList, renderFilterList, addNewFilterListItem]);
 
+  const onToggle = useCallback((isOpen: boolean) => {
+    setActive(isOpen);
+  }, []);
+
   return (
     <Dropdown.Trigger
       content={renderFilter}
       dataTestId={'dropdown'}
       animated={animated}
+      onToggle={onToggle}
     >
-      <Button data-cy={'filter-button'} type="text" style={{ padding: 0, whiteSpace: 'nowrap' }}>
+      <Block data-testid={'filter-button'} name={'filter-button'} mod={{ active }}>
         <Elem name={'icon'}>
           <IconFilter />
         </Elem>
         <Elem name={'text'}>Filter</Elem>
         {filterList.length > 0 && <Elem name={'filter-length'} data-testid={'filter-length'}>{filterList.length}</Elem>}
-      </Button>
+      </Block>
     </Dropdown.Trigger>
   );
 };

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

@@ -196,4 +196,27 @@ describe('Filter', () => {
 
     expect(filterLength.textContent).toBe('2');
   });
+
+  test('Filter button should be selected', () => {
+    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.getByTestId('filter-button');
+
+    fireEvent.click(FilterButton);
+
+    expect(FilterButton.classList.contains('dm-filter-button_active')).toBe(true);
+  });
 });

tests/functional/specs/outliner/filter.cy.ts

@@ -100,7 +100,7 @@ describe('Filter outliner scenario', () => {
       [FF_LSDV_3025]: true,
     });
 
-    cy.get('[data-cy="filter-button"]').should('be.visible');
+    cy.get('[data-testid="filter-button"]').should('be.visible');
   });
 
   it('Check if filter is filtering', () => {
@@ -113,7 +113,7 @@ describe('Filter outliner scenario', () => {
       [FF_LSDV_3025]: true,
     });
 
-    cy.get('[data-cy="filter-button"]').click();
+    cy.get('[data-testid="filter-button"]').click();
     cy.contains('Add Filter').click();
     cy.get('[data-testid="operation-dropdown"]').click();
     cy.contains('contains').click();
@@ -144,7 +144,7 @@ describe('Filter outliner scenario', () => {
       [FF_LSDV_3025]: true,
     });
 
-    cy.get('[data-cy="filter-button"]').click();
+    cy.get('[data-testid="filter-button"]').click();
     cy.contains('Add Filter').click();
     cy.get('[data-testid="operation-dropdown"]').click();
     cy.contains('contains').click();
@@ -162,7 +162,7 @@ describe('Filter outliner scenario', () => {
       [FF_LSDV_3025]: true,
     });
 
-    cy.get('[data-cy="filter-button"]').click();
+    cy.get('[data-testid="filter-button"]').click();
     cy.contains('Add Filter').click();
     cy.get('[data-testid="operation-dropdown"]').click();
     cy.contains('contains').click();
@@ -180,7 +180,7 @@ describe('Filter outliner scenario', () => {
       [FF_LSDV_3025]: true,
     });
 
-    cy.get('[data-cy="filter-button"]').click();
+    cy.get('[data-testid="filter-button"]').click();
     cy.contains('Add Filter').click();
     cy.get('[data-testid="operation-dropdown"]').click();
     cy.contains('contains').click();