Replace spaces with underscores when setting the hash value and inserting the ID into the DOM. Escape the deep link path when querying for the DOM element on hash change.

Author: owenconti

package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "base64-js": "^1.2.0",
     "brace": "0.7.0",
+    "css.escape": "1.5.1",
     "deep-extend": "0.4.1",
     "expect": "1.20.2",
     "getbase": "^2.8.2",

src/core/components/operations.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { helpers } from "swagger-client"
-import { replaceSpacesWithUnderscores } from "core/utils"
+import { createDeepLinkPath } from "core/utils"
 const { opId } = helpers
 
 export default class Operations extends React.Component {
@@ -69,7 +69,7 @@ export default class Operations extends React.Component {
               let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
               let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
 
-              let isShownKey = ["operations-tag", replaceSpacesWithUnderscores(tag)]
+              let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
               let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
 
               return (
@@ -124,7 +124,7 @@ export default class Operations extends React.Component {
 
                         const operationId =
                         op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), path, method) || op.get("id")
-                        const isShownKey = ["operations", replaceSpacesWithUnderscores(tag), replaceSpacesWithUnderscores(operationId)]
+                        const isShownKey = ["operations", createDeepLinkPath(tag), createDeepLinkPath(operationId)]
 
                         const allowTryItOut = specSelectors.allowTryItOutFor(op.get("path"), op.get("method"))
                         const response = specSelectors.responseFor(op.get("path"), op.get("method"))

src/core/plugins/deep-linking/layout-wrap-actions.js

@@ -1,4 +1,5 @@
 import { setHash } from "./helpers"
+import { createDeepLinkPath } from "core/utils"
 
 export const show = (ori, { getConfigs }) => (...args) => {
   ori(...args)
@@ -19,12 +20,12 @@ export const show = (ori, { getConfigs }) => (...args) => {
 
       if(type === "operations") {
         let [, tag, operationId] = thing
-        setHash(`/${tag}/${operationId}`)
+        setHash(`/${createDeepLinkPath(tag)}/${createDeepLinkPath(operationId)}`)
       }
 
       if(type === "operations-tag") {
         let [, tag] = thing
-        setHash(`/${tag}`)
+        setHash(`/${createDeepLinkPath(tag)}`)
       }
     }
 

src/core/plugins/deep-linking/spec-wrap-actions.js

@@ -1,5 +1,5 @@
 import scrollTo from "scroll-to-element"
-import { replaceSpacesWithUnderscores } from "core/utils"
+import { escapeDeepLinkPath } from "core/utils"
 
 const SCROLL_OFFSET = -5
 let hasHashBeenParsed = false
@@ -28,21 +28,21 @@ export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args)
       hash = hash.slice(1)
     }
 
-    let [tag, operationId] = hash.split("/").map(v => replaceSpacesWithUnderscores(v))
+    let [tag, operationId] = hash.split("/")
 
     if(tag && operationId) {
       // Pre-expand and scroll to the operation
       layoutActions.show(["operations-tag", tag], true)
       layoutActions.show(["operations", tag, operationId], true)
 
-      scrollTo(`#operations-${tag}-${operationId}`, {
+      scrollTo(`#operations-${escapeDeepLinkPath(tag)}-${escapeDeepLinkPath(operationId)}`, {
         offset: SCROLL_OFFSET
       })
     } else if(tag) {
       // Pre-expand and scroll to the tag
       layoutActions.show(["operations-tag", tag], true)
 
-      scrollTo(`#operations-tag-${tag}`, {
+      scrollTo(`#operations-tag-${escapeDeepLinkPath(tag)}`, {
         offset: SCROLL_OFFSET
       })
     }

src/core/utils.js

@@ -8,6 +8,7 @@ import some from "lodash/some"
 import eq from "lodash/eq"
 import { memoizedSampleFromSchema, memoizedCreateXMLExample } from "core/plugins/samples/fn"
 import win from "./window"
+import cssEscape from "css.escape"
 
 const DEFAULT_REPONSE_KEY = "default"
 
@@ -651,4 +652,5 @@ export const shallowEqualKeys = (a,b, keys) => {
   })
 }
 
-export const replaceSpacesWithUnderscores = (str) => str.replace(/\s/, "_")
+export const createDeepLinkPath = (str) => str.replace(/\s/g, "_")
+export const escapeDeepLinkPath = (str) => cssEscape( createDeepLinkPath(str) )