Added parallel code path to set new record sorts state (#10345)

This PR implements a parallel code path to set record sorts without impacting the actual sort, like we did on record filter. We add a ViewBarRecordSortEffect which mirrors ViewBarRecordFilterEffect. It also adds availableFieldMetadataItemsForSortFamilySelector to replace sortDefinitions progressively.
2025-02-20 10:40:25 +01:00
parent 316876fcb5
commit 3f93aba5fc
31 changed files with 326 additions and 129 deletions
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@ -6,12 +6,16 @@ import { useCloseSortDropdown } from '@/object-record/object-sort-dropdown/hooks
 import { useResetRecordSortDropdownSearchInput } from '@/object-record/object-sort-dropdown/hooks/useResetRecordSortDropdownSearchInput';
 import { useResetSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useResetSortDropdown';
 import { useToggleSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useToggleSortDropdown';
-import { isSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState';
+import { isRecordSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState';
 import { objectSortDropdownSearchInputComponentState } from '@/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState';
 import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
-import { selectedSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedSortDirectionState';
+import { selectedRecordSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState';
 import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
+import {
+  RECORD_SORT_DIRECTIONS,
+  RecordSortDirection,
+} from '@/object-record/record-sort/types/RecordSortDirection';
 import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -26,7 +30,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { SORT_DIRECTIONS, SortDirection } from '../types/SortDirection';
+import { v4 } from 'uuid';

 export const StyledInput = styled.input`
  background: transparent;
@ -79,8 +83,8 @@ export const ObjectSortDropdownButton = ({
    objectSortDropdownSearchInputComponentState,
  );

-  const isSortDirectionMenuUnfolded = useRecoilComponentValueV2(
-    isSortDirectionMenuUnfoldedComponentState,
+  const isRecordSortDirectionMenuUnfolded = useRecoilComponentValueV2(
+    isRecordSortDirectionMenuUnfoldedComponentState,
  );

  const { resetSortDropdown } = useResetSortDropdown();
@ -153,22 +157,23 @@ export const ObjectSortDropdownButton = ({
    setObjectSortDropdownSearchInput('');
    closeSortDropdown();
    onSortSelect?.({
+      id: v4(),
      fieldMetadataId: sortDefinition.fieldMetadataId,
-      direction: selectedSortDirection,
+      direction: selectedRecordSortDirection,
      definition: sortDefinition,
    });
  };

-  const [selectedSortDirection, setSelectedSortDirection] =
-    useRecoilComponentStateV2(selectedSortDirectionComponentState);
+  const [selectedRecordSortDirection, setSelectedRecordSortDirection] =
+    useRecoilComponentStateV2(selectedRecordSortDirectionComponentState);

-  const setIsSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
-    isSortDirectionMenuUnfoldedComponentState,
+  const setIsRecordSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
+    isRecordSortDirectionMenuUnfoldedComponentState,
  );

-  const handleSortDirectionClick = (sortDirection: SortDirection) => {
-    setSelectedSortDirection(sortDirection);
-    setIsSortDirectionMenuUnfolded(false);
+  const handleSortDirectionClick = (sortDirection: RecordSortDirection) => {
+    setSelectedRecordSortDirection(sortDirection);
+    setIsRecordSortDirectionMenuUnfolded(false);
  };

  const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
@ -190,10 +195,10 @@ export const ObjectSortDropdownButton = ({
      }
      dropdownComponents={
        <>
-          {isSortDirectionMenuUnfolded && (
+          {isRecordSortDirectionMenuUnfolded && (
            <StyledSelectedSortDirectionContainer>
              <DropdownMenuItemsContainer>
-                {SORT_DIRECTIONS.map((sortDirection, index) => (
+                {RECORD_SORT_DIRECTIONS.map((sortDirection, index) => (
                  <MenuItem
                    key={index}
                    onClick={() => handleSortDirectionClick(sortDirection)}
@ -208,10 +213,14 @@ export const ObjectSortDropdownButton = ({
          <DropdownMenuHeader
            EndIcon={IconChevronDown}
            onClick={() =>
-              setIsSortDirectionMenuUnfolded(!isSortDirectionMenuUnfolded)
+              setIsRecordSortDirectionMenuUnfolded(
+                !isRecordSortDirectionMenuUnfolded,
+              )
            }
          >
-            {selectedSortDirection === 'asc' ? t`Ascending` : t`Descending`}
+            {selectedRecordSortDirection === 'asc'
+              ? t`Ascending`
+              : t`Descending`}
          </DropdownMenuHeader>
          <StyledInput
            autoFocus
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useResetSortDropdown.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useResetSortDropdown.ts
@ -1,19 +1,19 @@
-import { isSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState';
-import { selectedSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedSortDirectionState';
+import { isRecordSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState';
+import { selectedRecordSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';

 export const useResetSortDropdown = () => {
-  const setIsSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
-    isSortDirectionMenuUnfoldedComponentState,
+  const setIsRecordSortDirectionMenuUnfolded = useSetRecoilComponentStateV2(
+    isRecordSortDirectionMenuUnfoldedComponentState,
  );

-  const setSelectedSortDirection = useSetRecoilComponentStateV2(
-    selectedSortDirectionComponentState,
+  const setSelectedRecordSortDirection = useSetRecoilComponentStateV2(
+    selectedRecordSortDirectionComponentState,
  );

  const resetSortDropdown = () => {
-    setIsSortDirectionMenuUnfolded(false);
-    setSelectedSortDirection('asc');
+    setIsRecordSortDirectionMenuUnfolded(false);
+    setSelectedRecordSortDirection('asc');
  };

  return {
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts
@ -1,24 +0,0 @@
-import { isSortSelectedComponentState } from '@/object-record/object-sort-dropdown/states/isSortSelectedScopedState';
-import { objectSortDropdownSearchInputComponentState } from '@/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState';
-import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
-
-export const useSortDropdownStates = (scopeId: string) => {
-  const isSortSelectedState = isSortSelectedComponentState.atomFamily({
-    instanceId: scopeId,
-  });
-
-  const onSortSelectState = onSortSelectComponentState.atomFamily({
-    instanceId: scopeId,
-  });
-
-  const objectSortDropdownSearchInputState =
-    objectSortDropdownSearchInputComponentState.atomFamily({
-      instanceId: scopeId,
-    });
-
-  return {
-    isSortSelectedState,
-    onSortSelectState,
-    objectSortDropdownSearchInputState,
-  };
-};
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isRecordSortDirectionMenuUnfoldedComponentState.ts
@ -1,8 +1,9 @@
 import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
 import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';

-export const isSortSelectedComponentState = createComponentStateV2<boolean>({
-  key: 'isSortSelectedComponentState',
-  defaultValue: false,
-  componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
-});
+export const isRecordSortDirectionMenuUnfoldedComponentState =
+  createComponentStateV2<boolean>({
+    key: 'isRecordSortDirectionMenuUnfoldedComponentState',
+    defaultValue: false,
+    componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
+  });
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isRecordSortSelectedComponentState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isRecordSortSelectedComponentState.ts
@ -1,9 +1,9 @@
 import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
 import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';

-export const isSortDirectionMenuUnfoldedComponentState =
+export const isRecordSortSelectedComponentState =
  createComponentStateV2<boolean>({
-    key: 'isSortDirectionMenuUnfoldedComponentState',
+    key: 'isRecordSortSelectedComponentState',
    defaultValue: false,
    componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
  });
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts
@ -1,9 +1,9 @@
 import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
+import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
 import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
-import { Sort } from '../types/Sort';

 export const onSortSelectComponentState = createComponentStateV2<
-  ((sort: Sort) => void) | undefined
+  ((sort: RecordSort) => void) | undefined
 >({
  key: 'onSortSelectComponentState',
  defaultValue: undefined,
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedRecordSortDirectionComponentState.ts
@ -1,10 +1,10 @@
 import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
-import { SortDirection } from '@/object-record/object-sort-dropdown/types/SortDirection';
+import { RecordSortDirection } from '@/object-record/record-sort/types/RecordSortDirection';
 import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';

-export const selectedSortDirectionComponentState =
-  createComponentStateV2<SortDirection>({
-    key: 'selectedSortDirectionComponentState',
+export const selectedRecordSortDirectionComponentState =
+  createComponentStateV2<RecordSortDirection>({
+    key: 'selectedRecordSortDirectionComponentState',
    defaultValue: 'asc',
    componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
  });
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/Sort.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/Sort.ts
@ -1,8 +0,0 @@
-import { SortDefinition } from './SortDefinition';
-import { SortDirection } from './SortDirection';
-
-export type Sort = {
-  fieldMetadataId: string;
-  direction: SortDirection;
-  definition: SortDefinition;
-};
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/SortDefinition.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/SortDefinition.ts
@ -1,8 +1,5 @@
-import { SortDirection } from './SortDirection';
-
 export type SortDefinition = {
  fieldMetadataId: string;
  label: string;
  iconName: string;
-  getOrderByTemplate?: (direction: SortDirection) => any[];
 };
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/SortDirection.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/SortDirection.ts
@ -1,3 +0,0 @@
-export const SORT_DIRECTIONS = ['asc', 'desc'] as const;
-
-export type SortDirection = (typeof SORT_DIRECTIONS)[number];
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/tests/turnSortsIntoOrderBy.test.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/tests/turnSortsIntoOrderBy.test.ts
@ -1,8 +1,8 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
 import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
 import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
+import { RecordSort } from '@/object-record/record-sort/types/RecordSort';

 const sortDefinition: SortDefinition = {
  fieldMetadataId: 'id',
@ -42,8 +42,9 @@ describe('turnSortsIntoOrderBy', () => {
  });

  it('should create OrderByField with single sort', () => {
-    const sorts: Sort[] = [
+    const sorts: RecordSort[] = [
      {
+        id: 'id',
        fieldMetadataId: 'field1',
        direction: 'asc',
        definition: sortDefinition,
@ -56,13 +57,15 @@ describe('turnSortsIntoOrderBy', () => {
  });

  it('should create OrderByField with multiple sorts', () => {
-    const sorts: Sort[] = [
+    const sorts: RecordSort[] = [
      {
+        id: 'id',
        fieldMetadataId: 'field1',
        direction: 'asc',
        definition: sortDefinition,
      },
      {
+        id: 'id',
        fieldMetadataId: 'field2',
        direction: 'desc',
        definition: sortDefinition,
@ -82,8 +85,9 @@ describe('turnSortsIntoOrderBy', () => {
  });

  it('should ignore if field not found', () => {
-    const sorts: Sort[] = [
+    const sorts: RecordSort[] = [
      {
+        id: 'id',
        fieldMetadataId: 'invalidField',
        direction: 'asc',
        definition: sortDefinition,
@ -95,8 +99,9 @@ describe('turnSortsIntoOrderBy', () => {
  });

  it('should not return position for remotes', () => {
-    const sorts: Sort[] = [
+    const sorts: RecordSort[] = [
      {
+        id: 'id',
        fieldMetadataId: 'invalidField',
        direction: 'asc',
        definition: sortDefinition,
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy.ts
@ -8,12 +8,12 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { getOrderByForFieldMetadataType } from '@/object-metadata/utils/getOrderByForFieldMetadataType';
+import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
 import { OrderBy } from '@/types/OrderBy';
-import { Sort } from '../types/Sort';

 export const turnSortsIntoOrderBy = (
  objectMetadataItem: ObjectMetadataItem,
-  sorts: Sort[],
+  sorts: RecordSort[],
 ): RecordGqlOperationOrderBy => {
  const fields: Pick<FieldMetadataItem, 'id' | 'name' | 'type'>[] =
    objectMetadataItem?.fields ?? [];
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts
@ -2,9 +2,11 @@ import { useCallback } from 'react';

 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
+import { useUpsertRecordSort } from '@/object-record/record-sort/hooks/useUpsertRecordSort';
+import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
 import { useUpsertCombinedViewSorts } from '@/views/hooks/useUpsertCombinedViewSorts';
 import { isDefined } from 'twenty-shared';
+import { v4 } from 'uuid';

 type UseHandleToggleColumnSortProps = {
  objectNameSingular: string;
@ -24,6 +26,8 @@ export const useHandleToggleColumnSort = ({

  const { upsertCombinedViewSort } = useUpsertCombinedViewSorts(viewBarId);

+  const { upsertRecordSort } = useUpsertRecordSort();
+
  const handleToggleColumnSort = useCallback(
    (fieldMetadataId: string) => {
      const correspondingColumnDefinition = columnDefinitions.find(
@ -33,7 +37,8 @@ export const useHandleToggleColumnSort = ({

      if (!isDefined(correspondingColumnDefinition)) return;

-      const newSort: Sort = {
+      const newSort: RecordSort = {
+        id: v4(),
        fieldMetadataId,
        definition: {
          fieldMetadataId,
@ -44,8 +49,9 @@ export const useHandleToggleColumnSort = ({
      };

      upsertCombinedViewSort(newSort);
+      upsertRecordSort(newSort);
    },
-    [columnDefinitions, upsertCombinedViewSort],
+    [columnDefinitions, upsertCombinedViewSort, upsertRecordSort],
  );

  return handleToggleColumnSort;
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
@ -1,8 +1,7 @@
+import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
 import { createState } from '@ui/utilities/state/utils/createState';

-import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
-
-export const recordIndexSortsState = createState<Sort[]>({
+export const recordIndexSortsState = createState<RecordSort[]>({
  key: 'recordIndexSortsState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/record-sort/hooks/useSortableFieldMetadataItemsInRecordIndexContext.ts
+++ b/packages/twenty-front/src/modules/object-record/record-sort/hooks/useSortableFieldMetadataItemsInRecordIndexContext.ts
@ -0,0 +1,15 @@
+import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { useRecoilValue } from 'recoil';
+
+export const useSortableFieldMetadataItemsInRecordIndexContext = () => {
+  const { objectMetadataItem } = useRecordIndexContextOrThrow();
+
+  const sortableFieldMetadataItems = useRecoilValue(
+    availableFieldMetadataItemsForSortFamilySelector({
+      objectMetadataItemId: objectMetadataItem.id,
+    }),
+  );
+
+  return { sortableFieldMetadataItems };
+};
--- a/packages/twenty-front/src/modules/object-record/record-sort/hooks/useUpsertRecordSort.ts
+++ b/packages/twenty-front/src/modules/object-record/record-sort/hooks/useUpsertRecordSort.ts
@ -0,0 +1,58 @@
+import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
+import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useRecoilCallback } from 'recoil';
+
+export const useUpsertRecordSort = () => {
+  const currentRecordSortsCallbackState = useRecoilComponentCallbackStateV2(
+    currentRecordSortsComponentState,
+  );
+
+  const upsertRecordSort = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (recordSortToSet: RecordSort) => {
+        const currentRecordSorts = getSnapshotValue(
+          snapshot,
+          currentRecordSortsCallbackState,
+        );
+
+        const hasFoundRecordSortInCurrentRecordSorts = currentRecordSorts.some(
+          (existingSort) =>
+            existingSort.fieldMetadataId === recordSortToSet.fieldMetadataId,
+        );
+
+        if (!hasFoundRecordSortInCurrentRecordSorts) {
+          set(currentRecordSortsCallbackState, [
+            ...currentRecordSorts,
+            recordSortToSet,
+          ]);
+        } else {
+          set(currentRecordSortsCallbackState, (currentRecordSorts) => {
+            const newCurrentRecordSorts = [...currentRecordSorts];
+
+            const indexOfSortToUpdate = newCurrentRecordSorts.findIndex(
+              (existingSort) =>
+                existingSort.fieldMetadataId ===
+                recordSortToSet.fieldMetadataId,
+            );
+
+            if (indexOfSortToUpdate < 0) {
+              return newCurrentRecordSorts;
+            }
+
+            newCurrentRecordSorts[indexOfSortToUpdate] = {
+              ...recordSortToSet,
+            };
+
+            return newCurrentRecordSorts;
+          });
+        }
+      },
+    [currentRecordSortsCallbackState],
+  );
+
+  return {
+    upsertRecordSort,
+  };
+};
--- a/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts
@ -1,8 +1,8 @@
+import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
-import { Sort } from '../../object-sort-dropdown/types/Sort';

-export const tableSortsComponentState = createComponentStateV2<Sort[]>({
+export const tableSortsComponentState = createComponentStateV2<RecordSort[]>({
  key: 'tableSortsComponentState',
  defaultValue: [],
  componentInstanceContext: RecordTableComponentInstanceContext,