Added parallel code path to set new record sorts state

packages/twenty-front/src/modules/object-metadata/states/availableFieldMetadataItemsForSortFamilySelector.ts

@@ -0,0 +1,26 @@
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { filterSortableFieldMetadataItems } from '@/object-metadata/utils/filterSortableFieldMetadataItems';
+import { selectorFamily } from 'recoil';
+import { isDefined } from 'twenty-shared';
+
+export const availableFieldMetadataItemsForSortFamilySelector = selectorFamily({
+  key: 'availableFieldMetadataItemsForSortFamilySelector',
+  get:
+    ({ objectMetadataItemId }: { objectMetadataItemId: string }) =>
+    ({ get }) => {
+      const objectMetadataItems = get(objectMetadataItemsState);
+
+      const objectMetadataItem = objectMetadataItems.find(
+        (item) => item.id === objectMetadataItemId,
+      );
+
+      if (!isDefined(objectMetadataItem)) {
+        return [];
+      }
+
+      const availableFieldMetadataItemsForSort =
+        objectMetadataItem.fields.filter(filterSortableFieldMetadataItems);
+
+      return availableFieldMetadataItemsForSort;
+    },
+});

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

@@ -0,0 +1,13 @@
+import { SORTABLE_FIELD_METADATA_TYPES } from '@/object-metadata/constants/SortableFieldMetadataTypes';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+
+export const filterSortableFieldMetadataItems = (field: FieldMetadataItem) => {
+  const isSystemField = field.isSystem;
+  const isFieldActive = field.isActive;
+
+  const isFieldTypeSortable = SORTABLE_FIELD_METADATA_TYPES.includes(
+    field.type,
+  );
+
+  return !isSystemField && isFieldActive && isFieldTypeSortable;
+};

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

@@ -11,14 +11,6 @@ export const getRelationObjectMetadataNameSingular = ({
   return field.relationDefinition?.targetObjectMetadata.nameSingular;
 };
 
-export const getRelationObjectMetadataNamePlural = ({
-  field,
-}: {
-  field: ObjectMetadataItem['fields'][0];
-}): string | undefined => {
-  return field.relationDefinition?.targetObjectMetadata.namePlural;
-};
-
 export const getFilterTypeFromFieldType = (
   fieldType: FieldMetadataType,
 ): FilterableFieldType => {

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

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 {

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts → 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,
+  });

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState.ts → 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,
   });

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,

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedSortDirectionState.ts → 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,
   });

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[];
 };

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,

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 ?? [];