Refactor deep-linking, in the process extracted out OperationsTag (#4349)
* add configsActions.loaded hook * add OperationTag to hold Operations * fix test for operations * refactor deep-linking plugin
This commit is contained in:
Josh Ponelat
108
src/core/components/operation-tag.jsx
Normal file
108
src/core/components/operation-tag.jsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import ImPropTypes from "react-immutable-proptypes"
|
||||
import Im from "immutable"
|
||||
import { createDeepLinkPath, sanitizeUrl } from "core/utils"
|
||||
|
||||
export default class OperationTag extends React.Component {
|
||||
|
||||
static defaultProps = {
|
||||
tagObj: Im.fromJS({}),
|
||||
tag: "",
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
tagObj: ImPropTypes.map.isRequired,
|
||||
tag: PropTypes.string.isRequired,
|
||||
|
||||
layoutSelectors: PropTypes.object.isRequired,
|
||||
layoutActions: PropTypes.object.isRequired,
|
||||
|
||||
getConfigs: PropTypes.func.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
|
||||
children: PropTypes.element,
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
tagObj,
|
||||
tag,
|
||||
children,
|
||||
|
||||
layoutSelectors,
|
||||
layoutActions,
|
||||
getConfigs,
|
||||
getComponent,
|
||||
} = this.props
|
||||
|
||||
let {
|
||||
docExpansion,
|
||||
deepLinking,
|
||||
} = getConfigs()
|
||||
|
||||
const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
|
||||
|
||||
const Collapse = getComponent("Collapse")
|
||||
const Markdown = getComponent("Markdown")
|
||||
const DeepLink = getComponent("DeepLink")
|
||||
|
||||
let tagDescription = tagObj.getIn(["tagDetails", "description"], null)
|
||||
let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
|
||||
let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
|
||||
|
||||
let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
|
||||
let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
|
||||
|
||||
return (
|
||||
<div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} >
|
||||
|
||||
<h4
|
||||
onClick={() => layoutActions.show(isShownKey, !showTag)}
|
||||
className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
|
||||
id={isShownKey.join("-")}>
|
||||
<DeepLink
|
||||
enabled={isDeepLinkingEnabled}
|
||||
isShown={showTag}
|
||||
path={tag}
|
||||
text={tag} />
|
||||
{ !tagDescription ? <small></small> :
|
||||
<small>
|
||||
<Markdown source={tagDescription} />
|
||||
</small>
|
||||
}
|
||||
|
||||
<div>
|
||||
{ !tagExternalDocsDescription ? null :
|
||||
<small>
|
||||
{ tagExternalDocsDescription }
|
||||
{ tagExternalDocsUrl ? ": " : null }
|
||||
{ tagExternalDocsUrl ?
|
||||
<a
|
||||
href={sanitizeUrl(tagExternalDocsUrl)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
target={"_blank"}
|
||||
>{tagExternalDocsUrl}</a> : null
|
||||
}
|
||||
</small>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="expand-operation"
|
||||
title={showTag ? "Collapse operation": "Expand operation"}
|
||||
onClick={() => layoutActions.show(isShownKey, !showTag)}>
|
||||
|
||||
<svg className="arrow" width="20" height="20">
|
||||
<use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
|
||||
</svg>
|
||||
</button>
|
||||
</h4>
|
||||
|
||||
<Collapse isOpened={showTag}>
|
||||
{children}
|
||||
</Collapse>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import Im from "immutable"
|
||||
import { createDeepLinkPath, sanitizeUrl } from "core/utils"
|
||||
|
||||
const SWAGGER2_OPERATION_METHODS = [
|
||||
"get", "put", "post", "delete", "options", "head", "patch"
|
||||
@@ -38,18 +37,12 @@ export default class Operations extends React.Component {
|
||||
let taggedOps = specSelectors.taggedOperations()
|
||||
|
||||
const OperationContainer = getComponent("OperationContainer", true)
|
||||
const Collapse = getComponent("Collapse")
|
||||
const Markdown = getComponent("Markdown")
|
||||
const DeepLink = getComponent("DeepLink")
|
||||
const OperationTag = getComponent("OperationTag")
|
||||
|
||||
let {
|
||||
docExpansion,
|
||||
maxDisplayedTags,
|
||||
deepLinking
|
||||
} = getConfigs()
|
||||
|
||||
const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
|
||||
|
||||
let filter = layoutSelectors.currentFilter()
|
||||
|
||||
if (filter) {
|
||||
@@ -66,88 +59,49 @@ export default class Operations extends React.Component {
|
||||
<div>
|
||||
{
|
||||
taggedOps.map( (tagObj, tag) => {
|
||||
let operations = tagObj.get("operations")
|
||||
let tagDescription = tagObj.getIn(["tagDetails", "description"], null)
|
||||
let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
|
||||
let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
|
||||
|
||||
let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
|
||||
let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
|
||||
|
||||
const operations = tagObj.get("operations")
|
||||
return (
|
||||
<div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} key={"operation-" + tag}>
|
||||
|
||||
<h4
|
||||
onClick={() => layoutActions.show(isShownKey, !showTag)}
|
||||
className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
|
||||
id={isShownKey.join("-")}>
|
||||
<DeepLink
|
||||
enabled={isDeepLinkingEnabled}
|
||||
isShown={showTag}
|
||||
path={tag}
|
||||
text={tag} />
|
||||
{ !tagDescription ? <small></small> :
|
||||
<small>
|
||||
<Markdown source={tagDescription} />
|
||||
</small>
|
||||
}
|
||||
|
||||
<div>
|
||||
{ !tagExternalDocsDescription ? null :
|
||||
<small>
|
||||
{ tagExternalDocsDescription }
|
||||
{ tagExternalDocsUrl ? ": " : null }
|
||||
{ tagExternalDocsUrl ?
|
||||
<a
|
||||
href={sanitizeUrl(tagExternalDocsUrl)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
target={"_blank"}
|
||||
>{tagExternalDocsUrl}</a> : null
|
||||
}
|
||||
</small>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button className="expand-operation" title={showTag ? "Collapse operation": "Expand operation"} onClick={() => layoutActions.show(isShownKey, !showTag)}>
|
||||
<svg className="arrow" width="20" height="20">
|
||||
<use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
|
||||
</svg>
|
||||
</button>
|
||||
</h4>
|
||||
|
||||
<Collapse isOpened={showTag}>
|
||||
{
|
||||
operations.map( op => {
|
||||
const path = op.get("path")
|
||||
const method = op.get("method")
|
||||
const specPath = Im.List(["paths", path, method])
|
||||
<OperationTag
|
||||
key={"operation-" + tag}
|
||||
tagObj={tagObj}
|
||||
tag={tag}
|
||||
layoutSelectors={layoutSelectors}
|
||||
layoutActions={layoutActions}
|
||||
getConfigs={getConfigs}
|
||||
getComponent={getComponent}>
|
||||
{
|
||||
operations.map( op => {
|
||||
const path = op.get("path")
|
||||
const method = op.get("method")
|
||||
const specPath = Im.List(["paths", path, method])
|
||||
|
||||
|
||||
// FIXME: (someday) this logic should probably be in a selector,
|
||||
// but doing so would require further opening up
|
||||
// selectors to the plugin system, to allow for dynamic
|
||||
// overriding of low-level selectors that other selectors
|
||||
// rely on. --KS, 12/17
|
||||
const validMethods = specSelectors.isOAS3() ?
|
||||
OAS3_OPERATION_METHODS : SWAGGER2_OPERATION_METHODS
|
||||
// FIXME: (someday) this logic should probably be in a selector,
|
||||
// but doing so would require further opening up
|
||||
// selectors to the plugin system, to allow for dynamic
|
||||
// overriding of low-level selectors that other selectors
|
||||
// rely on. --KS, 12/17
|
||||
const validMethods = specSelectors.isOAS3() ?
|
||||
OAS3_OPERATION_METHODS : SWAGGER2_OPERATION_METHODS
|
||||
|
||||
if(validMethods.indexOf(method) === -1) {
|
||||
return null
|
||||
}
|
||||
if(validMethods.indexOf(method) === -1) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <OperationContainer
|
||||
key={`${path}-${method}`}
|
||||
specPath={specPath}
|
||||
op={op}
|
||||
path={path}
|
||||
method={method}
|
||||
tag={tag}
|
||||
/>
|
||||
}).toArray()
|
||||
}
|
||||
</Collapse>
|
||||
</div>
|
||||
)
|
||||
return <OperationContainer
|
||||
key={`${path}-${method}`}
|
||||
specPath={specPath}
|
||||
op={op}
|
||||
path={path}
|
||||
method={method}
|
||||
tag={tag}
|
||||
/>
|
||||
}).toArray()
|
||||
}
|
||||
|
||||
|
||||
</OperationTag>
|
||||
)
|
||||
}).toArray()
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user