Add Workflow Run show page (#7719)

In this PR:

- Display a workflow version visualizer for the version of the workflow
the run was executed on.
- Display the output of the run as code.


https://github.com/user-attachments/assets/d617300a-bff4-4328-a35c-291dc86d81cf
This commit is contained in:
Baptiste Devessier
2024-10-21 12:04:44 +02:00
committed by GitHub
parent b914182b78
commit e7eeb3b820
12 changed files with 335 additions and 169 deletions

View File

@ -0,0 +1,32 @@
import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-ui';
const StyledSourceCodeContainer = styled.div`
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
margin: ${({ theme }) => theme.spacing(4)};
overflow: hidden;
`;
export const WorkflowRunOutputVisualizer = ({
workflowRunId,
}: {
workflowRunId: string;
}) => {
const workflowRun = useWorkflowRun({ workflowRunId });
if (!isDefined(workflowRun)) {
return null;
}
return (
<StyledSourceCodeContainer>
<CodeEditor
value={JSON.stringify(workflowRun.output, null, 2)}
language="json"
options={{ readOnly: true, domReadOnly: true }}
/>
</StyledSourceCodeContainer>
);
};