Feat: Add "All assignees" in Task team member dropdown (#1763)

* implemented all select option FilterDropdownEntitySearchSelect and enabled it for tasks page filter

* created new filter operand IsNotNull for make a select all qraphql query, added internal state for tracking isAllEntitySelected

* used filterCurrentlyEdited to track if isAllEntitySelected is selected

* fixed filter button icon SelectAll Icon

front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchSelect.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { EntitiesForMultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
 import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
@@ -12,6 +12,8 @@ import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/
 import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
 import { useViewBarContext } from '../hooks/useViewBarContext';
+import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState';
+import { FilterOperand } from '../types/FilterOperand';
 
 export const FilterDropdownEntitySearchSelect = ({
   entitiesForSelect,
@@ -20,6 +22,8 @@ export const FilterDropdownEntitySearchSelect = ({
 }) => {
   const { ViewBarRecoilScopeContext } = useViewBarContext();
 
+  const [isAllEntitySelected, setIsAllEntitySelected] = useState(false);
+
   const [filterDropdownSelectedEntityId, setFilterDropdownSelectedEntityId] =
     useRecoilScopedState(
       filterDropdownSelectedEntityIdScopedState,
@@ -52,6 +56,10 @@ export const FilterDropdownEntitySearchSelect = ({
       return;
     }
 
+    if (isAllEntitySelected) {
+      setIsAllEntitySelected(false);
+    }
+
     const clickedOnAlreadySelectedEntity =
       selectedEntity.id === filterDropdownSelectedEntityId;
 
@@ -72,11 +80,54 @@ export const FilterDropdownEntitySearchSelect = ({
     }
   };
 
+  const [filterDropdownSearchInput] = useRecoilScopedState(
+    filterDropdownSearchInputScopedState,
+    ViewBarRecoilScopeContext,
+  );
+
+  const isAllEntitySelectShown =
+    !!filterDefinitionUsedInDropdown?.selectAllLabel &&
+    !!filterDefinitionUsedInDropdown?.SelectAllIcon &&
+    (isAllEntitySelected ||
+      filterDefinitionUsedInDropdown?.selectAllLabel
+        .toLocaleLowerCase()
+        .includes(filterDropdownSearchInput.toLocaleLowerCase()));
+
+  const handleAllEntitySelectClick = () => {
+    if (
+      !filterDefinitionUsedInDropdown ||
+      !selectedOperandInDropdown ||
+      !filterDefinitionUsedInDropdown.selectAllLabel
+    ) {
+      return;
+    }
+    if (isAllEntitySelected) {
+      setIsAllEntitySelected(false);
+
+      removeFilter(filterDefinitionUsedInDropdown.key);
+    } else {
+      setIsAllEntitySelected(true);
+
+      setFilterDropdownSelectedEntityId(null);
+
+      upsertFilter({
+        displayValue: filterDefinitionUsedInDropdown.selectAllLabel,
+        key: filterDefinitionUsedInDropdown.key,
+        operand: FilterOperand.IsNotNull,
+        type: filterDefinitionUsedInDropdown.type,
+        value: '',
+      });
+    }
+  };
+
   useEffect(() => {
     if (!filterCurrentlyEdited) {
       setFilterDropdownSelectedEntityId(null);
     } else {
       setFilterDropdownSelectedEntityId(filterCurrentlyEdited.value);
+      setIsAllEntitySelected(
+        filterCurrentlyEdited.operand === FilterOperand.IsNotNull,
+      );
     }
   }, [
     filterCurrentlyEdited,
@@ -91,6 +142,11 @@ export const FilterDropdownEntitySearchSelect = ({
         selectedEntity={entitiesForSelect.selectedEntities[0]}
         loading={entitiesForSelect.loading}
         onEntitySelected={handleUserSelected}
+        SelectAllIcon={filterDefinitionUsedInDropdown?.SelectAllIcon}
+        selectAllLabel={filterDefinitionUsedInDropdown?.selectAllLabel}
+        isAllEntitySelected={isAllEntitySelected}
+        isAllEntitySelectShown={isAllEntitySelectShown}
+        onAllEntitySelected={handleAllEntitySelectClick}
       />
     </>
   );

front/src/modules/ui/view-bar/components/GenericEntityFilterChip.tsx

@@ -1,16 +1,19 @@
 import { EntityChip } from '@/ui/chip/components/EntityChip';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 import { Filter } from '../types/Filter';
 
 type OwnProps = {
   filter: Filter;
+  Icon?: IconComponent;
 };
 
-export const GenericEntityFilterChip = ({ filter }: OwnProps) => (
+export const GenericEntityFilterChip = ({ filter, Icon }: OwnProps) => (
   <EntityChip
     entityId={filter.value}
     name={filter.displayValue}
     avatarType="rounded"
     pictureUrl={filter.displayAvatarUrl}
+    LeftIcon={Icon}
   />
 );

front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx

@@ -17,6 +17,7 @@ import { useViewBarContext } from '../hooks/useViewBarContext';
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';
 import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState';
+import { FilterOperand } from '../types/FilterOperand';
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
 
 import { FilterDropdownEntitySearchInput } from './FilterDropdownEntitySearchInput';
@@ -100,7 +101,14 @@ export const SingleEntityFilterDropdownButton = ({
         onClick={() => handleIsUnfoldedChange(!isFilterDropdownUnfolded)}
       >
         {filters[0] ? (
-          <GenericEntityFilterChip filter={filters[0]} />
+          <GenericEntityFilterChip
+            filter={filters[0]}
+            Icon={
+              filters[0].operand === FilterOperand.IsNotNull
+                ? availableFilter.SelectAllIcon
+                : undefined
+            }
+          />
         ) : (
           'Filter'
         )}