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

Jotai 12 (#18160)

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Charles Bochet
2026-02-23 12:01:37 +01:00
committed by GitHub
parent 22bc3004b9
commit b51eb6471f
538 changed files with 4664 additions and 4127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { RecordComponentInstanceContextsWrapper } from '@/object-record/componen
import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilValue } from 'recoil';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
const StyledCommandMenuContainer = styled.div<{ isMobile: boolean }>`
max-height: ${({ theme, isMobile }) => {
@@ -35,7 +35,7 @@ export const CommandMenuContainer = ({
);
const isMobile = useIsMobile();
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) => objectMetadataItem.id === objectMetadataItemId,
packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx
+2 -2
View File
@@ -3,8 +3,8 @@ import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/C
import { getSelectedRecordsContextText } from '@/command-menu/utils/getRecordContextText';
import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { useRecoilValue } from 'recoil';
import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
export const CommandMenuContextRecordsChip = ({
objectMetadataItemId,
@@ -16,7 +16,7 @@ export const CommandMenuContextRecordsChip = ({
const { objectMetadataItem } = useObjectMetadataItemById({
objectId: objectMetadataItemId,
});
const allowRequestsToTwentyIcons = useRecoilValue(
const allowRequestsToTwentyIcons = useRecoilValueV2(
allowRequestsToTwentyIconsState,
);
packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx
+3 -1
View File
@@ -16,6 +16,8 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { Trans } from '@lingui/react/macro';
import { isNonEmptyString } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { Avatar } from 'twenty-ui/display';
import {
FeatureFlagKey,
@@ -34,7 +36,7 @@ export const CommandMenuRecordInfo = ({
viewableRecordNameSingularComponentState,
commandMenuPageInstanceId,
);
const allowRequestsToTwentyIcons = useRecoilValue(
const allowRequestsToTwentyIcons = useRecoilValueV2(
allowRequestsToTwentyIconsState,
);
packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx
+2 -2
View File
@@ -8,8 +8,8 @@ import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/s
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { IconArrowBackUp } from 'twenty-ui/display';
@@ -24,7 +24,7 @@ export const ResetContextToSelectionCommandButton = () => {
'command-menu-previous',
);
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) =>
packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
+5 -4
View File
@@ -8,6 +8,7 @@ import { expect, userEvent, within } from 'storybook/test';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -72,11 +73,11 @@ const meta: Meta<typeof CommandMenu> = {
component: CommandMenuRouter,
decorators: [
(Story) => {
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
const setCurrentUserWorkspace = useSetRecoilState(
const setCurrentWorkspace = useSetRecoilStateV2(currentWorkspaceState);
const setCurrentUserWorkspace = useSetRecoilStateV2(
currentUserWorkspaceState,
);
const setCurrentWorkspaceMember = useSetRecoilState(
const setCurrentWorkspaceMember = useSetRecoilStateV2(
currentWorkspaceMemberState,
);
const setIsCommandMenuOpened = useSetRecoilState(
@@ -138,7 +139,7 @@ export const LimitedPermissions: Story = {
},
decorators: [
(Story) => {
const setCurrentUserWorkspace = useSetRecoilState(
const setCurrentUserWorkspace = useSetRecoilStateV2(
currentUserWorkspaceState,
);
setCurrentUserWorkspace(
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx
+8 -5
View File
@@ -12,6 +12,8 @@ import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
const StyledIconWrapper = styled.div`
background: ${({ theme }) => theme.background.primary};
@@ -26,11 +28,11 @@ export const useCommandMenuContextChips = () => {
commandMenuNavigationStackState,
);
const allowRequestsToTwentyIcons = useRecoilValue(
const allowRequestsToTwentyIcons = useRecoilValueV2(
allowRequestsToTwentyIconsState,
);
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
const { navigateCommandMenuHistory } = useCommandMenuHistory();
@@ -46,11 +48,12 @@ export const useCommandMenuContextChips = () => {
morphItems.map((morphItem) => morphItem.recordId),
);
const recordIdentifiers = useRecoilValue(
recordStoreIdentifiersFamilySelector({
const recordIdentifiers = useFamilySelectorValueV2(
recordStoreIdentifiersFamilySelector,
{
recordIds: allRecordIds,
allowRequestsToTwentyIcons,
}),
},
);
const records = useRecoilValue(
recordStoreRecordsSelector({
packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts
+7 -8
View File
@@ -16,6 +16,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { getIconColorForObjectType } from '@/object-metadata/utils/getIconColorForObjectType';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { CommandMenuPages } from 'twenty-shared/types';
import { useRunWorkflowRunOpeningInCommandMenuSideEffects } from '@/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects';
@@ -83,14 +84,12 @@ export const useOpenRecordInCommandMenu = () => {
);
set(viewableRecordIdState, recordId);
const objectMetadataItem = snapshot
.getLoadable(
objectMetadataItemFamilySelector({
objectName: objectNameSingular,
objectNameType: 'singular',
}),
)
.getValue();
const objectMetadataItem = jotaiStore.get(
objectMetadataItemFamilySelector.selectorFamily({
objectName: objectNameSingular,
objectNameType: 'singular',
}),
);
if (!objectMetadataItem) {
throw new Error(
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuObjectMenuItem.tsx
+4 -5
View File
@@ -1,5 +1,4 @@
import { useTheme } from '@emotion/react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
@@ -10,6 +9,7 @@ import { NavigationMenuItemType } from '@/navigation-menu-item/constants/Navigat
import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { coreIndexViewIdFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreIndexViewIdFromObjectMetadataItemFamilySelector';
type CommandMenuObjectMenuItemProps = {
@@ -31,10 +31,9 @@ export const CommandMenuObjectMenuItem = ({
const theme = useTheme();
const { getIcon } = useIcons();
const iconColors = getNavigationMenuItemIconColors(theme);
const defaultViewId = useRecoilValue(
coreIndexViewIdFromObjectMetadataItemFamilySelector({
objectMetadataItemId: objectMetadataItem.id,
}),
const defaultViewId = useFamilySelectorValueV2(
coreIndexViewIdFromObjectMetadataItemFamilySelector,
{ objectMetadataItemId: objectMetadataItem.id },
);
const Icon = getIcon(objectMetadataItem.icon);
const isDisabled = !isDefined(defaultViewId);
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphFilter.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilValue } from 'recoil';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { isDefined } from 'twenty-shared/utils';
export const CommandMenuPageLayoutGraphFilter = () => {
@@ -25,7 +25,7 @@ export const CommandMenuPageLayoutGraphFilter = () => {
.flatMap((tab) => tab.widgets)
.find((widget) => widget.id === pageLayoutEditingWidgetId);
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
if (
!isDefined(widgetInEditMode) ||
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/__tests__/useChartSettingsValues.test.tsx
+12 -14
View File
@@ -1,4 +1,5 @@
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
import { RecoilRoot } from 'recoil';
import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
@@ -16,6 +17,7 @@ import {
WidgetConfigurationType,
} from '~/generated-metadata/graphql';
import { useChartSettingsValues } from '@/command-menu/pages/page-layout/hooks/useChartSettingsValues';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
const mockObjectMetadataItem: ObjectMetadataItem = {
id: 'obj-1',
@@ -79,6 +81,8 @@ const buildBarChartConfiguration = (
}) as TypedBarChartConfiguration;
const renderUseChartSettingsValues = (configuration: ChartConfiguration) => {
jotaiStore.set(objectMetadataItemsState.atom, [mockObjectMetadataItem]);
return renderHook(
() =>
useChartSettingsValues({
@@ -87,13 +91,9 @@ const renderUseChartSettingsValues = (configuration: ChartConfiguration) => {
}),
{
wrapper: ({ children }) => (
<RecoilRoot
initializeState={({ set }) => {
set(objectMetadataItemsState, [mockObjectMetadataItem]);
}}
>
{children}
</RecoilRoot>
<JotaiProvider store={jotaiStore}>
<RecoilRoot>{children}</RecoilRoot>
</JotaiProvider>
),
},
);
@@ -414,6 +414,8 @@ describe('useChartSettingsValues', () => {
it('should handle missing objectMetadataItem gracefully', () => {
const config = buildBarChartConfiguration({});
jotaiStore.set(objectMetadataItemsState.atom, [mockObjectMetadataItem]);
const { result } = renderHook(
() =>
useChartSettingsValues({
@@ -422,13 +424,9 @@ describe('useChartSettingsValues', () => {
}),
{
wrapper: ({ children }) => (
<RecoilRoot
initializeState={({ set }) => {
set(objectMetadataItemsState, [mockObjectMetadataItem]);
}}
>
{children}
</RecoilRoot>
<JotaiProvider store={jotaiStore}>
<RecoilRoot>{children}</RecoilRoot>
</JotaiProvider>
),
},
);
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts
+2 -2
View File
@@ -10,7 +10,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
import { convertAggregateOperationToExtendedAggregateOperation } from '@/object-record/utils/convertAggregateOperationToExtendedAggregateOperation';
import { plural, t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
import { capitalize, isDefined } from 'twenty-shared/utils';
import { type GraphOrderBy } from '~/generated-metadata/graphql';
@@ -22,7 +22,7 @@ export const useChartSettingsValues = ({
objectMetadataId: string;
configuration?: ChartConfiguration;
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) => objectMetadataItem.id === objectMetadataId,
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts
+2 -2
View File
@@ -2,7 +2,7 @@ import { getFieldLabelWithSubField } from '@/command-menu/pages/page-layout/util
import { getSortLabelSuffixForFieldType } from '@/command-menu/pages/page-layout/utils/getSortLabelSuffixForFieldType';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
import { assertUnreachable } from 'twenty-shared/utils';
import { GraphOrderBy } from '~/generated-metadata/graphql';
@@ -12,7 +12,7 @@ export const useGraphGroupBySortOptionLabels = ({
}: {
objectMetadataId: string;
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) => objectMetadataItem.id === objectMetadataId,
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels.ts
+2 -2
View File
@@ -4,7 +4,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
import { assertUnreachable, isDefined } from 'twenty-shared/utils';
import { GraphOrderBy } from '~/generated-metadata/graphql';
@@ -14,7 +14,7 @@ export const useGraphXSortOptionLabels = ({
}: {
objectMetadataId: string;
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) => objectMetadataItem.id === objectMetadataId,