Make filters work on export csv action (#8389)

- Create a new component state `contextStoreFiltersComponentState` and refactor `contextStoreTargetedRecordsRuleComponentState` - Refactor `computeContextStoreFilters` to use filters when no records are selected
2024-12-23 12:02:10 +03:00 · 2024-11-08 15:38:45 +01:00 · 2024-11-08 15:38:45 +01:00 · 5a53ef1ade
commit 5a53ef1ade
parent d44f7a46b6
9 changed files with 78 additions and 28 deletions
--- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx
@ -1,5 +1,6 @@
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
@ -45,8 +46,13 @@ export const DeleteRecordsActionEffect = ({
    contextStoreTargetedRecordsRuleComponentState,
  );

+  const contextStoreFilters = useRecoilComponentValueV2(
+    contextStoreFiltersComponentState,
+  );
+
  const graphqlFilter = computeContextStoreFilters(
    contextStoreTargetedRecordsRule,
+    contextStoreFilters,
    objectMetadataItem,
  );

--- a/packages/twenty-front/src/modules/context-store/states/contextStoreFiltersComponentState.ts
+++ b/packages/twenty-front/src/modules/context-store/states/contextStoreFiltersComponentState.ts
@ -0,0 +1,11 @@
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const contextStoreFiltersComponentState = createComponentStateV2<
+  Filter[]
+>({
+  key: 'contextStoreFiltersComponentState',
+  defaultValue: [],
+  componentInstanceContext: ContextStoreComponentInstanceContext,
+});
--- a/packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordsRuleComponentState.ts
+++ b/packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordsRuleComponentState.ts
@ -1,5 +1,4 @@
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';

 type ContextStoreTargetedRecordsRuleSelectionMode = {
@ -10,7 +9,6 @@ type ContextStoreTargetedRecordsRuleSelectionMode = {
 type ContextStoreTargetedRecordsRuleExclusionMode = {
  mode: 'exclusion';
  excludedRecordIds: string[];
-  filters: Filter[];
 };

 export type ContextStoreTargetedRecordsRule =
--- a/packages/twenty-front/src/modules/context-store/utils/tests/computeContextStoreFilters.test.ts
+++ b/packages/twenty-front/src/modules/context-store/utils/tests/computeContextStoreFilters.test.ts
@ -1,6 +1,8 @@
 import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import { expect } from '@storybook/test';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 describe('computeContextStoreFilters', () => {
  const personObjectMetadataItem = generatedMockObjectMetadataItems.find(
@ -15,6 +17,7 @@ describe('computeContextStoreFilters', () => {

    const filters = computeContextStoreFilters(
      contextStoreTargetedRecordsRule,
+      [],
      personObjectMetadataItem,
    );

@ -28,32 +31,35 @@ describe('computeContextStoreFilters', () => {
  it('should work for exclusion mode', () => {
    const contextStoreTargetedRecordsRule: ContextStoreTargetedRecordsRule = {
      mode: 'exclusion',
-      filters: [
-        {
-          id: 'name-filter',
-          variant: 'default',
-          fieldMetadataId: personObjectMetadataItem.fields.find(
-            (field) => field.name === 'name',
-          )!.id,
-          value: 'John',
-          displayValue: 'John',
-          displayAvatarUrl: undefined,
-          operand: ViewFilterOperand.Contains,
-          definition: {
-            fieldMetadataId: personObjectMetadataItem.fields.find(
-              (field) => field.name === 'name',
-            )!.id,
-            label: 'Name',
-            iconName: 'person',
-            type: 'TEXT',
-          },
-        },
-      ],
+
      excludedRecordIds: ['1', '2', '3'],
    };

+    const contextStoreFilters: Filter[] = [
+      {
+        id: 'name-filter',
+        variant: 'default',
+        fieldMetadataId: personObjectMetadataItem.fields.find(
+          (field) => field.name === 'name',
+        )!.id,
+        value: 'John',
+        displayValue: 'John',
+        displayAvatarUrl: undefined,
+        operand: ViewFilterOperand.Contains,
+        definition: {
+          fieldMetadataId: personObjectMetadataItem.fields.find(
+            (field) => field.name === 'name',
+          )!.id,
+          label: 'Name',
+          iconName: 'person',
+          type: 'TEXT',
+        },
+      },
+    ];
+
    const filters = computeContextStoreFilters(
      contextStoreTargetedRecordsRule,
+      contextStoreFilters,
      personObjectMetadataItem,
    );

--- a/packages/twenty-front/src/modules/context-store/utils/computeContextStoreFilters.ts
+++ b/packages/twenty-front/src/modules/context-store/utils/computeContextStoreFilters.ts
@ -1,11 +1,13 @@
 import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
 import { makeAndFilterVariables } from '@/object-record/utils/makeAndFilterVariables';

 export const computeContextStoreFilters = (
  contextStoreTargetedRecordsRule: ContextStoreTargetedRecordsRule,
+  contextStoreFilters: Filter[],
  objectMetadataItem: ObjectMetadataItem,
 ) => {
  let queryFilter: RecordGqlOperationFilter | undefined;
@ -13,7 +15,7 @@ export const computeContextStoreFilters = (
  if (contextStoreTargetedRecordsRule.mode === 'exclusion') {
    queryFilter = makeAndFilterVariables([
      computeViewRecordGqlOperationFilter(
-        contextStoreTargetedRecordsRule.filters,
+        contextStoreFilters,
        objectMetadataItem?.fields ?? [],
        [],
      ),
@ -36,7 +38,11 @@ export const computeContextStoreFilters = (
              in: contextStoreTargetedRecordsRule.selectedRecordIds,
            },
          }
-        : undefined;
+        : computeViewRecordGqlOperationFilter(
+            contextStoreFilters,
+            objectMetadataItem?.fields ?? [],
+            [],
+          );
  }

  return queryFilter;
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect.tsx
@ -1,3 +1,4 @@
+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
@ -35,6 +36,10 @@ export const RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect =
      objectMetadataItem?.namePlural ?? '',
    );

+    const contextStoreFilters = useRecoilComponentValueV2(
+      contextStoreFiltersComponentState,
+    );
+
    const { totalCount } = useFindManyRecords({
      ...findManyRecordsParams,
      recordGqlFields: {
@ -42,6 +47,7 @@ export const RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect =
      },
      filter: computeContextStoreFilters(
        contextStoreTargetedRecordsRule,
+        contextStoreFilters,
        objectMetadataItem,
      ),
      limit: 1,
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx
@ -1,5 +1,6 @@
 import { useContext, useEffect } from 'react';

+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@ -99,7 +100,6 @@ export const RecordIndexTableContainerEffect = () => {
      setContextStoreTargetedRecords({
        mode: 'exclusion',
        excludedRecordIds: unselectedRowIds,
-        filters: recordIndexFilters,
      });
    } else {
      setContextStoreTargetedRecords({
@ -116,11 +116,22 @@ export const RecordIndexTableContainerEffect = () => {
    };
  }, [
    hasUserSelectedAllRows,
-    recordIndexFilters,
    selectedRowIds,
    setContextStoreTargetedRecords,
    unselectedRowIds,
  ]);

+  const setContextStoreFilters = useSetRecoilComponentStateV2(
+    contextStoreFiltersComponentState,
+  );
+
+  useEffect(() => {
+    setContextStoreFilters(recordIndexFilters);
+
+    return () => {
+      setContextStoreFilters([]);
+    };
+  }, [recordIndexFilters, setContextStoreFilters]);
+
  return <></>;
 };
--- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/tests/useRecordData.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/tests/useRecordData.test.tsx
@ -106,7 +106,7 @@ const mocks: MockedResponse[] = [
        }
      `,
      variables: {
-        filter: undefined,
+        filter: {},
        limit: 30,
        orderBy: [{ position: 'AscNullsFirst' }],
      },
--- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts
@ -6,6 +6,7 @@ import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefin
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { isDefined } from '~/utils/isDefined';

+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@ -81,8 +82,13 @@ export const useRecordData = ({
    contextStoreTargetedRecordsRuleComponentState,
  );

+  const contextStoreFilters = useRecoilComponentValueV2(
+    contextStoreFiltersComponentState,
+  );
+
  const queryFilter = computeContextStoreFilters(
    contextStoreTargetedRecordsRule,
+    contextStoreFilters,
    objectMetadataItem,
  );