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.
2025-02-19 16:51:49 +01:00
parent 2372114f52
commit 2fc8eaa25b
17 changed files with 368 additions and 278 deletions
--- a/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuBar.stories.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuBar.stories.tsx
@ -11,6 +11,7 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
 import { msg } from '@lingui/core/macro';
 import { expect, jest } from '@storybook/jest';
@ -32,59 +33,63 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
      <RecordFiltersComponentInstanceContext.Provider
        value={{ instanceId: 'story-action-menu' }}
      >
-        <ContextStoreComponentInstanceContext.Provider
+        <RecordSortsComponentInstanceContext.Provider
          value={{ instanceId: 'story-action-menu' }}
        >
-          <RecoilRoot
-            initializeState={({ set }) => {
-              set(
-                contextStoreTargetedRecordsRuleComponentState.atomFamily({
-                  instanceId: 'story-action-menu',
-                }),
-                {
-                  mode: 'selection',
-                  selectedRecordIds: ['1', '2', '3'],
-                },
-              );
-              set(
-                contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
-                  instanceId: 'story-action-menu',
-                }),
-                3,
-              );
-              const map = new Map<string, ActionMenuEntry>();
-              map.set('delete', {
-                isPinned: true,
-                scope: ActionMenuEntryScope.RecordSelection,
-                type: ActionMenuEntryType.Standard,
-                key: 'delete',
-                label: msg`Delete`,
-                position: 0,
-                Icon: IconTrash,
-                onClick: deleteMock,
-              });
-              set(
-                actionMenuEntriesComponentState.atomFamily({
-                  instanceId: 'story-action-menu',
-                }),
-                map,
-              );
-              set(
-                isBottomBarOpenedComponentState.atomFamily({
-                  instanceId:
-                    getActionBarIdFromActionMenuId('story-action-menu'),
-                }),
-                true,
-              );
-            }}
+          <ContextStoreComponentInstanceContext.Provider
+            value={{ instanceId: 'story-action-menu' }}
          >
-            <ActionMenuComponentInstanceContext.Provider
-              value={{ instanceId: 'story-action-menu' }}
+            <RecoilRoot
+              initializeState={({ set }) => {
+                set(
+                  contextStoreTargetedRecordsRuleComponentState.atomFamily({
+                    instanceId: 'story-action-menu',
+                  }),
+                  {
+                    mode: 'selection',
+                    selectedRecordIds: ['1', '2', '3'],
+                  },
+                );
+                set(
+                  contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
+                    instanceId: 'story-action-menu',
+                  }),
+                  3,
+                );
+                const map = new Map<string, ActionMenuEntry>();
+                map.set('delete', {
+                  isPinned: true,
+                  scope: ActionMenuEntryScope.RecordSelection,
+                  type: ActionMenuEntryType.Standard,
+                  key: 'delete',
+                  label: msg`Delete`,
+                  position: 0,
+                  Icon: IconTrash,
+                  onClick: deleteMock,
+                });
+                set(
+                  actionMenuEntriesComponentState.atomFamily({
+                    instanceId: 'story-action-menu',
+                  }),
+                  map,
+                );
+                set(
+                  isBottomBarOpenedComponentState.atomFamily({
+                    instanceId:
+                      getActionBarIdFromActionMenuId('story-action-menu'),
+                  }),
+                  true,
+                );
+              }}
            >
