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

Keep migrating to jotai (#18064)

Browse Source 
And we continue!
This commit is contained in:
Charles Bochet
2026-02-19 12:10:02 +01:00
committed by GitHub
parent c0ea049ad7
commit 1a13258302
216 changed files with 2366 additions and 1594 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import { SettingsNewAccountSection } from '@/settings/accounts/components/Settin
import { SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountCalendarChannelsTabListComponentId';
import { TabList } from '@/ui/layout/tab-list/components/TabList';
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 React from 'react';
const StyledCalenderContainer = styled.div`
@@ -22,7 +22,7 @@ const StyledCalenderContainer = styled.div`
`;
export const SettingsAccountsCalendarChannelsContainer = () => {
const activeTabId = useRecoilComponentValue(
const activeTabId = useRecoilComponentValueV2(
activeTabIdComponentState,
SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID,
);
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ import { settingsAccountsSelectedMessageChannelStateV2 } from '@/settings/accoun
import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
import { TabList } from '@/ui/layout/tab-list/components/TabList';
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 React, { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
@@ -26,7 +26,7 @@ const StyledMessageContainer = styled.div`
`;
export const SettingsAccountsMessageChannelsContainer = () => {
const activeTabId = useRecoilComponentValue(
const activeTabId = useRecoilComponentValueV2(
activeTabIdComponentState,
SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID,
);
packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ import { SettingsAdminTableCard } from '@/settings/admin-panel/components/Settin
import { SettingsAdminVersionContainer } from '@/settings/admin-panel/components/SettingsAdminVersionContainer';
import { SETTINGS_ADMIN_USER_LOOKUP_WORKSPACE_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminUserLookupWorkspaceTabsId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
import {
H2Title,
@@ -42,7 +42,7 @@ export const SettingsAdminGeneral = () => {
const [userIdentifier, setUserIdentifier] = useState('');
const { enqueueErrorSnackBar } = useSnackBar();
const [activeTabId, setActiveTabId] = useRecoilComponentState(
const [activeTabId, setActiveTabId] = useRecoilComponentStateV2(
activeTabIdComponentState,
SETTINGS_ADMIN_USER_LOOKUP_WORKSPACE_TABS_ID,
);
packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTabContent.tsx
+2 -2
View File
@@ -4,10 +4,10 @@ import { SETTINGS_ADMIN_TABS } from '@/settings/admin-panel/constants/SettingsAd
import { SETTINGS_ADMIN_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminTabsId';
import { SettingsAdminHealthStatus } from '@/settings/admin-panel/health-status/components/SettingsAdminHealthStatus';
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';
export const SettingsAdminTabContent = () => {
const activeTabId = useRecoilComponentValue(
const activeTabId = useRecoilComponentValueV2(
activeTabIdComponentState,
SETTINGS_ADMIN_TABS_ID,
);
packages/twenty-front/src/modules/settings/components/SettingsMorphRelationMultiSelect.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ import { SelectableList } from '@/ui/layout/selectable-list/components/Selectabl
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { isNonEmptyString } from '@sniptt/guards';
import { isDefined } from 'twenty-shared/utils';
import { IconBox, useIcons, type IconComponent } from 'twenty-ui/display';
@@ -144,7 +144,7 @@ export const SettingsMorphRelationMultiSelect = ({
const selectableItemIdArray = filteredOptions.map((option) => option.label);
const selectedItemId = useRecoilComponentValue(
const selectedItemId = useRecoilComponentValueV2(
selectedItemIdComponentState,
dropdownId,
);
packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
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 { t } from '@lingui/core/macro';
@@ -86,7 +86,7 @@ export const WebhookEntitySelect = ({
const { getIcon } = useIcons();
const { closeDropdown } = useCloseDropdown();
const selectedItemId = useRecoilComponentValue(
const selectedItemId = useRecoilComponentValueV2(
selectedItemIdComponentState,
dropdownId,
);
packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionCodeEditorTab.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import {
import { SETTINGS_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/settings/logic-functions/constants/SettingsLogicFunctionTabListComponentId';
import { TabList } from '@/ui/layout/tab-list/components/TabList';
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 { t } from '@lingui/core/macro';
import { H2Title, IconPlayerPlay } from 'twenty-ui/display';
@@ -27,7 +27,7 @@ export const SettingsLogicFunctionCodeEditorTab = ({
onChange: (value: string) => void;
isTesting?: boolean;
}) => {
const activeTabId = useRecoilComponentValue(
const activeTabId = useRecoilComponentValueV2(
activeTabIdComponentState,
SETTINGS_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID,
);
packages/twenty-front/src/modules/settings/roles/components/SettingsRolesQueryEffect.tsx
+5 -3
View File
@@ -7,7 +7,7 @@ import { type RoleWithPartialMembers } from '@/settings/roles/types/RoleWithPart
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useEffect } from 'react';
import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useStore } from 'jotai';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { useGetRolesQuery } from '~/generated-metadata/graphql';
@@ -22,12 +22,14 @@ export const SettingsRolesQueryEffect = () => {
settingsRolesIsLoadingStateV2,
);
const store = useStore();
const populateRoles = useRecoilCallback(
({ set, snapshot }) =>
(roles: RoleWithPartialMembers[]) => {
const roleIds = roles.map((role) => role.id);
set(settingsRoleIdsState, roleIds);
jotaiStore.set(settingsRoleIdsStateV2.atom, roleIds);
store.set(settingsRoleIdsStateV2.atom, roleIds);
roles.forEach((role) => {
const persistedRole = getSnapshotValue(
snapshot,
@@ -50,7 +52,7 @@ export const SettingsRolesQueryEffect = () => {
}
});
},
[],
[store],
);
useEffect(() => {
packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignment.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import { settingsAllRolesSelector } from '@/settings/roles/states/settingsAllRol
import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useState } from 'react';
import { useRecoilValue } from 'recoil';
@@ -85,7 +85,7 @@ export const SettingsRoleAssignment = ({
setSelectRoleTarget(null);
};
const isModalOpened = useRecoilComponentValue(
const isModalOpened = useRecoilComponentValueV2(
isModalOpenedComponentState,
ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID,
);
packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx
+5 -3
View File
@@ -14,6 +14,7 @@ import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableHeaderText } from '@/ui/layout/table/components/TableHeaderText';
import { sortedFieldByTableFamilyState } from '@/ui/layout/table/states/sortedFieldByTableFamilyState';
import { useFamilyRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilyRecoilValueV2';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
@@ -45,10 +46,11 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTable = ({
const { t } = useLingui();
const [searchTerm, setSearchTerm] = useState('');
const sortedFieldByTable = useRecoilValue(
sortedFieldByTableFamilyState({
const sortedFieldByTable = useFamilyRecoilValueV2(
sortedFieldByTableFamilyState,
{
tableId: SETTINGS_ROLE_PERMISSION_OBJECT_LEVEL_FIELD_PERMISSION_TABLE_ID,
}),
},
);
const searchedFields = objectMetadataItem.fields.filter((fieldMetadataItem) =>
packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFieldSelectSubFieldMenu.tsx
+2 -1
View File
@@ -29,6 +29,7 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
type SettingsRolePermissionsObjectLevelRecordLevelPermissionFieldSelectSubFieldMenuProps =
{
@@ -88,7 +89,7 @@ export const SettingsRolePermissionsObjectLevelRecordLevelPermissionFieldSelectS
const { advancedFilterFieldSelectDropdownId } =
useAdvancedFilterFieldSelectDropdown(recordFilterId);
const selectedItemId = useRecoilComponentValue(
const selectedItemId = useRecoilComponentValueV2(
selectedItemIdComponentState,
advancedFilterFieldSelectDropdownId,
);
packages/twenty-front/src/modules/settings/roles/role/components/SettingsRole.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { TabList } from '@/ui/layout/tab-list/components/TabList';
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 { useLoadCurrentUser } from '@/users/hooks/useLoadCurrentUser';
import { t } from '@lingui/core/macro';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
@@ -35,7 +35,7 @@ type SettingsRoleProps = {
export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
const { refreshObjectMetadataItems } = useRefreshObjectMetadataItems();
const activeTabId = useRecoilComponentValue(
const activeTabId = useRecoilComponentValueV2(
activeTabIdComponentState,
SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID + '-' + roleId,
);
packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleCreateEffect.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { SETTINGS_ROLE_DETAIL_TABS } from '@/settings/roles/role/constants/Setti
import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
import { settingsPersistedRoleFamilyState } from '@/settings/roles/states/settingsPersistedRoleFamilyState';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { t } from '@lingui/core/macro';
import { useEffect, useState } from 'react';
import { useSetRecoilState } from 'recoil';
@@ -22,7 +22,7 @@ export const SettingsRoleCreateEffect = ({
settingsPersistedRoleFamilyState(roleId),
);
const setActiveTabId = useSetRecoilComponentState(
const setActiveTabId = useSetRecoilComponentStateV2(
activeTabIdComponentState,
SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID + '-' + roleId,
);
packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleEditEffect.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDr
import { settingsPersistedRoleFamilyState } from '@/settings/roles/states/settingsPersistedRoleFamilyState';
import { type RoleWithPartialMembers } from '@/settings/roles/types/RoleWithPartialMembers';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useEffect, useState } from 'react';
import { useRecoilCallback, useRecoilValue } from 'recoil';
@@ -20,7 +20,7 @@ export const SettingsRoleEditEffect = ({
const [isInitialized, setIsInitialized] = useState(false);
const role = useRecoilValue(settingsPersistedRoleFamilyState(roleId));
const setActiveTabId = useSetRecoilComponentState(
const setActiveTabId = useSetRecoilComponentStateV2(
activeTabIdComponentState,
SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID + '-' + roleId,
);