Fixed bugs in ViewBar filtering (#7608)

- Fixed CSS for SortOrFilter chips
- Fixed bug when refreshing with an actor source filter set

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerDestroyRecordsOptimisticEffect.ts

@@ -36,8 +36,7 @@ export const triggerDestroyRecordsOptimisticEffect = ({
 
         const rootQueryCachedObjectRecordConnection = rootQueryCachedResponse;
 
-        const recordIdsToDelete = recordsToDestroy.map(({ id }) => id);
+        const recordIdsToDestroy = recordsToDestroy.map(({ id }) => id);
-
         const cachedEdges = readField<RecordGqlRefEdge[]>(
           'edges',
           rootQueryCachedObjectRecordConnection,
@@ -52,7 +51,7 @@ export const triggerDestroyRecordsOptimisticEffect = ({
           cachedEdges?.filter((cachedEdge) => {
             const nodeId = readField<string>('id', cachedEdge.node);
 
-            return nodeId && !recordIdsToDelete.includes(nodeId);
+            return nodeId && !recordIdsToDestroy.includes(nodeId);
           }) || [];
 
         if (nextCachedEdges.length === cachedEdges?.length)
@@ -62,7 +61,7 @@ export const triggerDestroyRecordsOptimisticEffect = ({
           ...rootQueryCachedObjectRecordConnection,
           edges: nextCachedEdges,
           totalCount: isDefined(totalCount)
-            ? totalCount - recordIdsToDelete.length
+            ? totalCount - recordIdsToDestroy.length
             : undefined,
         };
       },

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx

@@ -1,7 +1,7 @@
-import { StyledInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
 import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState';
+import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
 import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState';
 import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
 import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
@@ -16,7 +16,7 @@ import { useState } from 'react';
 import { IconApps, IconChevronLeft, isDefined, useIcons } from 'twenty-ui';
 
 export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
-  const [searchText, setSearchText] = useState('');
+  const [searchText] = useState('');
 
   const { getIcon } = useIcons();
 
@@ -31,6 +31,11 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
     objectFilterDropdownFilterIsSelectedComponentState,
   );
 
+  const [, setObjectFilterDropdownIsSelectingCompositeField] =
+    useRecoilComponentStateV2(
+      objectFilterDropdownIsSelectingCompositeFieldComponentState,
+    );
+
   const [
     objectFilterDropdownSubMenuFieldType,
     setObjectFilterDropdownSubMenuFieldType,
@@ -62,6 +67,8 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
     setFilterDefinitionUsedInDropdown(null);
     setObjectFilterDropdownSubMenuFieldType(null);
     setObjectFilterDropdownFirstLevelFilterDefinition(null);
+    setObjectFilterDropdownIsSelectingCompositeField(false);
+    setObjectFilterDropdownFilterIsSelected(false);
   };
 
   if (
@@ -87,14 +94,14 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
       >
         {getFilterableFieldTypeLabel(objectFilterDropdownSubMenuFieldType)}
       </DropdownMenuHeader>
-      <StyledInput
+      {/* <StyledInput
         value={searchText}
         autoFocus
         placeholder="Search fields"
         onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
           setSearchText(event.target.value)
         }
-      />
+      /> */}
       <DropdownMenuItemsContainer>
         <MenuItem
           key={`select-filter-${-1}`}
@@ -105,7 +112,9 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
           LeftIcon={IconApps}
           text={`Any ${getFilterableFieldTypeLabel(objectFilterDropdownSubMenuFieldType)} field`}
         />
-        {options.map((subFieldName, index) => (
+        {/* TODO: fix this with a backend field on ViewFilter for composite field filter */}
+        {objectFilterDropdownFirstLevelFilterDefinition.type === 'ACTOR' &&
+          options.map((subFieldName, index) => (
             <MenuItem
               key={`select-filter-${index}`}
               testId={`select-filter-${index}`}

packages/twenty-front/src/modules/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter.ts

@@ -24,7 +24,6 @@ import {
   convertRatingToRatingValue,
 } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
-import { isActorSourceCompositeFilter } from '@/object-record/object-filter-dropdown/utils/isActorSourceCompositeFilter';
 import { applyEmptyFilters } from '@/object-record/record-filter/utils/applyEmptyFilters';
 import { resolveFilterValue } from '@/views/utils/view-filter-value/resolveFilterValue';
 import { endOfDay, roundToNearestMinutes, startOfDay } from 'date-fns';
@@ -677,12 +676,12 @@ export const turnObjectDropdownFilterIntoQueryFilter = (
         }
         break;
       }
-      case 'ACTOR':
+      // TODO: fix this with a new composite field in ViewFilter entity
-        if (isActorSourceCompositeFilter(rawUIFilter.definition)) {
+      case 'ACTOR': {
+        switch (rawUIFilter.operand) {
+          case ViewFilterOperand.Is: {
             const parsedRecordIds = JSON.parse(rawUIFilter.value) as string[];
 
-          switch (rawUIFilter.operand) {
-            case ViewFilterOperand.Is:
             objectRecordFilters.push({
               [correspondingField.name]: {
                 source: {
@@ -692,7 +691,10 @@ export const turnObjectDropdownFilterIntoQueryFilter = (
             });
 
             break;
-            case ViewFilterOperand.IsNot:
+          }
+          case ViewFilterOperand.IsNot: {
+            const parsedRecordIds = JSON.parse(rawUIFilter.value) as string[];
+
             if (parsedRecordIds.length > 0) {
               objectRecordFilters.push({
                 not: {
@@ -706,8 +708,6 @@ export const turnObjectDropdownFilterIntoQueryFilter = (
             }
             break;
           }
-        } else {
-          switch (rawUIFilter.operand) {
           case ViewFilterOperand.Contains:
             objectRecordFilters.push({
               or: [
@@ -745,13 +745,14 @@ export const turnObjectDropdownFilterIntoQueryFilter = (
               rawUIFilter.definition,
             );
             break;
+
           default:
             throw new Error(
               `Unknown operand ${rawUIFilter.operand} for ${rawUIFilter.definition.label} filter`,
             );
         }
-        }
         break;
+      }
       case 'EMAILS':
         switch (rawUIFilter.operand) {
           case ViewFilterOperand.Contains:

packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx

@@ -39,9 +39,11 @@ const StyledChip = styled.div<{ variant: SortOrFitlerChipVariant }>`
   flex-shrink: 0;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(0.5) + ' ' + theme.spacing(2)};
   user-select: none;
   white-space: nowrap;
+
+  max-height: ${({ theme }) => theme.spacing(4.5)};
 `;
 
 const StyledIcon = styled.div`

packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx

@@ -50,7 +50,6 @@ const StyledChipcontainer = styled.div`
   overflow: scroll;
   gap: ${({ theme }) => theme.spacing(1)};
   padding-top: ${({ theme }) => theme.spacing(1)};
-  padding-bottom: ${({ theme }) => theme.spacing(0.5)};
   z-index: 1;
 `;