-              <Story />
-            </ActionMenuComponentInstanceContext.Provider>
-          </RecoilRoot>
-        </ContextStoreComponentInstanceContext.Provider>
+              <ActionMenuComponentInstanceContext.Provider
+                value={{ instanceId: 'story-action-menu' }}
+              >
+                <Story />
+              </ActionMenuComponentInstanceContext.Provider>
+            </RecoilRoot>
+          </ContextStoreComponentInstanceContext.Provider>
+        </RecordSortsComponentInstanceContext.Provider>
      </RecordFiltersComponentInstanceContext.Provider>
    ),
  ],
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
@ -14,6 +14,7 @@ import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpe
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { workflowReactFlowRefState } from '@/workflow/workflow-diagram/states/workflowReactFlowRefState';
@ -86,54 +87,60 @@ export const CommandMenuContainer = ({
    <RecordFiltersComponentInstanceContext.Provider
      value={{ instanceId: 'command-menu' }}
    >
-      <ContextStoreComponentInstanceContext.Provider
+      <RecordSortsComponentInstanceContext.Provider
        value={{ instanceId: 'command-menu' }}
      >
-        <ActionMenuComponentInstanceContext.Provider
+        <ContextStoreComponentInstanceContext.Provider
          value={{ instanceId: 'command-menu' }}
        >
-          <ActionMenuContext.Provider
-            value={{
-              isInRightDrawer: false,
-              onActionExecutedCallback: ({ key }) => {
-                if (
-                  key !== RecordAgnosticActionsKey.SEARCH_RECORDS &&
-                  key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK &&
-                  key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD
-                ) {
-                  toggleCommandMenu();
-                }
-                if (key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK) {
-                  setCommandMenuSearch('');
-                }
-              },
-            }}
+          <ActionMenuComponentInstanceContext.Provider
+            value={{ instanceId: 'command-menu' }}
          >
-            <RecordActionMenuEntriesSetter />
-            <RecordAgnosticActionMenuEntriesSetter />
-            {isWorkflowEnabled && (
-              <RunWorkflowRecordAgnosticActionMenuEntriesSetter />
-            )}
-            <ActionMenuConfirmationModals />
-            <AnimatePresence mode="wait">
-              {isCommandMenuOpened && (
-                <StyledCommandMenu
-                  data-testid="command-menu"
-                  ref={commandMenuRef}
-                  className="command-menu"
-                  animate={targetVariantForAnimation}
-                  initial="closed"
-                  exit="closed"
-                  variants={COMMAND_MENU_ANIMATION_VARIANTS}
-                  transition={{ duration: theme.animation.duration.normal }}
-                >
-                  {children}
-                </StyledCommandMenu>
+            <ActionMenuContext.Provider
+              value={{
+                isInRightDrawer: false,
+                onActionExecutedCallback: ({ key }) => {
+                  if (
+                    key !== RecordAgnosticActionsKey.SEARCH_RECORDS &&
+                    key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK &&
+                    key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD
+                  ) {
+                    toggleCommandMenu();
+                  }
+                  if (
+                    key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK
+                  ) {
+                    setCommandMenuSearch('');
+                  }
+                },
+              }}
+            >
+              <RecordActionMenuEntriesSetter />
+              <RecordAgnosticActionMenuEntriesSetter />
+              {isWorkflowEnabled && (
+                <RunWorkflowRecordAgnosticActionMenuEntriesSetter />
              )}
-            </AnimatePresence>
-          </ActionMenuContext.Provider>
-        </ActionMenuComponentInstanceContext.Provider>
-      </ContextStoreComponentInstanceContext.Provider>
+              <ActionMenuConfirmationModals />
+              <AnimatePresence mode="wait">
+                {isCommandMenuOpened && (
+                  <StyledCommandMenu
+                    data-testid="command-menu"
+                    ref={commandMenuRef}
+                    className="command-menu"
+                    animate={targetVariantForAnimation}
+                    initial="closed"
+                    exit="closed"
+                    variants={COMMAND_MENU_ANIMATION_VARIANTS}
+                    transition={{ duration: theme.animation.duration.normal }}
+                  >
+                    {children}
+                  </StyledCommandMenu>
+                )}
+              </AnimatePresence>
+            </ActionMenuContext.Provider>
+          </ActionMenuComponentInstanceContext.Provider>
+        </ContextStoreComponentInstanceContext.Provider>
+      </RecordSortsComponentInstanceContext.Provider>
    </RecordFiltersComponentInstanceContext.Provider>
  );
 };
--- a/packages/twenty-front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
@ -21,6 +21,7 @@ import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpe
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { HttpResponse, graphql } from 'msw';
 import { IconDotsVertical } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
@ -52,17 +53,21 @@ const ContextStoreDecorator: Decorator = (Story) => {
    <RecordFiltersComponentInstanceContext.Provider
      value={{ instanceId: 'command-menu' }}
    >
-      <ContextStoreComponentInstanceContext.Provider
+      <RecordSortsComponentInstanceContext.Provider
        value={{ instanceId: 'command-menu' }}
      >
-        <ActionMenuComponentInstanceContext.Provider
+        <ContextStoreComponentInstanceContext.Provider
          value={{ instanceId: 'command-menu' }}
        >
-          <JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company">
-            <Story />
-          </JestContextStoreSetter>
-        </ActionMenuComponentInstanceContext.Provider>
-      </ContextStoreComponentInstanceContext.Provider>
+          <ActionMenuComponentInstanceContext.Provider
+            value={{ instanceId: 'command-menu' }}
+          >
+            <JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company">
+              <Story />
+            </JestContextStoreSetter>
+          </ActionMenuComponentInstanceContext.Provider>
+        </ContextStoreComponentInstanceContext.Provider>
+      </RecordSortsComponentInstanceContext.Provider>
    </RecordFiltersComponentInstanceContext.Provider>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/stories/MultipleFiltersDropdownButton.stories.tsx
+++ b/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>
      );
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/stories/ObjectOptionsDropdownContent.stories.tsx
+++ b/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>
      );
    },
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
+++ b/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>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-sort/states/context/RecordSortsComponentInstanceContext.ts
+++ b/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();
--- a/packages/twenty-front/src/modules/object-record/record-sort/states/currentRecordSortsComponentState.ts
+++ b/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,
+});
--- a/packages/twenty-front/src/modules/object-record/record-sort/types/RecordSort.ts
+++ b/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;
+};
--- a/packages/twenty-front/src/modules/object-record/record-sort/types/RecordSortDirection.ts
+++ b/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];
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
@ -6,6 +6,7 @@ import { ContextStoreComponentInstanceContext } from '@/context-store/states/con
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 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 { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
 import { SignInBackgroundMockContainerEffect } from '@/sign-in-background-mock/components/SignInBackgroundMockContainerEffect';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -52,36 +53,40 @@ export const SignInBackgroundMockContainer = () => {
          <RecordFiltersComponentInstanceContext.Provider
            value={{ instanceId: recordIndexId }}
          >
-            <ContextStoreComponentInstanceContext.Provider
-              value={{
-                instanceId: 'main-context-store',
-              }}
+            <RecordSortsComponentInstanceContext.Provider
+              value={{ instanceId: recordIndexId }}
            >
-              <SignInBackgroundMockContainerEffect
-                objectNamePlural={objectNamePlural}
-                recordTableId={recordIndexId}
-                viewId={viewBarId}
-              />
-              <ActionMenuComponentInstanceContext.Provider
-                value={{ instanceId: recordIndexId }}
+              <ContextStoreComponentInstanceContext.Provider
+                value={{
+                  instanceId: 'main-context-store',
+                }}
              >
-                {isDefined(objectMetadataItem) && (
-                  <>
-                    <ViewBar
-                      viewBarId={viewBarId}
-                      optionsDropdownButton={<></>}
-                    />
+                <SignInBackgroundMockContainerEffect
+                  objectNamePlural={objectNamePlural}
+                  recordTableId={recordIndexId}
+                  viewId={viewBarId}
+                />
+                <ActionMenuComponentInstanceContext.Provider
+                  value={{ instanceId: recordIndexId }}
+                >
+                  {isDefined(objectMetadataItem) && (
+                    <>
+                      <ViewBar
+                        viewBarId={viewBarId}
+                        optionsDropdownButton={<></>}
+                      />

-                    <RecordTableWithWrappers
-                      objectNameSingular={objectNameSingular}
-                      recordTableId={recordIndexId}
-                      viewBarId={viewBarId}
-                      updateRecordMutation={() => {}}
-                    />
-                  </>
-                )}
-              </ActionMenuComponentInstanceContext.Provider>
-            </ContextStoreComponentInstanceContext.Provider>
+                      <RecordTableWithWrappers
+                        objectNameSingular={objectNameSingular}
+                        recordTableId={recordIndexId}
+                        viewBarId={viewBarId}
+                        updateRecordMutation={() => {}}
+                      />
+                    </>
+                  )}
+                </ActionMenuComponentInstanceContext.Provider>
+              </ContextStoreComponentInstanceContext.Provider>
+            </RecordSortsComponentInstanceContext.Provider>
          </RecordFiltersComponentInstanceContext.Provider>
        </ViewComponentInstanceContext.Provider>
      </RecordIndexContextProvider>
--- a/packages/twenty-front/src/modules/views/utils/tests/viewMapFunctions.test.ts
+++ b/packages/twenty-front/src/modules/views/utils/tests/viewMapFunctions.test.ts
@ -73,6 +73,8 @@ describe('mapViewFiltersToFilters', () => {
        operand: ViewFilterOperand.Is,
        label: baseFieldMetadataItem.label,
        type: FieldMetadataType.FULL_NAME,
+        positionInViewFilterGroup: undefined,
+        viewFilterGroupId: undefined,
      },
    ];
    expect(
--- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
@ -8,6 +8,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 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 { PageBody } from '@/ui/layout/page/components/PageBody';
@ -50,64 +51,69 @@ export const RecordShowPage = () => {
      <RecordFiltersComponentInstanceContext.Provider
        value={{ instanceId: `record-show-${objectRecordId}` }}
      >
-        <ContextStoreComponentInstanceContext.Provider
-          value={{ instanceId: `main-context-store` }}
+        <RecordSortsComponentInstanceContext.Provider
+          value={{ instanceId: `record-show-${objectRecordId}` }}
        >
-          <ActionMenuComponentInstanceContext.Provider
-            value={{ instanceId: `record-show-${objectRecordId}` }}
+          <ContextStoreComponentInstanceContext.Provider
+            value={{ instanceId: `main-context-store` }}
          >
-            <RecordValueSetterEffect recordId={objectRecordId} />
-            <PageContainer>
-              <PageTitle title={pageTitle} />
-              <RecordShowPageHeader
-                objectNameSingular={objectNameSingular}
-                objectRecordId={objectRecordId}
-                headerIcon={headerIcon}
-              >
-                <>
-                  {!isCommandMenuV2Enabled &&
-                    objectNameSingular === CoreObjectNameSingular.Workflow && (
-                      <RecordShowPageWorkflowHeader
-                        workflowId={objectRecordId}
-                      />
-                    )}
-                  {!isCommandMenuV2Enabled &&
-                    objectNameSingular ===
-                      CoreObjectNameSingular.WorkflowVersion && (
-                      <RecordShowPageWorkflowVersionHeader
-                        workflowVersionId={objectRecordId}
-                      />
-                    )}
-                  {(isCommandMenuV2Enabled ||
-                    (objectNameSingular !== CoreObjectNameSingular.Workflow &&
-                      objectNameSingular !==
-                        CoreObjectNameSingular.WorkflowVersion)) && (
-                    <RecordShowActionMenu
-                      {...{
-                        isFavorite,
-                        record,
-                        handleFavoriteButtonClick,
-                        objectMetadataItem,
-                        objectNameSingular,
-                      }}
-                    />
-                  )}
-                </>
-              </RecordShowPageHeader>
-              <PageBody>
-                <TimelineActivityContext.Provider
-                  value={{ labelIdentifierValue: pageName }}
+            <ActionMenuComponentInstanceContext.Provider
+              value={{ instanceId: `record-show-${objectRecordId}` }}
+            >
+              <RecordValueSetterEffect recordId={objectRecordId} />
+              <PageContainer>
+                <PageTitle title={pageTitle} />
+                <RecordShowPageHeader
+                  objectNameSingular={objectNameSingular}
+                  objectRecordId={objectRecordId}
+                  headerIcon={headerIcon}
                >
-                  <RecordShowContainer
-                    objectNameSingular={objectNameSingular}
-                    objectRecordId={objectRecordId}
-                    loading={loading}
-                  />
-                </TimelineActivityContext.Provider>
-              </PageBody>
-            </PageContainer>
-          </ActionMenuComponentInstanceContext.Provider>
-        </ContextStoreComponentInstanceContext.Provider>
+                  <>
+                    {!isCommandMenuV2Enabled &&
+                      objectNameSingular ===
+                        CoreObjectNameSingular.Workflow && (
+                        <RecordShowPageWorkflowHeader
+                          workflowId={objectRecordId}
+                        />
+                      )}
+                    {!isCommandMenuV2Enabled &&
+                      objectNameSingular ===
+                        CoreObjectNameSingular.WorkflowVersion && (
+                        <RecordShowPageWorkflowVersionHeader
+                          workflowVersionId={objectRecordId}
+                        />
+                      )}
+                    {(isCommandMenuV2Enabled ||
+                      (objectNameSingular !== CoreObjectNameSingular.Workflow &&
+                        objectNameSingular !==
+                          CoreObjectNameSingular.WorkflowVersion)) && (
+                      <RecordShowActionMenu
+                        {...{
+                          isFavorite,
+                          record,
+                          handleFavoriteButtonClick,
+                          objectMetadataItem,
+                          objectNameSingular,
+                        }}
+                      />
+                    )}
+                  </>
+                </RecordShowPageHeader>
+                <PageBody>
+                  <TimelineActivityContext.Provider
+                    value={{ labelIdentifierValue: pageName }}
+                  >
+                    <RecordShowContainer
+                      objectNameSingular={objectNameSingular}
+                      objectRecordId={objectRecordId}
+                      loading={loading}
+                    />
+                  </TimelineActivityContext.Provider>
+                </PageBody>
+              </PageContainer>
+            </ActionMenuComponentInstanceContext.Provider>
+          </ContextStoreComponentInstanceContext.Provider>
+        </RecordSortsComponentInstanceContext.Provider>
      </RecordFiltersComponentInstanceContext.Provider>
    </RecordFieldValueSelectorContextProvider>
  );
--- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
@ -23,6 +23,7 @@ import { mockedApolloClient } from '~/testing/mockedApolloClient';
 import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
 import { WorkspaceProviderEffect } from '@/workspace/components/WorkspaceProviderEffect';
 import { i18n } from '@lingui/core';
@ -95,7 +96,13 @@ const Providers = () => {
                                  instanceId: 'storybook-test-record-filters',
                                }}
                              >
-                                <Outlet />
+                                <RecordSortsComponentInstanceContext.Provider
+                                  value={{
+                                    instanceId: 'storybook-test-record-sorts',
+                                  }}
+                                >
+                                  <Outlet />
+                                </RecordSortsComponentInstanceContext.Provider>
                              </RecordFiltersComponentInstanceContext.Provider>
                            </PrefetchDataProvider>
                          </IconsProvider>
--- a/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper.tsx
+++ b/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper.tsx
@ -2,6 +2,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 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 { MockedResponse } from '@apollo/client/testing';
 import { ReactNode } from 'react';
 import { MutableSnapshot } from 'recoil';
@ -54,41 +55,45 @@ export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({
          instanceId: componentInstanceId,
        }}
      >
-        <ContextStoreComponentInstanceContext.Provider
+        <RecordSortsComponentInstanceContext.Provider
          value={{ instanceId: componentInstanceId }}
        >
-          <ActionMenuComponentInstanceContext.Provider
-            value={{
-              instanceId: componentInstanceId,
-            }}
+          <ContextStoreComponentInstanceContext.Provider
+            value={{ instanceId: componentInstanceId }}
          >
-            <RecordIndexContextProvider
+            <ActionMenuComponentInstanceContext.Provider
              value={{
-                indexIdentifierUrl: () => 'indexIdentifierUrl',
-                onIndexRecordsLoaded: () => {},
-                objectNamePlural: mockObjectMetadataItem.namePlural,
-                objectNameSingular: mockObjectMetadataItem.nameSingular,
-                objectMetadataItem: mockObjectMetadataItem,
-                recordIndexId: 'recordIndexId',
+                instanceId: componentInstanceId,
              }}
            >
-              <JestContextStoreSetter
-                contextStoreFilters={contextStoreFilters}
-                contextStoreTargetedRecordsRule={
-                  contextStoreTargetedRecordsRule
-                }
-                contextStoreNumberOfSelectedRecords={
-                  contextStoreNumberOfSelectedRecords
-                }
-                contextStoreCurrentObjectMetadataNameSingular={
-                  contextStoreCurrentObjectMetadataNameSingular
-                }
+              <RecordIndexContextProvider
+                value={{
+                  indexIdentifierUrl: () => 'indexIdentifierUrl',
+                  onIndexRecordsLoaded: () => {},
+                  objectNamePlural: mockObjectMetadataItem.namePlural,
+                  objectNameSingular: mockObjectMetadataItem.nameSingular,
+                  objectMetadataItem: mockObjectMetadataItem,
+                  recordIndexId: 'recordIndexId',
+                }}
              >
-                {children}
-              </JestContextStoreSetter>
-            </RecordIndexContextProvider>
-          </ActionMenuComponentInstanceContext.Provider>
-        </ContextStoreComponentInstanceContext.Provider>
+                <JestContextStoreSetter
+                  contextStoreFilters={contextStoreFilters}
+                  contextStoreTargetedRecordsRule={
+                    contextStoreTargetedRecordsRule
+                  }
+                  contextStoreNumberOfSelectedRecords={
+                    contextStoreNumberOfSelectedRecords
+                  }
+                  contextStoreCurrentObjectMetadataNameSingular={
+                    contextStoreCurrentObjectMetadataNameSingular
+                  }
+                >
+                  {children}
+                </JestContextStoreSetter>
+              </RecordIndexContextProvider>
+            </ActionMenuComponentInstanceContext.Provider>
+          </ContextStoreComponentInstanceContext.Provider>
+        </RecordSortsComponentInstanceContext.Provider>
      </RecordFiltersComponentInstanceContext.Provider>
    </Wrapper>
  );
--- a/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
+++ b/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
@ -4,6 +4,7 @@ import { MutableSnapshot, RecoilRoot } from 'recoil';

 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
+import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { InMemoryCache } from '@apollo/client';
@ -28,17 +29,21 @@ export const getJestMetadataAndApolloMocksWrapper = ({
          <RecordFiltersComponentInstanceContext.Provider
            value={{ instanceId: 'instanceId' }}
          >
-            <ViewComponentInstanceContext.Provider
+            <RecordSortsComponentInstanceContext.Provider
              value={{ instanceId: 'instanceId' }}
            >
-              <JestObjectMetadataItemSetter>
-                <ContextStoreComponentInstanceContext.Provider
-                  value={{ instanceId: 'instanceId' }}
-                >
-                  <JestContextStoreSetter>{children}</JestContextStoreSetter>
-                </ContextStoreComponentInstanceContext.Provider>
-              </JestObjectMetadataItemSetter>
-            </ViewComponentInstanceContext.Provider>
+              <ViewComponentInstanceContext.Provider
+                value={{ instanceId: 'instanceId' }}
+              >
+                <JestObjectMetadataItemSetter>
+                  <ContextStoreComponentInstanceContext.Provider
+                    value={{ instanceId: 'instanceId' }}
+                  >
+                    <JestContextStoreSetter>{children}</JestContextStoreSetter>
+                  </ContextStoreComponentInstanceContext.Provider>
+                </JestObjectMetadataItemSetter>
+              </ViewComponentInstanceContext.Provider>
+            </RecordSortsComponentInstanceContext.Provider>
          </RecordFiltersComponentInstanceContext.Provider>
        </MockedProvider>
      </SnackBarProviderScope>