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

Fix record page context store instance id (#10508)

Browse Source 
Fixes bug introduced by https://github.com/twentyhq/twenty/pull/10272
- Replace show page context store instance id by 'main-context-store'
This commit is contained in:
Raphaël Bosi
2025-02-26 16:05:22 +01:00
committed by GitHub
parent fe46ede1ac
commit dd12bc31ca
19 changed files with 63 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMen
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants'; import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys'; import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState'; import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
@ -90,19 +91,19 @@ export const CommandMenuContainer = ({
return ( return (
<RecordFilterGroupsComponentInstanceContext.Provider <RecordFilterGroupsComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<RecordFiltersComponentInstanceContext.Provider <RecordFiltersComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<RecordSortsComponentInstanceContext.Provider <RecordSortsComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<ContextStoreComponentInstanceContext.Provider <ContextStoreComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<ActionMenuComponentInstanceContext.Provider <ActionMenuComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<ActionMenuContext.Provider <ActionMenuContext.Provider
value={{ value={{

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

@ -16,6 +16,7 @@ import { sleep } from '~/utils/sleep';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter'; import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState'; import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
@ -49,19 +50,19 @@ const mockWorkspaceWithFeatureFlag = {
const ContextStoreDecorator: Decorator = (Story) => { const ContextStoreDecorator: Decorator = (Story) => {
return ( return (
<RecordFilterGroupsComponentInstanceContext.Provider <RecordFilterGroupsComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<RecordFiltersComponentInstanceContext.Provider <RecordFiltersComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<RecordSortsComponentInstanceContext.Provider <RecordSortsComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<ContextStoreComponentInstanceContext.Provider <ContextStoreComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<ActionMenuComponentInstanceContext.Provider <ActionMenuComponentInstanceContext.Provider
value={{ instanceId: 'command-menu' }} value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
> >
<JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company"> <JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company">
<Story /> <Story />

1
packages/twenty-front/src/modules/command-menu/constants/CommandMenuComponentInstanceId.ts Normal file
View File

@ -0,0 +1 @@
export const COMMAND_MENU_COMPONENT_INSTANCE_ID = 'command-menu';

2
packages/twenty-front/src/modules/command-menu/constants/CommandMenuPreviousComponentInstanceId.ts Normal file
View File

@ -0,0 +1,2 @@
export const COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID =
'command-menu-previous';

36
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@ -1,4 +1,4 @@
import { useRecoilCallback, useRecoilValue } from 'recoil'; import { useRecoilCallback } from 'recoil';
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState'; import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector'; import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
@ -7,7 +7,9 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { IconDotsVertical, IconSearch, useIcons } from 'twenty-ui'; import { IconDotsVertical, IconSearch, useIcons } from 'twenty-ui';
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
import { COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuContextChipGroupsDropdownId'; import { COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuContextChipGroupsDropdownId';
import { COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuPreviousComponentInstanceId';
import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates'; import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates';
import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates'; import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
import { import {
@ -18,11 +20,11 @@ import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState
import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageTitle'; import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageTitle';
import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState'; import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState'; import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState'; import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType'; import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState'; import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
@ -41,10 +43,6 @@ export const useCommandMenu = () => {
} = usePreviousHotkeyScope(); } = usePreviousHotkeyScope();
const { getIcon } = useIcons(); const { getIcon } = useIcons();
const mainContextStoreComponentInstanceId = useRecoilValue(
mainContextStoreComponentInstanceIdState,
);
const { copyContextStoreStates } = useCopyContextStoreStates(); const { copyContextStoreStates } = useCopyContextStoreStates();
const { resetContextStoreStates } = useResetContextStoreStates(); const { resetContextStoreStates } = useResetContextStoreStates();
@ -64,18 +62,14 @@ export const useCommandMenu = () => {
} }
copyContextStoreStates({ copyContextStoreStates({
instanceIdToCopyFrom: mainContextStoreComponentInstanceId, instanceIdToCopyFrom: MAIN_CONTEXT_STORE_INSTANCE_ID,
instanceIdToCopyTo: 'command-menu', instanceIdToCopyTo: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}); });
set(isCommandMenuOpenedState, true); set(isCommandMenuOpenedState, true);
set(hasUserSelectedCommandState, false); set(hasUserSelectedCommandState, false);
}, },
[ [copyContextStoreStates, setHotkeyScopeAndMemorizePreviousScope],
copyContextStoreStates,
mainContextStoreComponentInstanceId,
setHotkeyScopeAndMemorizePreviousScope,
],
); );
const closeCommandMenu = useRecoilCallback( const closeCommandMenu = useRecoilCallback(
@ -90,8 +84,8 @@ export const useCommandMenu = () => {
const onCommandMenuCloseAnimationComplete = useRecoilCallback( const onCommandMenuCloseAnimationComplete = useRecoilCallback(
({ set }) => ({ set }) =>
() => { () => {
resetContextStoreStates('command-menu'); resetContextStoreStates(COMMAND_MENU_COMPONENT_INSTANCE_ID);
resetContextStoreStates('command-menu-previous'); resetContextStoreStates(COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID);
set(viewableRecordIdState, null); set(viewableRecordIdState, null);
set(commandMenuPageState, CommandMenuPages.Root); set(commandMenuPageState, CommandMenuPages.Root);
@ -284,13 +278,13 @@ export const useCommandMenu = () => {
({ set }) => { ({ set }) => {
return () => { return () => {
copyContextStoreStates({ copyContextStoreStates({
instanceIdToCopyFrom: 'command-menu', instanceIdToCopyFrom: COMMAND_MENU_COMPONENT_INSTANCE_ID,
instanceIdToCopyTo: 'command-menu-previous', instanceIdToCopyTo: COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID,
}); });
set( set(
contextStoreTargetedRecordsRuleComponentState.atomFamily({ contextStoreTargetedRecordsRuleComponentState.atomFamily({
instanceId: 'command-menu', instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}), }),
{ {
mode: 'selection', mode: 'selection',
@ -300,21 +294,21 @@ export const useCommandMenu = () => {
set( set(
contextStoreNumberOfSelectedRecordsComponentState.atomFamily({ contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
instanceId: 'command-menu', instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}), }),
0, 0,
); );
set( set(
contextStoreFiltersComponentState.atomFamily({ contextStoreFiltersComponentState.atomFamily({
instanceId: 'command-menu', instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}), }),
[], [],
); );
set( set(
contextStoreCurrentViewTypeComponentState.atomFamily({ contextStoreCurrentViewTypeComponentState.atomFamily({
instanceId: 'command-menu', instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}), }),
ContextStoreViewType.Table, ContextStoreViewType.Table,
); );

3
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHotKeys.ts
View File

@ -1,3 +1,4 @@
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState'; import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState'; import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
@ -27,7 +28,7 @@ export const useCommandMenuHotKeys = () => {
const contextStoreTargetedRecordsRuleComponent = useRecoilComponentValueV2( const contextStoreTargetedRecordsRuleComponent = useRecoilComponentValueV2(
contextStoreTargetedRecordsRuleComponentState, contextStoreTargetedRecordsRuleComponentState,
'command-menu', COMMAND_MENU_COMPONENT_INSTANCE_ID,
); );
useScopedHotkeys( useScopedHotkeys(

8
packages/twenty-front/src/modules/command-menu/hooks/useResetPreviousCommandMenuContext.ts
View File

@ -1,3 +1,5 @@
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
import { COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuPreviousComponentInstanceId';
import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates'; import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates';
import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates'; import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
@ -7,10 +9,10 @@ export const useResetPreviousCommandMenuContext = () => {
const resetPreviousCommandMenuContext = () => { const resetPreviousCommandMenuContext = () => {
copyContextStoreStates({ copyContextStoreStates({
instanceIdToCopyFrom: 'command-menu-previous', instanceIdToCopyFrom: COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID,
instanceIdToCopyTo: 'command-menu', instanceIdToCopyTo: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}); });
resetContextStoreStates('command-menu-previous'); resetContextStoreStates(COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID);
}; };
return { return {

1
packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx
View File

@ -73,7 +73,6 @@ export const MainContextStoreProvider = () => {
return ( return (
<MainContextStoreProviderEffect <MainContextStoreProviderEffect
mainContextStoreComponentInstanceIdToSet={'main-context-store'}
viewId={viewId} viewId={viewId}
objectMetadataItem={objectMetadataItem} objectMetadataItem={objectMetadataItem}
pageName={pageName} pageName={pageName}

29
packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx
View File

@ -1,7 +1,7 @@
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState'; import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType'; import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { useSetLastVisitedObjectMetadataId } from '@/navigation/hooks/useSetLastVisitedObjectMetadataId'; import { useSetLastVisitedObjectMetadataId } from '@/navigation/hooks/useSetLastVisitedObjectMetadataId';
import { useSetLastVisitedViewForObjectMetadataNamePlural } from '@/navigation/hooks/useSetLastVisitedViewForObjectMetadataNamePlural'; import { useSetLastVisitedViewForObjectMetadataNamePlural } from '@/navigation/hooks/useSetLastVisitedViewForObjectMetadataNamePlural';
@ -10,24 +10,17 @@ import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { ViewType } from '@/views/types/ViewType'; import { ViewType } from '@/views/types/ViewType';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
export const MainContextStoreProviderEffect = ({ export const MainContextStoreProviderEffect = ({
mainContextStoreComponentInstanceIdToSet,
viewId, viewId,
objectMetadataItem, objectMetadataItem,
pageName, pageName,
}: { }: {
mainContextStoreComponentInstanceIdToSet: string;
viewId?: string; viewId?: string;
objectMetadataItem: ObjectMetadataItem; objectMetadataItem: ObjectMetadataItem;
pageName: string; pageName: string;
}) => { }) => {
const [
mainContextStoreComponentInstanceId,
setMainContextStoreComponentInstanceId,
] = useRecoilState(mainContextStoreComponentInstanceIdState);
const { setLastVisitedViewForObjectMetadataNamePlural } = const { setLastVisitedViewForObjectMetadataNamePlural } =
useSetLastVisitedViewForObjectMetadataNamePlural(); useSetLastVisitedViewForObjectMetadataNamePlural();
@ -37,13 +30,13 @@ export const MainContextStoreProviderEffect = ({
const [contextStoreCurrentViewId, setContextStoreCurrentViewId] = const [contextStoreCurrentViewId, setContextStoreCurrentViewId] =
useRecoilComponentStateV2( useRecoilComponentStateV2(
contextStoreCurrentViewIdComponentState, contextStoreCurrentViewIdComponentState,
mainContextStoreComponentInstanceId, MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
const [contextStoreCurrentViewType, setContextStoreCurrentViewType] = const [contextStoreCurrentViewType, setContextStoreCurrentViewType] =
useRecoilComponentStateV2( useRecoilComponentStateV2(
contextStoreCurrentViewTypeComponentState, contextStoreCurrentViewTypeComponentState,
mainContextStoreComponentInstanceId, MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
const [ const [
@ -51,7 +44,7 @@ export const MainContextStoreProviderEffect = ({
setContextStoreCurrentObjectMetadataItem, setContextStoreCurrentObjectMetadataItem,
] = useRecoilComponentStateV2( ] = useRecoilComponentStateV2(
contextStoreCurrentObjectMetadataItemComponentState, contextStoreCurrentObjectMetadataItemComponentState,
mainContextStoreComponentInstanceId, MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
const view = useRecoilValue( const view = useRecoilValue(
@ -65,15 +58,6 @@ export const MainContextStoreProviderEffect = ({
setContextStoreCurrentObjectMetadataItem(objectMetadataItem); setContextStoreCurrentObjectMetadataItem(objectMetadataItem);
} }
if (
mainContextStoreComponentInstanceIdToSet !==
mainContextStoreComponentInstanceId
) {
setMainContextStoreComponentInstanceId(
mainContextStoreComponentInstanceIdToSet,
);
}
setLastVisitedViewForObjectMetadataNamePlural({ setLastVisitedViewForObjectMetadataNamePlural({
objectNamePlural: objectMetadataItem.namePlural, objectNamePlural: objectMetadataItem.namePlural,
viewId: viewId ?? '', viewId: viewId ?? '',
@ -89,15 +73,12 @@ export const MainContextStoreProviderEffect = ({
}, [ }, [
contextStoreCurrentObjectMetadataItem, contextStoreCurrentObjectMetadataItem,
contextStoreCurrentViewId, contextStoreCurrentViewId,
mainContextStoreComponentInstanceId,
mainContextStoreComponentInstanceIdToSet,
objectMetadataItem, objectMetadataItem,
objectMetadataItem.namePlural, objectMetadataItem.namePlural,
setContextStoreCurrentObjectMetadataItem, setContextStoreCurrentObjectMetadataItem,
setContextStoreCurrentViewId, setContextStoreCurrentViewId,
setLastVisitedObjectMetadataId, setLastVisitedObjectMetadataId,
setLastVisitedViewForObjectMetadataNamePlural, setLastVisitedViewForObjectMetadataNamePlural,
setMainContextStoreComponentInstanceId,
viewId, viewId,
]); ]);

1
packages/twenty-front/src/modules/context-store/constants/MainContextStoreInstanceId.tsx Normal file
View File

@ -0,0 +1 @@
export const MAIN_CONTEXT_STORE_INSTANCE_ID = 'main-context-store';

7
packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
View File

@ -1,7 +0,0 @@
import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
import { createState } from '@ui/utilities/state/utils/createState';
export const mainContextStoreComponentInstanceIdState = createState<string>({
key: 'mainContextStoreComponentInstanceIdState',
defaultValue: CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE,
});

8
packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerItemForObjectMetadataItem.tsx
View File

@ -1,5 +1,5 @@
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
import { lastVisitedViewPerObjectMetadataItemState } from '@/navigation/states/lastVisitedViewPerObjectMetadataItemState'; import { lastVisitedViewPerObjectMetadataItemState } from '@/navigation/states/lastVisitedViewPerObjectMetadataItemState';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector'; import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector';
@ -27,13 +27,9 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
}), }),
); );
const mainContextStoreComponentInstanceId = useRecoilValue(
mainContextStoreComponentInstanceIdState,
);
const contextStoreCurrentViewId = useRecoilComponentValueV2( const contextStoreCurrentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState, contextStoreCurrentViewIdComponentState,
mainContextStoreComponentInstanceId, MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
const lastVisitedViewPerObjectMetadataItem = useRecoilValue( const lastVisitedViewPerObjectMetadataItem = useRecoilValue(

3
packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts
View File

@ -1,3 +1,4 @@
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState'; import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
@ -14,7 +15,7 @@ export const useSetRecordGroup = () => {
const objectMetadataItem = snapshot const objectMetadataItem = snapshot
.getLoadable( .getLoadable(
contextStoreCurrentObjectMetadataItemComponentState.atomFamily({ contextStoreCurrentObjectMetadataItemComponentState.atomFamily({
instanceId: 'main-context-store', instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
}), }),
) )
.getValue(); .getValue();

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

@ -2,9 +2,9 @@ import { RecordIndexContextProvider } from '@/object-record/record-index/context
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId'; import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId'; import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext'; import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext'; import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
@ -19,7 +19,7 @@ import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilValue } from 'recoil'; import { useRecoilCallback } from 'recoil';
import { capitalize } from 'twenty-shared'; import { capitalize } from 'twenty-shared';
const StyledIndexContainer = styled.div` const StyledIndexContainer = styled.div`
@ -29,13 +29,9 @@ const StyledIndexContainer = styled.div`
`; `;
export const RecordIndexContainerGater = () => { export const RecordIndexContainerGater = () => {
const mainContextStoreComponentInstanceId = useRecoilValue(
mainContextStoreComponentInstanceIdState,
);
const contextStoreCurrentViewId = useRecoilComponentValueV2( const contextStoreCurrentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState, contextStoreCurrentViewIdComponentState,
mainContextStoreComponentInstanceId, MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();

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

@ -1,6 +1,7 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@ -33,7 +34,7 @@ export const SignInBackgroundMockContainer = () => {
const objectMetadataItem = useRecoilComponentValueV2( const objectMetadataItem = useRecoilComponentValueV2(
contextStoreCurrentObjectMetadataItemComponentState, contextStoreCurrentObjectMetadataItemComponentState,
'main-context-store', MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
return ( return (
@ -62,7 +63,7 @@ export const SignInBackgroundMockContainer = () => {
> >
<ContextStoreComponentInstanceContext.Provider <ContextStoreComponentInstanceContext.Provider
value={{ value={{
instanceId: 'main-context-store', instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
}} }}
> >
<SignInBackgroundMockContainerEffect <SignInBackgroundMockContainerEffect

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

@ -1,5 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
@ -25,7 +26,7 @@ export const SignInBackgroundMockContainerEffect = ({
}: SignInBackgroundMockContainerEffectProps) => { }: SignInBackgroundMockContainerEffectProps) => {
const setContextStoreCurrentObjectMetadataItem = useSetRecoilComponentStateV2( const setContextStoreCurrentObjectMetadataItem = useSetRecoilComponentStateV2(
contextStoreCurrentObjectMetadataItemComponentState, contextStoreCurrentObjectMetadataItemComponentState,
'main-context-store', MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
const { setAvailableTableColumns, setOnEntityCountChange } = useRecordTable({ const { setAvailableTableColumns, setOnEntityCountChange } = useRecordTable({

7
packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
View File

@ -1,3 +1,4 @@
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
@ -9,12 +10,12 @@ import { isNonEmptyString, isUndefined } from '@sniptt/guards';
export const RecordIndexPage = () => { export const RecordIndexPage = () => {
const contextStoreCurrentViewId = useRecoilComponentValueV2( const contextStoreCurrentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState, contextStoreCurrentViewIdComponentState,
'main-context-store', MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
const objectMetadataItem = useRecoilComponentValueV2( const objectMetadataItem = useRecoilComponentValueV2(
contextStoreCurrentObjectMetadataItemComponentState, contextStoreCurrentObjectMetadataItemComponentState,
'main-context-store', MAIN_CONTEXT_STORE_INSTANCE_ID,
); );
if ( if (
@ -28,7 +29,7 @@ export const RecordIndexPage = () => {
<PageContainer> <PageContainer>
<ContextStoreComponentInstanceContext.Provider <ContextStoreComponentInstanceContext.Provider
value={{ value={{
instanceId: 'main-context-store', instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
}} }}
> >
<RecordIndexContainerGater /> <RecordIndexContainerGater />

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

@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
import { RecordShowActionMenu } from '@/action-menu/components/RecordShowActionMenu'; import { RecordShowActionMenu } from '@/action-menu/components/RecordShowActionMenu';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext'; import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext'; import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
@ -59,7 +60,7 @@ export const RecordShowPage = () => {
value={{ instanceId: `record-show-${objectRecordId}` }} value={{ instanceId: `record-show-${objectRecordId}` }}
> >
<ContextStoreComponentInstanceContext.Provider <ContextStoreComponentInstanceContext.Provider
value={{ instanceId: `record-show-${objectRecordId}` }} value={{ instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID }}
> >
<ActionMenuComponentInstanceContext.Provider <ActionMenuComponentInstanceContext.Provider
value={{ instanceId: `record-show-${objectRecordId}` }} value={{ instanceId: `record-show-${objectRecordId}` }}

3
packages/twenty-front/src/testing/decorators/ContextStoreDecorator.tsx
View File

@ -1,6 +1,7 @@
import { Decorator } from '@storybook/react'; import { Decorator } from '@storybook/react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext'; import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@ -13,7 +14,7 @@ export const ContextStoreDecorator: Decorator = (Story, context) => {
let componentInstanceId = contextStore?.componentInstanceId; let componentInstanceId = contextStore?.componentInstanceId;
if (isUndefined(componentInstanceId)) { if (isUndefined(componentInstanceId)) {
componentInstanceId = 'main-context-store'; componentInstanceId = MAIN_CONTEXT_STORE_INSTANCE_ID;
} }
const setCurrentObjectMetadataItem = useSetRecoilComponentStateV2( const setCurrentObjectMetadataItem = useSetRecoilComponentStateV2(