admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Lucas Bordeau
2025-02-19 16:51:49 +01:00
committed by GitHub
parent 2372114f52
commit 2fc8eaa25b
17 changed files with 368 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx
View File

@ -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>
),
],

9
packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
View File

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

5
packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
View File

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

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

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

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

@ -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
value={{ instanceId: 'object-options-dropdown' }}
>
<RecordFiltersComponentInstanceContext.Provider value={{ instanceId }}>
<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>
);
},

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

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

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

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

4
packages/twenty-front/src/modules/object-record/record-sort/states/context/RecordSortsComponentInstanceContext.ts Normal file
View File

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

11
packages/twenty-front/src/modules/object-record/record-sort/states/currentRecordSortsComponentState.ts Normal file
View File

@ -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,
});

9
packages/twenty-front/src/modules/object-record/record-sort/types/RecordSort.ts Normal file
View File

@ -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;
};

3
packages/twenty-front/src/modules/object-record/record-sort/types/RecordSortDirection.ts Normal file
View File

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

5
packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
View File

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

2
packages/twenty-front/src/modules/views/utils/__tests__/viewMapFunctions.test.ts
View File

@ -73,6 +73,8 @@ describe('mapViewFiltersToFilters', () => {
operand: ViewFilterOperand.Is,
label: baseFieldMetadataItem.label,
type: FieldMetadataType.FULL_NAME,
positionInViewFilterGroup: undefined,
viewFilterGroupId: undefined,
},
];
expect(

8
packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
View File

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

7
packages/twenty-front/src/testing/decorators/PageDecorator.tsx
View File

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

5
packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper.tsx
View File

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

5
packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
View File

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