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/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';
@@ -31,6 +32,9 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
     (Story) => (
       <RecordFiltersComponentInstanceContext.Provider
         value={{ instanceId: 'story-action-menu' }}
+      >
+        <RecordSortsComponentInstanceContext.Provider
+          value={{ instanceId: 'story-action-menu' }}
         >
           <ContextStoreComponentInstanceContext.Provider
             value={{ instanceId: 'story-action-menu' }}
@@ -85,6 +89,7 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
               </ActionMenuComponentInstanceContext.Provider>
             </RecoilRoot>
           </ContextStoreComponentInstanceContext.Provider>
+        </RecordSortsComponentInstanceContext.Provider>
       </RecordFiltersComponentInstanceContext.Provider>
     ),
   ],

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';
@@ -85,6 +86,9 @@ export const CommandMenuContainer = ({
   return (
     <RecordFiltersComponentInstanceContext.Provider
       value={{ instanceId: 'command-menu' }}
+    >
+      <RecordSortsComponentInstanceContext.Provider
+        value={{ instanceId: 'command-menu' }}
       >
         <ContextStoreComponentInstanceContext.Provider
           value={{ instanceId: 'command-menu' }}
@@ -103,7 +107,9 @@ export const CommandMenuContainer = ({
                   ) {
                     toggleCommandMenu();
                   }
-                if (key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK) {
+                  if (
+                    key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK
+                  ) {
                     setCommandMenuSearch('');
                   }
                 },
@@ -134,6 +140,7 @@ export const CommandMenuContainer = ({
             </ActionMenuContext.Provider>
           </ActionMenuComponentInstanceContext.Provider>
         </ContextStoreComponentInstanceContext.Provider>
+      </RecordSortsComponentInstanceContext.Provider>
     </RecordFiltersComponentInstanceContext.Provider>
   );
 };

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';
@@ -51,6 +52,9 @@ const ContextStoreDecorator: Decorator = (Story) => {
   return (
     <RecordFiltersComponentInstanceContext.Provider
       value={{ instanceId: 'command-menu' }}
+    >
+      <RecordSortsComponentInstanceContext.Provider
+        value={{ instanceId: 'command-menu' }}
       >
         <ContextStoreComponentInstanceContext.Provider
           value={{ instanceId: 'command-menu' }}
@@ -63,6 +67,7 @@ const ContextStoreDecorator: Decorator = (Story) => {
             </JestContextStoreSetter>
           </ActionMenuComponentInstanceContext.Provider>
         </ContextStoreComponentInstanceContext.Provider>
+      </RecordSortsComponentInstanceContext.Provider>
     </RecordFiltersComponentInstanceContext.Provider>
   );
 };

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';
@@ -64,6 +65,9 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
         >
           <RecordFiltersComponentInstanceContext.Provider
             value={{ instanceId }}
+          >
+            <RecordSortsComponentInstanceContext.Provider
+              value={{ instanceId }}
             >
               <ObjectFilterDropdownComponentInstanceContext.Provider
                 value={{ instanceId }}
@@ -76,6 +80,7 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
                   </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,9 +39,8 @@ const meta: Meta<typeof ObjectOptionsDropdownContent> = {
       }, [setObjectMetadataItems]);
 
       return (
-        <RecordFiltersComponentInstanceContext.Provider
+        <RecordFiltersComponentInstanceContext.Provider value={{ instanceId }}>
-          value={{ instanceId: 'object-options-dropdown' }}
+          <RecordSortsComponentInstanceContext.Provider value={{ instanceId }}>
-        >
             <RecordTableComponentInstanceContext.Provider
               value={{ instanceId, onColumnsChange: () => {} }}
             >
@@ -53,6 +53,7 @@ const meta: Meta<typeof ObjectOptionsDropdownContent> = {
                 </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';
@@ -71,6 +72,9 @@ export const RecordIndexContainerGater = () => {
         >
           <RecordFiltersComponentInstanceContext.Provider
             value={{ instanceId: recordIndexId }}
+          >
+            <RecordSortsComponentInstanceContext.Provider
+              value={{ instanceId: recordIndexId }}
             >
               <ActionMenuComponentInstanceContext.Provider
                 value={{
@@ -88,6 +92,7 @@ export const RecordIndexContainerGater = () => {
                   </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';
@@ -45,6 +46,9 @@ export const RightDrawerRecord = () => {
   return (
     <RecordFiltersComponentInstanceContext.Provider
       value={{ instanceId: `record-show-${objectRecordId}` }}
+    >
+      <RecordSortsComponentInstanceContext.Provider
+        value={{ instanceId: `record-show-${objectRecordId}` }}
       >
         <ContextStoreComponentInstanceContext.Provider
           value={{
@@ -70,6 +74,7 @@ export const RightDrawerRecord = () => {
             </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];

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';
@@ -51,6 +52,9 @@ export const SignInBackgroundMockContainer = () => {
         >
           <RecordFiltersComponentInstanceContext.Provider
             value={{ instanceId: recordIndexId }}
+          >
+            <RecordSortsComponentInstanceContext.Provider
+              value={{ instanceId: recordIndexId }}
             >
               <ContextStoreComponentInstanceContext.Provider
                 value={{
@@ -82,6 +86,7 @@ export const SignInBackgroundMockContainer = () => {
                   )}
                 </ActionMenuComponentInstanceContext.Provider>
               </ContextStoreComponentInstanceContext.Provider>
+            </RecordSortsComponentInstanceContext.Provider>
           </RecordFiltersComponentInstanceContext.Provider>
         </ViewComponentInstanceContext.Provider>
       </RecordIndexContextProvider>

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(

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';
@@ -49,6 +50,9 @@ export const RecordShowPage = () => {
     <RecordFieldValueSelectorContextProvider>
       <RecordFiltersComponentInstanceContext.Provider
         value={{ instanceId: `record-show-${objectRecordId}` }}
+      >
+        <RecordSortsComponentInstanceContext.Provider
+          value={{ instanceId: `record-show-${objectRecordId}` }}
         >
           <ContextStoreComponentInstanceContext.Provider
             value={{ instanceId: `main-context-store` }}
@@ -66,7 +70,8 @@ export const RecordShowPage = () => {
                 >
                   <>
                     {!isCommandMenuV2Enabled &&
-                    objectNameSingular === CoreObjectNameSingular.Workflow && (
+                      objectNameSingular ===
+                        CoreObjectNameSingular.Workflow && (
                         <RecordShowPageWorkflowHeader
                           workflowId={objectRecordId}
                         />
@@ -108,6 +113,7 @@ export const RecordShowPage = () => {
               </PageContainer>
             </ActionMenuComponentInstanceContext.Provider>
           </ContextStoreComponentInstanceContext.Provider>
+        </RecordSortsComponentInstanceContext.Provider>
       </RecordFiltersComponentInstanceContext.Provider>
     </RecordFieldValueSelectorContextProvider>
   );

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';
@@ -94,8 +95,14 @@ const Providers = () => {
                                 value={{
                                   instanceId: 'storybook-test-record-filters',
                                 }}
+                              >
+                                <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';
@@ -53,6 +54,9 @@ export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({
         value={{
           instanceId: componentInstanceId,
         }}
+      >
+        <RecordSortsComponentInstanceContext.Provider
+          value={{ instanceId: componentInstanceId }}
         >
           <ContextStoreComponentInstanceContext.Provider
             value={{ instanceId: componentInstanceId }}
@@ -89,6 +93,7 @@ export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({
               </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';
@@ -27,6 +28,9 @@ export const getJestMetadataAndApolloMocksWrapper = ({
         <MockedProvider mocks={apolloMocks} addTypename={false} cache={cache}>
           <RecordFiltersComponentInstanceContext.Provider
             value={{ instanceId: 'instanceId' }}
+          >
+            <RecordSortsComponentInstanceContext.Provider
+              value={{ instanceId: 'instanceId' }}
             >
               <ViewComponentInstanceContext.Provider
                 value={{ instanceId: 'instanceId' }}
@@ -39,6 +43,7 @@ export const getJestMetadataAndApolloMocksWrapper = ({
                   </ContextStoreComponentInstanceContext.Provider>
                 </JestObjectMetadataItemSetter>
               </ViewComponentInstanceContext.Provider>
+            </RecordSortsComponentInstanceContext.Provider>
           </RecordFiltersComponentInstanceContext.Provider>
         </MockedProvider>
       </SnackBarProviderScope>