diff --git a/packages/twenty-front/src/modules/workflow/components/Workflow.tsx b/packages/twenty-front/src/modules/workflow/components/Workflow.tsx
index 7c7e5bc74..a9e33c882 100644
--- a/packages/twenty-front/src/modules/workflow/components/Workflow.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/Workflow.tsx
@@ -1,14 +1,17 @@
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { WorkflowDiagramCanvas } from '@/workflow/components/WorkflowDiagramCanvas';
import { WorkflowEffect } from '@/workflow/components/WorkflowEffect';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
import styled from '@emotion/styled';
import '@xyflow/react/dist/style.css';
import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-ui';
const StyledFlowContainer = styled.div`
height: 100%;
width: 100%;
+ position: relative;
/* Below we reset the default styling of Reactflow */
.react-flow__node-input,
@@ -32,16 +35,23 @@ export const Workflow = ({
}) => {
const workflowId = targetableObject.id;
+ const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(workflowId);
const workflowDiagram = useRecoilValue(workflowDiagramState);
return (
<>
-
+
- {workflowDiagram === undefined ? null : (
-
- )}
+ {isDefined(workflowDiagram) && isDefined(workflowWithCurrentVersion) ? (
+
+ ) : null}
>
);
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvas.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvas.tsx
index ef1123f4e..83b9c0c67 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvas.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvas.tsx
@@ -2,13 +2,16 @@ import { WorkflowDiagramCanvasEffect } from '@/workflow/components/WorkflowDiagr
import { WorkflowDiagramCreateStepNode } from '@/workflow/components/WorkflowDiagramCreateStepNode';
import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagramEmptyTrigger';
import { WorkflowDiagramStepNode } from '@/workflow/components/WorkflowDiagramStepNode';
+import { WorkflowVersionStatusTag } from '@/workflow/components/WorkflowVersionStatusTag';
import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
+import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
import {
WorkflowDiagram,
WorkflowDiagramEdge,
WorkflowDiagramNode,
} from '@/workflow/types/WorkflowDiagram';
import { getOrganizedDiagram } from '@/workflow/utils/getOrganizedDiagram';
+import styled from '@emotion/styled';
import {
applyEdgeChanges,
applyNodeChanges,
@@ -22,10 +25,19 @@ import { useMemo } from 'react';
import { useSetRecoilState } from 'recoil';
import { GRAY_SCALE, isDefined } from 'twenty-ui';
+const StyledStatusTagContainer = styled.div`
+ left: 0;
+ top: 0;
+ position: absolute;
+ padding: ${({ theme }) => theme.spacing(2)};
+`;
+
export const WorkflowDiagramCanvas = ({
diagram,
+ workflowWithCurrentVersion,
}: {
diagram: WorkflowDiagram;
+ workflowWithCurrentVersion: WorkflowWithCurrentVersion;
}) => {
const { nodes, edges } = useMemo(
() => getOrganizedDiagram(diagram),
@@ -69,21 +81,29 @@ export const WorkflowDiagramCanvas = ({
};
return (
- ({ ...node, draggable: false }))}
- edges={edges}
- onNodesChange={handleNodesChange}
- onEdgesChange={handleEdgesChange}
- >
-
+ <>
+ ({ ...node, draggable: false }))}
+ edges={edges}
+ onNodesChange={handleNodesChange}
+ onEdgesChange={handleEdgesChange}
+ >
+
-
-
+
+
+
+
+
+
+ >
);
};
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEffect.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEffect.tsx
index 8bbf9396c..6171f2d64 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowEffect.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowEffect.tsx
@@ -1,6 +1,6 @@
-import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
import { addCreateStepNodes } from '@/workflow/utils/addCreateStepNodes';
import { getWorkflowVersionDiagram } from '@/workflow/utils/getWorkflowVersionDiagram';
import { useEffect } from 'react';
@@ -9,11 +9,13 @@ import { isDefined } from 'twenty-ui';
type WorkflowEffectProps = {
workflowId: string;
+ workflowWithCurrentVersion: WorkflowWithCurrentVersion | undefined;
};
-export const WorkflowEffect = ({ workflowId }: WorkflowEffectProps) => {
- const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(workflowId);
-
+export const WorkflowEffect = ({
+ workflowId,
+ workflowWithCurrentVersion,
+}: WorkflowEffectProps) => {
const setWorkflowId = useSetRecoilState(workflowIdState);
const setWorkflowDiagram = useSetRecoilState(workflowDiagramState);
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowVersionStatusTag.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowVersionStatusTag.tsx
new file mode 100644
index 000000000..a917d8055
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowVersionStatusTag.tsx
@@ -0,0 +1,22 @@
+import { WorkflowVersionStatus } from '@/workflow/types/Workflow';
+import { Tag } from 'twenty-ui';
+
+export const WorkflowVersionStatusTag = ({
+ versionStatus,
+}: {
+ versionStatus: WorkflowVersionStatus;
+}) => {
+ if (versionStatus === 'ACTIVE') {
+ return ;
+ }
+
+ if (versionStatus === 'DRAFT') {
+ return ;
+ }
+
+ if (versionStatus === 'ARCHIVED') {
+ return ;
+ }
+
+ return ;
+};
diff --git a/packages/twenty-front/src/modules/workflow/components/__stories__/WorkflowVersionStatusTag.stories.tsx b/packages/twenty-front/src/modules/workflow/components/__stories__/WorkflowVersionStatusTag.stories.tsx
new file mode 100644
index 000000000..0ea2cd94c
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/components/__stories__/WorkflowVersionStatusTag.stories.tsx
@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
+
+import { WorkflowVersionStatus } from '@/workflow/types/Workflow';
+import { WorkflowVersionStatusTag } from '../WorkflowVersionStatusTag';
+
+const meta: Meta = {
+ title: 'Modules/Workflow/WorkflowVersionStatusTag',
+ component: WorkflowVersionStatusTag,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ versionStatus: 'DRAFT',
+ },
+ decorators: [ComponentDecorator],
+};
+
+export const Catalog: CatalogStory = {
+ argTypes: {
+ versionStatus: { table: { disable: true } },
+ },
+ parameters: {
+ catalog: {
+ dimensions: [
+ {
+ name: 'version status',
+ values: [
+ 'DRAFT',
+ 'ACTIVE',
+ 'DEACTIVATED',
+ 'ARCHIVED',
+ ] satisfies WorkflowVersionStatus[],
+ props: (versionStatus: WorkflowVersionStatus) => ({ versionStatus }),
+ },
+ ],
+ },
+ },
+ decorators: [CatalogDecorator],
+};
diff --git a/packages/twenty-front/src/modules/workflow/types/Workflow.ts b/packages/twenty-front/src/modules/workflow/types/Workflow.ts
index 08f240473..45500e219 100644
--- a/packages/twenty-front/src/modules/workflow/types/Workflow.ts
+++ b/packages/twenty-front/src/modules/workflow/types/Workflow.ts
@@ -78,5 +78,5 @@ export type Workflow = {
};
export type WorkflowWithCurrentVersion = Workflow & {
- currentVersion: WorkflowVersion | undefined;
+ currentVersion: WorkflowVersion;
};