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

Implement record filter group states and context (#10490)

Browse Source 
This PR simply implements record filter group states and context, as we
did for record filter and record sort.

We use a separate context for record filter and record filter group,
we'll see later if it can be merged in practice, but better be cautious
for now.
This commit is contained in:
Lucas Bordeau
2025-02-25 18:31:34 +01:00
committed by GitHub
parent d9bde155ff
commit 4d02bf1362
16 changed files with 435 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchS
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
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';
@ -88,66 +89,72 @@ export const CommandMenuContainer = ({
const setCommandMenuSearch = useSetRecoilState(commandMenuSearchState);
return (
<RecordFiltersComponentInstanceContext.Provider
<RecordFilterGroupsComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }}
>
<RecordSortsComponentInstanceContext.Provider
<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: true,
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"
onExitComplete={onCommandMenuCloseAnimationComplete}
<ActionMenuContext.Provider
value={{
isInRightDrawer: true,
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('');
}
},
}}
>
{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>
<RecordActionMenuEntriesSetter />
<RecordAgnosticActionMenuEntriesSetter />
{isWorkflowEnabled && (
<RunWorkflowRecordAgnosticActionMenuEntriesSetter />
)}
</AnimatePresence>
</ActionMenuContext.Provider>
</ActionMenuComponentInstanceContext.Provider>
</ContextStoreComponentInstanceContext.Provider>
</RecordSortsComponentInstanceContext.Provider>
</RecordFiltersComponentInstanceContext.Provider>
<ActionMenuConfirmationModals />
<AnimatePresence
mode="wait"
onExitComplete={onCommandMenuCloseAnimationComplete}
>
{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>
</RecordFilterGroupsComponentInstanceContext.Provider>
);
};

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

@ -20,6 +20,7 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMe
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
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';
@ -47,25 +48,29 @@ const mockWorkspaceWithFeatureFlag = {
const ContextStoreDecorator: Decorator = (Story) => {
return (
<RecordFiltersComponentInstanceContext.Provider
<RecordFilterGroupsComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }}
>
<RecordSortsComponentInstanceContext.Provider
<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>
</RecordSortsComponentInstanceContext.Provider>
</RecordFiltersComponentInstanceContext.Provider>
<ActionMenuComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }}
>
<JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company">
<Story />
</JestContextStoreSetter>
</ActionMenuComponentInstanceContext.Provider>
</ContextStoreComponentInstanceContext.Provider>
</RecordSortsComponentInstanceContext.Provider>
</RecordFiltersComponentInstanceContext.Provider>
</RecordFilterGroupsComponentInstanceContext.Provider>
);
};