Merge pull request #38 from open-rpc/fix/add-tags

fix: add tags

Author: shanejonas

package-lock.json

@@ -14,6 +14,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@open-rpc/meta-schema": "^1.1.0",
+    "hash-color-material": "^1.1.3",
     "json-schema": "^0.2.3",
     "lodash": "^4.17.11",
     "react": "^16.8.4",

package.json

@@ -124,3 +124,76 @@ it("renders schema methods result", () => {
   expect(div.innerHTML.includes("id")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+it("renders schema methods tags", () => {
+  const div = document.createElement("div");
+  const schema = {
+    methods: [
+      {
+        name: "foobar",
+        result: {
+          schema: {
+            properties: {
+              id: {
+                format: "int64",
+                type: "integer",
+              },
+              name: {
+                type: "string",
+              },
+              tag: {
+                type: "string",
+              },
+            },
+            required: [
+              "id",
+            ],
+          },
+        },
+        tags: [
+          {
+            name: "tag3",
+          },
+          {
+            name: "tag4",
+          }
+        ]
+      },
+      {
+        result: {
+          schema: {
+            properties: {
+              id: {
+                format: "int64",
+                type: "integer",
+              },
+              name: {
+                type: "string",
+              },
+              tag: {
+                type: "string",
+              },
+            },
+            required: [
+              "id",
+            ],
+          },
+        },
+        tags: [
+          {
+            name: "salad",
+          },
+          {
+            name: "mytag",
+          },
+        ],
+      },
+    ],
+  };
+  ReactDOM.render(<Methods schema={schema as any}/>, div);
+  expect(div.innerHTML.includes("tag3")).toBe(true);
+  expect(div.innerHTML.includes("tag4")).toBe(true);
+  expect(div.innerHTML.includes("salad")).toBe(true);
+  expect(div.innerHTML.includes("mytag")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/Methods/Methods.test.tsx

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { withStyles, Theme, WithStyles } from "@material-ui/core/styles";
 import ExpansionPanel from "@material-ui/core/ExpansionPanel";
 import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import _ from "lodash";
 import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
 import Typography from "@material-ui/core/Typography";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@@ -12,6 +13,8 @@ import ExamplePairings from "../ExamplePairings/ExamplePairings";
 import Errors from "../Errors/Errors";
 import { types } from "@open-rpc/meta-schema";
 import Links from "../Links/Links";
+import { Chip } from "@material-ui/core";
+import Tags from "../Tags/Tags";
 
 const styles = (theme: Theme) => ({
   heading: {
@@ -54,6 +57,12 @@ class Methods extends Component<IProps> {
               <Typography key={method.name} className={classes.heading}>{method.name}</Typography>
               <Typography key={method.summary} className={classes.secondaryHeading}>{method.summary}</Typography>
             </ExpansionPanelSummary>
+
+            {method.tags && method.tags.length > 0 &&
+              <ExpansionPanelDetails key="tags">
+                <Tags tags={method.tags as any} />
+              </ExpansionPanelDetails>
+            }
             {method.description &&
               <ExpansionPanelDetails key="description">
                 <ReactMarkdown source={method.description} />

src/Methods/Methods.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Tags from "./Tags";
+
+it("renders empty with empty tags", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<Tags tags={[]} />, div);
+  expect(div.innerHTML).toBe("");
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders schema tags", () => {
+  const div = document.createElement("div");
+  const tags = [
+    {
+      name: "salad",
+    },
+    {
+      name: "mytag",
+    }
+  ];
+  ReactDOM.render(<Tags tags={tags} />, div);
+  expect(div.innerHTML.includes("salad")).toBe(true);
+  expect(div.innerHTML.includes("mytag")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/Tags/Tags.test.tsx

@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import { types } from "@open-rpc/meta-schema";
+import { Chip } from "@material-ui/core";
+const hashColor = require("hash-color-material");
+
+interface IProps {
+  tags?: types.TagObject[];
+}
+
+export default class Tags extends Component<IProps> {
+  public render() {
+    const { tags }: { tags?: any} = this.props;
+    if (!tags || tags.length === 0) {
+      return null;
+    }
+    return (
+      <>
+        {
+          tags.map((tag: any, k: number) => {
+            return (
+              <Chip
+                key={tag.name}
+                label={tag.name}
+                style={{ backgroundColor: hashColor.getColorFromString(tag.name, false) }}
+              />
+            );
+          })
+        }
+      </>
+    );
+  }
+}

src/Tags/Tags.tsx

@@ -4,6 +4,7 @@
   ],
   "rules": {
     "ordered-imports": false,
+    "no-var-requires": false,
     "no-console": [true, "log"],
     "indent": [true, "spaces", 2]
   }