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

Jotai 13 (#18178)

Browse Source 
## 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
This commit is contained in:
Charles Bochet
2026-02-24 17:37:01 +01:00
committed by GitHub
parent c6ec764b23
commit 0f2af6a6cb
1326 changed files with 19248 additions and 19389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/spreadsheet-import/hooks/__tests__/useSpreadsheetImport.test.tsx
+6 -6
View File
@@ -1,5 +1,6 @@
import { renderHook } from '@testing-library/react';
import { RecoilRoot, useRecoilState } from 'recoil';
import { Provider as JotaiProvider } from 'jotai';
import React, { act } from 'react';
import { useOpenSpreadsheetImportDialog } from '@/spreadsheet-import/hooks/useOpenSpreadsheetImportDialog';
import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
@@ -8,10 +9,10 @@ import {
type ImportedRow,
type SpreadsheetImportDialogOptions,
} from '@/spreadsheet-import/types';
import { act } from 'react';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecoilRoot>{children}</RecoilRoot>
<JotaiProvider store={jotaiStore}>{children}</JotaiProvider>
);
export const mockedSpreadsheetOptions: SpreadsheetImportDialogOptions = {
@@ -50,13 +51,12 @@ describe('useSpreadsheetImport', () => {
const { result } = renderHook(
() => ({
useSpreadsheetImport: useOpenSpreadsheetImportDialog(),
spreadsheetImportState: useRecoilState(spreadsheetImportDialogState)[0],
}),
{
wrapper: Wrapper,
},
);
expect(result.current.spreadsheetImportState).toStrictEqual({
expect(jotaiStore.get(spreadsheetImportDialogState.atom)).toStrictEqual({
isOpen: false,
isStepBarVisible: true,
options: null,
@@ -66,7 +66,7 @@ describe('useSpreadsheetImport', () => {
mockedSpreadsheetOptions,
);
});
expect(result.current.spreadsheetImportState).toStrictEqual({
expect(jotaiStore.get(spreadsheetImportDialogState.atom)).toStrictEqual({
isOpen: true,
isStepBarVisible: true,
options: mockedSpreadsheetOptions,
packages/twenty-front/src/modules/spreadsheet-import/hooks/useComputeColumnSuggestionsAndAutoMatch.ts
+24 -23
View File
@@ -1,3 +1,5 @@
import { useCallback } from 'react';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import {
initialComputedColumnsSelector,
@@ -6,36 +8,35 @@ import {
import { suggestedFieldsByColumnHeaderState } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/suggestedFieldsByColumnHeaderState';
import { type ImportedRow } from '@/spreadsheet-import/types';
import { getMatchedColumnsWithFuse } from '@/spreadsheet-import/utils/getMatchedColumnsWithFuse';
import { useRecoilCallback } from 'recoil';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
export const useComputeColumnSuggestionsAndAutoMatch = () => {
const { spreadsheetImportFields: fields, autoMapHeaders } =
useSpreadsheetImportInternal();
const computeColumnSuggestionsAndAutoMatch = useRecoilCallback(
({ set, snapshot }) =>
async ({
headerValues,
data,
}: {
headerValues: ImportedRow;
data: ImportedRow[];
}) => {
if (autoMapHeaders) {
const columns = snapshot
.getLoadable(initialComputedColumnsSelector(headerValues))
.getValue();
const computeColumnSuggestionsAndAutoMatch = useCallback(
async ({
headerValues,
data,
}: {
headerValues: ImportedRow;
data: ImportedRow[];
}) => {
if (autoMapHeaders) {
const columns = jotaiStore.get(
initialComputedColumnsSelector.selectorFamily(headerValues),
);
const { matchedColumns, suggestedFieldsByColumnHeader } =
getMatchedColumnsWithFuse({ columns, fields, data });
const { matchedColumns, suggestedFieldsByColumnHeader } =
getMatchedColumnsWithFuse({ columns, fields, data });
set(matchColumnsState, matchedColumns);
set(
suggestedFieldsByColumnHeaderState,
suggestedFieldsByColumnHeader,
);
}
},
jotaiStore.set(matchColumnsState.atom, matchedColumns);
jotaiStore.set(
suggestedFieldsByColumnHeaderState.atom,
suggestedFieldsByColumnHeader,
);
}
},
[autoMapHeaders, fields],
);
packages/twenty-front/src/modules/spreadsheet-import/hooks/useHideStepBar.ts
+13 -16
View File
@@ -1,23 +1,20 @@
import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
import { useRecoilCallback } from 'recoil';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useCallback } from 'react';
export const useHideStepBar = () => {
const hideStepBar = useRecoilCallback(
({ set, snapshot }) =>
() => {
const isStepBarVisible = snapshot
.getLoadable(spreadsheetImportDialogState)
.getValue().isStepBarVisible;
const hideStepBar = useCallback(() => {
const isStepBarVisible = jotaiStore.get(
spreadsheetImportDialogState.atom,
).isStepBarVisible;
if (isStepBarVisible) {
set(spreadsheetImportDialogState, (state) => ({
...state,
isStepBarVisible: false,
}));
}
},
[],
);
if (isStepBarVisible) {
jotaiStore.set(spreadsheetImportDialogState.atom, (state) => ({
...state,
isStepBarVisible: false,
}));
}
}, []);
return hideStepBar;
};
packages/twenty-front/src/modules/spreadsheet-import/hooks/useOpenSpreadsheetImportDialog.ts
+5 -3
View File
@@ -1,11 +1,13 @@
import { useSetRecoilState } from 'recoil';
import { SPREADSHEET_IMPORT_MODAL_ID } from '@/spreadsheet-import/constants/SpreadsheetImportModalId';
import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
import { type SpreadsheetImportDialogOptions } from '@/spreadsheet-import/types';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
export const useOpenSpreadsheetImportDialog = () => {
const setSpreadSheetImport = useSetRecoilState(spreadsheetImportDialogState);
const setSpreadSheetImport = useSetRecoilStateV2(
spreadsheetImportDialogState,
);
const { openModal } = useModal();
packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx
+5 -5
View File
@@ -1,13 +1,14 @@
import { useTheme } from '@emotion/react';
import React from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { SPREADSHEET_IMPORT_MODAL_ID } from '@/spreadsheet-import/constants/SpreadsheetImportModalId';
import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
import { matchColumnsState } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
const SpreadsheetImport = React.lazy(() =>
import('./SpreadsheetImport').then((module) => ({
@@ -34,11 +35,10 @@ type SpreadsheetImportProviderProps = React.PropsWithChildren;
export const SpreadsheetImportProvider = (
props: SpreadsheetImportProviderProps,
) => {
const [spreadsheetImportDialog, setSpreadsheetImportDialog] = useRecoilState(
spreadsheetImportDialogState,
);
const [spreadsheetImportDialog, setSpreadsheetImportDialog] =
useRecoilStateV2(spreadsheetImportDialogState);
const setMatchColumnsState = useSetRecoilState(matchColumnsState);
const setMatchColumnsState = useSetRecoilStateV2(matchColumnsState);
const { closeModal } = useModal();
packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportCreatedRecordsProgressState.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import { createState } from '@/ui/utilities/state/utils/createState';
import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
export const spreadsheetImportCreatedRecordsProgressState = createState({
export const spreadsheetImportCreatedRecordsProgressState = createStateV2({
key: 'spreadsheetImportCreatedRecordsProgressState',
defaultValue: 0,
});
packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { createState } from '@/ui/utilities/state/utils/createState';
import { type SpreadsheetImportDialogOptions } from '@/spreadsheet-import/types';
import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
export type SpreadsheetImportDialogState = {
isOpen: boolean;
@@ -8,7 +8,7 @@ export type SpreadsheetImportDialogState = {
};
export const spreadsheetImportDialogState =
createState<SpreadsheetImportDialogState>({
createStateV2<SpreadsheetImportDialogState>({
key: 'spreadsheetImportDialogState',
defaultValue: {
isOpen: false,
packages/twenty-front/src/modules/spreadsheet-import/steps/components/ImportDataStep.tsx
+2 -3
View File
@@ -1,9 +1,8 @@
import { useRecoilValue } from 'recoil';
import { useNumberFormat } from '@/localization/hooks/useNumberFormat';
import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import { spreadsheetImportCreatedRecordsProgressState } from '@/spreadsheet-import/states/spreadsheetImportCreatedRecordsProgressState';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { Modal } from '@/ui/layout/modal/components/Modal';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
@@ -38,7 +37,7 @@ export const ImportDataStep = ({
recordsToImportCount,
}: ImportDataStepProps) => {
const { onClose } = useSpreadsheetImportInternal();
const spreadsheetImportCreatedRecordsProgress = useRecoilValue(
const spreadsheetImportCreatedRecordsProgress = useRecoilValueV2(
spreadsheetImportCreatedRecordsProgressState,
);
const { formatNumber } = useNumberFormat();
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
+4 -3
View File
@@ -28,9 +28,9 @@ import { type SpreadsheetColumn } from '@/spreadsheet-import/types/SpreadsheetCo
import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
import { type SpreadsheetImportField } from '@/spreadsheet-import/types/SpreadsheetImportField';
import { useFamilySelectorStateV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorStateV2';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { Trans, useLingui } from '@lingui/react/macro';
import { useRecoilState } from 'recoil';
const StyledContent = styled(Modal.Content)`
align-items: center;
@@ -81,8 +81,9 @@ export const MatchColumnsStep = ({
const dataExample = data.slice(0, 2);
const { spreadsheetImportFields: fields } = useSpreadsheetImportInternal();
const [isLoading, setIsLoading] = useState(false);
const [columns, setColumns] = useRecoilState(
initialComputedColumnsSelector(headerValues),
const [columns, setColumns] = useFamilySelectorStateV2(
initialComputedColumnsSelector,
headerValues,
);
const { matchColumnsStepHook } = useSpreadsheetImportInternal();
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ import { suggestedFieldsByColumnHeaderState } from '@/spreadsheet-import/steps/c
import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
import { spreadsheetImportBuildFieldOptions } from '@/spreadsheet-import/utils/spreadsheetImportBuildFieldOptions';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { IconForbid } from 'twenty-ui/display';
const StyledContainer = styled.div`
@@ -37,7 +37,7 @@ export const TemplateColumn = ({
onChange,
}: TemplateColumnProps) => {
const { spreadsheetImportFields: fields } = useSpreadsheetImportInternal();
const suggestedFieldsByColumnHeader = useRecoilValue(
const suggestedFieldsByColumnHeader = useRecoilValueV2(
suggestedFieldsByColumnHeaderState,
);
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState.ts
+5 -4
View File
@@ -1,14 +1,15 @@
import { type ImportedRow } from '@/spreadsheet-import/types';
import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
import { atom, selectorFamily } from 'recoil';
import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
import { createWritableFamilySelectorV2 } from '@/ui/utilities/state/jotai/utils/createWritableFamilySelectorV2';
export const matchColumnsState = atom({
export const matchColumnsState = createStateV2<SpreadsheetColumns>({
key: 'MatchColumnsState',
default: [] as SpreadsheetColumns,
defaultValue: [] as SpreadsheetColumns,
});
export const initialComputedColumnsSelector = selectorFamily<
export const initialComputedColumnsSelector = createWritableFamilySelectorV2<
SpreadsheetColumns,
ImportedRow
>({
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/states/suggestedFieldsByColumnHeaderState.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { type SpreadsheetImportField } from '@/spreadsheet-import/types';
import { createState } from '@/ui/utilities/state/utils/createState';
import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
export const suggestedFieldsByColumnHeaderState = createState({
export const suggestedFieldsByColumnHeaderState = createStateV2({
key: 'suggestedFieldsByColumnHeaderState',
defaultValue: {} as Record<string, SpreadsheetImportField[]>,
});
packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer.tsx
+4 -2
View File
@@ -8,8 +8,8 @@ import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
import { Modal } from '@/ui/layout/modal/components/Modal';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { SpreadsheetImportStepper } from './SpreadsheetImportStepper';
@@ -28,7 +28,9 @@ const StyledHeader = styled(Modal.Header)`
export const SpreadsheetImportStepperContainer = () => {
const { t } = useLingui();
const spreadsheetImportDialog = useRecoilValue(spreadsheetImportDialogState);
const spreadsheetImportDialog = useRecoilValueV2(
spreadsheetImportDialogState,
);
const stepTitles = {
uploadStep: t`Upload File`,