Keep migrating to jotai (#18064)

And we continue!

packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunRightDrawerTab.ts

@@ -2,6 +2,7 @@ import { getIsInputTabDisabled } from '@/command-menu/pages/workflow/step/view-r
 import { getIsOutputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsOutputTabDisabled';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { useStore } from 'jotai';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { WorkflowRunTabId } from '@/workflow/workflow-steps/types/WorkflowRunTabId';
 import { useRecoilCallback } from 'recoil';
@@ -9,8 +10,10 @@ import { isDefined } from 'twenty-shared/utils';
 import { type WorkflowRunStepStatus } from '@/workflow/types/Workflow';
 
 export const useSetInitialWorkflowRunRightDrawerTab = () => {
+  const store = useStore();
+
   const setInitialWorkflowRunRightDrawerTab = useRecoilCallback(
-    ({ snapshot, set }) =>
+    ({ snapshot }) =>
       ({
         workflowSelectedNode,
         stepExecutionStatus,
@@ -23,11 +26,12 @@ export const useSetInitialWorkflowRunRightDrawerTab = () => {
           commandMenuPageInfoState,
         );
 
-        const activeWorkflowRunRightDrawerTab = getSnapshotValue(
-          snapshot,
-          activeTabIdComponentState.atomFamily({
-            instanceId: commandMenuPageInfo.instanceId,
-          }),
+        const activeTabIdAtom = activeTabIdComponentState.atomFamily({
+          instanceId: commandMenuPageInfo.instanceId,
+        });
+
+        const activeWorkflowRunRightDrawerTab = store.get(
+          activeTabIdAtom,
         ) as WorkflowRunTabId | null;
 
         const isInputTabDisabled = getIsInputTabDisabled({
@@ -43,12 +47,7 @@ export const useSetInitialWorkflowRunRightDrawerTab = () => {
             ? WorkflowRunTabId.NODE
             : WorkflowRunTabId.OUTPUT;
 
-          set(
-            activeTabIdComponentState.atomFamily({
-              instanceId: commandMenuPageInfo.instanceId,
-            }),
-            defaultTabId,
-          );
+          store.set(activeTabIdAtom, defaultTabId);
 
           return;
         }
@@ -59,15 +58,10 @@ export const useSetInitialWorkflowRunRightDrawerTab = () => {
           (isOutputTabDisabled &&
             activeWorkflowRunRightDrawerTab === WorkflowRunTabId.OUTPUT)
         ) {
-          set(
-            activeTabIdComponentState.atomFamily({
-              instanceId: commandMenuPageInfo.instanceId,
-            }),
-            WorkflowRunTabId.NODE,
-          );
+          store.set(activeTabIdAtom, WorkflowRunTabId.NODE);
         }
       },
-    [],
+    [store],
   );
 
   return {

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepFooter.tsx

@@ -5,7 +5,7 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
 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 { useDeleteStep } from '@/workflow/workflow-steps/hooks/useDeleteStep';
 import { useDuplicateStep } from '@/workflow/workflow-steps/hooks/useDuplicateStep';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
@@ -98,7 +98,7 @@ export const WorkflowStepFooter = ({
     }
   };
 
-  const selectedItemId = useRecoilComponentValue(
+  const selectedItemId = useRecoilComponentValueV2(
     selectedItemIdComponentState,
     dropdownId,
   );

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx

@@ -3,7 +3,7 @@ import { useAiModelOptions } from '@/ai/hooks/useAiModelOptions';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 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 { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
 import { type WorkflowAiAgentAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
@@ -204,7 +204,7 @@ export const WorkflowEditActionAiAgent = ({
     },
   ];
 
-  const activeTabId = useRecoilComponentValue(
+  const activeTabId = useRecoilComponentValueV2(
     activeTabIdComponentState,
     componentInstanceId,
   );

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx

@@ -18,6 +18,7 @@ import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTab
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowCodeEditor } from '@/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowCodeEditor';
 import { WorkflowEditActionCodeFields } from '@/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCodeFields';
@@ -97,7 +98,7 @@ export const WorkflowEditActionCode = ({
   const isMobile = useIsMobile();
   const logicFunctionId = action.settings.input.logicFunctionId;
   const fullScreenFocusId = `code-editor-fullscreen-${logicFunctionId}`;
-  const activeTabId = useRecoilComponentValue(
+  const activeTabId = useRecoilComponentValueV2(
     activeTabIdComponentState,
     WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID,
   );

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx

@@ -8,7 +8,7 @@ import { CmdEnterActionButton } from '@/action-menu/components/CmdEnterActionBut
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 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 { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
 import { getBodyTypeFromHeaders } from '@/workflow/workflow-steps/workflow-actions/http-request-action/utils/getBodyTypeFromHeaders';
 import { isMethodWithBody } from '@/workflow/workflow-steps/workflow-actions/http-request-action/utils/isMethodWithBody';
@@ -90,7 +90,7 @@ export const WorkflowEditActionHttpRequest = ({
 }: WorkflowEditActionHttpRequestProps) => {
   const { t } = useLingui();
   const theme = useTheme();
-  const activeTabId = useRecoilComponentValue(
+  const activeTabId = useRecoilComponentValueV2(
     activeTabIdComponentState,
     WORKFLOW_HTTP_REQUEST_TAB_LIST_COMPONENT_ID,
   );

packages/twenty-front/src/modules/workflow/workflow-variables/hooks/useVariableDropdown.ts

@@ -3,6 +3,7 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMe
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 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 { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
 import { workflowDiagramComponentState } from '@/workflow/workflow-diagram/states/workflowDiagramComponentState';
 import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
@@ -55,7 +56,7 @@ export const useVariableDropdown = ({
   const setWorkflowSelectedNode = useSetRecoilComponentState(
     workflowSelectedNodeComponentState,
   );
-  const setActiveTabId = useSetRecoilComponentState(
+  const setActiveTabId = useSetRecoilComponentStateV2(
     activeTabIdComponentState,
     'workflow-logic-function-tab-list-component-id',
   );