In this PR: - Refactored components to clarify their behavior. For example, I renamed the `Workflow` component to `WorkflowVisualizer`. This moved forward the issue #7010. - Create two variants of several workflow-related components: one version for editing and another for viewing. For instance, there is `WorkflowDiagramCanvasEditable.tsx` and `WorkflowDiagramCanvasReadonly.tsx` - Implement the show page for workflow versions. On this page, we display a readonly workflow visualizer. Users can click on nodes and it will expand the right drawer. - I added buttons in the header of the RecordShowPage for workflow versions: users can activate, deactivate or use the currently viewed version as the next draft. **There are many cache desynchronisation and I'll fix them really soon.** ## Demo (Turn sound on) https://github.com/user-attachments/assets/97fafa48-8902-4dab-8b39-f40848bf041e
31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
import { WorkflowDiagramCanvasBase } from '@/workflow/components/WorkflowDiagramCanvasBase';
|
|
import { WorkflowDiagramCanvasEditableEffect } from '@/workflow/components/WorkflowDiagramCanvasEditableEffect';
|
|
import { WorkflowDiagramCreateStepNode } from '@/workflow/components/WorkflowDiagramCreateStepNode';
|
|
import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagramEmptyTrigger';
|
|
import { WorkflowDiagramStepNodeEditable } from '@/workflow/components/WorkflowDiagramStepNodeEditable';
|
|
import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
|
|
import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
|
|
|
|
export const WorkflowDiagramCanvasEditable = ({
|
|
diagram,
|
|
workflowWithCurrentVersion,
|
|
}: {
|
|
diagram: WorkflowDiagram;
|
|
workflowWithCurrentVersion: WorkflowWithCurrentVersion;
|
|
}) => {
|
|
return (
|
|
<WorkflowDiagramCanvasBase
|
|
key={workflowWithCurrentVersion.currentVersion.id}
|
|
diagram={diagram}
|
|
status={workflowWithCurrentVersion.currentVersion.status}
|
|
nodeTypes={{
|
|
default: WorkflowDiagramStepNodeEditable,
|
|
'create-step': WorkflowDiagramCreateStepNode,
|
|
'empty-trigger': WorkflowDiagramEmptyTrigger,
|
|
}}
|
|
>
|
|
<WorkflowDiagramCanvasEditableEffect />
|
|
</WorkflowDiagramCanvasBase>
|
|
);
|
|
};
|