Workflow editor (#735)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/workflows/components/CodeEditor.tsx

@@ -0,0 +1,41 @@
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { python } from "@codemirror/lang-python";
+import { tokyoNightStorm } from "@uiw/codemirror-theme-tokyo-night-storm";
+import { cn } from "@/util/utils";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  language: "python" | "json";
+  disabled?: boolean;
+  minHeight?: string;
+  className?: string;
+  fontSize?: number;
+};
+
+function CodeEditor({
+  value,
+  onChange,
+  minHeight,
+  language,
+  className,
+  fontSize = 8,
+}: Props) {
+  const extensions = language === "json" ? [json()] : [python()];
+  return (
+    <CodeMirror
+      value={value}
+      onChange={onChange}
+      extensions={extensions}
+      theme={tokyoNightStorm}
+      minHeight={minHeight}
+      className={cn("cursor-auto", className)}
+      style={{
+        fontSize: fontSize,
+      }}
+    />
+  );
+}
+
+export { CodeEditor };

skyvern-frontend/src/routes/workflows/components/DataSchema.tsx

@@ -0,0 +1,50 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { CodeEditor } from "./CodeEditor";
+
+type Props = {
+  value: Record<string, unknown> | null;
+  onChange: (value: Record<string, unknown> | null) => void;
+};
+
+function DataSchema({ value, onChange }: Props) {
+  if (value === null) {
+    return (
+      <div className="flex gap-2">
+        <Label className="text-xs text-slate-300">Data Schema</Label>
+        <Checkbox
+          checked={false}
+          onCheckedChange={() => {
+            onChange({});
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-2">
+        <Label className="text-xs text-slate-300">Data Schema</Label>
+        <Checkbox
+          checked
+          onCheckedChange={() => {
+            onChange(null);
+          }}
+        />
+      </div>
+      <div>
+        <CodeEditor
+          language="json"
+          value={JSON.stringify(value, null, 2)}
+          onChange={() => {
+            // TODO
+          }}
+          className="nowheel nopan"
+        />
+      </div>
+    </div>
+  );
+}
+
+export { DataSchema };