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/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>

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>
   );

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>