Refactor duplication of hard coded soft delete filter logic (#10058)

This PR adds a useCheckIsSoftDeleteFilter hook instead of the
undocumented in-place logic to retrieve the soft delete filter.

Also took the opportunity to refactor a recent change of @prastoin with
it.

Split VariantFilterChip into SoftDeleteFilterChip and RecordFilterChip
to separate concerns about this soft delete filtering.

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

@@ -1,36 +1,18 @@
 import { useIcons } from 'twenty-ui';
 
 import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById';
-import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
-import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
 import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
 import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
-import { useParams } from 'react-router-dom';
 
-type VariantFilterChipProps = {
+type RecordFilterChipProps = {
   recordFilter: RecordFilter;
-  viewBarId: string;
 };
 
-export const VariantFilterChip = ({
-  recordFilter,
-  viewBarId,
-}: VariantFilterChipProps) => {
+export const RecordFilterChip = ({ recordFilter }: RecordFilterChipProps) => {
   const { deleteCombinedViewFilter } = useDeleteCombinedViewFilters();
 
-  const { objectNamePlural } = useParams();
-
-  const { objectNameSingular } = useObjectNameSingularFromPlural({
-    objectNamePlural: objectNamePlural ?? '',
-  });
-
-  const { toggleSoftDeleteFilterState } = useHandleToggleTrashColumnFilter({
-    objectNameSingular,
-    viewBarId,
-  });
-
   const { fieldMetadataItem } = useFieldMetadataItemById(
     recordFilter.fieldMetadataId,
   );
@@ -44,20 +26,11 @@ export const VariantFilterChip = ({
   const handleRemoveClick = () => {
     deleteCombinedViewFilter(recordFilter.id);
     removeRecordFilter(recordFilter.fieldMetadataId);
-
-    if (
-      recordFilter.label === 'Deleted' &&
-      recordFilter.operand === 'isNotEmpty'
-    ) {
-      toggleSoftDeleteFilterState(false);
-    }
   };
 
   return (
     <SortOrFilterChip
-      key={recordFilter.fieldMetadataId}
       testId={recordFilter.fieldMetadataId}
-      variant={recordFilter.variant}
       labelValue={recordFilter.label ?? ''}
       Icon={FieldMetadataItemIcon}
       onRemove={handleRemoveClick}

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

@@ -0,0 +1,48 @@
+import { useIcons } from 'twenty-ui';
+
+import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
+import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
+import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
+
+type SoftDeleteFilterChipProps = {
+  recordFilter: RecordFilter;
+  viewBarId: string;
+};
+
+export const SoftDeleteFilterChip = ({
+  recordFilter,
+  viewBarId,
+}: SoftDeleteFilterChipProps) => {
+  const { deleteCombinedViewFilter } = useDeleteCombinedViewFilters();
+
+  const setIsSoftDeleteFilterActive = useSetRecoilComponentStateV2(
+    isSoftDeleteFilterActiveComponentState,
+    viewBarId,
+  );
+
+  const { removeRecordFilter } = useRemoveRecordFilter();
+
+  const { getIcon } = useIcons();
+
+  const handleRemoveClick = () => {
+    deleteCombinedViewFilter(recordFilter.id);
+    removeRecordFilter(recordFilter.fieldMetadataId);
+
+    setIsSoftDeleteFilterActive(false);
+  };
+
+  const ChipIcon = getIcon('IconTrash');
+
+  return (
+    <SortOrFilterChip
+      testId={recordFilter.fieldMetadataId}
+      variant={'danger'}
+      labelValue={recordFilter.label ?? ''}
+      Icon={ChipIcon}
+      onRemove={handleRemoveClick}
+    />
+  );
+};

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

@@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent, IconX } from 'twenty-ui';
 
-const StyledChip = styled.div<{ variant: SortOrFitlerChipVariant }>`
+const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
   align-items: center;
   background-color: ${({ theme, variant }) => {
     switch (variant) {
@@ -55,7 +55,7 @@ const StyledIcon = styled.div`
   display: flex;
 `;
 
-const StyledDelete = styled.button<{ variant: SortOrFitlerChipVariant }>`
+const StyledDelete = styled.button<{ variant: SortOrFilterChipVariant }>`
   box-sizing: border-box;
   height: 20px;
   width: 20px;
@@ -89,12 +89,12 @@ const StyledLabelKey = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
-type SortOrFitlerChipVariant = 'default' | 'danger';
+export type SortOrFilterChipVariant = 'default' | 'danger';
 
 type SortOrFilterChipProps = {
   labelKey?: string;
   labelValue: string;
-  variant?: SortOrFitlerChipVariant;
+  variant?: SortOrFilterChipVariant;
   Icon?: IconComponent;
   onRemove: () => void;
   onClick?: () => void;

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

@@ -13,7 +13,9 @@ import { EditableSortChip } from '@/views/components/EditableSortChip';
 import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
 import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
 
+import { useCheckIsSoftDeleteFilter } from '@/object-record/record-filter/hooks/useCheckIsSoftDeleteFilter';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { SoftDeleteFilterChip } from '@/views/components/SoftDeleteFilterChip';
 import { useApplyCurrentViewFiltersToCurrentRecordFilters } from '@/views/hooks/useApplyCurrentViewFiltersToCurrentRecordFilters';
 import { useAreViewFiltersDifferentFromRecordFilters } from '@/views/hooks/useAreViewFiltersDifferentFromRecordFilters';
 import { useAreViewSortsDifferentFromRecordSorts } from '@/views/hooks/useAreViewSortsDifferentFromRecordSorts';
@@ -22,8 +24,8 @@ import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStat
 import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
 import { isViewBarExpandedComponentState } from '@/views/states/isViewBarExpandedComponentState';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
+import { isNonEmptyArray } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared';
-import { VariantFilterChip } from './VariantFilterChip';
 
 export type ViewBarDetailsProps = {
   hasFilterButton?: boolean;
@@ -144,22 +146,19 @@ export const ViewBarDetails = ({
       viewSortsAreDifferentFromRecordSorts) &&
     !hasFiltersQueryParams;
 
-  const otherViewFilters = useMemo(() => {
-    return currentRecordFilters.filter(
-      (viewFilter) =>
-        viewFilter.variant &&
-        viewFilter.variant !== 'default' &&
-        !viewFilter.viewFilterGroupId,
-    );
-  }, [currentRecordFilters]);
+  const { checkIsSoftDeleteFilter } = useCheckIsSoftDeleteFilter();
 
-  const defaultViewFilters = useMemo(() => {
+  const softDeleteFilter = currentRecordFilters.find((recordFilter) =>
+    checkIsSoftDeleteFilter(recordFilter),
+  );
+
+  const recordFilters = useMemo(() => {
     return currentRecordFilters.filter(
-      (viewFilter) =>
-        (!viewFilter.variant || viewFilter.variant === 'default') &&
-        !viewFilter.viewFilterGroupId,
+      (recordFilter) =>
+        !recordFilter.viewFilterGroupId &&
+        !checkIsSoftDeleteFilter(recordFilter),
     );
-  }, [currentRecordFilters]);
+  }, [currentRecordFilters, checkIsSoftDeleteFilter]);
 
   const { applyCurrentViewFiltersToCurrentRecordFilters } =
     useApplyCurrentViewFiltersToCurrentRecordFilters();
@@ -190,45 +189,46 @@ export const ViewBarDetails = ({
     <StyledBar>
       <StyledFilterContainer>
         <StyledChipcontainer>
-          {otherViewFilters.map((viewFilter) => (
-            <VariantFilterChip
-              key={viewFilter.fieldMetadataId}
-              recordFilter={viewFilter}
+          {isDefined(softDeleteFilter) && (
+            <SoftDeleteFilterChip
+              key={softDeleteFilter.fieldMetadataId}
+              recordFilter={softDeleteFilter}
               viewBarId={viewBarId}
             />
-          ))}
-          {!!otherViewFilters.length &&
-            !!currentViewWithCombinedFiltersAndSorts?.viewSorts?.length && (
-              <StyledSeperatorContainer>
-                <StyledSeperator />
-              </StyledSeperatorContainer>
-            )}
+          )}
+          {isDefined(softDeleteFilter) && (
+            <StyledSeperatorContainer>
+              <StyledSeperator />
+            </StyledSeperatorContainer>
+          )}
           {mapViewSortsToSorts(
             currentViewWithCombinedFiltersAndSorts?.viewSorts ?? [],
             availableSortDefinitions,
           ).map((sort) => (
             <EditableSortChip key={sort.fieldMetadataId} viewSort={sort} />
           ))}
-          {!!currentViewWithCombinedFiltersAndSorts?.viewSorts?.length &&
-            !!defaultViewFilters.length && (
+          {isNonEmptyArray(recordFilters) &&
+            isNonEmptyArray(
+              currentViewWithCombinedFiltersAndSorts?.viewSorts,
+            ) && (
               <StyledSeperatorContainer>
                 <StyledSeperator />
               </StyledSeperatorContainer>
             )}
           {showAdvancedFilterDropdownButton && <AdvancedFilterDropdownButton />}
-          {defaultViewFilters.map((viewFilter) => (
+          {recordFilters.map((recordFilter) => (
             <ObjectFilterDropdownComponentInstanceContext.Provider
-              key={viewFilter.id}
-              value={{ instanceId: viewFilter.id }}
+              key={recordFilter.id}
+              value={{ instanceId: recordFilter.id }}
             >
-              <DropdownScope dropdownScopeId={viewFilter.id}>
-                <ViewBarFilterEffect filterDropdownId={viewFilter.id} />
+              <DropdownScope dropdownScopeId={recordFilter.id}>
+                <ViewBarFilterEffect filterDropdownId={recordFilter.id} />
                 <EditableFilterDropdownButton
-                  viewFilter={viewFilter}
+                  viewFilter={recordFilter}
                   hotkeyScope={{
-                    scope: viewFilter.id,
+                    scope: recordFilter.id,
                   }}
-                  viewFilterDropdownId={viewFilter.id}
+                  viewFilterDropdownId={recordFilter.id}
                 />
               </DropdownScope>
             </ObjectFilterDropdownComponentInstanceContext.Provider>