Implement record sort states and record sort context (#10257)

This PR is simple, it creates states for record sort, mirroring record
filter states.

It also implements RecordSortsComponentInstanceContext everywhere
RecordFiltersComponentInstanceContext is used.

This could be later merged into a common RecordContext concept but we
first need to decide how to handle the existing ContextStore and
RecordIndexContext and ideally end up with a unique context (or a
context provider component that wraps in all those contexts at once).

Some bugs are already present on main when trying to delete a sort, they
will be fixed in the next PRs.

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx

@@ -8,6 +8,7 @@ import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dro
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@@ -65,17 +66,21 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
           <RecordFiltersComponentInstanceContext.Provider
             value={{ instanceId }}
           >
-            <ObjectFilterDropdownComponentInstanceContext.Provider
+            <RecordSortsComponentInstanceContext.Provider
               value={{ instanceId }}
             >
-              <RecordTableComponentInstanceContext.Provider
-                value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+              <ObjectFilterDropdownComponentInstanceContext.Provider
+                value={{ instanceId }}
               >
-                <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-                  <Story />
-                </ViewComponentInstanceContext.Provider>
-              </RecordTableComponentInstanceContext.Provider>
-            </ObjectFilterDropdownComponentInstanceContext.Provider>
+                <RecordTableComponentInstanceContext.Provider
+                  value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+                >
+                  <ViewComponentInstanceContext.Provider value={{ instanceId }}>
+                    <Story />
+                  </ViewComponentInstanceContext.Provider>
+                </RecordTableComponentInstanceContext.Provider>
+              </ObjectFilterDropdownComponentInstanceContext.Provider>
+            </RecordSortsComponentInstanceContext.Provider>
           </RecordFiltersComponentInstanceContext.Provider>
         </RecordIndexContextProvider>
       );

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx

@@ -8,6 +8,7 @@ import { ObjectOptionsDropdownContext } from '@/object-record/object-options-dro
 import { ObjectOptionsContentId } from '@/object-record/object-options-dropdown/types/ObjectOptionsContentId';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
@@ -38,21 +39,21 @@ const meta: Meta<typeof ObjectOptionsDropdownContent> = {
       }, [setObjectMetadataItems]);
 
       return (
-        <RecordFiltersComponentInstanceContext.Provider
-          value={{ instanceId: 'object-options-dropdown' }}
-        >
-          <RecordTableComponentInstanceContext.Provider
-            value={{ instanceId, onColumnsChange: () => {} }}
-          >
-            <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-              <MemoryRouter
-                initialEntries={['/one', '/two', { pathname: '/three' }]}
-                initialIndex={1}
-              >
-                <Story />
-              </MemoryRouter>
-            </ViewComponentInstanceContext.Provider>
-          </RecordTableComponentInstanceContext.Provider>
+        <RecordFiltersComponentInstanceContext.Provider value={{ instanceId }}>
+          <RecordSortsComponentInstanceContext.Provider value={{ instanceId }}>
+            <RecordTableComponentInstanceContext.Provider
+              value={{ instanceId, onColumnsChange: () => {} }}
+            >
+              <ViewComponentInstanceContext.Provider value={{ instanceId }}>
+                <MemoryRouter
+                  initialEntries={['/one', '/two', { pathname: '/three' }]}
+                  initialIndex={1}
+                >
+                  <Story />
+                </MemoryRouter>
+              </ViewComponentInstanceContext.Provider>
+            </RecordTableComponentInstanceContext.Provider>
+          </RecordSortsComponentInstanceContext.Provider>
         </RecordFiltersComponentInstanceContext.Provider>
       );
     },

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

