From 1e25ca05862725b40ff3c086d40bd250d236a258 Mon Sep 17 00:00:00 2001
From: Riccardo Forina <rforina@redhat.com>
Date: Wed, 27 Nov 2024 09:53:34 +0100
Subject: [PATCH] Toggles for the dev tools

---
 packages/test-app/package.json              |   5 +-
 packages/test-app/src/App.tsx               |  71 +++++++-----
 packages/test-app/src/AppContext.tsx        |  29 +++++
 packages/test-app/src/AppMachine.ts         | 117 --------------------
 packages/test-app/src/components/Layout.tsx |  18 +++
 packages/test-app/src/main.tsx              |  11 +-
 packages/ui/src/OpenApiEditor.tsx           |  97 ++++++++--------
 yarn.lock                                   |   3 +-
 8 files changed, 147 insertions(+), 204 deletions(-)
 create mode 100644 packages/test-app/src/AppContext.tsx
 delete mode 100644 packages/test-app/src/AppMachine.ts

diff --git a/packages/test-app/package.json b/packages/test-app/package.json
index 8283dc1..938778c 100644
--- a/packages/test-app/package.json
+++ b/packages/test-app/package.json
@@ -15,13 +15,12 @@
     "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
-    "@xstate/react": "^4.1.3",
+    "@statelyai/inspect": "^0.4.0",
     "comlink": "^4.4.1",
     "monaco-editor": "^0.52.0",
     "monaco-yaml": "^5.2.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "xstate": "^5.18.2"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
diff --git a/packages/test-app/src/App.tsx b/packages/test-app/src/App.tsx
index 8ee1c29..b7fe288 100644
--- a/packages/test-app/src/App.tsx
+++ b/packages/test-app/src/App.tsx
@@ -15,7 +15,7 @@ import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 import { worker } from "./rpc.ts";
 // import * as worker from "../../ui/src/OpenApiEditorWorker.ts";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   Alert,
   Button,
@@ -26,6 +26,8 @@ import {
   TextArea,
   Title,
 } from "@patternfly/react-core";
