feat: use code editor with dialog for result in run history

Admyral-Security · Nov 8, 2024 · 78038a5 · 78038a5
1 parent 84ebced
commit 78038a5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/web/src/components/code-editor-with-dialog/code-editor-with-dialog.tsx b/web/src/components/code-editor-with-dialog/code-editor-with-dialog.tsx
@@ -7,9 +7,10 @@ interface CodeEditorWithDialogProps {
 	description?: string;
 	defaultValue?: string;
 	value?: string;
-	onChange: (value: string) => void;
+	onChange?: (value: string) => void;
 	className?: string;
 	language?: string;
+	readOnly?: boolean;
 }
 
 export default function CodeEditorWithDialog({
@@ -19,6 +20,7 @@ export default function CodeEditorWithDialog({
 	onChange,
 	language,
 	className,
+	readOnly,
 }: CodeEditorWithDialogProps) {
 	return (
 		<Flex width="100%" height="100%" position="relative">
@@ -27,6 +29,7 @@ export default function CodeEditorWithDialog({
 				onChange={onChange}
 				language={language}
 				className={className}
+				readOnly={readOnly}
 			/>
 
 			<Dialog.Root>
@@ -78,6 +81,7 @@ export default function CodeEditorWithDialog({
 								value={value}
 								onChange={onChange}
 								language={language}
+								readOnly={readOnly}
 							/>
 						</Flex>
 					</Flex>

diff --git a/web/src/components/workflow-editor/run-history/workflow-run-step.tsx b/web/src/components/workflow-editor/run-history/workflow-run-step.tsx
@@ -1,4 +1,4 @@
-import CodeEditor from "@/components/code-editor/code-editor";
+import CodeEditorWithDialog from "@/components/code-editor-with-dialog/code-editor-with-dialog";
 import ErrorCallout from "@/components/utils/error-callout";
 import { useGetWorkflowRunStepApi } from "@/hooks/use-get-workflow-run-step-api";
 import { useToast } from "@/providers/toast";
@@ -130,8 +130,9 @@ export default function WorkflowRunStep({
 					</Tabs.List>
 
 					<Tabs.Content value="result">
-						<Flex height="calc((100vh - 56px) / 2 - 100px)" mt="2">
-							<CodeEditor
+						<Flex height="calc((100vh - 56px) / 2 - 110px)" mt="5">
+							<CodeEditorWithDialog
+								title={isError ? "Error" : "Result"}
 								value={
 									isError
 										? data.error!