add presentational component to allow for wrapping deeplinking links

src/core/components/deeplinking-link.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const DeepLinkingLink = ({ isDeepLinkingEnabled, path, text }) => {
+    return (
+        <a className="nostyle"
+          onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+          href={isDeepLinkingEnabled ? `#/${path}` : null}>
+          <span>{text}</span>
+        </a>
+    )
+}
+DeepLinkingLink.propTypes = {
+  isDeepLinkingEnabled: PropTypes.boolean,
+  path: PropTypes.string,
+  text: PropTypes.string
+}
+
+export default DeepLinkingLink

src/core/components/operation.jsx

@@ -100,6 +100,7 @@ export default class Operation extends PureComponent {
     const Schemes = getComponent( "schemes" )
     const OperationServers = getComponent( "OperationServers" )
     const OperationExt = getComponent( "OperationExt" )
+    const DeepLinkingLink = getComponent( "DeepLinkingLink" )
 
     const { showExtensions } = getConfigs()
 
@@ -116,12 +117,10 @@ export default class Operation extends PureComponent {
           <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} >
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-              <a
+              <DeepLinkingLink
-                className="nostyle"
+                  isDeepLinkingEnabled={isDeepLinkingEnabled}
-                onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                  path={isShownKey.join("/")}
-                href={isDeepLinkingEnabled ? `#/${isShownKey.join("/")}` : null}>
+                  text={path} />
-                <span>{path}</span>
-              </a>
                 <JumpToPath path={jumpToKey} />
               </span>
 

src/core/components/operations.jsx

@@ -30,6 +30,7 @@ export default class Operations extends React.Component {
     const OperationContainer = getComponent("OperationContainer", true)
     const Collapse = getComponent("Collapse")
     const Markdown = getComponent("Markdown")
+    const DeepLinkingLink = getComponent("DeepLinkingLink")
 
     let {
       docExpansion,
@@ -72,12 +73,10 @@ export default class Operations extends React.Component {
                     onClick={() => layoutActions.show(isShownKey, !showTag)}
                     className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
                     id={isShownKey.join("-")}>
-                    <a
+                    <DeepLinkingLink
-                      className="nostyle"
+                        isDeepLinkingEnabled={isDeepLinkingEnabled}
-                      onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                        path={tag}
-                      href= {isDeepLinkingEnabled ? `#/${tag}` : null}>
+                        text={tag} />
-                      <span>{tag}</span>
-                    </a>
                     { !tagDescription ? null :
                         <small>
                           <Markdown source={tagDescription} />

src/core/presets/base.js

@@ -61,6 +61,7 @@ import PrimitiveModel from "core/components/primitive-model"
 import Property from "core/components/property"
 import TryItOutButton from "core/components/try-it-out-button"
 import VersionStamp from "core/components/version-stamp"
+import DeepLinkingLink from "core/components/deeplinking-link"
 
 import Markdown from "core/components/providers/markdown"
 
@@ -121,7 +122,8 @@ export default function() {
       OperationExt,
       OperationExtRow,
       ParameterExt,
-      OperationContainer
+      OperationContainer,
+      DeepLinkingLink
     }
   }