Removed sort definitions (#10368)

This PR focuses on complete removal of sort definitions.

packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useColumnDefinitionsFromFieldMetadata.test.ts

@@ -63,9 +63,8 @@ describe('useColumnDefinitionsFromFieldMetadata', () => {
       },
     );
 
-    const { columnDefinitions, sortDefinitions } = result.current;
+    const { columnDefinitions } = result.current;
 
     expect(columnDefinitions.length).toBe(21);
-    expect(sortDefinitions.length).toBe(14);
   });
 });

packages/twenty-front/src/modules/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata.ts

@@ -4,9 +4,9 @@ import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefin
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 
 import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
+import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector';
 import { useRecoilValue } from 'recoil';
 import { formatFieldMetadataItemAsColumnDefinition } from '../utils/formatFieldMetadataItemAsColumnDefinition';
-import { formatFieldMetadataItemsAsSortDefinitions } from '../utils/formatFieldMetadataItemsAsSortDefinitions';
 
 export const useColumnDefinitionsFromFieldMetadata = (
   objectMetadataItem: ObjectMetadataItem,
@@ -21,9 +21,11 @@ export const useColumnDefinitionsFromFieldMetadata = (
     }),
   );
 
-  const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
+  const sortableFieldMetadataItems = useRecoilValue(
-    fields: activeFieldMetadataItems,
+    availableFieldMetadataItemsForSortFamilySelector({
-  });
+      objectMetadataItemId: objectMetadataItem.id,
+    }),
+  );
 
   const columnDefinitions: ColumnDefinition<FieldMetadata>[] =
     activeFieldMetadataItems
@@ -40,8 +42,10 @@ export const useColumnDefinitionsFromFieldMetadata = (
           (fieldMetadataItem) =>
             fieldMetadataItem.id === column.fieldMetadataId,
         );
