refactor: code editor component

Admyral-Security · Oct 15, 2024 · 3c883c8 · 3c883c8
1 parent fe5ab6f
commit 3c883c8
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 175 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
@@ -1,82 +1,85 @@
-import { useState, useEffect } from "react";
-import { Flex, Dialog, IconButton } from "@radix-ui/themes";
+import { Flex, Dialog, IconButton, Text } from "@radix-ui/themes";
 import { SizeIcon } from "@radix-ui/react-icons";
-import { CodeEditor } from "@/components/code-editor/code-editor";
+import CodeEditor from "@/components/code-editor/code-editor";
 
 interface CodeEditorWithDialogProps {
 	title?: string;
-	value: string;
+	description?: string;
+	defaultValue?: string;
+	value?: string;
 	onChange: (value: string) => void;
+	className?: string;
 	language?: string;
 }
 
 export default function CodeEditorWithDialog({
 	title,
+	description,
 	value,
 	onChange,
 	language,
+	className,
 }: CodeEditorWithDialogProps) {
-	const [isOpen, setIsOpen] = useState(false);
-	const [currentValue, setCurrentValue] = useState(value);
-
-	useEffect(() => {
-		setCurrentValue(value);
-	}, [value]);
-
-	const handleOpenChange = (open: boolean) => {
-		setIsOpen(open);
-		if (!open) {
-			onChange(currentValue);
-		}
-	};
+	return (
+		<Flex width="100%" height="100%" position="relative">
+			<CodeEditor
+				value={value}
+				onChange={onChange}
+				language={language}
+				className={className}
+			/>
 
-	const handleEditorChange = (value: string | undefined) => {
-		setCurrentValue(value ?? "");
-		onChange(value ?? "");
-	};
+			<Dialog.Root>
+				<Dialog.Trigger>
+					<IconButton
+						variant="ghost"
+						size="1"
+						style={{
+							position: "absolute",
+							top: "-18px",
+							right: "0px",
+							cursor: "pointer",
+						}}
+					>
+						<SizeIcon />
+					</IconButton>
+				</Dialog.Trigger>
 
-	return (
-		<Flex direction="column" gap="10" width="100%">
-			<div className="relative w-full">
-				<CodeEditor
-					value={currentValue}
-					onChange={handleEditorChange}
-					language={language}
-					className=" h-16 w-full"
-				/>
-				<IconButton
-					variant="ghost"
-					size="1"
-					onClick={() => setIsOpen(true)}
+				<Dialog.Content
 					style={{
-						position: "absolute",
-						top: "-15%",
-						right: "0%",
-						transform: "translateY(-50%)",
+						maxWidth: "min(90vw, 900px)",
+						height: "min(90vh, 612px)",
 					}}
 				>
-					<SizeIcon />
-				</IconButton>
-			</div>
-			<Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
-				<Dialog.Content
-					style={{ maxWidth: "min(90vw, 800px)", width: "100%" }}
-				>
-					<Flex direction="column" gap="4">
+					<Flex direction="column" gap="2" height="100%" width="100%">
 						<Flex justify="between" align="center">
-							<Dialog.Title>{title}</Dialog.Title>
+							{title !== undefined && (
+								<Text size="5" weight="medium">
+									{title}
+								</Text>
+							)}
 							<Dialog.Close>
-								<IconButton variant="ghost" size="1">
+								<IconButton
+									variant="ghost"
+									size="1"
+									style={{ cursor: "pointer" }}
+								>
 									<SizeIcon />
 								</IconButton>
 							</Dialog.Close>
 						</Flex>
-						<CodeEditor
-							value={currentValue}
-							onChange={handleEditorChange}
-							className="h-[30vh] w-full"
-							language={language}
-						/>
+						{description !== undefined && (
+							<Flex justify="between" align="center">
+								<Text size="3">{description}</Text>
+							</Flex>
+						)}
+						<Flex height="100%" width="100%">
+							<CodeEditor
+								value={value}
+								onChange={onChange}
+								language={language}
+							/>
+						</Flex>
 					</Flex>
 				</Dialog.Content>
 			</Dialog.Root>

diff --git a/web/src/components/code-editor/code-editor.tsx b/web/src/components/code-editor/code-editor.tsx
@@ -1,29 +1,26 @@
-import {
-	EditorProps,
-	Editor as ReactMonacoEditor,
-	type Monaco,
-	OnChange,
-} from "@monaco-editor/react";
+import { Editor as ReactMonacoEditor, type Monaco } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
-import { cn } from "@/utils/tailwind";
 
-interface CodeEditorProps extends EditorProps {
+interface CodeEditorProps {
+	defaultValue?: string;
+	value?: string;
+	onChange: (value: string) => void;
 	className?: string;
 	language?: string;
-	onChange?: OnChange;
 }
 
-export function CodeEditor({
+export default function CodeEditor({
 	className,
 	language,
 	onChange,
+	value,
 	...props
 }: CodeEditorProps) {
 	const handleEditorDidMount = (
 		editor: editor.IStandaloneCodeEditor,
 		monaco: Monaco,
 	) => {
-		monaco.editor.defineTheme("myCustomTheme", {
+		monaco.editor.defineTheme("custom", {
 			base: "vs",
 			inherit: true,
 			rules: [],
@@ -32,35 +29,33 @@ export function CodeEditor({
 				"editorLineNumber.foreground": "#5A5A5A",
 			},
 		});
-		monaco.editor.setTheme("myCustomTheme");
+		monaco.editor.setTheme("custom");
 	};
 
 	return (
-		<div className={cn("h-36", className)}>
-			<ReactMonacoEditor
-				height="100%"
-				{...(language && { language })}
-				onMount={handleEditorDidMount}
-				onChange={onChange}
-				theme="myCustomTheme"
-				options={{
-					tabSize: 2,
-					minimap: { enabled: false },
-					scrollbar: {
-						verticalScrollbarSize: 0,
-						horizontalScrollbarSize: 5,
-					},
-					renderLineHighlight: "all",
-					inlineSuggest: { enabled: false },
-					suggestOnTriggerCharacters: false,
-					quickSuggestions: false,
-					wordBasedSuggestions: "off",
-					suggest: { preview: false },
-					...props.options,
-				}}
-				wrapperProps={{ className: "editor-wrapper" }}
-				{...props}
-			/>
-		</div>
+		<ReactMonacoEditor
+			{...(language && { language })}
+			onMount={handleEditorDidMount}
+			onChange={(value, _ev) => onChange(value || "")}
+			theme="custom"
+			options={{
+				tabSize: 2,
+				minimap: { enabled: false },
+				scrollbar: {
+					verticalScrollbarSize: 5,
+					horizontalScrollbarSize: 5,
+				},
+				renderLineHighlight: "all",
+				inlineSuggest: { enabled: false },
+				suggestOnTriggerCharacters: false,
+				quickSuggestions: false,
+				wordBasedSuggestions: "off",
+				suggest: { preview: false },
+			}}
+			width="100%"
+			wrapperProps={{ className: "editor-wrapper" }}
+			value={value || ""}
+			{...props}
+		/>
 	);
 }
diff --git a/web/src/components/run-workflow/run-workflow-button.tsx b/web/src/components/run-workflow/run-workflow-button.tsx
@@ -1,5 +1,5 @@
 import { PlayIcon } from "@radix-ui/react-icons";
-import { Button, Dialog, Flex } from "@radix-ui/themes";
+import { Button, Dialog } from "@radix-ui/themes";
 import RunWorkflowDialog from "./run-workflow-dialog";
 import { useState } from "react";
 
@@ -25,9 +25,7 @@ export default function RunWorkflowButton() {
 				</Button>
 			</Dialog.Trigger>
 
-			<Dialog.Content>
-				<RunWorkflowDialog closeDialog={() => setShowModal(false)} />
-			</Dialog.Content>
+			<RunWorkflowDialog closeDialog={() => setShowModal(false)} />
 		</Dialog.Root>
 	);
 }
diff --git a/web/src/components/run-workflow/run-workflow-dialog.tsx b/web/src/components/run-workflow/run-workflow-dialog.tsx
@@ -4,7 +4,7 @@ import { useWorkflowStore } from "@/stores/workflow-store";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { Button, Dialog, Flex, Text } from "@radix-ui/themes";
 import { useEffect } from "react";
-import { CodeEditor } from "@/components/code-editor/code-editor";
+import CodeEditor from "@/components/code-editor/code-editor";
 
 export default function RunWorkflowDialog({
 	closeDialog,
@@ -49,66 +49,70 @@ export default function RunWorkflowDialog({
 		triggerWorkflow.mutate({ workflowName, payload: parsedPayload });
 	};
 
-	const handleEditorChange = (value: string | undefined) => {
-		setPayloadCache(value || "");
-	};
-
 	return (
-		<Flex direction="column" gap="4">
-			<Flex justify="between" align="center">
-				<Text weight="bold" size="5">
-					Run Workflow
-				</Text>
+		<Dialog.Content
+			style={{
+				maxWidth: "min(90vw, 900px)",
+				height: "min(90vh, 612px)",
+			}}
+		>
+			<Flex direction="column" gap="4" height="100%">
+				<Flex justify="between" align="center">
+					<Text weight="bold" size="5">
+						Run Workflow
+					</Text>
+
+					<Dialog.Close>
+						<Button
+							size="2"
+							variant="soft"
+							color="gray"
+							style={{
+								cursor: "pointer",
+								paddingLeft: 8,
+								paddingRight: 8,
+							}}
+						>
+							<Cross1Icon width="16" height="16" />
+						</Button>
+					</Dialog.Close>
+				</Flex>
+
+				<Flex direction="column" gap="2" height="100%">
+					<Text weight="medium">Test Payload (JSON)</Text>
+					<Flex width="100%" height="100%">
+						<CodeEditor
+							value={payloadCache}
+							onChange={setPayloadCache}
+							language="json"
+						/>
+					</Flex>
+				</Flex>
+
+				<Flex align="center" justify="end" gap="4">
+					<Dialog.Close>
+						<Button
+							variant="soft"
+							color="gray"
+							style={{ cursor: "pointer" }}
+						>
+							Cancel
+						</Button>
+					</Dialog.Close>
 
-				<Dialog.Close>
 					<Button
+						variant="solid"
 						size="2"
-						variant="soft"
-						color="gray"
 						style={{
 							cursor: "pointer",
-							paddingLeft: 8,
-							paddingRight: 8,
 						}}
+						onClick={handleRunWorkflow}
+						loading={triggerWorkflow.isPending}
 					>
-						<Cross1Icon width="16" height="16" />
+						Run Workflow
 					</Button>
-				</Dialog.Close>
-			</Flex>
-
-			<Flex direction="column" gap="2">
-				<Text weight="medium">Test Payload (JSON)</Text>
-				<CodeEditor
-					className="h-72 w-full"
-					value={payloadCache}
-					language="json"
-					onChange={handleEditorChange}
-				/>
-			</Flex>
-
-			<Flex align="center" justify="end" gap="4">
-				<Dialog.Close>
-					<Button
-						variant="soft"
-						color="gray"
-						style={{ cursor: "pointer" }}
-					>
-						Cancel
-					</Button>
-				</Dialog.Close>
-
-				<Button
-					variant="solid"
-					size="2"
-					style={{
-						cursor: "pointer",
-					}}
-					onClick={handleRunWorkflow}
-					loading={triggerWorkflow.isPending}
-				>
-					Run Workflow
-				</Button>
+				</Flex>
 			</Flex>
-		</Flex>
+		</Dialog.Content>
 	);
 }