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/page-layout/components/PageLayoutContent.tsx
+2 -2
View File
@@ -7,14 +7,14 @@ import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageL
import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/useReorderPageLayoutWidgets';
import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
} from '~/generated-metadata/graphql';
export const PageLayoutContent = () => {
const isPageLayoutInEditMode = useRecoilComponentValue(
const isPageLayoutInEditMode = useRecoilComponentValueV2(
isPageLayoutInEditModeComponentState,
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
+9 -9
View File
@@ -24,8 +24,8 @@ import { filterPendingPlaceholderFromLayouts } from '@/page-layout/utils/filterP
import { prepareGridLayoutItemsWithPlaceholders } from '@/page-layout/utils/prepareGridLayoutItemsWithPlaceholders';
import { WidgetPlaceholder } from '@/page-layout/widgets/components/WidgetPlaceholder';
import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { useMemo, useRef } from 'react';
@@ -100,15 +100,15 @@ type PageLayoutGridLayoutProps = {
};
export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
const setPageLayoutCurrentBreakpoint = useSetRecoilComponentState(
const setPageLayoutCurrentBreakpoint = useSetRecoilComponentStateV2(
pageLayoutCurrentBreakpointComponentState,
);
const setDraggingWidgetId = useSetRecoilComponentState(
const setDraggingWidgetId = useSetRecoilComponentStateV2(
pageLayoutDraggingWidgetIdComponentState,
);
const setResizingWidgetId = useSetRecoilComponentState(
const setResizingWidgetId = useSetRecoilComponentStateV2(
pageLayoutResizingWidgetIdComponentState,
);
@@ -126,18 +126,18 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
const gridContainerRef = useRef<HTMLDivElement>(null);
const isPageLayoutInEditMode = useRecoilComponentValue(
const isPageLayoutInEditMode = useRecoilComponentValueV2(
isPageLayoutInEditModeComponentState,
);
const pageLayoutCurrentLayouts = useRecoilComponentValue(
const pageLayoutCurrentLayouts = useRecoilComponentValueV2(
pageLayoutCurrentLayoutsComponentState,
);
const pageLayoutDraggedArea = useRecoilComponentValue(
const pageLayoutDraggedArea = useRecoilComponentValueV2(
pageLayoutDraggedAreaComponentState,
);
const draggingWidgetId = useRecoilComponentValue(
const draggingWidgetId = useRecoilComponentValueV2(
pageLayoutDraggingWidgetIdComponentState,
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx
+3 -4
View File
@@ -8,7 +8,6 @@ import { calculateGridCellPosition } from '@/page-layout/utils/calculateGridCell
import { calculateTotalGridRows } from '@/page-layout/utils/calculateTotalGridRows';
import { generateCellId } from '@/page-layout/utils/generateCellId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { useMemo } from 'react';
@@ -49,15 +48,15 @@ const StyledGridCell = styled.div<{ isSelected?: boolean }>`
`;
export const PageLayoutGridOverlay = () => {
const pageLayoutCurrentBreakpoint = useRecoilComponentValue(
const pageLayoutCurrentBreakpoint = useRecoilComponentValueV2(
pageLayoutCurrentBreakpointComponentState,
);
const pageLayoutSelectedCells = useRecoilComponentValue(
const pageLayoutSelectedCells = useRecoilComponentValueV2(
pageLayoutSelectedCellsComponentState,
);
const pageLayoutCurrentLayouts = useRecoilComponentValue(
const pageLayoutCurrentLayouts = useRecoilComponentValueV2(
pageLayoutCurrentLayoutsComponentState,
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutInitializationQueryEffect.tsx
+32 -31
View File
@@ -6,11 +6,10 @@ import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/page
import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
import { useStore } from 'jotai';
import { useCallback, useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@@ -23,7 +22,7 @@ export const PageLayoutInitializationQueryEffect = ({
pageLayoutId,
onInitialized,
}: PageLayoutInitializationQueryEffectProps) => {
const [isInitialized, setIsInitialized] = useRecoilComponentState(
const [isInitialized, setIsInitialized] = useRecoilComponentStateV2(
pageLayoutIsInitializedComponentState,
);
@@ -32,41 +31,43 @@ export const PageLayoutInitializationQueryEffect = ({
const pageLayout = usePageLayoutWithRelationWidgets(basePageLayout);
const pageLayoutPersistedComponentCallbackState =
useRecoilComponentCallbackState(pageLayoutPersistedComponentState);
useRecoilComponentStateCallbackStateV2(pageLayoutPersistedComponentState);
const pageLayoutDraftComponentCallbackState = useRecoilComponentCallbackState(
pageLayoutDraftComponentState,
);
const pageLayoutDraftComponentCallbackState =
useRecoilComponentStateCallbackStateV2(pageLayoutDraftComponentState);
const pageLayoutCurrentLayoutsComponentCallbackState =
useRecoilComponentCallbackState(pageLayoutCurrentLayoutsComponentState);
useRecoilComponentStateCallbackStateV2(
pageLayoutCurrentLayoutsComponentState,
);
const initializePageLayout = useRecoilCallback(
({ set, snapshot }) =>
(layout: PageLayout) => {
const currentPersisted = getSnapshotValue(
snapshot,
pageLayoutPersistedComponentCallbackState,
);
const store = useStore();
if (!isDeeplyEqual(layout, currentPersisted)) {
set(pageLayoutPersistedComponentCallbackState, layout);
set(pageLayoutDraftComponentCallbackState, {
id: layout.id,
name: layout.name,
type: layout.type,
objectMetadataId: layout.objectMetadataId,
tabs: layout.tabs,
});
const initializePageLayout = useCallback(
(layout: PageLayout) => {
const currentPersisted = store.get(
pageLayoutPersistedComponentCallbackState,
);
const tabLayouts = convertPageLayoutToTabLayouts(layout);
set(pageLayoutCurrentLayoutsComponentCallbackState, tabLayouts);
}
},
if (!isDeeplyEqual(layout, currentPersisted)) {
store.set(pageLayoutPersistedComponentCallbackState, layout);
store.set(pageLayoutDraftComponentCallbackState, {
id: layout.id,
name: layout.name,
type: layout.type,
objectMetadataId: layout.objectMetadataId,
tabs: layout.tabs,
});
const tabLayouts = convertPageLayoutToTabLayouts(layout);
store.set(pageLayoutCurrentLayoutsComponentCallbackState, tabLayouts);
}
},
[
pageLayoutCurrentLayoutsComponentCallbackState,
pageLayoutDraftComponentCallbackState,
pageLayoutPersistedComponentCallbackState,
store,
],
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutRelationWidgetsSyncEffect.tsx
+32 -31
View File
@@ -8,11 +8,10 @@ import { type PageLayout } from '@/page-layout/types/PageLayout';
import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
import { injectRelationWidgetsIntoLayout } from '@/page-layout/utils/injectRelationWidgetsIntoLayout';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useStore } from 'jotai';
import { useCallback, useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { PageLayoutType } from '~/generated-metadata/graphql';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@@ -26,7 +25,7 @@ export const PageLayoutRelationWidgetsSyncEffect = ({
}: PageLayoutRelationWidgetsSyncEffectProps) => {
const { targetRecordIdentifier, layoutType } = useLayoutRenderingContext();
const isInitialized = useRecoilComponentValue(
const isInitialized = useRecoilComponentValueV2(
pageLayoutIsInitializedComponentState,
);
@@ -37,41 +36,43 @@ export const PageLayoutRelationWidgetsSyncEffect = ({
});
const pageLayoutPersistedComponentCallbackState =
useRecoilComponentCallbackState(pageLayoutPersistedComponentState);
useRecoilComponentStateCallbackStateV2(pageLayoutPersistedComponentState);
const pageLayoutDraftComponentCallbackState = useRecoilComponentCallbackState(
pageLayoutDraftComponentState,
);
const pageLayoutDraftComponentCallbackState =
useRecoilComponentStateCallbackStateV2(pageLayoutDraftComponentState);
const pageLayoutCurrentLayoutsComponentCallbackState =
useRecoilComponentCallbackState(pageLayoutCurrentLayoutsComponentState);
useRecoilComponentStateCallbackStateV2(
pageLayoutCurrentLayoutsComponentState,
);
const syncPageLayoutWithRelationWidgets = useRecoilCallback(
({ set, snapshot }) =>
(layout: PageLayout) => {
const currentPersisted = getSnapshotValue(
snapshot,
pageLayoutPersistedComponentCallbackState,
);
const store = useStore();
if (!isDeeplyEqual(layout, currentPersisted)) {
set(pageLayoutPersistedComponentCallbackState, layout);
set(pageLayoutDraftComponentCallbackState, {
id: layout.id,
name: layout.name,
type: layout.type,
objectMetadataId: layout.objectMetadataId,
tabs: layout.tabs,
});
const syncPageLayoutWithRelationWidgets = useCallback(
(layout: PageLayout) => {
const currentPersisted = store.get(
pageLayoutPersistedComponentCallbackState,
);
const tabLayouts = convertPageLayoutToTabLayouts(layout);
set(pageLayoutCurrentLayoutsComponentCallbackState, tabLayouts);
}
},
if (!isDeeplyEqual(layout, currentPersisted)) {
store.set(pageLayoutPersistedComponentCallbackState, layout);
store.set(pageLayoutDraftComponentCallbackState, {
id: layout.id,
name: layout.name,
type: layout.type,
objectMetadataId: layout.objectMetadataId,
tabs: layout.tabs,
});
const tabLayouts = convertPageLayoutToTabLayouts(layout);
store.set(pageLayoutCurrentLayoutsComponentCallbackState, tabLayouts);
}
},
[
pageLayoutCurrentLayoutsComponentCallbackState,
pageLayoutDraftComponentCallbackState,
pageLayoutPersistedComponentCallbackState,
store,
],
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
+3 -4
View File
@@ -18,8 +18,7 @@ import { sortTabsByPosition } from '@/page-layout/utils/sortTabsByPosition';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
@@ -56,7 +55,7 @@ export const PageLayoutRendererContent = () => {
const { isInRightDrawer, layoutType, targetRecordIdentifier } =
useLayoutRenderingContext();
const isPageLayoutInEditMode = useRecoilComponentValue(
const isPageLayoutInEditMode = useRecoilComponentValueV2(
isPageLayoutInEditModeComponentState,
);
@@ -64,7 +63,7 @@ export const PageLayoutRendererContent = () => {
const { createPageLayoutTab } = useCreatePageLayoutTab(currentPageLayout?.id);
const { reorderTabs } = useReorderPageLayoutTabs(currentPageLayout?.id ?? '');
const setTabSettingsOpenTabId = useSetRecoilComponentState(
const setTabSettingsOpenTabId = useSetRecoilComponentStateV2(
pageLayoutTabSettingsOpenTabIdComponentState,
);
const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx
+16 -12
View File
@@ -24,7 +24,7 @@ import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/con
import { type TabListProps } from '@/ui/layout/tab-list/types/TabListProps';
import { NodeDimension } from '@/ui/utilities/dimensions/components/NodeDimension';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
@@ -43,7 +43,7 @@ import { shouldEnableTabEditingFeatures } from '@/page-layout/utils/shouldEnable
import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab-list/components/TabListFromUrlOptionalEffect';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { CommandMenuPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { type PageLayoutType } from '~/generated-metadata/graphql';
@@ -134,12 +134,16 @@ export const PageLayoutTabList = ({
hasAddButton: isDefined(onAddTab),
});
const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
PageLayoutComponentInstanceContext,
);
const dropdownId = `tab-overflow-${componentInstanceId}`;
const { closeDropdown } = useCloseDropdown();
const { openDropdown } = useOpenDropdown();
const { toggleClickOutside } = useClickOutsideListener(dropdownId);
const setIsTabDragging = useSetRecoilComponentState(
const setIsTabDragging = useSetRecoilComponentStateV2(
isPageLayoutTabDraggingComponentState,
componentInstanceId,
);
@@ -174,9 +178,11 @@ export const PageLayoutTabList = ({
closeDropdown(dropdownId);
}, [closeDropdown, dropdownId]);
const setPageLayoutTabListCurrentDragDroppableId = useSetRecoilComponentState(
pageLayoutTabListCurrentDragDroppableIdComponentState,
);
const setPageLayoutTabListCurrentDragDroppableId =
useSetRecoilComponentStateV2(
pageLayoutTabListCurrentDragDroppableIdComponentState,
pageLayoutId,
);
const handleDragUpdate: OnDragUpdateResponder = (update) => {
setPageLayoutTabListCurrentDragDroppableId(update.destination?.droppableId);
@@ -214,17 +220,15 @@ export const PageLayoutTabList = ({
[onReorder, setIsTabDragging, toggleClickOutside, openDropdown, dropdownId],
);
const isPageLayoutInEditMode = useRecoilComponentValue(
const isPageLayoutInEditMode = useRecoilComponentValueV2(
isPageLayoutInEditModeComponentState,
pageLayoutId,
);
const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
PageLayoutComponentInstanceContext,
);
const tabSettingsOpenTabId = useRecoilComponentValue(
const tabSettingsOpenTabId = useRecoilComponentValueV2(
pageLayoutTabSettingsOpenTabIdComponentState,
pageLayoutId,
);
const setTabSettingsOpenTabId = useSetRecoilComponentState(
const setTabSettingsOpenTabId = useSetRecoilComponentStateV2(
pageLayoutTabSettingsOpenTabIdComponentState,
pageLayoutId,
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx
+6 -6
View File
@@ -25,8 +25,8 @@ import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/Gene
import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useContext } from 'react';
import { CommandMenuPages } from 'twenty-shared/types';
import { type PageLayoutType } from '~/generated-metadata/graphql';
@@ -73,7 +73,7 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
PageLayoutComponentInstanceContext,
);
const isPageLayoutInEditMode = useRecoilComponentValue(
const isPageLayoutInEditMode = useRecoilComponentValueV2(
isPageLayoutInEditModeComponentState,
pageLayoutId,
);
@@ -81,17 +81,17 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
const shouldShowEditButton =
isPageLayoutInEditMode && shouldEnableTabEditingFeatures(pageLayoutType);
const isTabDragging = useRecoilComponentValue(
const isTabDragging = useRecoilComponentValueV2(
isPageLayoutTabDraggingComponentState,
instanceId,
);
const setIsTabDragging = useSetRecoilComponentState(
const setIsTabDragging = useSetRecoilComponentStateV2(
isPageLayoutTabDraggingComponentState,
instanceId,
);
const setTabSettingsOpenTabId = useSetRecoilComponentState(
const setTabSettingsOpenTabId = useSetRecoilComponentStateV2(
pageLayoutTabSettingsOpenTabIdComponentState,
pageLayoutId,
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { Draggable } from '@hello-pangea/dnd';
import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { StyledTabContainer, TabContent } from 'twenty-ui/input';
@@ -27,7 +27,7 @@ export const PageLayoutTabListReorderableTab = ({
disabled,
onSelect,
}: PageLayoutTabListReorderableTabProps) => {
const tabSettingsOpenTabId = useRecoilComponentValue(
const tabSettingsOpenTabId = useRecoilComponentValueV2(
pageLayoutTabSettingsOpenTabIdComponentState,
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { pageLayoutTabListCurrentDragDroppableIdComponentState } from '@/page-la
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { type DraggableProvided } from '@hello-pangea/dnd';
@@ -30,7 +30,7 @@ export const PageLayoutTabRenderClone = ({
}) => {
const theme = useTheme();
const pageLayoutTabListCurrentDragDroppableId = useRecoilComponentValue(
const pageLayoutTabListCurrentDragDroppableId = useRecoilComponentValueV2(
pageLayoutTabListCurrentDragDroppableIdComponentState,
);
packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import styled from '@emotion/styled';
import {
DragDropContext,
@@ -61,7 +61,7 @@ export const PageLayoutVerticalListEditor = ({
isInRightDrawer,
});
const setDraggingWidgetId = useSetRecoilComponentState(
const setDraggingWidgetId = useSetRecoilComponentStateV2(
pageLayoutDraggingWidgetIdComponentState,
);
packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutTabList.stories.tsx
+5 -8
View File
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { type DropResult, type ResponderProvided } from '@hello-pangea/dnd';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { useMemo, useState } from 'react';
import { RecoilRoot } from 'recoil';
import { ComponentWithRouterDecorator } from 'twenty-ui/testing';
import { PageLayoutTabList } from '@/page-layout/components/PageLayoutTabList';
@@ -183,13 +182,11 @@ const meta: Meta<typeof PageLayoutTabListPlayground> = {
decorators: [
ComponentWithRouterDecorator,
(Story) => (
<RecoilRoot>
<PageLayoutComponentInstanceContext.Provider
value={{ instanceId: 'instance-id' }}
>
<Story />
</PageLayoutComponentInstanceContext.Provider>
</RecoilRoot>
<PageLayoutComponentInstanceContext.Provider
value={{ instanceId: 'instance-id' }}
>
<Story />
</PageLayoutComponentInstanceContext.Provider>
),
],
};