Merge pull request #17 from open-rpc/fix/add-server-variables

fix: add server variables

Author: shanejonas

jest.config.js

@@ -6,6 +6,5 @@ module.exports = {
   "rootDir": "./src",
   "testEnvironment": "jsdom",
   "testPathIgnorePatterns": ["./build"],
-  "preset": "ts-jest",
-  "files": ["src/**/*.tsx"]
+  "preset": "ts-jest"
 }

src/Documentation.tsx

@@ -23,7 +23,7 @@ export default class Documentation extends React.Component<IProps> {
     return (
       <>
           <Info schema={schema} />
-          <Servers servers={schema.servers} />
+          <Servers servers={schema.servers} reactJsonOptions={reactJsonOptions}/>
           <Methods schema={schema} uiSchema={uiSchema} reactJsonOptions={reactJsonOptions}/>
           <ContentDescriptors schema={schema} uiSchema={uiSchema}></ContentDescriptors>
       </>

src/Links/Links.tsx

@@ -47,7 +47,7 @@ class Links extends Component<IProps> {
         <TableRow>
           <TableCell colSpan={6}>
             {links.map((link, i) => (
-              <div style={{ width: "100%" }}>
+              <div style={{ width: "100%" }} key={i}>
                 <ExpansionPanel
                   style={{ width: "100%" }} defaultExpanded={uiSchema && uiSchema.links["ui:defaultExpanded"]} key={i}>
                   <ExpansionPanelSummary
@@ -63,7 +63,8 @@ class Links extends Component<IProps> {
                     {link.params && <ReactJson src={link.params} {...reactJsonOptions} />}
                     {link.server &&
                       <Typography variant="h6" gutterBottom className={classes.paramsMargin}>Server</Typography>}
-                    {link.server && <Servers servers={[link.server]} noTitle={true}/>}
+                    {link.server && <Servers
+                      servers={[link.server]} noTitle={true} reactJsonOptions={reactJsonOptions} />}
                   </ExpansionPanelDetails>
                 </ExpansionPanel>
               </div>

src/Servers/Servers.test.tsx

@@ -37,10 +37,48 @@ it("renders schema servers", () => {
       name: "Pet Store",
       url: "http://petstore.openrpc.io/api",
     },
-  ]
+  ];
   ReactDOM.render(<Servers servers={servers} />, div);
   expect(div.innerHTML.includes("Pet Store")).toBe(true);
-  expect(div.innerHTML.includes('href="http://petstore.openrpc.io/api"')).toBe(true);
+  expect(div.innerHTML.includes("http://petstore.openrpc.io/api")).toBe(true);
   expect(div.innerHTML.includes("foobar")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+it("renders schema servers with variables", () => {
+  const div = document.createElement("div");
+  const servers = [
+    {
+      description: "foobar",
+      name: "Pet Store",
+      url: "http://{username}.open-rpc.org:{port}/{basePath}/{exampleName}",
+      variables: {
+        basePath: {
+          default: "jsonrpc",
+        },
+        exampleName: {
+          default: "petstore",
+        },
+        port: {
+          default: "443",
+          enum: [
+            "8545",
+            "443",
+          ],
+        },
+        username: {
+          default: "demo",
+          description: "this is applied to the url as the subdomain",
+        },
+      },
+    },
+  ];
+  ReactDOM.render(<Servers servers={servers} />, div);
+  expect(div.innerHTML.includes("open-rpc.org")).toBe(true);
+  expect(div.innerHTML.includes("petstore")).toBe(true);
+  expect(div.innerHTML.includes("jsonrpc")).toBe(true);
+  expect(div.innerHTML.includes("443")).toBe(true);
+  expect(div.innerHTML.includes("8545")).toBe(true);
+  expect(div.innerHTML.includes("demo")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/Servers/Servers.tsx

@@ -1,51 +1,77 @@
 import React, { Component } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import Link from "@material-ui/core/Link";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
+import { withStyles, WithStyles, Theme } from "@material-ui/core/styles";
 import TableCell from "@material-ui/core/TableCell";
-import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
-import { Typography } from "@material-ui/core";
+import ReactMarkdown from "react-markdown";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { Typography, ExpansionPanelSummary, ExpansionPanelDetails, ExpansionPanel } from "@material-ui/core";
 import { types } from "@open-rpc/meta-schema";
+import ReactJson from "react-json-view";
+import ExpansionTable from "../ExpansionTable/ExpansionTable";
 
-interface IProps {
+const styles = (theme: Theme) => ({
+  heading: {
+    flexBasis: "33.33%",
+    flexShrink: 0,
+    fontSize: theme.typography.pxToRem(15),
+  },
+  paramsMargin: {
+    marginTop: theme.spacing.unit,
+  },
+  secondaryHeading: {
+    alignSelf: "end",
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.pxToRem(15),
+  },
+});
+
+interface IProps extends WithStyles<typeof styles> {
   servers?: types.ServerObject[];
+  uiSchema?: any;
+  reactJsonOptions?: any;
   noTitle?: boolean;
 }
 
 class Servers extends Component<IProps> {
   public render() {
-    const { servers, noTitle } = this.props;
+    const { servers, noTitle, reactJsonOptions, uiSchema, classes } = this.props;
     if (!servers || servers.length === 0) {
       return null;
     }
     return (
       <>
         {noTitle ? null : <Typography variant="h2">Servers</Typography>}
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell align="right">Url</TableCell>
-              <TableCell align="right">Description</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {servers.map((server) => (
-              <TableRow key={server.url}>
-                <TableCell component="th" scope="row">
-                  {server.name}
-                </TableCell>
-                <TableCell align="right"><Link href={server.url}>{server.url}</Link></TableCell>
-                <TableCell align="right">{server.description}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <ExpansionTable headers={["Name", "Url", "Summary"]}>
+          <TableRow>
+            <TableCell colSpan={6}>
+              {servers.map((server, i) => (
+                <div style={{ width: "100%" }} key={i}>
+                  <ExpansionPanel
+                    style={{ width: "100%" }}
+                    defaultExpanded={uiSchema && uiSchema.servers["ui:defaultExpanded"]} key={i}>
+                    <ExpansionPanelSummary
+                      style={{ justifyContent: "space-between" }} key="servers-header" expandIcon={<ExpandMoreIcon />}>
+                      <div style={{ display: "flex", justifyContent: "space-between", width: "100%", height: "100%" }}>
+                        <Typography className={classes.heading}>{server.name}</Typography>
+                        <Typography className={classes.secondaryHeading}>{server.url}</Typography>
+                        <Typography className={classes.secondaryHeading}>{server.summary}</Typography>
+                      </div>
+                    </ExpansionPanelSummary>
+                    <ExpansionPanelDetails style={{ display: "block" }} key="servers-body">
+                      {server.description && <ReactMarkdown source={server.description} />}
+                      {server.variables &&
+                        <Typography variant="h6" gutterBottom className={classes.paramsMargin}>Variables</Typography>}
+                      {server.variables && <ReactJson src={server.variables} {...reactJsonOptions} />}
+                    </ExpansionPanelDetails>
+                  </ExpansionPanel>
+                </div>
+              ))}
+            </TableCell>
+          </TableRow>
+        </ExpansionTable>
       </>
     );
   }
 }
 
-export default Servers;
+export default withStyles(styles)(Servers);