Jotai 13 (#18178)
## 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
+97
-106
@@ -15,9 +15,9 @@ import { getWidgetSize } from '@/page-layout/utils/getWidgetSize';
|
||||
import { getWidgetTitle } from '@/page-layout/utils/getWidgetTitle';
|
||||
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
|
||||
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
|
||||
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
|
||||
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
|
||||
import { useStore } from 'jotai';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
import { useCallback } from 'react';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import {
|
||||
@@ -39,133 +39,124 @@ export const useCreatePageLayoutGraphWidget = (
|
||||
|
||||
const tabListInstanceId = getTabListInstanceIdFromPageLayoutId(pageLayoutId);
|
||||
|
||||
const pageLayoutDraftState = useRecoilComponentCallbackState(
|
||||
const pageLayoutDraftState = useRecoilComponentStateCallbackStateV2(
|
||||
pageLayoutDraftComponentState,
|
||||
pageLayoutId,
|
||||
);
|
||||
|
||||
const pageLayoutCurrentLayoutsState = useRecoilComponentCallbackState(
|
||||
const pageLayoutCurrentLayoutsState = useRecoilComponentStateCallbackStateV2(
|
||||
pageLayoutCurrentLayoutsComponentState,
|
||||
pageLayoutId,
|
||||
);
|
||||
|
||||
const pageLayoutDraggedAreaState = useRecoilComponentCallbackState(
|
||||
const pageLayoutDraggedAreaState = useRecoilComponentStateCallbackStateV2(
|
||||
pageLayoutDraggedAreaComponentState,
|
||||
pageLayoutId,
|
||||
);
|
||||
|
||||
const createPageLayoutGraphWidget = useRecoilCallback(
|
||||
({ snapshot, set }) =>
|
||||
({
|
||||
fieldSelection,
|
||||
}: {
|
||||
fieldSelection?: GraphWidgetFieldSelection;
|
||||
}): PageLayoutWidget => {
|
||||
const activeTabId = store.get(
|
||||
activeTabIdComponentState.atomFamily({
|
||||
instanceId: tabListInstanceId,
|
||||
}),
|
||||
);
|
||||
const createPageLayoutGraphWidget = useCallback(
|
||||
({
|
||||
fieldSelection,
|
||||
}: {
|
||||
fieldSelection?: GraphWidgetFieldSelection;
|
||||
}): PageLayoutWidget => {
|
||||
const activeTabId = store.get(
|
||||
activeTabIdComponentState.atomFamily({
|
||||
instanceId: tabListInstanceId,
|
||||
}),
|
||||
);
|
||||
|
||||
if (!isDefined(activeTabId)) {
|
||||
throw new Error(
|
||||
'A tab must be selected to create a new graph widget',
|
||||
);
|
||||
if (!isDefined(activeTabId)) {
|
||||
throw new Error('A tab must be selected to create a new graph widget');
|
||||
}
|
||||
|
||||
const pageLayoutDraft = store.get(pageLayoutDraftState);
|
||||
|
||||
const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);
|
||||
|
||||
const pageLayoutDraggedArea = store.get(pageLayoutDraggedAreaState);
|
||||
|
||||
const allWidgets = pageLayoutDraft.tabs.flatMap((tab) => tab.widgets);
|
||||
const existingWidgetCount = allWidgets.filter((widget) => {
|
||||
if (widget.type !== WidgetType.GRAPH) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const pageLayoutDraft = snapshot
|
||||
.getLoadable(pageLayoutDraftState)
|
||||
.getValue();
|
||||
if (
|
||||
!isWidgetConfigurationOfType(
|
||||
widget.configuration,
|
||||
'BarChartConfiguration',
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return widget.configuration.layout === BarChartLayout.VERTICAL;
|
||||
}).length;
|
||||
|
||||
const allTabLayouts = snapshot
|
||||
.getLoadable(pageLayoutCurrentLayoutsState)
|
||||
.getValue();
|
||||
const title = getWidgetTitle(
|
||||
{
|
||||
configurationType: WidgetConfigurationType.BAR_CHART,
|
||||
layout: BarChartLayout.VERTICAL,
|
||||
},
|
||||
existingWidgetCount,
|
||||
);
|
||||
const widgetId = uuidv4();
|
||||
|
||||
const pageLayoutDraggedArea = snapshot
|
||||
.getLoadable(pageLayoutDraggedAreaState)
|
||||
.getValue();
|
||||
const defaultSize = getWidgetSize(
|
||||
WidgetConfigurationType.BAR_CHART,
|
||||
'default',
|
||||
);
|
||||
const minimumSize = getWidgetSize(
|
||||
WidgetConfigurationType.BAR_CHART,
|
||||
'minimum',
|
||||
);
|
||||
const position = getDefaultWidgetPosition(
|
||||
pageLayoutDraggedArea,
|
||||
defaultSize,
|
||||
minimumSize,
|
||||
);
|
||||
|
||||
const allWidgets = pageLayoutDraft.tabs.flatMap((tab) => tab.widgets);
|
||||
const existingWidgetCount = allWidgets.filter((widget) => {
|
||||
if (widget.type !== WidgetType.GRAPH) {
|
||||
return false;
|
||||
}
|
||||
const newWidget = createDefaultGraphWidget({
|
||||
id: widgetId,
|
||||
pageLayoutTabId: activeTabId,
|
||||
title,
|
||||
gridPosition: {
|
||||
row: position.y,
|
||||
column: position.x,
|
||||
rowSpan: position.h,
|
||||
columnSpan: position.w,
|
||||
},
|
||||
fieldSelection,
|
||||
timezone: timeZone,
|
||||
firstDayOfTheWeek: calendarStartDay,
|
||||
});
|
||||
|
||||
if (
|
||||
!isWidgetConfigurationOfType(
|
||||
widget.configuration,
|
||||
'BarChartConfiguration',
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return widget.configuration.layout === BarChartLayout.VERTICAL;
|
||||
}).length;
|
||||
const newLayout = {
|
||||
i: widgetId,
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
w: position.w,
|
||||
h: position.h,
|
||||
minW: minimumSize.w,
|
||||
minH: minimumSize.h,
|
||||
};
|
||||
|
||||
const title = getWidgetTitle(
|
||||
{
|
||||
configurationType: WidgetConfigurationType.BAR_CHART,
|
||||
layout: BarChartLayout.VERTICAL,
|
||||
},
|
||||
existingWidgetCount,
|
||||
);
|
||||
const widgetId = uuidv4();
|
||||
const updatedLayouts = getUpdatedTabLayouts(
|
||||
allTabLayouts,
|
||||
activeTabId,
|
||||
newLayout,
|
||||
);
|
||||
store.set(pageLayoutCurrentLayoutsState, updatedLayouts);
|
||||
|
||||
const defaultSize = getWidgetSize(
|
||||
WidgetConfigurationType.BAR_CHART,
|
||||
'default',
|
||||
);
|
||||
const minimumSize = getWidgetSize(
|
||||
WidgetConfigurationType.BAR_CHART,
|
||||
'minimum',
|
||||
);
|
||||
const position = getDefaultWidgetPosition(
|
||||
pageLayoutDraggedArea,
|
||||
defaultSize,
|
||||
minimumSize,
|
||||
);
|
||||
store.set(pageLayoutDraftState, (prev) => ({
|
||||
...prev,
|
||||
tabs: addWidgetToTab(prev.tabs, activeTabId, newWidget),
|
||||
}));
|
||||
|
||||
const newWidget = createDefaultGraphWidget({
|
||||
id: widgetId,
|
||||
pageLayoutTabId: activeTabId,
|
||||
title,
|
||||
gridPosition: {
|
||||
row: position.y,
|
||||
column: position.x,
|
||||
rowSpan: position.h,
|
||||
columnSpan: position.w,
|
||||
},
|
||||
fieldSelection,
|
||||
timezone: timeZone,
|
||||
firstDayOfTheWeek: calendarStartDay,
|
||||
});
|
||||
store.set(pageLayoutDraggedAreaState, null);
|
||||
|
||||
const newLayout = {
|
||||
i: widgetId,
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
w: position.w,
|
||||
h: position.h,
|
||||
minW: minimumSize.w,
|
||||
minH: minimumSize.h,
|
||||
};
|
||||
|
||||
const updatedLayouts = getUpdatedTabLayouts(
|
||||
allTabLayouts,
|
||||
activeTabId,
|
||||
newLayout,
|
||||
);
|
||||
set(pageLayoutCurrentLayoutsState, updatedLayouts);
|
||||
|
||||
set(pageLayoutDraftState, (prev) => ({
|
||||
...prev,
|
||||
tabs: addWidgetToTab(prev.tabs, activeTabId, newWidget),
|
||||
}));
|
||||
|
||||
set(pageLayoutDraggedAreaState, null);
|
||||
|
||||
return newWidget;
|
||||
},
|
||||
return newWidget;
|
||||
},
|
||||
[
|
||||
tabListInstanceId,
|
||||
pageLayoutCurrentLayoutsState,
|
||||
|
||||
Reference in New Issue
Block a user