diff --git a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStep.tsx b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStep.tsx
index 96b82e2f003c..bc0b4b54d5d6 100644
--- a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStep.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStep.tsx
@@ -1,10 +1,16 @@
-import { showPageWorkflowSelectedNodeState } from '@/workflow/states/showPageWorkflowSelectedNodeState';
+import { RightDrawerWorkflowEditStepContent } from '@/workflow/components/RightDrawerWorkflowEditStepContent';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-ui';
export const RightDrawerWorkflowEditStep = () => {
- const showPageWorkflowSelectedNode = useRecoilValue(
- showPageWorkflowSelectedNodeState,
- );
+ const workflowId = useRecoilValue(workflowIdState);
+ const workflow = useWorkflowWithCurrentVersion(workflowId);
- return {showPageWorkflowSelectedNode}
;
+ if (!isDefined(workflow)) {
+ return null;
+ }
+
+ return ;
};
diff --git a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStepContent.tsx b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStepContent.tsx
new file mode 100644
index 000000000000..a5669f989878
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStepContent.tsx
@@ -0,0 +1,88 @@
+import { WorkflowEditActionForm } from '@/workflow/components/WorkflowEditActionForm';
+import { WorkflowEditTriggerForm } from '@/workflow/components/WorkflowEditTriggerForm';
+import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
+import { useUpdateWorkflowVersionStep } from '@/workflow/hooks/useUpdateWorkflowVersionStep';
+import { useUpdateWorkflowVersionTrigger } from '@/workflow/hooks/useUpdateWorkflowVersionTrigger';
+import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
+import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
+import { findStepPositionOrThrow } from '@/workflow/utils/findStepPositionOrThrow';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-ui';
+
+const getStepDefinitionOrThrow = ({
+ stepId,
+ workflow,
+}: {
+ stepId: string;
+ workflow: WorkflowWithCurrentVersion;
+}) => {
+ const currentVersion = workflow.currentVersion;
+ if (!isDefined(currentVersion)) {
+ throw new Error('Expected to find a current version');
+ }
+
+ if (stepId === TRIGGER_STEP_ID) {
+ if (!isDefined(currentVersion.trigger)) {
+ throw new Error('Expected to find the definition of the trigger');
+ }
+
+ return {
+ type: 'trigger',
+ definition: currentVersion.trigger,
+ } as const;
+ }
+
+ if (!isDefined(currentVersion.steps)) {
+ throw new Error('Expected to find an array of steps');
+ }
+
+ const selectedNodePosition = findStepPositionOrThrow({
+ steps: currentVersion.steps,
+ stepId: stepId,
+ });
+
+ return {
+ type: 'action',
+ definition: selectedNodePosition.steps[selectedNodePosition.index],
+ } as const;
+};
+
+export const RightDrawerWorkflowEditStepContent = ({
+ workflow,
+}: {
+ workflow: WorkflowWithCurrentVersion;
+}) => {
+ const workflowSelectedNode = useRecoilValue(workflowSelectedNodeState);
+ if (!isDefined(workflowSelectedNode)) {
+ throw new Error(
+ 'Expected a node to be selected. Selecting a node is mandatory to edit it.',
+ );
+ }
+
+ const { updateTrigger } = useUpdateWorkflowVersionTrigger({ workflow });
+ const { updateStep } = useUpdateWorkflowVersionStep({
+ workflow,
+ stepId: workflowSelectedNode,
+ });
+
+ const stepDefinition = getStepDefinitionOrThrow({
+ stepId: workflowSelectedNode,
+ workflow,
+ });
+
+ if (stepDefinition.type === 'trigger') {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectAction.tsx b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectAction.tsx
index d99189f66fcf..dadc160f4a8a 100644
--- a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectAction.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectAction.tsx
@@ -1,24 +1,12 @@
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { RightDrawerWorkflowSelectActionContent } from '@/workflow/components/RightDrawerWorkflowSelectActionContent';
-import { showPageWorkflowIdState } from '@/workflow/states/showPageWorkflowIdState';
-import { Workflow } from '@/workflow/types/Workflow';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-ui';
export const RightDrawerWorkflowSelectAction = () => {
- const showPageWorkflowId = useRecoilValue(showPageWorkflowIdState);
-
- const { record: workflow } = useFindOneRecord({
- objectNameSingular: CoreObjectNameSingular.Workflow,
- objectRecordId: showPageWorkflowId,
- recordGqlFields: {
- id: true,
- name: true,
- versions: true,
- publishedVersionId: true,
- },
- });
+ const workflowId = useRecoilValue(workflowIdState);
+ const workflow = useWorkflowWithCurrentVersion(workflowId);
if (!isDefined(workflow)) {
return null;
diff --git a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx
index bc888238b2ef..094cc99e0996 100644
--- a/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx
@@ -1,19 +1,9 @@
-import { TabList } from '@/ui/layout/tab/components/TabList';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { useRightDrawerWorkflowSelectAction } from '@/workflow/hooks/useRightDrawerWorkflowSelectAction';
-import { Workflow } from '@/workflow/types/Workflow';
+import { ACTIONS } from '@/workflow/constants/Actions';
+import { useCreateStep } from '@/workflow/hooks/useCreateStep';
+import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
import styled from '@emotion/styled';
-// FIXME: copy-pasted
-const StyledTabListContainer = styled.div`
- align-items: center;
- border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
- box-sizing: border-box;
- display: flex;
- gap: ${({ theme }) => theme.spacing(2)};
- height: 40px;
-`;
-
const StyledActionListContainer = styled.div`
display: flex;
flex-direction: column;
@@ -24,33 +14,24 @@ const StyledActionListContainer = styled.div`
padding-inline: ${({ theme }) => theme.spacing(2)};
`;
-export const TAB_LIST_COMPONENT_ID =
- 'workflow-select-action-page-right-tab-list';
-
export const RightDrawerWorkflowSelectActionContent = ({
workflow,
}: {
- workflow: Workflow;
+ workflow: WorkflowWithCurrentVersion;
}) => {
- const tabListId = `${TAB_LIST_COMPONENT_ID}`;
-
- const { tabs, options, handleActionClick } =
- useRightDrawerWorkflowSelectAction({ tabListId, workflow });
+ const { createStep } = useCreateStep({
+ workflow,
+ });
return (
<>
-
-
-
-
- {options.map((option) => (
+ {ACTIONS.map((action) => (