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

Improve Jotai work (#18205)

Browse Source
This commit is contained in:
Charles Bochet
2026-02-24 20:38:30 +01:00
committed by GitHub
parent b339c93699
commit eaf9fe27b2
210 changed files with 1714 additions and 1662 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ import {
FeatureFlagKey,
FieldMetadataType,
} from '~/generated-metadata/graphql';
import { dateLocaleStateV2 } from '~/localization/states/dateLocaleStateV2';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout';
@@ -67,7 +67,7 @@ export const CommandMenuRecordInfo = ({
},
);
const { localeCatalog } = useRecoilValueV2(dateLocaleStateV2);
const { localeCatalog } = useRecoilValueV2(dateLocaleState);
const beautifiedCreatedAt = isNonEmptyString(recordCreatedAt)
? beautifyPastDateRelativeToNow(recordCreatedAt, localeCatalog)
: '';
packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
+11 -8
View File
@@ -1,4 +1,5 @@
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
import { act } from 'react';
import { MemoryRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
@@ -13,14 +14,16 @@ import { CommandMenuPages } from 'twenty-shared/types';
import { IconDotsVertical } from 'twenty-ui/display';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot>
<MemoryRouter
initialEntries={['/one', '/two', { pathname: '/three' }]}
initialIndex={1}
>
{children}
</MemoryRouter>
</RecoilRoot>
<JotaiProvider store={jotaiStore}>
<RecoilRoot>
<MemoryRouter
initialEntries={['/one', '/two', { pathname: '/three' }]}
initialIndex={1}
>
{children}
</MemoryRouter>
</RecoilRoot>
</JotaiProvider>
);
const renderHooks = () => {
packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuCloseAnimationCompleteCleanup.test.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
import { act } from 'react';
import { MemoryRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
@@ -51,9 +52,11 @@ jest.mock('@/ui/layout/right-drawer/utils/emitSidePanelCloseEvent', () => ({
}));
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot>
<MemoryRouter>{children}</MemoryRouter>
</RecoilRoot>
<JotaiProvider store={jotaiStore}>
<RecoilRoot>
<MemoryRouter>{children}</MemoryRouter>
</RecoilRoot>
</JotaiProvider>
);
describe('useCommandMenuCloseAnimationCompleteCleanup', () => {
packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuHistory.test.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
import { act } from 'react';
import { MemoryRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
@@ -15,9 +16,11 @@ import { CommandMenuPages } from 'twenty-shared/types';
import { IconList, IconSearch } from 'twenty-ui/display';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot>
<MemoryRouter>{children}</MemoryRouter>
</RecoilRoot>
<JotaiProvider store={jotaiStore}>
<RecoilRoot>
<MemoryRouter>{children}</MemoryRouter>
</RecoilRoot>
</JotaiProvider>
);
const renderHooks = () => {
packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuUpdateNavigationMorphItemsByPage.test.tsx
+4 -1
View File
@@ -2,6 +2,7 @@ import { useCommandMenuUpdateNavigationMorphItemsByPage } from '@/command-menu/h
import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
import { act } from 'react';
import { RecoilRoot } from 'recoil';
@@ -9,7 +10,9 @@ const pageId = 'merge-page-id';
const objectMetadataId = 'company-metadata-id';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot>{children}</RecoilRoot>
<JotaiProvider store={jotaiStore}>
<RecoilRoot>{children}</RecoilRoot>
</JotaiProvider>
);
const renderHooks = (initialRecordIds: string[]) => {
packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx
+4 -1
View File
@@ -3,6 +3,7 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMe
import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
import { act } from 'react';
import { RecoilRoot } from 'recoil';
import { CommandMenuPages } from 'twenty-shared/types';
@@ -24,7 +25,9 @@ const mockedNavigationStack = [
];
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot>{children}</RecoilRoot>
<JotaiProvider store={jotaiStore}>
<RecoilRoot>{children}</RecoilRoot>
</JotaiProvider>
);
describe('useUpdateCommandMenuPageInfo', () => {
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+10 -9
View File
@@ -7,13 +7,14 @@ import { addToNavPayloadRegistryStateV2 } from '@/navigation-menu-item/states/ad
import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
import { emitSidePanelOpenEvent } from '@/ui/layout/right-drawer/utils/emitSidePanelOpenEvent';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { IconDotsVertical } from 'twenty-ui/display';
import { useStore } from 'jotai';
export const useCommandMenu = () => {
const store = useStore();
const { navigateCommandMenu } = useNavigateCommandMenu();
const { closeAnyOpenDropdown } = useCloseAnyOpenDropdown();
@@ -21,18 +22,18 @@ export const useCommandMenu = () => {
useRemoveFocusItemFromFocusStackById();
const closeCommandMenu = useCallback(() => {
const isCommandMenuOpened = jotaiStore.get(isCommandMenuOpenedStateV2.atom);
const isCommandMenuOpened = store.get(isCommandMenuOpenedStateV2.atom);
if (isCommandMenuOpened) {
jotaiStore.set(addToNavPayloadRegistryStateV2.atom, new Map());
jotaiStore.set(isCommandMenuOpenedStateV2.atom, false);
jotaiStore.set(isCommandMenuClosingState.atom, true);
store.set(addToNavPayloadRegistryStateV2.atom, new Map());
store.set(isCommandMenuOpenedStateV2.atom, false);
store.set(isCommandMenuClosingState.atom, true);
closeAnyOpenDropdown();
removeFocusItemFromFocusStackById({
focusId: SIDE_PANEL_FOCUS_ID,
});
}
}, [closeAnyOpenDropdown, removeFocusItemFromFocusStackById]);
}, [closeAnyOpenDropdown, removeFocusItemFromFocusStackById, store]);
const openCommandMenu = useCallback(() => {
emitSidePanelOpenEvent();
@@ -46,16 +47,16 @@ export const useCommandMenu = () => {
}, [closeAnyOpenDropdown, navigateCommandMenu]);
const toggleCommandMenu = useCallback(() => {
const isCommandMenuOpened = jotaiStore.get(isCommandMenuOpenedStateV2.atom);
const isCommandMenuOpened = store.get(isCommandMenuOpenedStateV2.atom);
jotaiStore.set(commandMenuSearchState.atom, '');
store.set(commandMenuSearchState.atom, '');
if (isCommandMenuOpened) {
closeCommandMenu();
} else {
openCommandMenu();
}
}, [closeCommandMenu, openCommandMenu]);
}, [closeCommandMenu, openCommandMenu, store]);
return {
openCommandMenu,
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts
+21 -22
View File
@@ -22,14 +22,15 @@ import { emitSidePanelCloseEvent } from '@/ui/layout/right-drawer/utils/emitSide
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/code-action/constants/WorkflowLogicFunctionTabListComponentId';
import { WorkflowLogicFunctionTabId } from '@/workflow/workflow-steps/workflow-actions/code-action/types/WorkflowLogicFunctionTabId';
import { useCallback } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { useStore } from 'jotai';
export const useCommandMenuCloseAnimationCompleteCleanup = () => {
const store = useStore();
const { resetSelectedItem } = useSelectableList(
COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
);
@@ -44,7 +45,7 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
resetContextStoreStates(COMMAND_MENU_COMPONENT_INSTANCE_ID);
resetContextStoreStates(COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID);
const currentPage = jotaiStore.get(commandMenuPageState.atom);
const currentPage = store.get(commandMenuPageState.atom);
const isPageLayoutEditingPage =
currentPage === CommandMenuPages.PageLayoutWidgetTypeSelect ||
@@ -53,7 +54,7 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
currentPage === CommandMenuPages.PageLayoutTabSettings;
if (isPageLayoutEditingPage) {
const targetedRecordsRule = jotaiStore.get(
const targetedRecordsRule = store.get(
contextStoreTargetedRecordsRuleComponentState.atomFamily({
instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}),
@@ -64,24 +65,22 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
targetedRecordsRule.selectedRecordIds.length === 1
) {
const recordId = targetedRecordsRule.selectedRecordIds[0];
const record = jotaiStore.get(
recordStoreFamilyState.atomFamily(recordId),
);
const record = store.get(recordStoreFamilyState.atomFamily(recordId));
if (isDefined(record) && isDefined(record.pageLayoutId)) {
jotaiStore.set(
store.set(
pageLayoutEditingWidgetIdComponentState.atomFamily({
instanceId: record.pageLayoutId,
}),
null,
);
jotaiStore.set(
store.set(
pageLayoutTabSettingsOpenTabIdComponentState.atomFamily({
instanceId: record.pageLayoutId,
}),
null,
);
jotaiStore.set(
store.set(
pageLayoutDraggedAreaComponentState.atomFamily({
instanceId: record.pageLayoutId,
}),
@@ -91,35 +90,35 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
}
}
jotaiStore.set(viewableRecordIdState.atom, null);
jotaiStore.set(commandMenuPageState.atom, CommandMenuPages.Root);
jotaiStore.set(commandMenuPageInfoState.atom, {
store.set(viewableRecordIdState.atom, null);
store.set(commandMenuPageState.atom, CommandMenuPages.Root);
store.set(commandMenuPageInfoState.atom, {
title: undefined,
Icon: undefined,
instanceId: '',
});
jotaiStore.set(isCommandMenuOpenedStateV2.atom, false);
jotaiStore.set(commandMenuSearchState.atom, '');
jotaiStore.set(commandMenuNavigationMorphItemsByPageState.atom, new Map());
jotaiStore.set(commandMenuNavigationStackState.atom, []);
store.set(isCommandMenuOpenedStateV2.atom, false);
store.set(commandMenuSearchState.atom, '');
store.set(commandMenuNavigationMorphItemsByPageState.atom, new Map());
store.set(commandMenuNavigationStackState.atom, []);
resetSelectedItem();
jotaiStore.set(hasUserSelectedCommandState.atom, false);
store.set(hasUserSelectedCommandState.atom, false);
emitSidePanelCloseEvent();
jotaiStore.set(isCommandMenuClosingState.atom, false);
jotaiStore.set(
store.set(isCommandMenuClosingState.atom, false);
store.set(
activeTabIdComponentState.atomFamily({
instanceId: WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID,
}),
WorkflowLogicFunctionTabId.CODE,
);
const morphItemsByPage = jotaiStore.get(
const morphItemsByPage = store.get(
commandMenuNavigationMorphItemsByPageState.atom,
);
for (const [pageId, morphItems] of morphItemsByPage) {
jotaiStore.set(
store.set(
activeTabIdComponentState.atomFamily({
instanceId: getShowPageTabListComponentId({
pageId,
@@ -129,7 +128,7 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
null,
);
}
}, [closeDropdown, resetContextStoreStates, resetSelectedItem]);
}, [closeDropdown, resetContextStoreStates, resetSelectedItem, store]);
return {
commandMenuCloseAnimationCompleteCleanup,
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHistory.ts
+57 -56
View File
@@ -8,15 +8,16 @@ import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState
import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { isNonEmptyArray } from '@sniptt/guards';
import { isDefined } from 'twenty-shared/utils';
import { useStore } from 'jotai';
export const useCommandMenuHistory = () => {
const store = useStore();
const { closeCommandMenu } = useCommandMenu();
const goBackFromCommandMenu = useCallback(() => {
const currentNavigationStack = jotaiStore.get(
const currentNavigationStack = store.get(
commandMenuNavigationStackState.atom,
);
@@ -28,17 +29,17 @@ export const useCommandMenuHistory = () => {
return;
}
jotaiStore.set(commandMenuPageState.atom, lastNavigationStackItem.page);
store.set(commandMenuPageState.atom, lastNavigationStackItem.page);
jotaiStore.set(commandMenuPageInfoState.atom, {
store.set(commandMenuPageInfoState.atom, {
title: lastNavigationStackItem.pageTitle,
Icon: lastNavigationStackItem.pageIcon,
instanceId: lastNavigationStackItem.pageId,
});
jotaiStore.set(commandMenuNavigationStackState.atom, newNavigationStack);
store.set(commandMenuNavigationStackState.atom, newNavigationStack);
const currentMorphItems = jotaiStore.get(
const currentMorphItems = store.get(
commandMenuNavigationMorphItemsByPageState.atom,
);
@@ -48,14 +49,14 @@ export const useCommandMenuHistory = () => {
if (isDefined(removedItem)) {
const newMorphItems = new Map(currentMorphItems);
newMorphItems.delete(removedItem.pageId);
jotaiStore.set(
store.set(
commandMenuNavigationMorphItemsByPageState.atom,
newMorphItems,
);
const morphItems = currentMorphItems.get(removedItem.pageId);
if (isNonEmptyArray(morphItems)) {
jotaiStore.set(
store.set(
activeTabIdComponentState.atomFamily({
instanceId: getShowPageTabListComponentId({
pageId: removedItem.pageId,
@@ -68,63 +69,63 @@ export const useCommandMenuHistory = () => {
}
}
jotaiStore.set(hasUserSelectedCommandState.atom, false);
}, [closeCommandMenu]);
store.set(hasUserSelectedCommandState.atom, false);
}, [closeCommandMenu, store]);
const navigateCommandMenuHistory = useCallback((pageIndex: number) => {
const currentNavigationStack = jotaiStore.get(
commandMenuNavigationStackState.atom,
);
const newNavigationStack = currentNavigationStack.slice(0, pageIndex + 1);
jotaiStore.set(commandMenuNavigationStackState.atom, newNavigationStack);
const newNavigationStackItem = newNavigationStack.at(-1);
if (!isDefined(newNavigationStackItem)) {
throw new Error(
`No command menu navigation stack item found for index ${pageIndex}`,
const navigateCommandMenuHistory = useCallback(
(pageIndex: number) => {
const currentNavigationStack = store.get(
commandMenuNavigationStackState.atom,
);
}
jotaiStore.set(commandMenuPageState.atom, newNavigationStackItem.page);
jotaiStore.set(commandMenuPageInfoState.atom, {
title: newNavigationStackItem.pageTitle,
Icon: newNavigationStackItem.pageIcon,
instanceId: newNavigationStackItem.pageId,
});
const currentMorphItems = jotaiStore.get(
commandMenuNavigationMorphItemsByPageState.atom,
);
const newNavigationStack = currentNavigationStack.slice(0, pageIndex + 1);
for (const [pageId, morphItems] of currentMorphItems.entries()) {
if (!newNavigationStack.some((item) => item.pageId === pageId)) {
jotaiStore.set(
activeTabIdComponentState.atomFamily({
instanceId: getShowPageTabListComponentId({
pageId,
targetObjectId: morphItems[0].recordId,
}),
}),
null,
store.set(commandMenuNavigationStackState.atom, newNavigationStack);
const newNavigationStackItem = newNavigationStack.at(-1);
if (!isDefined(newNavigationStackItem)) {
throw new Error(
`No command menu navigation stack item found for index ${pageIndex}`,
);
}
}
const newMorphItems = new Map(
Array.from(currentMorphItems.entries()).filter(([pageId]) =>
newNavigationStack.some((item) => item.pageId === pageId),
),
);
store.set(commandMenuPageState.atom, newNavigationStackItem.page);
store.set(commandMenuPageInfoState.atom, {
title: newNavigationStackItem.pageTitle,
Icon: newNavigationStackItem.pageIcon,
instanceId: newNavigationStackItem.pageId,
});
const currentMorphItems = store.get(
commandMenuNavigationMorphItemsByPageState.atom,
);
jotaiStore.set(
commandMenuNavigationMorphItemsByPageState.atom,
newMorphItems,
);
for (const [pageId, morphItems] of currentMorphItems.entries()) {
if (!newNavigationStack.some((item) => item.pageId === pageId)) {
store.set(
activeTabIdComponentState.atomFamily({
instanceId: getShowPageTabListComponentId({
pageId,
targetObjectId: morphItems[0].recordId,
}),
}),
null,
);
}
}
jotaiStore.set(hasUserSelectedCommandState.atom, false);
}, []);
const newMorphItems = new Map(
Array.from(currentMorphItems.entries()).filter(([pageId]) =>
newNavigationStack.some((item) => item.pageId === pageId),
),
);
store.set(commandMenuNavigationMorphItemsByPageState.atom, newMorphItems);
store.set(hasUserSelectedCommandState.atom, false);
},
[store],
);
return {
goBackFromCommandMenu,
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuUpdateNavigationMorphItemsByPage.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useCallback } from 'react';
import { useStore } from 'jotai';
type UpdateNavigationMorphItemsByPageParams = {
pageId: string;
@@ -9,13 +9,14 @@ type UpdateNavigationMorphItemsByPageParams = {
};
export const useCommandMenuUpdateNavigationMorphItemsByPage = () => {
const store = useStore();
const updateCommandMenuNavigationMorphItemsByPage = useCallback(
async ({
pageId,
objectMetadataId,
objectRecordIds,
}: UpdateNavigationMorphItemsByPageParams) => {
const currentMorphItems = jotaiStore.get(
const currentMorphItems = store.get(
commandMenuNavigationMorphItemsByPageState.atom,
);
@@ -26,12 +27,12 @@ export const useCommandMenuUpdateNavigationMorphItemsByPage = () => {
const newMorphItemsMap = new Map(currentMorphItems);
newMorphItemsMap.set(pageId, newMorphItems);
jotaiStore.set(
store.set(
commandMenuNavigationMorphItemsByPageState.atom,
newMorphItemsMap,
);
},
[],
[store],
);
return {
packages/twenty-front/src/modules/command-menu/hooks/useCopyContextStoreAndActionMenuStates.ts
+21 -20
View File
@@ -7,10 +7,11 @@ import { contextStoreFiltersComponentState } from '@/context-store/states/contex
import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useCallback } from 'react';
import { useStore } from 'jotai';
export const useCopyContextStoreStates = () => {
const store = useStore();
const copyContextStoreStates = useCallback(
({
instanceIdToCopyFrom,
@@ -19,124 +20,124 @@ export const useCopyContextStoreStates = () => {
instanceIdToCopyFrom: string;
instanceIdToCopyTo: string;
}) => {
const contextStoreCurrentObjectMetadataItemId = jotaiStore.get(
const contextStoreCurrentObjectMetadataItemId = store.get(
contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreCurrentObjectMetadataItemId,
);
const contextStoreTargetedRecordsRule = jotaiStore.get(
const contextStoreTargetedRecordsRule = store.get(
contextStoreTargetedRecordsRuleComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreTargetedRecordsRuleComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreTargetedRecordsRule,
);
const contextStoreNumberOfSelectedRecords = jotaiStore.get(
const contextStoreNumberOfSelectedRecords = store.get(
contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreNumberOfSelectedRecords,
);
const contextStoreFilters = jotaiStore.get(
const contextStoreFilters = store.get(
contextStoreFiltersComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreFiltersComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreFilters,
);
const contextStoreFilterGroups = jotaiStore.get(
const contextStoreFilterGroups = store.get(
contextStoreFilterGroupsComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreFilterGroupsComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreFilterGroups,
);
const contextStoreAnyFieldFilterValue = jotaiStore.get(
const contextStoreAnyFieldFilterValue = store.get(
contextStoreAnyFieldFilterValueComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreAnyFieldFilterValueComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreAnyFieldFilterValue,
);
const contextStoreCurrentViewId = jotaiStore.get(
const contextStoreCurrentViewId = store.get(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreCurrentViewId,
);
const contextStoreCurrentViewType = jotaiStore.get(
const contextStoreCurrentViewType = store.get(
contextStoreCurrentViewTypeComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreCurrentViewTypeComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreCurrentViewType,
);
const contextStoreIsFullTabWidgetInEditMode = jotaiStore.get(
const contextStoreIsFullTabWidgetInEditMode = store.get(
contextStoreIsPageInEditModeComponentState.atomFamily({
instanceId: instanceIdToCopyFrom,
}),
);
jotaiStore.set(
store.set(
contextStoreIsPageInEditModeComponentState.atomFamily({
instanceId: instanceIdToCopyTo,
}),
contextStoreIsFullTabWidgetInEditMode,
);
},
[],
[store],
);
return { copyContextStoreStates };
packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts
+16 -19
View File
@@ -13,11 +13,11 @@ import { isCommandMenuOpenedStateV2 } from '@/command-menu/states/isCommandMenuO
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useCallback } from 'react';
import { type CommandMenuPages } from 'twenty-shared/types';
import { type IconComponent } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
export type CommandMenuNavigationStackItem = {
page: CommandMenuPages;
@@ -28,6 +28,7 @@ export type CommandMenuNavigationStackItem = {
};
export const useNavigateCommandMenu = () => {
const store = useStore();
const { copyContextStoreStates } = useCopyContextStoreStates();
const { commandMenuCloseAnimationCompleteCleanup } =
@@ -36,9 +37,9 @@ export const useNavigateCommandMenu = () => {
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
const openCommandMenu = useCallback(() => {
const isCommandMenuOpened = jotaiStore.get(isCommandMenuOpenedStateV2.atom);
const isCommandMenuOpened = store.get(isCommandMenuOpenedStateV2.atom);
const isCommandMenuClosing = jotaiStore.get(isCommandMenuClosingState.atom);
const isCommandMenuClosing = store.get(isCommandMenuClosingState.atom);
if (isCommandMenuClosing) {
commandMenuCloseAnimationCompleteCleanup();
@@ -64,12 +65,13 @@ export const useNavigateCommandMenu = () => {
instanceIdToCopyTo: COMMAND_MENU_COMPONENT_INSTANCE_ID,
});
jotaiStore.set(isCommandMenuOpenedStateV2.atom, true);
jotaiStore.set(hasUserSelectedCommandState.atom, false);
store.set(isCommandMenuOpenedStateV2.atom, true);
store.set(hasUserSelectedCommandState.atom, false);
}, [
copyContextStoreStates,
commandMenuCloseAnimationCompleteCleanup,
pushFocusItemToFocusStack,
store,
]);
const navigateCommandMenu = useCallback(
@@ -88,15 +90,15 @@ export const useNavigateCommandMenu = () => {
const computedPageId = pageId || v4();
openCommandMenu();
jotaiStore.set(commandMenuPageState.atom, page);
jotaiStore.set(commandMenuPageInfoState.atom, {
store.set(commandMenuPageState.atom, page);
store.set(commandMenuPageInfoState.atom, {
title: pageTitle,
Icon: pageIcon,
instanceId: computedPageId,
});
if (focusTitleInput) {
jotaiStore.set(
store.set(
commandMenuShouldFocusTitleInputComponentState.atomFamily({
instanceId: computedPageId,
}),
@@ -104,16 +106,14 @@ export const useNavigateCommandMenu = () => {
);
}
const isCommandMenuClosing = jotaiStore.get(
isCommandMenuClosingState.atom,
);
const isCommandMenuClosing = store.get(isCommandMenuClosingState.atom);
const currentNavigationStack = isCommandMenuClosing
? []
: jotaiStore.get(commandMenuNavigationStackState.atom);
: store.get(commandMenuNavigationStackState.atom);
if (resetNavigationStack) {
jotaiStore.set(commandMenuNavigationStackState.atom, [
store.set(commandMenuNavigationStackState.atom, [
{
page,
pageTitle,
@@ -123,12 +123,9 @@ export const useNavigateCommandMenu = () => {
},
]);
jotaiStore.set(
commandMenuNavigationMorphItemsByPageState.atom,
new Map(),
);
store.set(commandMenuNavigationMorphItemsByPageState.atom, new Map());
} else {
jotaiStore.set(commandMenuNavigationStackState.atom, [
store.set(commandMenuNavigationStackState.atom, [
...currentNavigationStack,
{
page,
@@ -140,7 +137,7 @@ export const useNavigateCommandMenu = () => {
]);
}
},
[openCommandMenu],
[openCommandMenu, store],
);
return {
packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts
+4 -3
View File
@@ -1,20 +1,21 @@
import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { IconCalendarEvent } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
export const useOpenCalendarEventInCommandMenu = () => {
const store = useStore();
const { navigateCommandMenu } = useNavigateCommandMenu();
const openCalendarEventInCommandMenu = useCallback(
(calendarEventId: string) => {
const pageComponentInstanceId = v4();
jotaiStore.set(
store.set(
viewableRecordIdComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
@@ -53,7 +54,7 @@ export const useOpenCalendarEventInCommandMenu = () => {
pageId: pageComponentInstanceId,
});
},
[navigateCommandMenu],
[navigateCommandMenu, store],
);
return {
packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts
+4 -3
View File
@@ -1,20 +1,21 @@
import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { IconMail } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
export const useOpenEmailThreadInCommandMenu = () => {
const store = useStore();
const { navigateCommandMenu } = useNavigateCommandMenu();
const openEmailThreadInCommandMenu = useCallback(
(emailThreadId: string) => {
const pageComponentInstanceId = v4();
jotaiStore.set(
store.set(
viewableRecordIdComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
@@ -53,7 +54,7 @@ export const useOpenEmailThreadInCommandMenu = () => {
pageId: pageComponentInstanceId,
});
},
[navigateCommandMenu],
[navigateCommandMenu, store],
);
return {
packages/twenty-front/src/modules/command-menu/hooks/useOpenFrontComponentInCommandMenu.ts
+3 -2
View File
@@ -1,11 +1,12 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { CommandMenuPages } from 'twenty-shared/types';
import { type IconComponent } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
export const useOpenFrontComponentInCommandMenu = () => {
const store = useStore();
const { navigateCommandMenu } = useCommandMenu();
const openFrontComponentInCommandMenu = ({
@@ -21,7 +22,7 @@ export const useOpenFrontComponentInCommandMenu = () => {
}) => {
const pageComponentInstanceId = v4();
jotaiStore.set(
store.set(
viewableFrontComponentIdComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
packages/twenty-front/src/modules/command-menu/hooks/useOpenMergeRecordsPageInCommandMenu.tsx
+4 -2
View File
@@ -6,11 +6,11 @@ import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRec
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
import { CommandMenuPages } from 'twenty-shared/types';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { msg, t } from '@lingui/core/macro';
import { useCallback } from 'react';
import { IconArrowMerge } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
type UseOpenMergeRecordsPageInCommandMenuProps = {
objectNameSingular: string;
@@ -21,6 +21,7 @@ export const useOpenMergeRecordsPageInCommandMenu = ({
objectNameSingular,
objectRecordIds,
}: UseOpenMergeRecordsPageInCommandMenuProps) => {
const store = useStore();
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
@@ -43,7 +44,7 @@ export const useOpenMergeRecordsPageInCommandMenu = ({
const openMergeRecordsPageInCommandMenu = useCallback(async () => {
const pageId = v4();
jotaiStore.set(
store.set(
contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
instanceId: pageId,
}),
@@ -71,6 +72,7 @@ export const useOpenMergeRecordsPageInCommandMenu = ({
upsertRecordsInStore,
navigateCommandMenu,
updateCommandMenuNavigationMorphItemsByPage,
store,
]);
return {
packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts
+19 -19
View File
@@ -15,7 +15,6 @@ import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objec
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { getIconColorForObjectType } from '@/object-metadata/utils/getIconColorForObjectType';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { CommandMenuPages } from 'twenty-shared/types';
import { useRunWorkflowRunOpeningInCommandMenuSideEffects } from '@/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects';
@@ -25,8 +24,10 @@ import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
export const useOpenRecordInCommandMenu = () => {
const store = useStore();
const theme = useTheme();
const { getIcon } = useIcons();
@@ -46,14 +47,12 @@ export const useOpenRecordInCommandMenu = () => {
isNewRecord?: boolean;
resetNavigationStack?: boolean;
}) => {
const navigationStack = jotaiStore.get(
commandMenuNavigationStackState.atom,
);
const navigationStack = store.get(commandMenuNavigationStackState.atom);
const currentNavigationStackItem = navigationStack.at(-1);
if (isDefined(currentNavigationStackItem)) {
const currentRecordId = jotaiStore.get(
const currentRecordId = store.get(
viewableRecordIdComponentState.atomFamily({
instanceId: currentNavigationStackItem.pageId,
}),
@@ -66,21 +65,21 @@ export const useOpenRecordInCommandMenu = () => {
const pageComponentInstanceId = v4();
jotaiStore.set(
store.set(
viewableRecordNameSingularComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
objectNameSingular,
);
jotaiStore.set(
store.set(
viewableRecordIdComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
recordId,
);
jotaiStore.set(viewableRecordIdState.atom, recordId);
store.set(viewableRecordIdState.atom, recordId);
const objectMetadataItem = jotaiStore.get(
const objectMetadataItem = store.get(
objectMetadataItemFamilySelector.selectorFamily({
objectName: objectNameSingular,
objectNameType: 'singular',
@@ -93,14 +92,14 @@ export const useOpenRecordInCommandMenu = () => {
);
}
jotaiStore.set(
store.set(
contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
objectMetadataItem.id,
);
jotaiStore.set(
store.set(
contextStoreTargetedRecordsRuleComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
@@ -110,43 +109,43 @@ export const useOpenRecordInCommandMenu = () => {
},
);
jotaiStore.set(
store.set(
contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
1,
);
jotaiStore.set(
store.set(
contextStoreCurrentViewTypeComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
ContextStoreViewType.ShowPage,
);
jotaiStore.set(
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
jotaiStore.get(
store.get(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
}),
),
);
jotaiStore.set(
store.set(
contextStoreIsPageInEditModeComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
jotaiStore.get(
store.get(
contextStoreIsPageInEditModeComponentState.atomFamily({
instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
}),
),
);
const currentMorphItems = jotaiStore.get(
const currentMorphItems = store.get(
commandMenuNavigationMorphItemsByPageState.atom,
);
@@ -158,7 +157,7 @@ export const useOpenRecordInCommandMenu = () => {
const newMorphItemsMap = new Map(currentMorphItems);
newMorphItemsMap.set(pageComponentInstanceId, [morphItemToAdd]);
jotaiStore.set(
store.set(
commandMenuNavigationMorphItemsByPageState.atom,
newMorphItemsMap,
);
@@ -197,6 +196,7 @@ export const useOpenRecordInCommandMenu = () => {
navigateCommandMenu,
runWorkflowRunOpeningInCommandMenuSideEffects,
theme,
store,
],
);
packages/twenty-front/src/modules/command-menu/hooks/useResetContextStoreStates.ts
+52 -48
View File
@@ -5,63 +5,67 @@ import { contextStoreFilterGroupsComponentState } from '@/context-store/states/c
import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useCallback } from 'react';
import { useStore } from 'jotai';
export const useResetContextStoreStates = () => {
const resetContextStoreStates = useCallback((instanceId: string) => {
jotaiStore.set(
contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
instanceId,
}),
undefined,
);
const store = useStore();
const resetContextStoreStates = useCallback(
(instanceId: string) => {
store.set(
contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
instanceId,
}),
undefined,
);
jotaiStore.set(
contextStoreTargetedRecordsRuleComponentState.atomFamily({
instanceId,
}),
{
mode: 'selection',
selectedRecordIds: [],
},
);
store.set(
contextStoreTargetedRecordsRuleComponentState.atomFamily({
instanceId,
}),
{
mode: 'selection',
selectedRecordIds: [],
},
);
jotaiStore.set(
contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
instanceId,
}),
0,
);
store.set(
contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
instanceId,
}),
0,
);
jotaiStore.set(
contextStoreFiltersComponentState.atomFamily({
instanceId,
}),
[],
);
store.set(
contextStoreFiltersComponentState.atomFamily({
instanceId,
}),
[],
);
jotaiStore.set(
contextStoreFilterGroupsComponentState.atomFamily({
instanceId,
}),
[],
);
store.set(
contextStoreFilterGroupsComponentState.atomFamily({
instanceId,
}),
[],
);
jotaiStore.set(
contextStoreAnyFieldFilterValueComponentState.atomFamily({
instanceId,
}),
'',
);
store.set(
contextStoreAnyFieldFilterValueComponentState.atomFamily({
instanceId,
}),
'',
);
jotaiStore.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId,
}),
undefined,
);
}, []);
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId,
}),
undefined,
);
},
[store],
);
return { resetContextStoreStates };
};
packages/twenty-front/src/modules/command-menu/hooks/useSetGlobalCommandMenuContext.ts
+11 -10
View File
@@ -10,10 +10,11 @@ import { contextStoreFiltersComponentState } from '@/context-store/states/contex
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useCallback } from 'react';
import { useStore } from 'jotai';
export const useSetGlobalCommandMenuContext = () => {
const store = useStore();
const { copyContextStoreStates } = useCopyContextStoreStates();
const setGlobalCommandMenuContext = useCallback(() => {
@@ -22,7 +23,7 @@ export const useSetGlobalCommandMenuContext = () => {
instanceIdToCopyTo: COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID,
});
jotaiStore.set(
store.set(
contextStoreTargetedRecordsRuleComponentState.atomFamily({
instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}),
@@ -32,49 +33,49 @@ export const useSetGlobalCommandMenuContext = () => {
},
);
jotaiStore.set(
store.set(
contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}),
0,
);
jotaiStore.set(
store.set(
contextStoreFiltersComponentState.atomFamily({
instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}),
[],
);
jotaiStore.set(
store.set(
contextStoreFilterGroupsComponentState.atomFamily({
instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}),
[],
);
jotaiStore.set(
store.set(
contextStoreAnyFieldFilterValueComponentState.atomFamily({
instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}),
'',
);
jotaiStore.set(
store.set(
contextStoreCurrentViewTypeComponentState.atomFamily({
instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
}),
ContextStoreViewType.Table,
);
jotaiStore.set(commandMenuPageInfoState.atom, {
store.set(commandMenuPageInfoState.atom, {
title: undefined,
Icon: undefined,
instanceId: '',
});
jotaiStore.set(hasUserSelectedCommandState.atom, false);
}, [copyContextStoreStates]);
store.set(hasUserSelectedCommandState.atom, false);
}, [copyContextStoreStates, store]);
return {
setGlobalCommandMenuContext,
packages/twenty-front/src/modules/command-menu/hooks/useUpdateCommandMenuPageInfo.ts
+7 -6
View File
@@ -1,10 +1,11 @@
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useCallback } from 'react';
import { type IconComponent, IconDotsVertical } from 'twenty-ui/display';
import { useStore } from 'jotai';
export const useUpdateCommandMenuPageInfo = () => {
const store = useStore();
const updateCommandMenuPageInfo = useCallback(
({
pageTitle,
@@ -13,7 +14,7 @@ export const useUpdateCommandMenuPageInfo = () => {
pageTitle?: string;
pageIcon?: IconComponent;
}) => {
const commandMenuPageInfo = jotaiStore.get(commandMenuPageInfoState.atom);
const commandMenuPageInfo = store.get(commandMenuPageInfoState.atom);
const newCommandMenuPageInfo = {
...commandMenuPageInfo,
@@ -21,9 +22,9 @@ export const useUpdateCommandMenuPageInfo = () => {
Icon: pageIcon ?? commandMenuPageInfo.Icon ?? IconDotsVertical,
};
jotaiStore.set(commandMenuPageInfoState.atom, newCommandMenuPageInfo);
store.set(commandMenuPageInfoState.atom, newCommandMenuPageInfo);
const commandMenuNavigationStack = jotaiStore.get(
const commandMenuNavigationStack = store.get(
commandMenuNavigationStackState.atom,
);
@@ -44,12 +45,12 @@ export const useUpdateCommandMenuPageInfo = () => {
},
];
jotaiStore.set(
store.set(
commandMenuNavigationStackState.atom,
newCommandMenuNavigationStack,
);
},
[],
[store],
);
return {
packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts
+22 -21
View File
@@ -3,7 +3,6 @@ import { commandMenuWorkflowIdComponentState } from '@/command-menu/pages/workfl
import { commandMenuWorkflowRunIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowRunIdComponentState';
import { commandMenuWorkflowStepIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowStepIdComponentState';
import { commandMenuWorkflowVersionIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowVersionIdComponentState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { type WorkflowRunStepStatus } from '@/workflow/types/Workflow';
import { useSetInitialWorkflowRunRightDrawerTab } from '@/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunRightDrawerTab';
import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
@@ -17,8 +16,10 @@ import {
IconSettingsAutomation,
} from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
export const useWorkflowCommandMenu = () => {
const store = useStore();
const { navigateCommandMenu } = useNavigateCommandMenu();
const { setInitialWorkflowRunRightDrawerTab } =
useSetInitialWorkflowRunRightDrawerTab();
@@ -27,7 +28,7 @@ export const useWorkflowCommandMenu = () => {
(workflowId: string) => {
const pageId = v4();
jotaiStore.set(
store.set(
commandMenuWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
@@ -41,14 +42,14 @@ export const useWorkflowCommandMenu = () => {
pageId,
});
},
[navigateCommandMenu],
[navigateCommandMenu, store],
);
const openWorkflowCreateStepInCommandMenu = useCallback(
(workflowId: string) => {
const pageId = v4();
jotaiStore.set(
store.set(
commandMenuWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
@@ -62,7 +63,7 @@ export const useWorkflowCommandMenu = () => {
pageId,
});
},
[navigateCommandMenu],
[navigateCommandMenu, store],
);
const openWorkflowEditStepInCommandMenu = useCallback(
@@ -74,7 +75,7 @@ export const useWorkflowCommandMenu = () => {
) => {
const pageId = v4();
jotaiStore.set(
store.set(
commandMenuWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
@@ -82,14 +83,14 @@ export const useWorkflowCommandMenu = () => {
);
if (isDefined(stepId)) {
jotaiStore.set(
store.set(
commandMenuWorkflowStepIdComponentState.atomFamily({
instanceId: pageId,
}),
stepId,
);
jotaiStore.set(
store.set(
workflowSelectedNodeComponentState.atomFamily({
instanceId: workflowId,
}),
@@ -104,14 +105,14 @@ export const useWorkflowCommandMenu = () => {
pageId,
});
},
[navigateCommandMenu],
[navigateCommandMenu, store],
);
const openWorkflowEditStepTypeInCommandMenu = useCallback(
(workflowId: string) => {
const pageId = v4();
jotaiStore.set(
store.set(
commandMenuWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
@@ -125,7 +126,7 @@ export const useWorkflowCommandMenu = () => {
pageId,
});
},
[navigateCommandMenu],
[navigateCommandMenu, store],
);
const openWorkflowViewStepInCommandMenu = useCallback(
@@ -144,13 +145,13 @@ export const useWorkflowCommandMenu = () => {
}) => {
const pageId = v4();
jotaiStore.set(
store.set(
commandMenuWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowId,
);
jotaiStore.set(
store.set(
commandMenuWorkflowVersionIdComponentState.atomFamily({
instanceId: pageId,
}),
@@ -158,14 +159,14 @@ export const useWorkflowCommandMenu = () => {
);
if (isDefined(stepId)) {
jotaiStore.set(
store.set(
commandMenuWorkflowStepIdComponentState.atomFamily({
instanceId: pageId,
}),
stepId,
);
jotaiStore.set(
store.set(
workflowSelectedNodeComponentState.atomFamily({
instanceId: workflowVersionId,
}),
@@ -180,7 +181,7 @@ export const useWorkflowCommandMenu = () => {
pageId,
});
},
[navigateCommandMenu],
[navigateCommandMenu, store],
);
const openWorkflowRunViewStepInCommandMenu = useCallback(
@@ -201,26 +202,26 @@ export const useWorkflowCommandMenu = () => {
}) => {
const pageId = v4();
jotaiStore.set(
store.set(
commandMenuWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowId,
);
jotaiStore.set(
store.set(
commandMenuWorkflowRunIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowRunId,
);
jotaiStore.set(
store.set(
commandMenuWorkflowStepIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowSelectedNode,
);
jotaiStore.set(
store.set(
workflowSelectedNodeComponentState.atomFamily({
instanceId: workflowRunId,
}),
@@ -239,7 +240,7 @@ export const useWorkflowCommandMenu = () => {
stepExecutionStatus,
});
},
[navigateCommandMenu, setInitialWorkflowRunRightDrawerTab],
[navigateCommandMenu, setInitialWorkflowRunRightDrawerTab, store],
);
return {
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFiltersSettings.tsx
+6 -6
View File
@@ -49,12 +49,12 @@ export const ChartFiltersSettings = ({
const { updateCurrentWidgetConfig } =
useUpdateCurrentWidgetConfig(pageLayoutId);
const currentRecordFiltersAtom = useRecoilComponentStateCallbackStateV2(
const currentRecordFilters = useRecoilComponentStateCallbackStateV2(
currentRecordFiltersComponentState,
instanceId,
);
const currentRecordFilterGroupsAtom = useRecoilComponentStateCallbackStateV2(
const currentRecordFilterGroups = useRecoilComponentStateCallbackStateV2(
currentRecordFilterGroupsComponentState,
instanceId,
);
@@ -63,15 +63,15 @@ export const ChartFiltersSettings = ({
const chartWidgetConfiguration = widget.configuration;
const handleFiltersUpdate = () => {
const currentRecordFilters = store.get(currentRecordFiltersAtom);
const currentRecordFilterGroups = store.get(currentRecordFilterGroupsAtom);
const existingRecordFilters = store.get(currentRecordFilters);
const existingRecordFilterGroups = store.get(currentRecordFilterGroups);
updateCurrentWidgetConfig({
objectMetadataId: objectMetadataItem.id,
configToUpdate: {
filter: {
recordFilters: currentRecordFilters,
recordFilterGroups: currentRecordFilterGroups,
recordFilters: existingRecordFilters,
recordFilterGroups: existingRecordFilterGroups,
},
} satisfies Partial<ChartWidgetConfiguration>,
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useResetChartDraftFiltersSettings.ts
+7 -6
View File
@@ -5,11 +5,12 @@ import { currentRecordFilterGroupsComponentState } from '@/object-record/record-
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { hasInitializedCurrentRecordFilterGroupsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFilterGroupsComponentFamilyState';
import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useStore } from 'jotai';
export const useResetChartDraftFiltersSettings = () => {
const store = useStore();
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
@@ -25,7 +26,7 @@ export const useResetChartDraftFiltersSettings = () => {
objectMetadataItemId: objectMetadataItemId,
});
jotaiStore.set(
store.set(
hasInitializedCurrentRecordFilterGroupsComponentFamilyState.atomFamily({
familyKey: {},
instanceId,
@@ -33,7 +34,7 @@ export const useResetChartDraftFiltersSettings = () => {
false,
);
jotaiStore.set(
store.set(
hasInitializedCurrentRecordFiltersComponentFamilyState.atomFamily({
familyKey: {},
instanceId,
@@ -41,16 +42,16 @@ export const useResetChartDraftFiltersSettings = () => {
false,
);
jotaiStore.set(
store.set(
currentRecordFiltersComponentState.atomFamily({ instanceId }),
[],
);
jotaiStore.set(
store.set(
currentRecordFilterGroupsComponentState.atomFamily({ instanceId }),
[],
);
},
[widgetInEditMode],
[widgetInEditMode, store],
);
return {
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig.ts
+4 -4
View File
@@ -7,7 +7,7 @@ import { useStore } from 'jotai';
import { useCallback } from 'react';
export const useUpdateCurrentWidgetConfig = (pageLayoutIdFromProps: string) => {
const pageLayoutDraftAtom = useRecoilComponentStateCallbackStateV2(
const pageLayoutDraft = useRecoilComponentStateCallbackStateV2(
pageLayoutDraftComponentState,
pageLayoutIdFromProps,
);
@@ -27,8 +27,8 @@ export const useUpdateCurrentWidgetConfig = (pageLayoutIdFromProps: string) => {
objectMetadataId?: string | null;
configToUpdate?: Partial<PageLayoutWidget['configuration']>;
}) => {
const prev = store.get(pageLayoutDraftAtom);
store.set(pageLayoutDraftAtom, {
const prev = store.get(pageLayoutDraft);
store.set(pageLayoutDraft, {
...prev,
tabs: prev.tabs.map((tab) => ({
...tab,
@@ -47,7 +47,7 @@ export const useUpdateCurrentWidgetConfig = (pageLayoutIdFromProps: string) => {
})),
});
},
[pageLayoutDraftAtom, currentlyEditingWidgetId, store],
[pageLayoutDraft, currentlyEditingWidgetId, store],
);
return { updateCurrentWidgetConfig };