Merge pull request #3980 from thompsongl/ft/deeplinking-link-component

ft/deeplinking-link-component

src/core/components/deep-link.jsx

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

src/core/components/operation.jsx

@@ -102,6 +102,7 @@ export default class Operation extends PureComponent {
     const Schemes = getComponent( "schemes" )
     const OperationServers = getComponent( "OperationServers" )
     const OperationExt = getComponent( "OperationExt" )
+    const DeepLink = getComponent( "DeepLink" )
 
     const { showExtensions } = getConfigs()
 
@@ -120,12 +121,11 @@ export default class Operation extends PureComponent {
               and pulled in with getComponent */}
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-              <a
+              <DeepLink
-                className="nostyle"
+                  enabled={isDeepLinkingEnabled}
-                onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                  isShown={isShown}
-                href={isDeepLinkingEnabled ? `#/${isShownKey.join("/")}` : null}>
+                  path={`${isShownKey.join("/")}`}
-                <span>{path}</span>
+                  text={path} />
-              </a>
                 <JumpToPath path={specPath} /> {/*TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
               </span>
 

src/core/components/operations.jsx

@@ -37,6 +37,7 @@ export default class Operations extends React.Component {
     const OperationContainer = getComponent("OperationContainer", true)
     const Collapse = getComponent("Collapse")
     const Markdown = getComponent("Markdown")
+    const DeepLink = getComponent("DeepLink")
 
     let {
       docExpansion,
@@ -79,12 +80,11 @@ export default class Operations extends React.Component {
                     onClick={() => layoutActions.show(isShownKey, !showTag)}
                     className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
                     id={isShownKey.join("-")}>
-                    <a
+                    <DeepLink
-                      className="nostyle"
+                        enabled={isDeepLinkingEnabled}
-                      onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                        isShown={showTag}
-                      href= {isDeepLinkingEnabled ? `#/${tag}` : null}>
+                        path={tag}
-                      <span>{tag}</span>
+                        text={tag} />
-                    </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 DeepLink from "core/components/deep-link"
 
 import Markdown from "core/components/providers/markdown"
 
@@ -121,7 +122,8 @@ export default function() {
       OperationExt,
       OperationExtRow,
       ParameterExt,
-      OperationContainer
+      OperationContainer,
+      DeepLink
     }
   }
 

test/components/operations.js

@@ -3,11 +3,13 @@ import React from "react"
 import expect, { createSpy } from "expect"
 import { render } from "enzyme"
 import { fromJS } from "immutable"
+import DeepLink from "components/deep-link"
 import Operations from "components/operations"
 import {Collapse} from "components/layout-utils"
 
 const components = {
   Collapse,
+  DeepLink,
   OperationContainer: ({ path, method }) => <span className="mocked-op" id={`${path}-${method}`} />
 }