Added a test JSON editor to the workflow page, not working yet

apps/webapp/app/components/code/JSONEditor.tsx

@@ -8,7 +8,7 @@ import { useCodeMirror } from "@uiw/react-codemirror";
 import classNames from "classnames";
 import { useRef, useEffect } from "react";
 import { getEditorSetup } from "./codeMirrorSetup";
-import { lightTheme } from "./codeMirrorTheme";
+import { darkTheme, lightTheme } from "./codeMirrorTheme";
 
 export interface JSONEditorProps extends Omit<ReactCodeMirrorProps, "onBlur"> {
   content: string;
@@ -61,7 +61,7 @@ export function JSONEditor(opts: JSONEditorProps) {
     contentEditable: !readOnly,
     value: content,
     autoFocus: false,
-    theme: lightTheme(),
+    theme: darkTheme(),
     indentWithTab: false,
     basicSetup,
     onChange,

apps/webapp/app/components/code/codeMirrorSetup.ts

@@ -5,12 +5,14 @@ import {
   dropCursor,
   lineNumbers,
   highlightActiveLineGutter,
+  keymap,
 } from "@codemirror/view";
 import type { Extension } from "@codemirror/state";
 import { highlightSelectionMatches } from "@codemirror/search";
 import { json as jsonLang } from "@codemirror/lang-json";
 import { closeBrackets } from "@codemirror/autocomplete";
 import { bracketMatching } from "@codemirror/language";
+import { indentWithTab } from "@codemirror/commands";
 
 export function getPreviewSetup(): Array<Extension> {
   return [
@@ -37,6 +39,7 @@ export function getEditorSetup(
     dropCursor(),
     bracketMatching(),
     closeBrackets(),
+    keymap.of([indentWithTab]),
   ];
 
   if (showLineNumbers) {

apps/webapp/app/components/code/codeMirrorTheme.ts

@@ -16,7 +16,7 @@ export function darkTheme(): Extension {
     whiskey = "#d19a66",
     violet = "#c678dd",
     darkBackground = "#21252b",
-    highlightBackground = "rgba(234,179,8,0.3)",
+    highlightBackground = "rgba(234,179,8,0.1)",
     background = "rgb(51 65 85)",
     tooltipBackground = "#353a42",
     selection = "rgb(71 85 105)",

apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/index.tsx

@@ -1,8 +1,12 @@
+import { Form } from "@remix-run/react";
+import { useState } from "react";
 import invariant from "tiny-invariant";
+import { JSONEditor } from "~/components/code/JSONEditor";
 import { integrations } from "~/components/integrations/ConnectButton";
 import { ConnectionSelector } from "~/components/integrations/ConnectionSelector";
 import { Panel } from "~/components/layout/Panel";
 import { PanelHeader } from "~/components/layout/PanelHeader";
+import { PrimaryButton } from "~/components/primitives/Buttons";
 import { Body } from "~/components/primitives/text/Body";
 import { Header1, Header2 } from "~/components/primitives/text/Headers";
 import { TriggerBody } from "~/components/triggers/Trigger";
@@ -26,6 +30,8 @@ export default function Page() {
     (r) => r.environmentId === environment.id
   );
 
+  const [testContent, setTestContent] = useState<string>("");
+
   return (
     <>
       <Header1 className="mb-4">Overview</Header1>
@@ -63,7 +69,19 @@ export default function Page() {
         </Panel>
       )}
 
-      <div>Test functionality will go here</div>
+      {workflow.status === "READY" && (
+        <Panel className="mt-4">
+          <Form className="flex flex-col gap-2">
+            <JSONEditor
+              content={testContent}
+              readOnly={false}
+              onChange={(c) => setTestContent(c)}
+            />
+            <input type="hidden" name="data" value={testContent} />
+            <PrimaryButton type="submit">Test</PrimaryButton>
+          </Form>
+        </Panel>
+      )}
     </>
   );
 }