Fix sort and filters behavior (#1211)

front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx

@@ -13,6 +13,7 @@ type OwnProps = {
   isActive: boolean;
   children?: ReactNode;
   isUnfolded?: boolean;
+  icon?: ReactNode;
   onIsUnfoldedChange?: (newIsUnfolded: boolean) => void;
   resetState?: () => void;
   HotkeyScope: FiltersHotkeyScope;
@@ -26,12 +27,19 @@ const StyledDropdownButtonContainer = styled.div`
   z-index: 1;
 `;
 
+const StyledDropdownButtonIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
 type StyledDropdownButtonProps = {
   isUnfolded: boolean;
   isActive: boolean;
 };
 
 const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
+  align-items: center;
   background: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ isActive, theme, color }) =>
@@ -58,6 +66,7 @@ function DropdownButton({
   isUnfolded = false,
   onIsUnfoldedChange,
   HotkeyScope,
+  icon,
   color,
 }: OwnProps) {
   useScopedHotkeys(
@@ -86,6 +95,7 @@ function DropdownButton({
         aria-selected={isActive}
         color={color}
       >
+        {icon && <StyledDropdownButtonIcon>{icon}</StyledDropdownButtonIcon>}
         {label}
       </StyledDropdownButton>
       {isUnfolded && (

front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx

@@ -13,11 +13,13 @@ export function FilterDropdownButton({
   HotkeyScope,
   isPrimaryButton = false,
   color,
+  icon,
   label,
 }: {
   context: Context<string | null>;
   HotkeyScope: FiltersHotkeyScope;
   isPrimaryButton?: boolean;
+  icon?: React.ReactNode;
   color?: string;
   label?: string;
 }) {
@@ -35,6 +37,7 @@ export function FilterDropdownButton({
     <MultipleFiltersDropdownButton
       context={context}
       HotkeyScope={HotkeyScope}
+      icon={icon}
       isPrimaryButton={isPrimaryButton}
       color={color}
       label={label}

front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx

@@ -27,11 +27,13 @@ export function MultipleFiltersDropdownButton({
   HotkeyScope,
   isPrimaryButton = false,
   color,
+  icon,
   label,
 }: {
   context: Context<string | null>;
   HotkeyScope: FiltersHotkeyScope;
   isPrimaryButton?: boolean;
+  icon?: React.ReactNode;
   color?: string;
   label?: string;
 }) {
@@ -77,20 +79,26 @@ export function MultipleFiltersDropdownButton({
   const [isSortAndFilterBarOpen, setIsSortAndFilterBarOpen] =
     useRecoilScopedState(sortAndFilterBarScopedState, context);
 
-  function handleIsUnfoldedChange(newIsUnfolded: boolean) {
+  function handleIsUnfoldedChange(unfolded: boolean) {
-    if (newIsUnfolded && (!isFilterSelected || !isPrimaryButton)) {
+    if (unfolded && isPrimaryButton) {
+      setIsSortAndFilterBarOpen(!isSortAndFilterBarOpen);
+    }
+
+    if (
+      unfolded &&
+      ((isPrimaryButton && !isFilterSelected) || !isPrimaryButton)
+    ) {
       setHotkeyScope(HotkeyScope);
       setIsUnfolded(true);
-      setIsSortAndFilterBarOpen(true);
+      return;
-    } else if (newIsUnfolded && isFilterSelected && isPrimaryButton) {
-      setIsSortAndFilterBarOpen(!isSortAndFilterBarOpen);
-    } else {
-      if (filterDefinitionUsedInDropdown?.type === 'entity') {
-        setHotkeyScope(HotkeyScope);
-      }
-      setIsUnfolded(false);
-      resetState();
     }
+
+    if (filterDefinitionUsedInDropdown?.type === 'entity') {
+      setHotkeyScope(HotkeyScope);
+    }
+
+    setIsUnfolded(false);
+    resetState();
   }
 
   return (
@@ -98,6 +106,7 @@ export function MultipleFiltersDropdownButton({
       label={label ?? 'Filter'}
       isActive={isFilterSelected}
       isUnfolded={isUnfolded}
+      icon={icon}
       onIsUnfoldedChange={handleIsUnfoldedChange}
       HotkeyScope={HotkeyScope}
       color={color}

front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx

@@ -2,7 +2,11 @@ import { Context } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icon/index';
+import {
+  IconArrowNarrowDown,
+  IconArrowNarrowUp,
+  IconPlus,
+} from '@/ui/icon/index';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { useRemoveFilter } from '../hooks/useRemoveFilter';
@@ -48,7 +52,7 @@ const StyledChipcontainer = styled.div`
 const StyledCancelButton = styled.button`
   background-color: inherit;
   border: none;
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
   font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: auto;
@@ -162,8 +166,9 @@ function SortAndFilterBar<SortField>({
           <FilterDropdownButton
             context={context}
             HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-            color={theme.font.color.secondary}
+            color={theme.font.color.tertiary}
-            label={`+ Add filter`}
+            icon={<IconPlus size={theme.icon.size.md} />}
+            label={`Add filter`}
           />
         )}
       </StyledFilterContainer>

front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx

@@ -1,4 +1,4 @@
-import { Context, useCallback, useEffect, useState } from 'react';
+import { Context, useCallback, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import { IconChevronDown } from '@tabler/icons-react';
 
@@ -32,7 +32,6 @@ export function SortDropdownButton<SortField>({
   onSortSelect,
   HotkeyScope,
   context,
-  isPrimaryButton,
 }: OwnProps<SortField>) {
   const theme = useTheme();
 
@@ -53,8 +52,10 @@ export function SortDropdownButton<SortField>({
     setSelectedSortDirection('asc');
   }, []);
 
-  const [isSortAndFilterBarOpen, setIsSortAndFilterBarOpen] =
+  const [, setIsSortAndFilterBarOpen] = useRecoilScopedState(
-    useRecoilScopedState(sortAndFilterBarScopedState, context);
+    sortAndFilterBarScopedState,
+    context,
+  );
 
   function handleIsUnfoldedChange(newIsUnfolded: boolean) {
     if (newIsUnfolded) {
@@ -65,12 +66,6 @@ export function SortDropdownButton<SortField>({
     }
   }
 
-  useEffect(() => {
-    if (isSortAndFilterBarOpen && isPrimaryButton && isSortSelected) {
-      setIsUnfolded(true);
-    }
-  }, [isPrimaryButton, isSortAndFilterBarOpen, isSortSelected]);
-
   function handleAddSort(sort: SortType<SortField>) {
     setIsUnfolded(false);
     onSortItemSelect(sort);