Migrate more to Jotai (#17903)

Here we go again

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariables.tsx

@@ -9,7 +9,6 @@ import { showHiddenGroupVariablesState } from '@/settings/admin-panel/config-var
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { useMemo, useState } from 'react';
-import { useRecoilState } from 'recoil';
 import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
 import {
@@ -18,6 +17,7 @@ import {
 } from '~/generated-metadata/graphql';
 import { normalizeSearchText } from '~/utils/normalizeSearchText';
 import { ConfigVariableSearchInput } from './ConfigVariableSearchInput';
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 
 const StyledControlsContainer = styled.div`
   display: flex;
@@ -37,11 +37,11 @@ export const SettingsAdminConfigVariables = () => {
 
   const [search, setSearch] = useState('');
   const [showHiddenGroupVariables, setShowHiddenGroupVariables] =
-    useRecoilState(showHiddenGroupVariablesState);
+    useRecoilStateV2(showHiddenGroupVariablesState);
   const [configVariableSourceFilter, setConfigVariableSourceFilter] =
-    useRecoilState(configVariableSourceFilterState);
+    useRecoilStateV2(configVariableSourceFilterState);
   const [configVariableGroupFilter, setConfigVariableGroupFilter] =
-    useRecoilState(configVariableGroupFilterState);
+    useRecoilStateV2(configVariableGroupFilterState);
 
   const allGroups = useMemo(
     () => configVariables?.getConfigVariablesGrouped.groups ?? [],

packages/twenty-front/src/modules/settings/admin-panel/config-variables/states/configVariableGroupFilterState.ts

@@ -1,8 +1,8 @@
 import { type ConfigVariableGroupFilter } from '@/settings/admin-panel/config-variables/types/ConfigVariableGroupFilter';
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
 export const configVariableGroupFilterState =
-  createState<ConfigVariableGroupFilter>({
+  createStateV2<ConfigVariableGroupFilter>({
     key: 'configVariableGroupFilterState',
     defaultValue: 'all',
   });

packages/twenty-front/src/modules/settings/admin-panel/config-variables/states/configVariableSourceFilterState.ts

@@ -1,8 +1,8 @@
 import { type ConfigVariableSourceFilter } from '@/settings/admin-panel/config-variables/types/ConfigVariableSourceFilter';
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
 export const configVariableSourceFilterState =
-  createState<ConfigVariableSourceFilter>({
+  createStateV2<ConfigVariableSourceFilter>({
     key: 'configVariableSourceFilterState',
     defaultValue: 'all',
   });

packages/twenty-front/src/modules/settings/admin-panel/config-variables/states/showHiddenGroupVariablesState.ts

@@ -1,6 +1,6 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
-export const showHiddenGroupVariablesState = createState<boolean>({
+export const showHiddenGroupVariablesState = createStateV2<boolean>({
   key: 'showHiddenGroupVariablesState',
   defaultValue: false,
 });