0f2af6a6cb
## Recoil to Jotai Migration — PR 13: Workflow, Page Layout, AI, Activities, Settings, SSE & Remaining Modules ### Summary This is the 13th PR in the [14-PR migration series](packages/twenty-front/src/modules/ui/utilities/state/jotai/MIGRATION_PLAN.md) to replace Recoil with Jotai as the state management library in `twenty-front`. This PR migrates the remaining consumer code across all modules — updating ~1,076 files with ~10k insertions/deletions. ### What changed **New Jotai infrastructure (13 new files):** - `createComponentSelectorV2` and `createComponentFamilySelectorV2` — instance-scoped derived atoms, replacing Recoil's component selectors - 6 new hooks: `useRecoilComponentSelectorValueV2`, `useRecoilComponentFamilySelectorValueV2`, `useRecoilComponentSelectorCallbackStateV2`, `useRecoilComponentFamilySelectorCallbackStateV2`, `useRecoilComponentStateCallbackStateV2`, `useRecoilComponentFamilyStateCallbackStateV2` - New types: `ComponentSelectorV2`, `ComponentFamilySelectorV2`, `SelectorCallbacksV2` - Extended `buildGetHelper` to support the new selector patterns **State definition migrations:** - `createState()` → `createStateV2()` (Jotai `atom()`) - `createFamilyState()` → `createFamilyStateV2()` (Jotai `atom()` with family cache) - Recoil `selector`/`selectorFamily` → Jotai derived `atom()` via V2 utilities **Hook migrations (~2,400 removed, ~1,545 added V2 equivalents):** - `useRecoilValue` → `useRecoilValueV2` - `useRecoilState` → `useRecoilStateV2` - `useSetRecoilState` → `useSetRecoilStateV2` - `useRecoilCallback` → `useCallback` + `jotaiStore.get/set` - `useRecoilComponentValue` → `useRecoilComponentValueV2` - `useSetRecoilComponentState` → `useSetRecoilComponentStateV2` - `useRecoilComponentFamilyValue` → `useRecoilComponentFamilyValueV2` / `useFamilySelectorValueV2` - ~397 direct `import from 'recoil'` removed **Deleted files (9 files):** - `dateLocaleState.ts` — consolidated - `currentAIChatThreadTitleStateV2.ts` — renamed to replace the original - `isCommandMenuOpenedState.ts` — removed - `filesFieldUploadState.ts` — replaced by V2 - `recordStoreFamilySelector.ts`, `recordStoreFieldValueSelector.ts`, `recordStoreRecordsSelector.ts` — replaced by V2 equivalents - `settingsAllRolesSelector.ts` — replaced by `useSettingsAllRoles` hook - `settingsRoleIdsStateV2.ts` — consolidated **Modules migrated:** - Workflow (diagram, steps, variables, filters) - Page Layout (widgets, fields, graph, tabs) - AI (chat, agents, browsing context) - Activities (rich text editor, targets, timeline) - Action Menu (single/multiple record actions) - Command Menu (navigation, history, pages, workflow) - Context Store - Record Board, Record Table, Record Calendar, Record Index - Record Field, Record Filter, Record Sort, Record Group - Record Drag, Record Picker, Record Store - Views (view bar, view picker, filters, sorts) - Settings (roles, permissions, SSO, security, data model, developers, domains) - SSE (event streams, subscriptions) - Spreadsheet Import - Auth, Favorites, Front Components, Information Banner
86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
|
|
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
|
|
import { type MockedResponse } from '@apollo/client/testing';
|
|
import { type ReactNode } from 'react';
|
|
import type { Store } from 'jotai/vanilla/store';
|
|
import { type MutableSnapshot } from 'recoil';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import {
|
|
JestContextStoreSetter,
|
|
type JestContextStoreSetterMocks,
|
|
} from '~/testing/jest/JestContextStoreSetter';
|
|
import { JestRecordIndexContextProviderWrapper } from '~/testing/jest/JestRecordIndexContextProviderWrapper';
|
|
import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
|
|
import { getMockObjectMetadataItemOrThrow } from '~/testing/utils/getMockObjectMetadataItemOrThrow';
|
|
|
|
export type GetJestMetadataAndApolloMocksAndActionMenuWrapperProps = {
|
|
apolloMocks:
|
|
| readonly MockedResponse<Record<string, any>, Record<string, any>>[]
|
|
| undefined;
|
|
onInitializeRecoilSnapshot?: (snapshot: MutableSnapshot) => void;
|
|
onInitializeJotaiStore?: (store: Store) => void;
|
|
componentInstanceId: string;
|
|
} & JestContextStoreSetterMocks;
|
|
|
|
export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({
|
|
apolloMocks,
|
|
onInitializeRecoilSnapshot,
|
|
onInitializeJotaiStore,
|
|
contextStoreTargetedRecordsRule,
|
|
contextStoreCurrentViewId,
|
|
contextStoreCurrentViewType,
|
|
contextStoreNumberOfSelectedRecords,
|
|
contextStoreCurrentObjectMetadataNameSingular,
|
|
contextStoreFilters,
|
|
componentInstanceId,
|
|
}: GetJestMetadataAndApolloMocksAndActionMenuWrapperProps) => {
|
|
const Wrapper = getJestMetadataAndApolloMocksWrapper({
|
|
apolloMocks,
|
|
onInitializeRecoilSnapshot,
|
|
onInitializeJotaiStore,
|
|
});
|
|
|
|
const mockObjectMetadataItem = getMockObjectMetadataItemOrThrow(
|
|
contextStoreCurrentObjectMetadataNameSingular ?? '',
|
|
);
|
|
|
|
if (!isDefined(mockObjectMetadataItem)) {
|
|
throw new Error(
|
|
`Mock object metadata item ${contextStoreCurrentObjectMetadataNameSingular} not found`,
|
|
);
|
|
}
|
|
|
|
return ({ children }: { children: ReactNode }) => (
|
|
<Wrapper>
|
|
<ContextStoreComponentInstanceContext.Provider
|
|
value={{ instanceId: componentInstanceId }}
|
|
>
|
|
<ActionMenuComponentInstanceContext.Provider
|
|
value={{
|
|
instanceId: componentInstanceId,
|
|
}}
|
|
>
|
|
<JestRecordIndexContextProviderWrapper
|
|
objectMetadataItem={mockObjectMetadataItem}
|
|
>
|
|
<JestContextStoreSetter
|
|
contextStoreCurrentViewId={contextStoreCurrentViewId}
|
|
contextStoreFilters={contextStoreFilters}
|
|
contextStoreTargetedRecordsRule={contextStoreTargetedRecordsRule}
|
|
contextStoreNumberOfSelectedRecords={
|
|
contextStoreNumberOfSelectedRecords
|
|
}
|
|
contextStoreCurrentObjectMetadataNameSingular={
|
|
contextStoreCurrentObjectMetadataNameSingular
|
|
}
|
|
contextStoreCurrentViewType={contextStoreCurrentViewType}
|
|
>
|
|
{children}
|
|
</JestContextStoreSetter>
|
|
</JestRecordIndexContextProviderWrapper>
|
|
</ActionMenuComponentInstanceContext.Provider>
|
|
</ContextStoreComponentInstanceContext.Provider>
|
|
</Wrapper>
|
|
);
|
|
};
|