Merge pull request #132 from open-rpc/fix/inspector-props-updates

shanejonas · web-flow · commit 0602c44ee3cf · 2020-03-12T16:28:33.000-07:00
fix: add props updates
diff --git a/openrpc.json b/openrpc.json
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
@@ -25,7 +25,7 @@ const App: React.FC = () => {
         onToggleDarkMode={darkMode.toggle}
         darkMode={darkMode.value}
         url={query.url}
-        openrpcMethodObject={query.openrpcMethodObject}
+        openrpcDocument={query.openrpcDocument}
         request={query.request}
       />
     </MuiThemeProvider>
diff --git a/src/containers/Inspector.tsx b/src/containers/Inspector.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, ChangeEvent, Dispatch } from "react";
 import SplitPane from "react-split-pane";
 import JSONRPCRequestEditor from "./JSONRPCRequestEditor";
+import * as monaco from "monaco-editor";
 import PlayCircle from "@material-ui/icons/PlayCircleFilled";
 import CloseIcon from "@material-ui/icons/Close";
 import History from "@material-ui/icons/History";
@@ -27,13 +28,15 @@ import { Client, RequestManager, HTTPTransport, WebSocketTransport } from "@open
 import Brightness3Icon from "@material-ui/icons/Brightness3";
 import WbSunnyIcon from "@material-ui/icons/WbSunny";
 import { JSONRPCError } from "@open-rpc/client-js/build/Error";
-import { MethodObject } from "@open-rpc/meta-schema";
+import { OpenrpcDocument } from "@open-rpc/meta-schema";
 import MonacoEditor from "@etclabscore/react-monaco-editor";
 import useTabs from "../hooks/useTabs";
 import { useDebounce } from "use-debounce";
 import { green } from "@material-ui/core/colors";
 import { parseOpenRPCDocument } from "@open-rpc/schema-utils-js";
 import useMonacoVimMode from "../hooks/useMonacoVimMode";
+import { addDiagnostics } from "@etclabscore/monaco-add-json-schema-diagnostics";
+import openrpcDocumentToJSONRPCSchemaResult from "../helpers/openrpcDocumentToJSONRPCSchemaResult";
 
 const errorToJSON = (error: JSONRPCError | any): any => {
   const isError = error instanceof Error;
@@ -55,7 +58,7 @@ interface IProps {
   request?: any;
   darkMode?: boolean;
   hideToggleTheme?: boolean;
-  openrpcMethodObject?: MethodObject;
+  openrpcDocument?: OpenrpcDocument;
   onToggleDarkMode?: () => void;
 }
 
@@ -64,6 +67,10 @@ const useClient = (url: string): [Client, JSONRPCError | undefined, Dispatch<JSO
   const [error, setError] = useState();
   useEffect(() => {
     let transport;
+    if (url === "" || url === undefined) {
+      setClient(undefined);
+      return;
+    }
     if (url.includes("http://") || url.includes("https://")) {
       transport = HTTPTransport;
     }
@@ -79,6 +86,7 @@ const useClient = (url: string): [Client, JSONRPCError | undefined, Dispatch<JSO
         console.log("onError", e); //tslint:disable-line
       });
     } catch (e) {
+      setClient(undefined);
       setError(e);
     }
   }, [url]);
