diff --git a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
index 7c318080d6..8a78fee849 100644
--- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
+++ b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
@@ -10,8 +10,9 @@ import { CommandMenuMergeRecordPage } from '@/command-menu/pages/record-page/com
import { CommandMenuRecordPage } from '@/command-menu/pages/record-page/components/CommandMenuRecordPage';
import { CommandMenuEditRichTextPage } from '@/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage';
import { CommandMenuSearchRecordsPage } from '@/command-menu/pages/search/components/CommandMenuSearchRecordsPage';
-import { CommandMenuWorkflowSelectAction } from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction';
+import { CommandMenuWorkflowCreateStep } from '@/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStep';
import { CommandMenuWorkflowEditStep } from '@/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStep';
+import { CommandMenuWorkflowEditStepType } from '@/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType';
import { CommandMenuWorkflowRunViewStep } from '@/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep';
import { CommandMenuWorkflowViewStep } from '@/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStep';
import { CommandMenuWorkflowSelectTriggerType } from '@/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerType';
@@ -31,10 +32,8 @@ export const COMMAND_MENU_PAGES_CONFIG = new Map<
CommandMenuPages.WorkflowStepSelectTriggerType,
,
],
- [
- CommandMenuPages.WorkflowStepSelectAction,
- ,
- ],
+ [CommandMenuPages.WorkflowStepCreate, ],
+ [CommandMenuPages.WorkflowStepEditType, ],
[CommandMenuPages.WorkflowStepEdit, ],
[CommandMenuPages.WorkflowStepView, ],
[CommandMenuPages.WorkflowRunStepView, ],
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx
index ae2d188934..97f289b9a6 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx
@@ -62,8 +62,9 @@ const renderHooks = () => {
() => {
const {
openWorkflowTriggerTypeInCommandMenu,
- openStepSelectInCommandMenu,
+ openWorkflowCreateStepInCommandMenu,
openWorkflowEditStepInCommandMenu,
+ openWorkflowEditStepTypeInCommandMenu,
openWorkflowViewStepInCommandMenu,
} = useWorkflowCommandMenu();
const commandMenuPage = useRecoilValue(commandMenuPageState);
@@ -107,8 +108,9 @@ const renderHooks = () => {
return {
openWorkflowTriggerTypeInCommandMenu,
- openStepSelectInCommandMenu,
+ openWorkflowCreateStepInCommandMenu,
openWorkflowEditStepInCommandMenu,
+ openWorkflowEditStepTypeInCommandMenu,
openWorkflowViewStepInCommandMenu,
workflowId,
workflowVersionId,
@@ -152,23 +154,40 @@ describe('useWorkflowCommandMenu', () => {
});
});
- it('should navigate to the workflow step select action page', () => {
+ it('should navigate to the workflow step create action page', () => {
const { result } = renderHooks();
act(() => {
- result.current.openStepSelectInCommandMenu('test-workflow-id');
+ result.current.openWorkflowCreateStepInCommandMenu('test-workflow-id');
});
expect(result.current.workflowId).toBe('test-workflow-id');
expect(mockNavigateCommandMenu).toHaveBeenCalledWith({
- page: CommandMenuPages.WorkflowStepSelectAction,
+ page: CommandMenuPages.WorkflowStepCreate,
pageTitle: t`Select Action`,
pageIcon: IconSettingsAutomation,
pageId: 'mocked-uuid',
});
});
+ it('should navigate to the workflow step edit type page', () => {
+ const { result } = renderHooks();
+
+ act(() => {
+ result.current.openWorkflowEditStepTypeInCommandMenu('test-workflow-id');
+ });
+
+ expect(result.current.workflowId).toBe('test-workflow-id');
+
+ expect(mockNavigateCommandMenu).toHaveBeenCalledWith({
+ page: CommandMenuPages.WorkflowStepEditType,
+ pageTitle: t`Select action`,
+ pageIcon: IconSettingsAutomation,
+ pageId: 'mocked-uuid',
+ });
+ });
+
it('should navigate to the workflow step edit page', () => {
const { result } = renderHooks();
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts
index 292ff73410..fee19b16a8 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts
@@ -3,6 +3,7 @@ import { commandMenuWorkflowIdComponentState } from '@/command-menu/pages/workfl
import { commandMenuWorkflowRunIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowRunIdComponentState';
import { commandMenuWorkflowVersionIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowVersionIdComponentState';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { type WorkflowRunStepStatus } from '@/workflow/types/Workflow';
import { useSetInitialWorkflowRunRightDrawerTab } from '@/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunRightDrawerTab';
import { t } from '@lingui/core/macro';
import { useRecoilCallback } from 'recoil';
@@ -12,7 +13,6 @@ import {
IconSettingsAutomation,
} from 'twenty-ui/display';
import { v4 } from 'uuid';
-import { type WorkflowRunStepStatus } from '@/workflow/types/Workflow';
export const useWorkflowCommandMenu = () => {
const { navigateCommandMenu } = useNavigateCommandMenu();
@@ -42,7 +42,7 @@ export const useWorkflowCommandMenu = () => {
[navigateCommandMenu],
);
- const openStepSelectInCommandMenu = useRecoilCallback(
+ const openWorkflowCreateStepInCommandMenu = useRecoilCallback(
({ set }) => {
return (workflowId: string) => {
const pageId = v4();
@@ -55,7 +55,7 @@ export const useWorkflowCommandMenu = () => {
);
navigateCommandMenu({
- page: CommandMenuPages.WorkflowStepSelectAction,
+ page: CommandMenuPages.WorkflowStepCreate,
pageTitle: t`Select Action`,
pageIcon: IconSettingsAutomation,
pageId,
@@ -88,6 +88,29 @@ export const useWorkflowCommandMenu = () => {
[navigateCommandMenu],
);
+ const openWorkflowEditStepTypeInCommandMenu = useRecoilCallback(
+ ({ set }) => {
+ return (workflowId: string) => {
+ const pageId = v4();
+
+ set(
+ commandMenuWorkflowIdComponentState.atomFamily({
+ instanceId: pageId,
+ }),
+ workflowId,
+ );
+
+ navigateCommandMenu({
+ page: CommandMenuPages.WorkflowStepEditType,
+ pageTitle: t`Select action`,
+ pageIcon: IconSettingsAutomation,
+ pageId,
+ });
+ };
+ },
+ [navigateCommandMenu],
+ );
+
const openWorkflowViewStepInCommandMenu = useRecoilCallback(
({ set }) => {
return ({
@@ -177,8 +200,9 @@ export const useWorkflowCommandMenu = () => {
return {
openWorkflowTriggerTypeInCommandMenu,
- openStepSelectInCommandMenu,
+ openWorkflowCreateStepInCommandMenu,
openWorkflowEditStepInCommandMenu,
+ openWorkflowEditStepTypeInCommandMenu,
openWorkflowViewStepInCommandMenu,
openWorkflowRunViewStepInCommandMenu,
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx
index 0b7bd7fa29..88ea2896ce 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx
@@ -1,20 +1,77 @@
-import { CommandMenuWorkflowSelectActionContent } from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent';
-import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
-import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
-import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
+import { WorkflowActionMenuItems } from '@/command-menu/pages/workflow/action/components/WorkflowActionMenuItems';
+import { type WorkflowActionType } from '@/workflow/types/Workflow';
+import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer';
+import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
+import { AI_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/AiActions';
+import { CORE_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/CoreActions';
+import { HUMAN_INPUT_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/HumanInputActions';
+import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
+import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useLingui } from '@lingui/react/macro';
+import { FeatureFlagKey } from '~/generated/graphql';
-export const CommandMenuWorkflowSelectAction = () => {
- const workflowId = useCommandMenuWorkflowIdOrThrow();
+export const CommandMenuWorkflowSelectAction = ({
+ onActionSelected,
+}: {
+ onActionSelected: (actionType: WorkflowActionType) => void;
+}) => {
+ const isAiEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED);
+ const isIteratorEnabled = useIsFeatureEnabled(
+ FeatureFlagKey.IS_WORKFLOW_ITERATOR_ENABLED,
+ );
+
+ const { t } = useLingui();
return (
-
-
-
+
+
+ {t`Data`}
+
+
+
+ {isAiEnabled && (
+ <>
+
+ {t`AI`}
+
+
+ >
+ )}
+
+
+ {t`Core`}
+
+
+
+
+ {t`Human Input`}
+
+
+
+ {isIteratorEnabled && (
+ <>
+
+ {t`Others`}
+
+
+ >
+ )}
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStep.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStep.tsx
new file mode 100644
index 0000000000..1b7669e8d9
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStep.tsx
@@ -0,0 +1,20 @@
+import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
+import { CommandMenuWorkflowCreateStepContent } from '@/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStepContent';
+import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
+import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
+
+export const CommandMenuWorkflowCreateStep = () => {
+ const workflowId = useCommandMenuWorkflowIdOrThrow();
+
+ return (
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStepContent.tsx
similarity index 50%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx
rename to packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStepContent.tsx
index 757eb5cf54..5b61b8bcf4 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStepContent.tsx
@@ -1,46 +1,34 @@
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
-import { WorkflowActionMenuItems } from '@/command-menu/pages/workflow/action/components/WorkflowActionMenuItems';
+import { CommandMenuWorkflowSelectAction } from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { type WorkflowActionType } from '@/workflow/types/Workflow';
import { useCloseRightClickMenu } from '@/workflow/workflow-diagram/hooks/useCloseRightClickMenu';
-import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer';
-import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
-import { AI_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/AiActions';
-import { CORE_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/CoreActions';
-import { HUMAN_INPUT_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/HumanInputActions';
-import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
-import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useLingui } from '@lingui/react/macro';
import { useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
-import { FeatureFlagKey } from '~/generated/graphql';
-export const CommandMenuWorkflowSelectActionContent = () => {
+export const CommandMenuWorkflowCreateStepContent = () => {
const { getIcon } = useIcons();
+ const workflowVisualizerWorkflowId = useRecoilComponentValue(
+ workflowVisualizerWorkflowIdComponentState,
+ );
const { createStep } = useCreateStep();
+ const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();
const { closeRightClickMenu } = useCloseRightClickMenu();
-
- const [workflowInsertStepIds, setWorkflowInsertStepIds] =
- useRecoilComponentState(workflowInsertStepIdsComponentState);
-
const setCommandMenuNavigationStack = useSetRecoilState(
commandMenuNavigationStackState,
);
- const workflowVisualizerWorkflowId = useRecoilComponentValue(
- workflowVisualizerWorkflowIdComponentState,
- );
- const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();
+ const [workflowInsertStepIds, setWorkflowInsertStepIds] =
+ useRecoilComponentState(workflowInsertStepIdsComponentState);
const handleCreateStep = async (actionType: WorkflowActionType) => {
if (!isDefined(workflowVisualizerWorkflowId)) {
@@ -81,62 +69,7 @@ export const CommandMenuWorkflowSelectActionContent = () => {
);
};
- const isAiEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED);
- const isIteratorEnabled = useIsFeatureEnabled(
- FeatureFlagKey.IS_WORKFLOW_ITERATOR_ENABLED,
- );
-
- const { t } = useLingui();
-
return (
-
-
- {t`Data`}
-
-
-
- {isAiEnabled && (
- <>
-
- {t`AI`}
-
-
- >
- )}
-
-
- {t`Core`}
-
-
-
-
- {t`Human Input`}
-
-
-
- {isIteratorEnabled && (
- <>
-
- {t`Others`}
-
-
- >
- )}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType.tsx
new file mode 100644
index 0000000000..e80bf478f3
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType.tsx
@@ -0,0 +1,20 @@
+import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
+import { CommandMenuWorkflowEditStepTypeContent } from '@/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepTypeContent';
+import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
+import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
+
+export const CommandMenuWorkflowEditStepType = () => {
+ const workflowId = useCommandMenuWorkflowIdOrThrow();
+
+ return (
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepTypeContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepTypeContent.tsx
new file mode 100644
index 0000000000..7285ac63a9
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepTypeContent.tsx
@@ -0,0 +1,75 @@
+import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
+import { CommandMenuWorkflowSelectAction } from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction';
+import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
+import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
+import {
+ type WorkflowAction,
+ type WorkflowActionType,
+} from '@/workflow/types/Workflow';
+import { useCloseRightClickMenu } from '@/workflow/workflow-diagram/hooks/useCloseRightClickMenu';
+import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
+import { useUpdateStep } from '@/workflow/workflow-steps/hooks/useUpdateStep';
+import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
+import { useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
+
+export const CommandMenuWorkflowEditStepTypeContent = () => {
+ const { getIcon } = useIcons();
+ const workflowSelectedNode = useRecoilComponentValue(
+ workflowSelectedNodeComponentState,
+ );
+ const workflowVisualizerWorkflowId = useRecoilComponentValue(
+ workflowVisualizerWorkflowIdComponentState,
+ );
+ const flow = useFlowOrThrow();
+
+ const { updateStep } = useUpdateStep();
+
+ const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();
+ const { closeRightClickMenu } = useCloseRightClickMenu();
+ const setCommandMenuNavigationStack = useSetRecoilState(
+ commandMenuNavigationStackState,
+ );
+
+ const handleUpdateStepType = async (actionType: WorkflowActionType) => {
+ if (!isDefined(workflowVisualizerWorkflowId)) {
+ throw new Error(
+ 'Workflow ID must be configured for the edge when creating a step',
+ );
+ }
+
+ const existingStep = flow.steps?.find(
+ (step) => step.id === workflowSelectedNode,
+ );
+
+ if (!isDefined(existingStep)) {
+ throw new Error('Step not found');
+ }
+
+ const { updatedStep } = await updateStep({
+ ...existingStep,
+ type: actionType,
+ } as WorkflowAction);
+
+ if (!isDefined(updatedStep)) {
+ return;
+ }
+
+ closeRightClickMenu();
+
+ setCommandMenuNavigationStack([]);
+
+ openWorkflowEditStepInCommandMenu(
+ workflowVisualizerWorkflowId,
+ updatedStep.name,
+ getIcon(getActionIcon(updatedStep.type as WorkflowActionType)),
+ );
+ };
+
+ return (
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts b/packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts
index b6e55830b1..30169741b8 100644
--- a/packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts
+++ b/packages/twenty-front/src/modules/command-menu/types/CommandMenuPages.ts
@@ -7,7 +7,8 @@ export enum CommandMenuPages {
EditRichText = 'edit-rich-text',
Copilot = 'copilot',
WorkflowStepSelectTriggerType = 'workflow-step-select-trigger-type',
- WorkflowStepSelectAction = 'workflow-step-select-action',
+ WorkflowStepCreate = 'workflow-step-create',
+ WorkflowStepEditType = 'workflow-step-edit-type',
WorkflowStepView = 'workflow-step-view',
WorkflowStepEdit = 'workflow-step-edit',
WorkflowRunStepView = 'workflow-run-step-view',
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts
index 9aa6a31696..a3f1717814 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts
@@ -16,7 +16,7 @@ export const useStartNodeCreation = () => {
const [workflowInsertStepIds, setWorkflowInsertStepIds] =
useRecoilComponentState(workflowInsertStepIdsComponentState);
- const { openStepSelectInCommandMenu } = useWorkflowCommandMenu();
+ const { openWorkflowCreateStepInCommandMenu } = useWorkflowCommandMenu();
const workflowVisualizerWorkflowId = useRecoilComponentValue(
workflowVisualizerWorkflowIdComponentState,
@@ -57,13 +57,13 @@ export const useStartNodeCreation = () => {
setCommandMenuNavigationStack([]);
}
- openStepSelectInCommandMenu(workflowVisualizerWorkflowId);
+ openWorkflowCreateStepInCommandMenu(workflowVisualizerWorkflowId);
},
[
setWorkflowInsertStepIds,
workflowVisualizerWorkflowId,
isInRightDrawer,
- openStepSelectInCommandMenu,
+ openWorkflowCreateStepInCommandMenu,
setCommandMenuNavigationStack,
],
);
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowActionFooter.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowActionFooter.tsx
index 1a55246f17..58bef2e8c7 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowActionFooter.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowActionFooter.tsx
@@ -1,3 +1,5 @@
+import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
+import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -8,7 +10,7 @@ import { useDuplicateStep } from '@/workflow/workflow-steps/hooks/useDuplicateSt
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { useId } from 'react';
-import { IconCopyPlus } from 'twenty-ui/display';
+import { IconCopyPlus, IconPencil } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
import { getOsControlSymbol } from 'twenty-ui/utilities';
@@ -25,6 +27,8 @@ export const WorkflowActionFooter = ({
const theme = useTheme();
const { duplicateStep } = useDuplicateStep();
const { closeDropdown } = useCloseDropdown();
+ const workflowId = useCommandMenuWorkflowIdOrThrow();
+ const { openWorkflowEditStepTypeInCommandMenu } = useWorkflowCommandMenu();
const OptionsDropdown = () => {
return (
@@ -46,8 +50,16 @@ export const WorkflowActionFooter = ({
+