-        const existsInSortDefinitions = sortDefinitions.some(
+
-          (sort) => sort.fieldMetadataId === column.fieldMetadataId,
+        const existsInSortDefinitions = sortableFieldMetadataItems.some(
+          (fieldMetadataItem) =>
+            fieldMetadataItem.id === column.fieldMetadataId,
         );
         return {
           ...column,
@@ -52,6 +56,5 @@ export const useColumnDefinitionsFromFieldMetadata = (
 
   return {
     columnDefinitions,
-    sortDefinitions,
   };
 };

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions.ts

@@ -1,24 +0,0 @@
-import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
-
-import { SORTABLE_FIELD_METADATA_TYPES } from '@/object-metadata/constants/SortableFieldMetadataTypes';
-import { ObjectMetadataItem } from '../types/ObjectMetadataItem';
-
-export const formatFieldMetadataItemsAsSortDefinitions = ({
-  fields,
-}: {
-  fields: Array<ObjectMetadataItem['fields'][0]>;
-}): SortDefinition[] =>
-  fields.reduce((acc, field) => {
-    if (!SORTABLE_FIELD_METADATA_TYPES.includes(field.type)) {
-      return acc;
-    }
-
-    return [
-      ...acc,
-      {
-        fieldMetadataId: field.id,
-        label: field.label,
-        iconName: field.icon ?? 'Icon123',
-      },
-    ];
-  }, [] as SortDefinition[]);

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import { IconChevronDown, MenuItem, useIcons } from 'twenty-ui';
 
+import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useCloseSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useCloseSortDropdown';
 import { useResetRecordSortDropdownSearchInput } from '@/object-record/object-sort-dropdown/hooks/useResetRecordSortDropdownSearchInput';
@@ -10,7 +12,6 @@ import { isRecordSortDirectionDropdownMenuUnfoldedComponentState } from '@/objec
 import { objectSortDropdownSearchInputComponentState } from '@/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState';
 import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
 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,
@@ -28,8 +29,8 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 export const StyledInput = styled.input`
@@ -89,14 +90,16 @@ export const ObjectSortDropdownButton = ({
 
   const { resetSortDropdown } = useResetSortDropdown();
 
-  const { recordIndexId } = useRecordIndexContextOrThrow();
+  const { recordIndexId, objectMetadataItem } = useRecordIndexContextOrThrow();
 
   const objectSortDropdownSearchInput = useRecoilComponentValueV2(
     objectSortDropdownSearchInputComponentState,
   );
 
-  const availableSortDefinitions = useRecoilComponentValueV2(
+  const sortableFieldMetadataItems = useRecoilValue(
-    availableSortDefinitionsComponentState,
+    availableFieldMetadataItemsForSortFamilySelector({
+      objectMetadataItemId: objectMetadataItem.id,
+    }),
   );
 
   const { getIcon } = useIcons();
@@ -105,40 +108,45 @@ export const ObjectSortDropdownButton = ({
     visibleTableColumnsComponentSelector,
     recordIndexId,
   );
-  const visibleColumnsIds = visibleTableColumns.map(
+  const visibleColumnsFieldMetadataIds = visibleTableColumns.map(
     (column) => column.fieldMetadataId,
   );
   const hiddenTableColumns = useRecoilComponentValueV2(
     hiddenTableColumnsComponentSelector,
     recordIndexId,
   );
-  const hiddenColumnIds = hiddenTableColumns.map(
+  const hiddenColumnFieldMetadataIds = hiddenTableColumns.map(
     (column) => column.fieldMetadataId,
   );
 
-  const filteredSearchInputSortDefinitions = availableSortDefinitions.filter(
+  const filteredSearchInputFieldMetadataItems =
-    (item) =>
+    sortableFieldMetadataItems.filter((item) =>
       item.label
         .toLocaleLowerCase()
         .includes(objectSortDropdownSearchInput.toLocaleLowerCase()),
     );
 
-  const visibleColumnsSortDefinitions = filteredSearchInputSortDefinitions
+  const visibleFieldMetadataItems = filteredSearchInputFieldMetadataItems
-    .sort((a, b) => {
+    .sort((fieldMetadataItemA, fieldMetadataItemB) => {
       return (
-        visibleColumnsIds.indexOf(a.fieldMetadataId) -
+        visibleColumnsFieldMetadataIds.indexOf(fieldMetadataItemA.id) -
-        visibleColumnsIds.indexOf(b.fieldMetadataId)
+        visibleColumnsFieldMetadataIds.indexOf(fieldMetadataItemB.id)
       );
     })
-    .filter((item) => visibleColumnsIds.includes(item.fieldMetadataId));
+    .filter((fieldMetadataItem) =>
+      visibleColumnsFieldMetadataIds.includes(fieldMetadataItem.id),
+    );
 
-  const hiddenColumnsSortDefinitions = filteredSearchInputSortDefinitions
+  const hiddenFieldMetadataItems = filteredSearchInputFieldMetadataItems
-    .sort((a, b) => a.label.localeCompare(b.label))
+    .sort((fieldMetadataItemA, fieldMetadataItemB) =>
-    .filter((item) => hiddenColumnIds.includes(item.fieldMetadataId));
+      fieldMetadataItemA.label.localeCompare(fieldMetadataItemB.label),
+    )
+    .filter((fieldMetadataItem) =>
+      hiddenColumnFieldMetadataIds.includes(fieldMetadataItem.id),
+    );
 
-  const shoudShowSeparator =
+  const shouldShowSeparator =
-    visibleColumnsSortDefinitions.length > 0 &&
+    visibleFieldMetadataItems.length > 0 && hiddenFieldMetadataItems.length > 0;
-    hiddenColumnsSortDefinitions.length > 0;
 
   const handleButtonClick = () => {
     toggleSortDropdown();
@@ -153,14 +161,13 @@ export const ObjectSortDropdownButton = ({
 
   const onSortSelect = useRecoilComponentValueV2(onSortSelectComponentState);
 
-  const handleAddSort = (sortDefinition: SortDefinition) => {
+  const handleAddSort = (fieldMetadataItem: FieldMetadataItem) => {
     setObjectSortDropdownSearchInput('');
     closeSortDropdown();
     onSortSelect?.({
       id: v4(),
-      fieldMetadataId: sortDefinition.fieldMetadataId,
+      fieldMetadataId: fieldMetadataItem.id,
       direction: selectedRecordSortDirection,
-      definition: sortDefinition,
     });
   };
 
@@ -231,25 +238,25 @@ export const ObjectSortDropdownButton = ({
             }
           />
           <DropdownMenuItemsContainer>
-            {visibleColumnsSortDefinitions.map(
+            {visibleFieldMetadataItems.map(
-              (visibleSortDefinition, index) => (
+              (visibleFieldMetadataItem, index) => (
                 <MenuItem
                   testId={`visible-select-sort-${index}`}
                   key={index}
-                  onClick={() => handleAddSort(visibleSortDefinition)}
+                  onClick={() => handleAddSort(visibleFieldMetadataItem)}
-                  LeftIcon={getIcon(visibleSortDefinition.iconName)}
+                  LeftIcon={getIcon(visibleFieldMetadataItem.icon)}
-                  text={visibleSortDefinition.label}
+                  text={visibleFieldMetadataItem.label}
                 />
               ),
             )}
-            {shoudShowSeparator && <DropdownMenuSeparator />}
+            {shouldShowSeparator && <DropdownMenuSeparator />}
-            {hiddenColumnsSortDefinitions.map((hiddenSortDefinition, index) => (
+            {hiddenFieldMetadataItems.map((hiddenFieldMetadataItem, index) => (
               <MenuItem
                 testId={`hidden-select-sort-${index}`}
                 key={index}
-                onClick={() => handleAddSort(hiddenSortDefinition)}
+                onClick={() => handleAddSort(hiddenFieldMetadataItem)}
-                LeftIcon={getIcon(hiddenSortDefinition.iconName)}
+                LeftIcon={getIcon(hiddenFieldMetadataItem.icon)}
-                text={hiddenSortDefinition.label}
+                text={hiddenFieldMetadataItem.label}
               />
             ))}
           </DropdownMenuItemsContainer>

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsComponentState.ts

@@ -1,11 +0,0 @@
-import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
-import { SortDefinition } from '../types/SortDefinition';
-
-export const availableSortDefinitionsComponentState = createComponentStateV2<
-  SortDefinition[]
->({
-  key: 'availableSortDefinitionsComponentState',
-  defaultValue: [],
-  componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
-});

packages/twenty-front/src/modules/object-record/object-sort-dropdown/types/SortDefinition.ts

@@ -1,5 +0,0 @@
-export type SortDefinition = {
-  fieldMetadataId: string;
-  label: string;
-  iconName: string;
-};

packages/twenty-front/src/modules/object-record/object-sort-dropdown/utils/__tests__/turnSortsIntoOrderBy.test.ts

@@ -1,15 +1,8 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-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',
-  label: 'definition label',
-  iconName: 'icon',
-};
-
 const objectMetadataItem: ObjectMetadataItem = {
   id: 'object1',
   fields: [],
@@ -47,7 +40,6 @@ describe('turnSortsIntoOrderBy', () => {
         id: 'id',
         fieldMetadataId: 'field1',
         direction: 'asc',
-        definition: sortDefinition,
       },
     ];
     const fields = [{ id: 'field1', name: 'field1' }] as FieldMetadataItem[];
@@ -62,13 +54,11 @@ describe('turnSortsIntoOrderBy', () => {
         id: 'id',
         fieldMetadataId: 'field1',
         direction: 'asc',
-        definition: sortDefinition,
       },
       {
         id: 'id',
         fieldMetadataId: 'field2',
         direction: 'desc',
-        definition: sortDefinition,
       },
     ];
     const fields = [
@@ -90,7 +80,6 @@ describe('turnSortsIntoOrderBy', () => {
         id: 'id',
         fieldMetadataId: 'invalidField',
         direction: 'asc',
-        definition: sortDefinition,
       },
     ];
     expect(turnSortsIntoOrderBy(objectMetadataItem, sorts)).toEqual([
@@ -104,7 +93,6 @@ describe('turnSortsIntoOrderBy', () => {
         id: 'id',
         fieldMetadataId: 'invalidField',
         direction: 'asc',
-        definition: sortDefinition,
       },
     ];
     expect(

packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts

@@ -4,7 +4,6 @@ import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/s
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { isDefined } from 'twenty-shared';
@@ -49,7 +48,6 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
             (record) =>
               record[recordGroupFieldMetadata.name] === recordGroup?.value,
           )
-          .sort(sortRecordsByPosition)
           .map((record) => record.id);
 
         if (!isDeeplyEqual(existingRecordGroupRowIds, recordGroupRowIds)) {

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexViewBarEffect.tsx

@@ -23,27 +23,21 @@ export const RecordIndexViewBarEffect = ({
     objectNameSingular,
   });
 
-  const { columnDefinitions, sortDefinitions } =
+  const { columnDefinitions } =
     useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
 
-  const {
+  const { setViewObjectMetadataId, setAvailableFieldDefinitions } =
-    setViewObjectMetadataId,
+    useInitViewBar(viewBarId);
-    setAvailableSortDefinitions,
-    setAvailableFieldDefinitions,
-  } = useInitViewBar(viewBarId);
 
   useEffect(() => {
     if (isUndefinedOrNull(objectMetadataItem)) {
       return;
     }
     setViewObjectMetadataId?.(objectMetadataItem.id);
-    setAvailableSortDefinitions?.(sortDefinitions);
     setAvailableFieldDefinitions?.(columnDefinitions);
   }, [
     setViewObjectMetadataId,
     objectMetadataItem,
-    setAvailableSortDefinitions,
-    sortDefinitions,
     setAvailableFieldDefinitions,
     columnDefinitions,
   ]);

packages/twenty-front/src/modules/object-record/record-index/hooks/useFindManyRecordIndexTableParams.ts

@@ -8,7 +8,6 @@ import { useRecordGroupFilter } from '@/object-record/record-group/hooks/useReco
 import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
-import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
 
 export const useFindManyRecordIndexTableParams = (
@@ -33,14 +32,9 @@ export const useFindManyRecordIndexTableParams = (
   const { currentViewWithCombinedFiltersAndSorts } =
     useGetCurrentView(recordTableId);
 
-  const availableSortDefinitions = useRecoilComponentValueV2(
-    availableSortDefinitionsComponentState,
-    recordTableId,
-  );
-
   const viewSorts = currentViewWithCombinedFiltersAndSorts?.viewSorts ?? [];
 
-  const sorts = mapViewSortsToSorts(viewSorts, availableSortDefinitions);
+  const sorts = mapViewSortsToSorts(viewSorts);
 
   const currentRecordFilters = useRecoilComponentValueV2(
     currentRecordFiltersComponentState,

packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts

@@ -40,11 +40,6 @@ export const useHandleToggleColumnSort = ({
       const newSort: RecordSort = {
         id: v4(),
         fieldMetadataId,
-        definition: {
-          fieldMetadataId,
-          label: correspondingColumnDefinition.label,
-          iconName: correspondingColumnDefinition.iconName,
-        },
         direction: 'asc',
       };
 

packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts

@@ -14,7 +14,6 @@ import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/s
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
-import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
 import { isDefined } from 'twenty-shared';
 
@@ -52,11 +51,7 @@ export const useLoadRecordIndexBoardColumn = ({
 
   const viewsorts = currentViewWithCombinedFiltersAndSorts?.viewSorts ?? [];
 
-  const sortDefinitions = useRecoilComponentValueV2(
+  const sorts = mapViewSortsToSorts(viewsorts);
-    availableSortDefinitionsComponentState,
-  );
-
-  const sorts = mapViewSortsToSorts(viewsorts, sortDefinitions);
 
   const { filterValueDependencies } = useFilterValueDependencies();
 

packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexStates.ts

@@ -1,8 +1,8 @@
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
+import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
-import { formatFieldMetadataItemsAsSortDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { useSetRecordGroup } from '@/object-record/record-group/hooks/useSetRecordGroup';
 import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
@@ -81,9 +81,13 @@ export const useLoadRecordIndexStates = () => {
           )
           .getValue();
 
-        const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
+        const sortableFieldMetadataItems = snapshot
-          fields: activeFieldMetadataItems,
+          .getLoadable(
-        });
+            availableFieldMetadataItemsForSortFamilySelector({
+              objectMetadataItemId: objectMetadataItem.id,
+            }),
+          )
+          .getValue();
 
         const columnDefinitions: ColumnDefinition<FieldMetadata>[] =
           activeFieldMetadataItems
@@ -101,9 +105,12 @@ export const useLoadRecordIndexStates = () => {
                   (fieldMetadataItem) =>
                     fieldMetadataItem.id === column.fieldMetadataId,
                 );
-              const existsInSortDefinitions = sortDefinitions.some(
+
-                (sort) => sort.fieldMetadataId === column.fieldMetadataId,
+              const existsInSortDefinitions = sortableFieldMetadataItems.some(
+                (fieldMetadataItem) =>
+                  fieldMetadataItem.id === column.fieldMetadataId,
               );
+
               return {
                 ...column,
                 isFilterable: existsInFilterDefinitions,
@@ -228,23 +235,13 @@ export const useLoadRecordIndexStates = () => {
           ),
         }));
 
-        const activeFieldMetadataItems = objectMetadataItem.fields.filter(
-          ({ isActive, isSystem }) => isActive && !isSystem,
-        );
-
-        const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
-          fields: activeFieldMetadataItems,
-        });
-
         set(
           tableSortsComponentState.atomFamily({
             instanceId: recordIndexId,
           }),
-          mapViewSortsToSorts(view.viewSorts, sortDefinitions),
+          mapViewSortsToSorts(view.viewSorts),
-        );
-        setRecordIndexSorts(
-          mapViewSortsToSorts(view.viewSorts, sortDefinitions),
         );
+        setRecordIndexSorts(mapViewSortsToSorts(view.viewSorts));
         setRecordIndexViewType(view.type);
         setRecordIndexOpenRecordIn(view.openRecordIn);
         setRecordIndexViewKanbanFieldMetadataIdState(

packages/twenty-front/src/modules/object-record/record-sort/hooks/useSortableFieldMetadataItemsInRecordIndexContext.ts

@@ -1,15 +0,0 @@
-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 };
-};

packages/twenty-front/src/modules/object-record/record-sort/types/RecordSort.ts

@@ -1,9 +1,7 @@
-import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
 import { RecordSortDirection } from '@/object-record/record-sort/types/RecordSortDirection';
 
 export type RecordSort = {
   id: string;
   fieldMetadataId: string;
   direction: RecordSortDirection;
-  definition: SortDefinition;
 };

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx

@@ -7,7 +7,6 @@ import { useSetRecordIndexEntityCount } from '@/object-record/record-index/hooks
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { useSetTableColumns } from '@/object-record/record-table/hooks/useSetTableColumns';
 import { SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions';
-import { SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions';
 import { SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS } from '@/sign-in-background-mock/constants/SignInBackgroundMockViewFields';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useInitViewBar } from '@/views/hooks/useInitViewBar';
@@ -43,18 +42,14 @@ export const SignInBackgroundMockContainerEffect = ({
     objectNameSingular,
   });
 
-  const {
+  const { setAvailableFieldDefinitions, setViewObjectMetadataId } =
-    setAvailableSortDefinitions,
+    useInitViewBar(viewId);
-    setAvailableFieldDefinitions,
-    setViewObjectMetadataId,
-  } = useInitViewBar(viewId);
 
   const { setRecordIndexEntityCount } = useSetRecordIndexEntityCount(viewId);
 
   useEffect(() => {
     setViewObjectMetadataId?.(objectMetadataItem.id);
 
-    setAvailableSortDefinitions?.(SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS);
     setAvailableFieldDefinitions?.(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS);
 
     setAvailableTableColumns(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS);
@@ -70,7 +65,6 @@ export const SignInBackgroundMockContainerEffect = ({
     setContextStoreCurrentObjectMetadataItem(objectMetadataItem);
   }, [
     setViewObjectMetadataId,
-    setAvailableSortDefinitions,
     setAvailableFieldDefinitions,
     objectMetadataItem,
     setAvailableTableColumns,

packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions.ts

@@ -1,34 +0,0 @@
-import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
-
-export const SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS = [
-  {
-    fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
-    label: 'Domain Name',
-    iconName: 'IconLink',
-  },
-  {
-    fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
-    label: 'Employees',
-    iconName: 'IconUsers',
-  },
-  {
-    fieldMetadataId: 'REPLACE_ME',
-    label: 'Name',
-    iconName: 'IconBuildingSkyscraper',
-  },
-  {
-    fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
-    label: 'Address',
-    iconName: 'IconMap',
-  },
-  {
-    fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
-    label: 'Creation date',
-    iconName: 'IconCalendar',
-  },
-  {
-    fieldMetadataId: '20202020-9e9f-4235-98b2-c76f3e2d281e',
-    label: 'ICP',
-    iconName: 'IconTarget',
-  },
-] as SortDefinition[];

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

@@ -1,5 +1,6 @@
 import { IconArrowDown, IconArrowUp } from 'twenty-ui';
 
+import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById';
 import { useRemoveRecordSort } from '@/object-record/record-sort/hooks/useRemoveRecordSort';
 import { useUpsertRecordSort } from '@/object-record/record-sort/hooks/useUpsertRecordSort';
 import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
@@ -25,6 +26,10 @@ export const EditableSortChip = ({ recordSort }: EditableSortChipProps) => {
     removeRecordSort(recordSort.fieldMetadataId);
   };
 
+  const { fieldMetadataItem } = useFieldMetadataItemById(
+    recordSort.fieldMetadataId,
+  );
+
   const handleClick = () => {
     const newSort: RecordSort = {
       ...recordSort,
@@ -39,7 +44,7 @@ export const EditableSortChip = ({ recordSort }: EditableSortChipProps) => {
     <SortOrFilterChip
       key={recordSort.fieldMetadataId}
       testId={recordSort.fieldMetadataId}
-      labelValue={recordSort.definition.label}
+      labelValue={fieldMetadataItem.label}
       Icon={recordSort.direction === 'desc' ? IconArrowDown : IconArrowUp}
       onRemove={handleRemoveClick}
       onClick={handleClick}

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

@@ -15,6 +15,7 @@ import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryP
 
 import { useCheckIsSoftDeleteFilter } from '@/object-record/record-filter/hooks/useCheckIsSoftDeleteFilter';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
 import { SoftDeleteFilterChip } from '@/views/components/SoftDeleteFilterChip';
 import { useApplyCurrentViewFiltersToCurrentRecordFilters } from '@/views/hooks/useApplyCurrentViewFiltersToCurrentRecordFilters';
 import { useApplyCurrentViewSortsToCurrentRecordSorts } from '@/views/hooks/useApplyCurrentViewSortsToCurrentRecordSorts';
@@ -22,9 +23,8 @@ import { useAreViewFiltersDifferentFromRecordFilters } from '@/views/hooks/useAr
 import { useAreViewSortsDifferentFromRecordSorts } from '@/views/hooks/useAreViewSortsDifferentFromRecordSorts';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
-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';
 
@@ -123,8 +123,8 @@ export const ViewBarDetails = ({
     currentRecordFiltersComponentState,
   );
 
-  const availableSortDefinitions = useRecoilComponentValueV2(
+  const currentRecordSorts = useRecoilComponentValueV2(
-    availableSortDefinitionsComponentState,
+    currentRecordSortsComponentState,
   );
 
   const { objectNameSingular } = useObjectNameSingularFromPlural({
@@ -206,19 +206,14 @@ export const ViewBarDetails = ({
               <StyledSeperator />
             </StyledSeperatorContainer>
           )}
-          {mapViewSortsToSorts(
+          {currentRecordSorts.map((recordSort) => (
-            currentViewWithCombinedFiltersAndSorts?.viewSorts ?? [],
-            availableSortDefinitions,
-          ).map((recordSort) => (
             <EditableSortChip
               key={recordSort.fieldMetadataId}
               recordSort={recordSort}
             />
           ))}
           {isNonEmptyArray(recordFilters) &&
-            isNonEmptyArray(
+            isNonEmptyArray(currentRecordSorts) && (
-              currentViewWithCombinedFiltersAndSorts?.viewSorts,
-            ) && (
               <StyledSeperatorContainer>
                 <StyledSeperator />
               </StyledSeperatorContainer>

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

@@ -1,7 +1,6 @@
 import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { availableFieldMetadataItemsForSortFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector';
-import { formatFieldMetadataItemsAsSortDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions';
 import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
 import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2';
@@ -59,14 +58,8 @@ export const ViewBarRecordSortEffect = () => {
         return;
       }
 
-      const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
-        fields: sortableFieldMetadataItems,
-      });
-
       if (isDefined(currentView)) {
-        setCurrentRecordSorts(
+        setCurrentRecordSorts(mapViewSortsToSorts(currentView.viewSorts));
-          mapViewSortsToSorts(currentView.viewSorts, sortDefinitions),
-        );
         setHasInitializedCurrentRecordSorts(true);
       }
     }

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

@@ -3,47 +3,27 @@ import { useEffect } from 'react';
 import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
 import { useUpsertRecordSort } from '@/object-record/record-sort/hooks/useUpsertRecordSort';
 import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useUpsertCombinedViewSorts } from '@/views/hooks/useUpsertCombinedViewSorts';
-import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
 import { isDefined } from 'twenty-shared';
 
 export const ViewBarSortEffect = () => {
   const { upsertCombinedViewSort } = useUpsertCombinedViewSorts();
 
-  // TDOO: verify this instance id works
-  const availableSortDefinitions = useRecoilComponentValueV2(
-    availableSortDefinitionsComponentState,
-  );
-
   const { upsertRecordSort } = useUpsertRecordSort();
 
   const setOnSortSelect = useSetRecoilComponentStateV2(
     onSortSelectComponentState,
   );
 
-  // TDOO: verify this instance id works
-  const setAvailableSortDefinitionsInSortDropdown =
-    useSetRecoilComponentStateV2(availableSortDefinitionsComponentState);
-
   useEffect(() => {
-    if (isDefined(availableSortDefinitions)) {
-      setAvailableSortDefinitionsInSortDropdown(availableSortDefinitions);
-    }
     setOnSortSelect(() => (sort: RecordSort | null) => {
       if (isDefined(sort)) {
         upsertCombinedViewSort(sort);
         upsertRecordSort(sort);
       }
     });
-  }, [
+  }, [setOnSortSelect, upsertCombinedViewSort, upsertRecordSort]);
-    availableSortDefinitions,
-    setAvailableSortDefinitionsInSortDropdown,
-    setOnSortSelect,
-    upsertCombinedViewSort,
-    upsertRecordSort,
-  ]);
 
   return <></>;
 };

packages/twenty-front/src/modules/views/hooks/__tests__/useApplyCurrentViewSortsToCurrentRecordSorts.test.tsx

@@ -96,11 +96,6 @@ describe('useApplyCurrentViewSortsToCurrentRecordSorts', () => {
         id: mockViewSort.id,
         fieldMetadataId: mockViewSort.fieldMetadataId,
         direction: mockViewSort.direction,
-        definition: {
-          fieldMetadataId: mockViewSort.fieldMetadataId,
-          iconName: mockFieldMetadataItem.icon ?? '',
-          label: mockFieldMetadataItem.label,
-        },
       } satisfies RecordSort,
     ]);
   });

packages/twenty-front/src/modules/views/hooks/__tests__/useApplyViewSortsToCurrentRecordSorts.test.tsx

@@ -70,11 +70,6 @@ describe('useApplyViewSortsToCurrentRecordSorts', () => {
         id: mockViewSort.id,
         fieldMetadataId: mockViewSort.fieldMetadataId,
         direction: mockViewSort.direction,
-        definition: {
-          fieldMetadataId: mockViewSort.fieldMetadataId,
-          label: mockFieldMetadataItem.label,
-          iconName: mockFieldMetadataItem.icon ?? '',
-        },
       } satisfies RecordSort,
     ]);
   });

packages/twenty-front/src/modules/views/hooks/useApplyCurrentViewSortsToCurrentRecordSorts.ts

@@ -1,6 +1,4 @@
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
-import { formatFieldMetadataItemsAsSortDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions';
-import { useSortableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-sort/hooks/useSortableFieldMetadataItemsInRecordIndexContext';
 import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
 import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -25,18 +23,9 @@ export const useApplyCurrentViewSortsToCurrentRecordSorts = () => {
     currentRecordSortsComponentState,
   );
 
-  const { sortableFieldMetadataItems } =
-    useSortableFieldMetadataItemsInRecordIndexContext();
-
   const applyCurrentViewSortsToCurrentRecordSorts = () => {
-    const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
-      fields: sortableFieldMetadataItems,
-    });
-
     if (isDefined(currentView)) {
-      setCurrentRecordSorts(
+      setCurrentRecordSorts(mapViewSortsToSorts(currentView.viewSorts));
-        mapViewSortsToSorts(currentView.viewSorts, sortDefinitions),
-      );
     }
   };
 

packages/twenty-front/src/modules/views/hooks/useApplyViewSortsToCurrentRecordSorts.ts

@@ -1,5 +1,3 @@
-import { formatFieldMetadataItemsAsSortDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions';
-import { useSortableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-sort/hooks/useSortableFieldMetadataItemsInRecordIndexContext';
 import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { ViewSort } from '@/views/types/ViewSort';
@@ -10,15 +8,8 @@ export const useApplyViewSortsToCurrentRecordSorts = () => {
     currentRecordSortsComponentState,
   );
 
-  const { sortableFieldMetadataItems } =
-    useSortableFieldMetadataItemsInRecordIndexContext();
-
   const applyViewSortsToCurrentRecordSorts = (viewSorts: ViewSort[]) => {
-    const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
+    const recordSortsToApply = mapViewSortsToSorts(viewSorts);
-      fields: sortableFieldMetadataItems,
-    });
-
-    const recordSortsToApply = mapViewSortsToSorts(viewSorts, sortDefinitions);
 
     setCurrentRecordSorts(recordSortsToApply);
   };

packages/twenty-front/src/modules/views/hooks/useInitViewBar.ts

@@ -1,6 +1,5 @@
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { availableFieldDefinitionsComponentState } from '@/views/states/availableFieldDefinitionsComponentState';
-import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
 import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
 
 export const useInitViewBar = (viewBarInstanceId?: string) => {
@@ -9,11 +8,6 @@ export const useInitViewBar = (viewBarInstanceId?: string) => {
     viewBarInstanceId,
   );
 
-  const setAvailableSortDefinitions = useSetRecoilComponentStateV2(
-    availableSortDefinitionsComponentState,
-    viewBarInstanceId,
-  );
-
   const setViewObjectMetadataId = useSetRecoilComponentStateV2(
     viewObjectMetadataIdComponentState,
     viewBarInstanceId,
@@ -21,7 +15,6 @@ export const useInitViewBar = (viewBarInstanceId?: string) => {
 
   return {
     setAvailableFieldDefinitions,
-    setAvailableSortDefinitions,
     setViewObjectMetadataId,
   };
 };

packages/twenty-front/src/modules/views/hooks/useUpsertCombinedViewSorts.ts

@@ -1,5 +1,4 @@
 import { useRecoilCallback } from 'recoil';
-import { v4 } from 'uuid';
 
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
@@ -103,7 +102,6 @@ export const useUpsertCombinedViewSorts = (viewBarComponentId?: string) => {
           ...unsavedToUpsertViewSorts,
           {
             ...upsertedSort,
-            id: v4(),
             __typename: 'ViewSort',
           } satisfies ViewSort,
         ]);

packages/twenty-front/src/modules/views/states/availableSortDefinitionsComponentState.ts

@@ -1,11 +0,0 @@
-import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
-import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
-
-export const availableSortDefinitionsComponentState = createComponentStateV2<
-  SortDefinition[]
->({
-  key: 'availableSortDefinitionsComponentState',
-  defaultValue: [],
-  componentInstanceContext: ViewComponentInstanceContext,
-});

packages/twenty-front/src/modules/views/utils/__tests__/viewMapFunctions.test.ts

@@ -13,13 +13,6 @@ import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
 
 import { FieldMetadataType } from '~/generated/graphql';
 
-const baseDefinition = {
-  fieldMetadataId: '05731f68-6e7a-4903-8374-c0b6a9063482',
-  label: 'label',
-  iconName: 'iconName',
-  fieldName: 'fieldName',
-};
-
 const baseFieldMetadataItem = {
   id: '05731f68-6e7a-4903-8374-c0b6a9063482',
   createdAt: '2021-01-01',
@@ -44,12 +37,9 @@ describe('mapViewSortsToSorts', () => {
         id: 'id',
         fieldMetadataId: '05731f68-6e7a-4903-8374-c0b6a9063482',
         direction: 'asc',
-        definition: baseDefinition,
       },
     ];
-    expect(mapViewSortsToSorts(viewSorts, [baseDefinition])).toEqual(
+    expect(mapViewSortsToSorts(viewSorts)).toEqual(expectedSorts);
-      expectedSorts,
-    );
   });
 });
 

packages/twenty-front/src/modules/views/utils/getQueryVariablesFromView.ts

@@ -1,7 +1,6 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 
-import { formatFieldMetadataItemsAsSortDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions';
 import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { RecordFilterValueDependencies } from '@/object-record/record-filter/types/RecordFilterValueDependencies';
 
@@ -31,10 +30,6 @@ export const getQueryVariablesFromView = ({
 
   const { viewFilterGroups, viewFilters, viewSorts } = view;
 
-  const sortDefinitions = formatFieldMetadataItemsAsSortDefinitions({
-    fields: fieldMetadataItems,
-  });
-
   const filter = computeViewRecordGqlOperationFilter(
     filterValueDependencies,
     mapViewFiltersToFilters(viewFilters, fieldMetadataItems),
@@ -44,7 +39,7 @@ export const getQueryVariablesFromView = ({
 
   const orderBy = turnSortsIntoOrderBy(
     objectMetadataItem,
-    mapViewSortsToSorts(viewSorts, sortDefinitions),
+    mapViewSortsToSorts(viewSorts),
   );
 
   return {

packages/twenty-front/src/modules/views/utils/mapViewSortsToSorts.ts

@@ -1,27 +1,15 @@
-import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
 import { isDefined } from 'twenty-shared';
 
 import { RecordSort } from '@/object-record/record-sort/types/RecordSort';
 import { ViewSort } from '../types/ViewSort';
 
-export const mapViewSortsToSorts = (
+export const mapViewSortsToSorts = (viewSorts: ViewSort[]): RecordSort[] => {
-  viewSorts: ViewSort[],
-  availableSortDefinitions: SortDefinition[],
-): RecordSort[] => {
   return viewSorts
     .map((viewSort) => {
-      const availableSortDefinition = availableSortDefinitions.find(
-        (sortDefinition) =>
-          sortDefinition.fieldMetadataId === viewSort.fieldMetadataId,
-      );
-
-      if (!availableSortDefinition) return null;
-
       return {
         id: viewSort.id,
         fieldMetadataId: viewSort.fieldMetadataId,
         direction: viewSort.direction,
-        definition: availableSortDefinition,
       };
     })
     .filter(isDefined);