Bugfixes and additional config

* Fixes #2
* Adds new optional config, `hierarchicalTagSeparator` (defaults to
  `/[:|]`

Author: kael-shipman

package-lock.json

@@ -101,12 +101,28 @@ SwaggerUI({
 
 ## Hierarchical Tags Plugin Options
 
-There are no additional options for this plugin. If the plugin is included on initialization, then
-it is enabled and will split tags on any colon (`:`) or pipe (`|`) character.
+* `hierarchicalTagSeparator` - (Optional, defaults to `/[|:]/`) The separator character(s) on which to split
+  hierarchical tags. Can be any string or regexp.
 
 
 ## Development
 
+
+### Live-Testing Development
+
+1. Clone this repo, cd into `packages/hierarchical-tags` and `npm install`
+2. Run `npm start` - this starts a simple development web server that serves the files under the `example` directory.
+
+From here, you should be able to go to `http://localhost:8080` in your browser and see the sample Pet Store API with
+hierarchical tags active. You can mess around with the `example/pet-store.json` and `example/index.html` files to try
+different inputs.
+
+When you change the source code, just run `npm run build` to rebuild the plugin file in the `example` folder and reload
+the page.
+
+
+### Publishing
+
 (This is more of a note-to-self.)
 
 To publish the github package, simply bump the version and run `npm publish`.

packages/hierarchical-tags/README.md

@@ -17,7 +17,14 @@
           ],
           plugins: [
             HierarchicalTagsPlugin
-          ]
+          ],
+
+          //
+          // Hierarchical tags config
+          //
+
+          // (Optional)
+          hierarchicalTagSeparator: '|',
         });
       }
     </script>

packages/hierarchical-tags/example/index.html

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui-plugin-hierarchical-tags",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Display endpoints grouped into a hierarchy based on delimited tag names",
   "author": "Kael Shipman<kael.shipman@gmail.com>",
   "homepage": "https://github.com/kael-shipman/swagger-ui-plugins/tree/hierarchical-tags",

packages/hierarchical-tags/example/plugin.js

@@ -53,7 +53,6 @@ export class HierarchicalOperationTag extends React.Component {
       tagObj,
       tag,
       childTags,
-      children,
       oas3Selectors,
       layoutSelectors,
       layoutActions,
@@ -86,8 +85,9 @@ export class HierarchicalOperationTag extends React.Component {
       ? buildUrl(rawTagExternalDocsUrl, specUrl, { selectedServer: oas3Selectors.selectedServer() })
       : rawTagExternalDocsUrl;
     const operations = tagObj ? tagObj.get("operations") : Im.fromJS({});
+    const canonicalTagName = tagObj && tagObj.get("canonicalTagName") || tag;
 
-    const isShownKey = ["operations-tag", tag]
+    const isShownKey = ["operations-tag", canonicalTagName]
     const showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
 
     return (
@@ -96,7 +96,7 @@ export class HierarchicalOperationTag extends React.Component {
           onClick={() => layoutActions.show(isShownKey, !showTag)}
           className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
           id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
-          data-tag={tag}
+          data-tag={canonicalTagName}
           data-is-open={showTag}
         >
           <DeepLink
@@ -188,7 +188,15 @@ export class HierarchicalOperationTag extends React.Component {
     } = this.props;
 
     return (
-      <div className="hierarchical-operation-tags" style={isRoot ? null : {margin: "0 0 0 2rem"}}>
+      <div className="hierarchical-operation-tags" style={
+        isRoot
+          ? null
+          : {
+            margin: "0 0 0 1.2rem",
+            paddingLeft: "0.8rem",
+            borderLeft: "1px solid #ccc"
+          }
+      }>
       {
         Object.entries(childTags).map(([ tag, data ]) => {
           return <HierarchicalOperationTag

packages/hierarchical-tags/package-lock.json

@@ -37,14 +37,18 @@ export class HierarchicalOperations extends React.Component {
     // Get a flat map of tags to their set of operations
     let taggedOps = specSelectors.taggedOperations()
 
-    // Get the necessary components
-    const OperationContainer = getComponent("OperationContainer", true)
+    // Get the component we need
     const HierarchicalOperationTag = getComponent("HierarchicalOperationTag")
 
     let {
       maxDisplayedTags,
+      hierarchicalTagSeparator,
     } = getConfigs()
 
+    if (!hierarchicalTagSeparator) {
+      hierarchicalTagSeparator = /[:|]/
+    }
+
     let filter = layoutSelectors.currentFilter()
 
     if (filter) {
@@ -61,16 +65,18 @@ export class HierarchicalOperations extends React.Component {
      * Each taggedOperation is a tag with information and then some operations. All we need
      * to do is restructure this so that it reflects a hierarchical list instead of a flat
      * one.
+     * 
+     * Existing structure:
      *
-     * typeof taggedOps = Map<TagName: string, TagObj>;
-     * TagObj = ?
+     * type TagObj = unknown;
+     * type TaggedOps = Map<TagName: string, TagObj>;
      *
      * Need to transform into:
      *
      * type HierarchicalOperationTag = {
      *   [TagName]: {
      *     data: TagObj & { canonicalTagName: string };
-     *     childrTags: Array<HierarchicalOperationTag>;
+     *     childTags: Array<HierarchicalOperationTag>;
      *   }
      * }
      *
@@ -80,10 +86,10 @@ export class HierarchicalOperations extends React.Component {
     taggedOps.map((data, tag) => {
       // Fill in canonicalTagName, if necessary
       if (!data.has("canonicalTagName")) {
-        data.set("canonicalTagName", tag);
+        data = data.set("canonicalTagName", tag.replace(hierarchicalTagSeparator, "_"));
       }
 
-      const parts = tag.split(/[:|]/);
+      const parts = tag.split(hierarchicalTagSeparator);
       let current = tagHierarchy;
       for (let i = 0; i < parts.length; i++) {
         const part = parts[i];
@@ -95,7 +101,7 @@ export class HierarchicalOperations extends React.Component {
           }
         }
 
-        //if point of insert reached add operations and tag information to structure
+        // if point of insert reached add operations and tag information to structure
         if (i === parts.length - 1) {
           current[part].data = data;
         }

packages/hierarchical-tags/package.json

@@ -41,6 +41,7 @@ import { HierarchicalOperationTag } from "./HierarchicalOperationTag";
         // Provide our classes raw for others
         HierarchicalOperations,
         HierarchicalOperationTag,
+        // Override operations so it uses our component instead of the original
         operations: HierarchicalOperations,
       },
     }