@@ -118,7 +126,7 @@ const Inspector: React.FC<IProps> = (props) => {
   } = useTabs(
     [
       {
-        name: "New Tab",
+        name: props.request ? props.request.method : "New Tab",
         content: props.request || { ...emptyJSONRPC },
         url: props.url || "",
       },
@@ -127,7 +135,7 @@ const Inspector: React.FC<IProps> = (props) => {
   const [id, incrementId] = useCounter(0);
   const [responseEditor, setResponseEditor] = useState();
   useMonacoVimMode(responseEditor);
-  const [openrpcDocument, setOpenRpcDocument] = useState();
+  const [openrpcDocument, setOpenRpcDocument] = useState(props.openrpcDocument);
   const [json, setJson] = useState(props.request || {
     jsonrpc: "2.0",
     method: "",
@@ -142,16 +150,17 @@ const Inspector: React.FC<IProps> = (props) => {
   const [requestHistory, setRequestHistory]: [any[], Dispatch<any>] = useState([]);
   const [historySelectedIndex, setHistorySelectedIndex] = useState(0);
   useEffect(() => {
-    if (props.openrpcMethodObject) {
-      setJson({
-        jsonrpc: "2.0",
-        method: props.openrpcMethodObject.name,
-        params: json.params,
-        id: id.toString(),
-      });
-    }
+    setTabs([
+      ...tabs,
+      {
+        name: props.request ? props.request.method || "New Tab" : "New Tab",
+        content: props.request,
+        url: props.url,
+      },
+    ]);
+    setTabIndex(tabs.length);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [props.request]);
   useEffect(() => {
     if (json) {
       const jsonResult = {
@@ -164,6 +173,26 @@ const Inspector: React.FC<IProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
+  useEffect(() => {
+    if (!openrpcDocument) {
+      return;
+    }
+    if (!responseEditor) {
+      return;
+    }
+    if (!results) {
+      return;
+    }
+    const schema = openrpcDocumentToJSONRPCSchemaResult(openrpcDocument, json.method);
+    const modelName = "inspector-results";
+    const modelUriString = `inmemory://${modelName}-${Math.random()}.json`;
+    const modelUri = monaco.Uri.parse(modelUriString);
+    const model = monaco.editor.createModel(results ? JSON.stringify(results, null, 4) : "", "json", modelUri);
+    responseEditor.setModel(model);
+    addDiagnostics(modelUri.toString(), schema, monaco);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [results, responseEditor, openrpcDocument]);
+
   useEffect(() => {
     if (json) {
       setTabContent(tabIndex, json);
@@ -217,13 +246,13 @@ const Inspector: React.FC<IProps> = (props) => {
     }
   };
   const refreshOpenRpcDocument = async () => {
-    if (url) {
-      try {
-        const d = await client.request("rpc.discover", []);
-        const doc = await parseOpenRPCDocument(d);
-        setOpenRpcDocument(doc);
-        setTabOpenRPCDocument(tabIndex, doc);
-      } catch (e) {
+    try {
+      const d = await client.request("rpc.discover", []);
+      const doc = await parseOpenRPCDocument(d);
+      setOpenRpcDocument(doc);
+      setTabOpenRPCDocument(tabIndex, doc);
+    } catch (e) {
+      if (!props.openrpcDocument) {
         setOpenRpcDocument(undefined);
         setTabOpenRPCDocument(tabIndex, undefined);
       }
@@ -232,18 +261,23 @@ const Inspector: React.FC<IProps> = (props) => {
   useEffect(() => {
     refreshOpenRpcDocument();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
+  }, [client, tabIndex]);
 
   useEffect(() => {
     if (tabs[tabIndex]) {
       setJson(tabs[tabIndex].content);
       setUrl(tabs[tabIndex].url || "");
-      setOpenRpcDocument(tabs[tabIndex].openrpcDocument);
       setResults(tabs[tabIndex].results);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tabIndex]);
 
+  useEffect(() => {
+    setOpenRpcDocument(props.openrpcDocument);
+    setTabOpenRPCDocument(tabIndex, undefined);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.openrpcDocument]);
+
   const handleTabIndexChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     setTabIndex(newValue);
   };
@@ -358,6 +392,7 @@ const Inspector: React.FC<IProps> = (props) => {
                 {
                   name: "New Tab",
                   content: { ...emptyJSONRPC },
+                  openrpcDocument: undefined,
                   url: "",
                 },
               ],
@@ -388,9 +423,10 @@ const Inspector: React.FC<IProps> = (props) => {
               ?
               <Tooltip title={
                 <div style={{ textAlign: "center" }}>
-                  <Typography>Valid OpenRPC Endpoint.</Typography>
+                  <Typography>OpenRPC Document Detected</Typography>
                   <Typography variant="caption">
-                    The JSON-RPC endpoint responds to the rpc.discover method.
+                    A JSON-RPC endpoint may respond to the rpc.discover method
+                    or a provide a static document.
                     This adds features like auto completion to the inspector.
                     </Typography>
                 </div>
@@ -452,7 +488,6 @@ const Inspector: React.FC<IProps> = (props) => {
             }
           }}
           openrpcDocument={openrpcDocument}
-          openrpcMethodObject={props.openrpcMethodObject}
           value={JSON.stringify(json, null, 4)}
         />
         <>
@@ -484,7 +519,7 @@ const Inspector: React.FC<IProps> = (props) => {
               value={JSON.stringify(errorToJSON(results) || results, null, 4) || ""}
             />
             : <Grid container justify="center" style={{ paddingTop: "20px" }} direction="column" alignItems="center">
-              <Typography variant="body1" gutterBottom color="textSecondary" style={{paddingBottom: "15px"}}>
+              <Typography variant="body1" gutterBottom color="textSecondary" style={{ paddingBottom: "15px" }}>
                 Press the Play button to see the results here.
                 </Typography>
               <Typography variant="body1" color="textSecondary">
diff --git a/src/containers/JSONRPCRequestEditor.tsx b/src/containers/JSONRPCRequestEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import MonacoEditor from "@etclabscore/react-monaco-editor";
 import * as monaco from "monaco-editor";
-import { MethodObject, ContentDescriptorObject, OpenrpcDocument } from "@open-rpc/meta-schema";
+import { MethodObject, OpenrpcDocument } from "@open-rpc/meta-schema";
 import useWindowSize from "@rehooks/window-size";
 import { addDiagnostics } from "@etclabscore/monaco-add-json-schema-diagnostics";
 import openrpcDocumentToJSONRPCSchema from "../helpers/openrpcDocumentToJSONRPCSchema";
@@ -28,7 +28,7 @@ const JSONRPCRequestEditor: React.FC<IProps> = (props) => {
     if (!editor) {
       return;
     }
-    const modelName = props.openrpcMethodObject ? props.openrpcMethodObject.name : "inspector";
+    const modelName = (props.openrpcDocument && props.openrpcDocument.info) ? props.openrpcDocument.info.title : "inspector";
     const modelUriString = `inmemory://${modelName}-${Math.random()}.json`;
     const modelUri = monaco.Uri.parse(modelUriString);
     const model = monaco.editor.createModel(props.value || "", "json", modelUri);
@@ -38,7 +38,7 @@ const JSONRPCRequestEditor: React.FC<IProps> = (props) => {
       properties: {
         jsonrpc: {
           type: "string",
-          enum: ["2.0"],
+          const: "2.0",
         },
         id: {
           oneOf: [
@@ -55,44 +55,8 @@ const JSONRPCRequestEditor: React.FC<IProps> = (props) => {
         },
       },
     };
-    if (props.openrpcMethodObject) {
-      schema = {
-        ...schema,
-        additionalProperties: false,
-        properties: {
-          ...schema.properties,
-          method: {
-            type: "string",
-            enum: [props.openrpcMethodObject.name],
-          },
-          params: {
-            oneOf: [
-              {
-                type: "array",
-                ...schema.properties.params,
-                items: props.openrpcMethodObject.params.map((param: any) => {
-                  return {
-                    ...param.schema,
-                    additionalProperties: false,
-                  };
-                }),
-              },
-              {
-                type: "object",
-                properties: (props.openrpcMethodObject.params as ContentDescriptorObject[])
-                  .reduce((memo: any, param: ContentDescriptorObject) => {
-                    memo[param.name] = {
-                      ...param.schema,
-                      additionalProperties: false,
-                    };
-                    return memo;
-                  }, {}),
-              },
-            ],
-          },
-        },
-      };
-    } else if (props.openrpcDocument) {
+
+    if (props.openrpcDocument) {
       schema = openrpcDocumentToJSONRPCSchema(props.openrpcDocument);
     } else {
       schema = {
@@ -111,7 +75,7 @@ const JSONRPCRequestEditor: React.FC<IProps> = (props) => {
     addDiagnostics(modelUri.toString(), schema, monaco);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.openrpcDocument, props.openrpcMethodObject]);
+  }, [props.openrpcDocument]);
 
   function handleEditorDidMount(_: any, ed: any) {
     setEditor(ed);
diff --git a/src/helpers/openrpcDocumentToJSONRPCSchema.ts b/src/helpers/openrpcDocumentToJSONRPCSchema.ts
@@ -6,8 +6,10 @@ const schema: any = {
     jsonrpc: {
       type: "string",
       enum: ["2.0"],
+      description: "JSON-RPC version string",
     },
     id: {
+      description: "unique identifier for the JSON-RPC request",
       oneOf: [
         {
           type: "string",
@@ -35,6 +37,7 @@ const openrpcDocumentToJSONRPCSchema = (openrpcDocument: OpenrpcDocument) => {
       },
       method: {
         type: "string",
+        description: "Method Name",
         oneOf: openrpcDocument.methods.map((method) => {
           return {
             const: method.name,
@@ -72,7 +75,7 @@ const openrpcDocumentToJSONRPCSchema = (openrpcDocument: OpenrpcDocument) => {
                     return {
                       ...param.schema,
                       markdownDescription: param.description || param.summary,
-                      description: param.summary,
+                      description: param.description || param.summary,
                       additionalProperties: false,
                     };
                   }),
@@ -84,7 +87,7 @@ const openrpcDocumentToJSONRPCSchema = (openrpcDocument: OpenrpcDocument) => {
                       memo[param.name] = {
                         ...param.schema,
                         markdownDescription: param.description || param.summary,
-                        description: param.summary,
+                        description: param.description || param.summary,
                         additionalProperties: false,
                       };
                       return memo;
diff --git a/src/helpers/openrpcDocumentToJSONRPCSchemaResult.ts b/src/helpers/openrpcDocumentToJSONRPCSchemaResult.ts
@@ -0,0 +1,48 @@
+import { MethodObject, ContentDescriptorObject, OpenrpcDocument } from "@open-rpc/meta-schema";
+
+const schema: any = {
+  type: "object",
+  properties: {
+    jsonrpc: {
+      type: "string",
+      description: "JSON-RPC Version String",
+      const: "2.0",
+    },
+    id: {
+      oneOf: [
+        {
+          type: "string",
+        },
+        {
+          type: "number",
+        },
+      ],
+    },
+  },
+};
+
+const openrpcDocumentToJSONRPCSchemaResult = (openrpcDocument: OpenrpcDocument, methodName: string) => {
+  const methodObject: MethodObject | undefined = openrpcDocument.methods.find((method) => method.name === methodName);
+  let methodSchema: any;
+  if (methodObject !== undefined && methodObject.result !== undefined) {
+    methodSchema = (methodObject.result as ContentDescriptorObject).schema;
+  }
+  return {
+    type: "object",
+    properties: {
+      id: {
+        ...schema.properties.id,
+      },
+      jsonrpc: {
+        ...schema.properties.jsonrpc,
+      },
+      result: {
+        ...methodSchema,
+        markdownDescription: methodObject?.description || methodObject?.summary,
+        description: methodObject?.description || methodObject?.summary,
+      },
+    },
+  };
+};
+
+export default openrpcDocumentToJSONRPCSchemaResult;