+import { useAppContext } from "./AppContext.tsx";
+import { createBrowserInspector } from "@statelyai/inspect";
 
 // initialize Monaco's workers
 self.MonacoEnvironment = {
@@ -51,6 +53,18 @@ function App() {
   const [spec, setSpec] = useState<string | null>(null);
   const [captureChanges, setCaptureChanges] = useState(true);
   const [output, setOutput] = useState("");
+  const { showDebugger, showXStateInspector } = useAppContext();
+  const { inspect, start, stop } = createBrowserInspector({
+    autoStart: false,
+  });
+
+  useEffect(() => {
+    if (showXStateInspector) {
+      start();
+    } else {
+      stop();
+    }
+  }, [showXStateInspector, start, stop]);
 
   const editorRef = useRef<OpenApiEditorRef | null>(null);
 
@@ -111,35 +125,38 @@ function App() {
           undoChange={worker.undoChange}
           redoChange={worker.redoChange}
           onDocumentChange={onDocumentChange}
+          inspect={inspect}
         />
       </PageSection>
-      <PageSection variant={"secondary"}>
-        <Alert
-          title={"Integration debugger"}
-          variant={"warning"}
-          isInline={true}
-        >
-          <Flex>
-            <Title headingLevel={"h6"}>
-              <Switch
-                isChecked={captureChanges}
-                onChange={(_, v) => setCaptureChanges(v)}
-                label={"Listen to onDocumentChange events"}
+      {showDebugger && (
+        <PageSection variant={"secondary"}>
+          <Alert
+            title={"Integration debugger"}
+            variant={"warning"}
+            isInline={true}
+          >
+            <Flex>
+              <Title headingLevel={"h6"}>
+                <Switch
+                  isChecked={captureChanges}
+                  onChange={(_, v) => setCaptureChanges(v)}
+                  label={"Listen to onDocumentChange events"}
+                />
+              </Title>
+              <TextArea
+                aria-label="Output of the editor"
+                value={output}
+                rows={3}
               />
-            </Title>
-            <TextArea
-              aria-label="Output of the editor"
-              value={output}
-              rows={3}
-            />
-            <FlexItem>
-              <Button onClick={onSaveClick}>
-                Programmatically save and update with another document
-              </Button>
-            </FlexItem>
-          </Flex>
-        </Alert>
-      </PageSection>
+              <FlexItem>
+                <Button onClick={onSaveClick}>
+                  Programmatically save and update with another document
+                </Button>
+              </FlexItem>
+            </Flex>
+          </Alert>
+        </PageSection>
+      )}
     </>
   );
 }
diff --git a/packages/test-app/src/AppContext.tsx b/packages/test-app/src/AppContext.tsx
new file mode 100644
index 0000000..f5f5572
--- /dev/null
+++ b/packages/test-app/src/AppContext.tsx
@@ -0,0 +1,29 @@
+import {createContext, ReactNode, useContext, useState} from "react";
+
+const AppContext = createContext<{
+  showDebugger: boolean,
+  showXStateInspector: boolean,
+  setDebugger: (value: boolean) => void,
+  setXStateInspector: (value: boolean) => void,
+} | undefined>(undefined)
+
+export function AppProvider({ children }: { children: ReactNode }) {
+  const [showDebugger, setDebugger] = useState(false);
+  const [showXStateInspector, setXStateInspector] = useState(false);
+  return (
+    <AppContext.Provider value={{
+      showDebugger,
+      showXStateInspector,
+      setDebugger,
+      setXStateInspector
+    }}>
+      {children}
+    </AppContext.Provider>
+  )
+}
+
+export function useAppContext() {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error('useAppContext must be used within AppProvider');
+  return ctx;
+}
\ No newline at end of file
diff --git a/packages/test-app/src/AppMachine.ts b/packages/test-app/src/AppMachine.ts
deleted file mode 100644
index de435d4..0000000
--- a/packages/test-app/src/AppMachine.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { assign, fromPromise, setup } from "xstate";
-
-import { worker } from "./rpc.ts";
-
-type Context = {
-  spec: string | undefined;
-  error: string | undefined;
-};
-
-interface Input {
-  readonly spec: string | undefined;
-}
-
-type Events =
-  | { readonly type: "xstate.init"; readonly input: Input }
-  | { readonly type: "SPEC"; readonly content: string };
-
-function Input(input: Input): Promise<Context> {
-  if (input.spec !== undefined) {
-    return Promise.resolve({
-      spec: input.spec,
-      error: undefined,
-    });
-  }
-  return Promise.reject();
-}
-
-async function ParseSpec(input: Input): Promise<boolean> {
-  if (input.spec !== undefined) {
-    try {
-      await worker.parseOpenApi(input.spec);
-      return true;
-    } catch (e) {
-      console.error("ParseSpec", { e, input });
-    }
-  }
-  return Promise.reject();
-}
-
-export const appMachine = setup({
-  types: {
-    context: {} as Context,
-    events: {} as Events,
-    input: {} as Input,
-  },
-  actors: {
-    checkPreviousSession: fromPromise<Context, Input>(({ input }) =>
-      Input(input)
-    ),
-    parseSpec: fromPromise<boolean, Input>(({ input }) => ParseSpec(input)),
-  },
-  actions: {},
-}).createMachine({
-  id: "editor",
-  context: {
-    spec: undefined,
-    error: undefined,
-  },
-  invoke: {
-    src: "checkPreviousSession",
-    input: ({ event }) => {
-      if (event.type === "xstate.init") {
-        return event.input;
-      }
-      throw new Error("Unexpected event type");
-    },
-    onDone: {
-      target: ".idle.previousWorkAvailable",
-    },
-    onError: ".idle.nothingToRestore",
-  },
-  initial: "idle",
-  states: {
-    idle: {
-      initial: "nothingToRestore",
-      states: {
-        nothingToRestore: {},
-        previousWorkAvailable: {},
-        invalidSpec: {},
-      },
-    },
-    parsing: {
-      initial: "parsing",
-      invoke: {
-        src: "parseSpec",
-        input: ({ context }) => {
-          if (context.spec) {
-            return context;
-          }
-          throw new Error("Empty spec");
-        },
-        onDone: {
-          target: ".success",
-        },
-        onError: {
-          target: ".failure",
-        },
-      },
-      states: {
-        parsing: {},
-        success: {
-          always: "#editor.parsed",
-        },
-        failure: {
-          always: "#editor.idle.invalidSpec",
-        },
-      },
-    },
-    parsed: {},
-  },
-  on: {
-    SPEC: {
-      target: ".parsing",
-      actions: assign(({ event }) => ({ spec: event.content })),
-    },
-  },
-});
diff --git a/packages/test-app/src/components/Layout.tsx b/packages/test-app/src/components/Layout.tsx
index f2155e7..01cbbde 100644
--- a/packages/test-app/src/components/Layout.tsx
+++ b/packages/test-app/src/components/Layout.tsx
@@ -6,6 +6,7 @@ import {
   MastheadToggle,
   Page,
   PageToggleButton,
+  Switch,
   ToggleGroup,
   ToggleGroupItem,
   Toolbar,
@@ -16,10 +17,13 @@ import BarsIcon from "@patternfly/react-icons/dist/esm/icons/bars-icon";
 import { ReactNode, useState } from "react";
 import { MoonIcon, SunIcon } from "@patternfly/react-icons";
 import viteImg from "/vite.svg";
+import { useAppContext } from "../AppContext.tsx";
 
 export function Layout({ children }: { children: ReactNode }) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const [isLightMode, setIsLightMode] = useState(true);
+  const { showDebugger, setDebugger, showXStateInspector, setXStateInspector } =
+    useAppContext();
 
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);
@@ -55,6 +59,20 @@ export function Layout({ children }: { children: ReactNode }) {
             />
           </ToggleGroup>
         </ToolbarItem>
+        <ToolbarItem alignSelf={"center"}>
+          <Switch
+            checked={showDebugger}
+            label={"Show editor debugger"}
+            onChange={(_, v) => setDebugger(v)}
+          />
+        </ToolbarItem>
+        <ToolbarItem alignSelf={"center"}>
+          <Switch
+            checked={showXStateInspector}
+            label={"Show XState inspector"}
+            onChange={(_, v) => setXStateInspector(v)}
+          />
+        </ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
diff --git a/packages/test-app/src/main.tsx b/packages/test-app/src/main.tsx
index a418123..b3c9d06 100644
--- a/packages/test-app/src/main.tsx
+++ b/packages/test-app/src/main.tsx
@@ -3,11 +3,14 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
 import { Layout } from "./components/Layout";
+import { AppProvider } from "./AppContext.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Layout>
-      <App />
-    </Layout>
-  </StrictMode>
+    <AppProvider>
+      <Layout>
+        <App />
+      </Layout>
+    </AppProvider>
+  </StrictMode>,
 );
diff --git a/packages/ui/src/OpenApiEditor.tsx b/packages/ui/src/OpenApiEditor.tsx
index f4a5003..c1aeeaf 100644
--- a/packages/ui/src/OpenApiEditor.tsx
+++ b/packages/ui/src/OpenApiEditor.tsx
@@ -10,7 +10,7 @@ import {
   Spinner,
 } from "@patternfly/react-core";
 import { createActorContext } from "@xstate/react";
-import { fromPromise } from "xstate";
+import { fromPromise, InspectionEvent, Observer } from "xstate";
 import { EditorSidebar } from "./components/EditorSidebar";
 import { OpenApiEditorMachine } from "./OpenApiEditorMachine.ts";
 import {
@@ -33,7 +33,6 @@ import { DocumentDesignerMachine } from "./documentDesigner/DocumentDesignerMach
 import { DocumentDesignerProvider } from "./documentDesigner/DocumentDesignerProvider.tsx";
 import { ValidationMessages } from "./components/ValidationMessages.tsx";
 import { DocumentDesignerSkeleton } from "./documentDesigner/DocumentDesignerSkeleton.tsx";
-import { createBrowserInspector } from "@statelyai/inspect";
 import { CodeEditorMachine } from "./codeEditor/CodeEditorMachine.ts";
 import { CodeEditorProvider } from "./codeEditor/CodeEditorProvider.tsx";
 import { CodeEditor } from "./codeEditor/CodeEditor.tsx";
@@ -60,10 +59,6 @@ import { ResponseDesignerSkeleton } from "./responseDesigner/ResponseDesignerSke
 import { NodeHeader } from "./components/NodeHeader.tsx";
 import { Path } from "./components/Path.tsx";
 
-const { inspect } = createBrowserInspector({
-  autoStart: document.location.hostname === "localhost",
-});
-
 export type OpenApiEditorProps = {
   spec: string;
   parseOpenApi: (document: string) => Promise<void>;
@@ -87,6 +82,9 @@ export type OpenApiEditorProps = {
   enableViewer?: boolean;
   enableDesigner?: boolean;
   enableSource?: boolean;
+  inspect?:
+    | Observer<InspectionEvent>
+    | ((inspectionEvent: InspectionEvent) => void);
 };
 
 export const OpenApiEditorMachineContext =
@@ -123,8 +121,9 @@ export const OpenApiEditor = forwardRef<OpenApiEditorRef, OpenApiEditorProps>(
       enableViewer = true,
       enableDesigner = true,
       enableSource = true,
+      inspect,
     },
-    ref
+    ref,
   ) {
     const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -139,22 +138,22 @@ export const OpenApiEditor = forwardRef<OpenApiEditorRef, OpenApiEditorProps>(
       actors: {
         getDocumentSnapshot: fromPromise(() => getDocumentSnapshot()),
         updateDocumentTitle: fromPromise(({ input }) =>
-          updateDocumentTitle(input)
+          updateDocumentTitle(input),
         ),
         updateDocumentVersion: fromPromise(({ input }) =>
-          updateDocumentVersion(input)
+          updateDocumentVersion(input),
         ),
         updateDocumentDescription: fromPromise(({ input }) =>
-          updateDocumentDescription(input)
+          updateDocumentDescription(input),
         ),
         updateDocumentContactName: fromPromise(({ input }) =>
-          updateDocumentContactName(input)
+          updateDocumentContactName(input),
         ),
         updateDocumentContactEmail: fromPromise(({ input }) =>
-          updateDocumentContactEmail(input)
+          updateDocumentContactEmail(input),
         ),
         updateDocumentContactUrl: fromPromise(({ input }) =>
-          updateDocumentContactUrl(input)
+          updateDocumentContactUrl(input),
         ),
       },
     });
@@ -168,7 +167,7 @@ export const OpenApiEditor = forwardRef<OpenApiEditorRef, OpenApiEditorProps>(
     const dataTypeDesigner = DataTypeDesignerMachine.provide({
       actors: {
         getDataTypeSnapshot: fromPromise(({ input }) =>
-          getDataTypeSnapshot(input)
+          getDataTypeSnapshot(input),
         ),
       },
     });
@@ -176,7 +175,7 @@ export const OpenApiEditor = forwardRef<OpenApiEditorRef, OpenApiEditorProps>(
     const responseDesigner = ResponseDesignerMachine.provide({
       actors: {
         getResponseSnapshot: fromPromise(({ input }) =>
-          getResponseSnapshot(input)
+          getResponseSnapshot(input),
         ),
       },
     });
@@ -184,10 +183,10 @@ export const OpenApiEditor = forwardRef<OpenApiEditorRef, OpenApiEditorProps>(
     const codeEditor = CodeEditorMachine.provide({
       actors: {
         getNodeSource: fromPromise(({ input }) =>
-          getNodeSource(input.node, input.type)
+          getNodeSource(input.node, input.type),
         ),
         convertSource: fromPromise(({ input }) =>
-          convertSource(input.source, input.sourceType)
+          convertSource(input.source, input.sourceType),
         ),
       },
     });
@@ -197,7 +196,7 @@ export const OpenApiEditor = forwardRef<OpenApiEditorRef, OpenApiEditorProps>(
         parseOpenApi: fromPromise(({ input }) => parseOpenApi(input)),
         getEditorState: fromPromise(({ input }) => getEditorState(input)),
         getDocumentNavigation: fromPromise(({ input }) =>
-          getDocumentNavigation(input)
+          getDocumentNavigation(input),
         ),
         undoChange: fromPromise(() => undoChange()),
         redoChange: fromPromise(() => redoChange()),
@@ -251,7 +250,7 @@ export const OpenApiEditor = forwardRef<OpenApiEditorRef, OpenApiEditorProps>(
         </div>
       </OpenApiEditorMachineContext.Provider>
     );
-  }
+  },
 );
 
 type EditorProps = {
@@ -272,7 +271,7 @@ const Editor = forwardRef<OpenApiEditorRef, EditorProps>(function Editor(
     getSourceAsYaml,
     getSourceAsJson,
   },
-  ref
+  ref,
 ) {
   const {
     isSavingSlowly,
@@ -299,37 +298,33 @@ const Editor = forwardRef<OpenApiEditorRef, EditorProps>(function Editor(
     }
   }, [actorRef, spec]);
 
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        updateDocument: (spec: string) => {
-          actorRef.send({ type: "NEW_SPEC", spec });
-        },
-        getDocumentAsYaml: () => {
-          return new Promise((resolve) => {
-            setTimeout(async () => {
-              actorRef.send({ type: "START_SAVING" });
-              const source = await getSourceAsYaml();
-              actorRef.send({ type: "END_SAVING" });
-              resolve(source);
-            }, 0);
-          });
-        },
-        getDocumentAsJson: () => {
-          return new Promise((resolve) => {
-            setTimeout(async () => {
-              actorRef.send({ type: "START_SAVING" });
-              const source = await getSourceAsJson();
-              actorRef.send({ type: "END_SAVING" });
-              resolve(source);
-            }, 0);
-          });
-        },
-      };
-    },
-    []
-  );
+  useImperativeHandle(ref, () => {
+    return {
+      updateDocument: (spec: string) => {
+        actorRef.send({ type: "NEW_SPEC", spec });
+      },
+      getDocumentAsYaml: () => {
+        return new Promise((resolve) => {
+          setTimeout(async () => {
+            actorRef.send({ type: "START_SAVING" });
+            const source = await getSourceAsYaml();
+            actorRef.send({ type: "END_SAVING" });
+            resolve(source);
+          }, 0);
+        });
+      },
+      getDocumentAsJson: () => {
+        return new Promise((resolve) => {
+          setTimeout(async () => {
+            actorRef.send({ type: "START_SAVING" });
+            const source = await getSourceAsJson();
+            actorRef.send({ type: "END_SAVING" });
+            resolve(source);
+          }, 0);
+        });
+      },
+    };
+  }, []);
 
   const title = (() => {
     switch (selectedNode.type) {
diff --git a/yarn.lock b/yarn.lock
index 4dc1c2b..8c7b9c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -32,10 +32,10 @@ __metadata:
     "@patternfly/react-code-editor": "npm:^6.0.0"
     "@patternfly/react-core": "npm:^6.0.0"
     "@patternfly/react-icons": "npm:^6.0.0"
+    "@statelyai/inspect": "npm:^0.4.0"
     "@types/react": "npm:^18.3.12"
     "@types/react-dom": "npm:^18.3.1"
     "@vitejs/plugin-react": "npm:^4.3.3"
-    "@xstate/react": "npm:^4.1.3"
     comlink: "npm:^4.4.1"
     eslint: "npm:^9.13.0"
     eslint-plugin-react-hooks: "npm:^5.0.0"
@@ -49,7 +49,6 @@ __metadata:
     typescript-eslint: "npm:^8.11.0"
     vite: "npm:^5.4.10"
     vite-plugin-comlink: "npm:^5.1.0"
-    xstate: "npm:^5.18.2"
   languageName: unknown
   linkType: soft