@@ -12,6 +12,7 @@ import { RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect } from '@
 import { RecordIndexLoadBaseOnContextStoreEffect } from '@/object-record/record-index/components/RecordIndexLoadBaseOnContextStoreEffect';
 import { RecordIndexPageHeader } from '@/object-record/record-index/components/RecordIndexPageHeader';
 import { useHandleIndexIdentifierClick } from '@/object-record/record-index/hooks/useHandleIndexIdentifierClick';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { PageBody } from '@/ui/layout/page/components/PageBody';
 import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -72,22 +73,26 @@ export const RecordIndexContainerGater = () => {
           <RecordFiltersComponentInstanceContext.Provider
             value={{ instanceId: recordIndexId }}
           >
-            <ActionMenuComponentInstanceContext.Provider
-              value={{
-                instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
-              }}
+            <RecordSortsComponentInstanceContext.Provider
+              value={{ instanceId: recordIndexId }}
             >
-              <PageTitle
-                title={`${capitalize(objectMetadataItem.namePlural)}`}
-              />
-              <RecordIndexPageHeader />
-              <PageBody>
-                <StyledIndexContainer>
-                  <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
-                  <RecordIndexContainer />
-                </StyledIndexContainer>
-              </PageBody>
-            </ActionMenuComponentInstanceContext.Provider>
+              <ActionMenuComponentInstanceContext.Provider
+                value={{
+                  instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
+                }}
+              >
+                <PageTitle
+                  title={`${capitalize(objectMetadataItem.namePlural)}`}
+                />
+                <RecordIndexPageHeader />
+                <PageBody>
+                  <StyledIndexContainer>
+                    <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
+                    <RecordIndexContainer />
+                  </StyledIndexContainer>
+                </PageBody>
+              </ActionMenuComponentInstanceContext.Provider>
+            </RecordSortsComponentInstanceContext.Provider>
           </RecordFiltersComponentInstanceContext.Provider>
           <RecordIndexLoadBaseOnContextStoreEffect />
         </ViewComponentInstanceContext.Provider>

packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx

@@ -8,6 +8,7 @@ import { viewableRecordIdState } from '@/object-record/record-right-drawer/state
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
 import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@@ -46,30 +47,34 @@ export const RightDrawerRecord = () => {
     <RecordFiltersComponentInstanceContext.Provider
       value={{ instanceId: `record-show-${objectRecordId}` }}
     >
-      <ContextStoreComponentInstanceContext.Provider
-        value={{
-          instanceId: `record-show-${objectRecordId}`,
-        }}
+      <RecordSortsComponentInstanceContext.Provider
+        value={{ instanceId: `record-show-${objectRecordId}` }}
       >
-        <ActionMenuComponentInstanceContext.Provider
-          value={{ instanceId: `record-show-${objectRecordId}` }}
+        <ContextStoreComponentInstanceContext.Provider
+          value={{
+            instanceId: `record-show-${objectRecordId}`,
+          }}
         >
-          <StyledRightDrawerRecord isMobile={isMobile}>
-            <RecordFieldValueSelectorContextProvider>
-              {!isNewViewableRecordLoading && (
-                <RecordValueSetterEffect recordId={objectRecordId} />
-              )}
-              <RecordShowContainer
-                objectNameSingular={objectNameSingular}
-                objectRecordId={objectRecordId}
-                loading={false}
-                isInRightDrawer={true}
-                isNewRightDrawerItemLoading={isNewViewableRecordLoading}
-              />
-            </RecordFieldValueSelectorContextProvider>
-          </StyledRightDrawerRecord>
-        </ActionMenuComponentInstanceContext.Provider>
-      </ContextStoreComponentInstanceContext.Provider>
+          <ActionMenuComponentInstanceContext.Provider
+            value={{ instanceId: `record-show-${objectRecordId}` }}
+          >
+            <StyledRightDrawerRecord isMobile={isMobile}>
+              <RecordFieldValueSelectorContextProvider>
+                {!isNewViewableRecordLoading && (
+                  <RecordValueSetterEffect recordId={objectRecordId} />
+                )}
+                <RecordShowContainer
+                  objectNameSingular={objectNameSingular}
+                  objectRecordId={objectRecordId}
+                  loading={false}
+                  isInRightDrawer={true}
+                  isNewRightDrawerItemLoading={isNewViewableRecordLoading}
+                />
+              </RecordFieldValueSelectorContextProvider>
+            </StyledRightDrawerRecord>
+          </ActionMenuComponentInstanceContext.Provider>
+        </ContextStoreComponentInstanceContext.Provider>
+      </RecordSortsComponentInstanceContext.Provider>
     </RecordFiltersComponentInstanceContext.Provider>
   );
 };

packages/twenty-front/src/modules/object-record/record-sort/states/context/RecordSortsComponentInstanceContext.ts

@@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const RecordSortsComponentInstanceContext =
+  createComponentInstanceContext();

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

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

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

@@ -0,0 +1,9 @@
+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/object-record/record-sort/types/RecordSortDirection.ts

@@ -0,0 +1,3 @@
+export const RECORD_SORT_DIRECTIONS = ['asc', 'desc'] as const;
+
+export type RecordSortDirection = (typeof RECORD_SORT_DIRECTIONS)[number];