Open created filter in command menu (#13379)

https://github.com/user-attachments/assets/d9fc9b9c-8632-4432-b0a4-899662476f09

Closes https://github.com/twentyhq/core-team-issues/issues/1225

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdgeEditable.tsx

@@ -1,5 +1,4 @@
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
 import { assertWorkflowWithCurrentVersionIsDefined } from '@/workflow/utils/assertWorkflowWithCurrentVersionIsDefined';
@@ -7,8 +6,8 @@ import { WorkflowDiagramEdgeV2Container } from '@/workflow/workflow-diagram/comp
 import { WorkflowDiagramEdgeV2VisibilityContainer } from '@/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2VisibilityContainer';
 import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
 import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId';
+import { useOpenWorkflowEditFilterInCommandMenu } from '@/workflow/workflow-diagram/hooks/useOpenWorkflowEditFilterInCommandMenu';
 import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation';
-import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
 import { WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
 import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
@@ -21,6 +20,7 @@ import {
   getStraightPath,
 } from '@xyflow/react';
 import { useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 import { IconFilter, IconPlus } from 'twenty-ui/display';
 import { IconButtonGroup } from 'twenty-ui/input';
 
@@ -66,26 +66,28 @@ export const WorkflowDiagramDefaultEdgeEditable = ({
     workflowInsertStepIds.nextStepId === target &&
     workflowInsertStepIds.parentStepId === source;
 
+  const { openWorkflowEditFilterInCommandMenu } =
+    useOpenWorkflowEditFilterInCommandMenu();
+
   const handleCreateFilter = async () => {
-    await createStep({
+    const createdStep = await createStep({
       newStepType: 'FILTER',
       parentStepId: source,
       nextStepId: target,
     });
 
+    if (!isDefined(createdStep)) {
+      return;
+    }
+
+    openWorkflowEditFilterInCommandMenu({
+      stepId: createdStep.id,
+      stepName: createdStep.name,
+    });
+
     setHovered(false);
   };
 
-  const setWorkflowSelectedNode = useSetRecoilComponentStateV2(
-    workflowSelectedNodeComponentState,
-  );
-
-  const handleFilterButtonClick = () => {
-    setWorkflowSelectedNode(source);
-
-    handleCreateFilter();
-  };
-
   const handleNodeButtonClick = () => {
     startNodeCreation({
       parentStepId: source,
@@ -118,7 +120,7 @@ export const WorkflowDiagramDefaultEdgeEditable = ({
               iconButtons={[
                 {
                   Icon: IconFilter,
-                  onClick: handleFilterButtonClick,
+                  onClick: handleCreateFilter,
                 },
                 {
                   Icon: IconPlus,

packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateStep.ts

@@ -8,6 +8,7 @@ import {
 import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
 import { useCreateWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep';
 import { useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 
 export const useCreateStep = ({
   workflow,
@@ -52,12 +53,14 @@ export const useCreateStep = ({
         })
       )?.data?.createWorkflowVersionStep;
 
-      if (!createdStep) {
+      if (!isDefined(createdStep)) {
-        return;
+        throw new Error("Couldn't create step");
       }
 
       setWorkflowSelectedNode(createdStep.id);
       setWorkflowLastCreatedStepId(createdStep.id);
+
+      return createdStep;
     } finally {
       setIsLoading(false);
     }