improvement: refactor Operation component structure (via #4686)

...into OperationSummary, OperationSummaryPath, OperationSummaryMethod

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .idea
+.vscode
 .deps_check
 .DS_Store
 .nyc_output

src/core/components/operation-summary-method.jsx

@@ -0,0 +1,25 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { Iterable } from "immutable"
+
+export default class OperationSummaryMethod extends PureComponent {
+
+  static propTypes = {
+    operationProps: PropTypes.instanceOf(Iterable).isRequired,
+    method: PropTypes.string.isRequired,
+  }
+
+  static defaultProps = {
+    operationProps: null,
+  }
+  render() {
+
+    let {
+      method,
+    } = this.props
+
+    return (
+      <span className="opblock-summary-method">{method.toUpperCase()}</span>
+    )
+  }
+}

src/core/components/operation-summary-path.jsx

@@ -0,0 +1,48 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { Iterable } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class OperationSummaryPath extends PureComponent{
+
+  static propTypes = {
+    specPath: ImPropTypes.list.isRequired,
+    operationProps: PropTypes.instanceOf(Iterable).isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render(){
+    let {
+      getComponent,
+      operationProps,
+      specPath,
+    } = this.props
+
+
+    let {
+      deprecated,
+      isShown,
+      path,
+      tag,
+      operationId,
+      isDeepLinkingEnabled,
+    } = operationProps.toJS()
+
+    let isShownKey = ["operations", tag, operationId]
+
+    const JumpToPath = getComponent("JumpToPath", true)
+    const DeepLink = getComponent( "DeepLink" )
+
+    return(
+      <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
+              <DeepLink
+                  enabled={isDeepLinkingEnabled}
+                  isShown={isShown}
+                  path={`${isShownKey.join("/")}`}
+                  text={path} />
+                <JumpToPath path={specPath} />{/* TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
+              </span>
+
+    )
+  }
+}

src/core/components/operation-summary.jsx

@@ -0,0 +1,85 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { Iterable, List } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
+
+
+export default class OperationSummary extends PureComponent {
+
+  static propTypes = {
+    specPath: ImPropTypes.list.isRequired,
+    operationProps: PropTypes.instanceOf(Iterable).isRequired,
+    toggleShown: PropTypes.func.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
+    authActions: PropTypes.object,
+    authSelectors: PropTypes.object,
+  }
+
+  static defaultProps = {
+    operationProps: null,
+    specPath: List(),
+    summary: ""
+  }
+
+  render() {
+
+    let {
+      toggleShown,
+      getComponent,
+      authActions,
+      authSelectors,
+      operationProps,
+      specPath,
+    } = this.props
+
+    let {
+      summary,
+      isAuthorized,
+      method,
+      op,
+      showSummary,
+      operationId,
+      originalOperationId,
+      displayOperationId,
+    } = operationProps.toJS()
+
+    let {
+      summary: resolvedSummary,
+    } = op
+
+    let security = operationProps.get("security")
+
+    const AuthorizeOperationBtn = getComponent("authorizeOperationBtn")
+    const OperationSummaryMethod = getComponent("OperationSummaryMethod")
+    const OperationSummaryPath = getComponent("OperationSummaryPath")
+
+    return (
+
+      <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} >
+        <OperationSummaryMethod method={method} />
+        <OperationSummaryPath getComponent={getComponent} operationProps={operationProps} specPath={specPath} />
+
+        {!showSummary ? null :
+          <div className="opblock-summary-description">
+            {resolvedSummary || summary}
+          </div>
+        }
+
+        {displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null}
+
+        {
+          (!security || !security.count()) ? null :
+            <AuthorizeOperationBtn
+              isAuthorized={isAuthorized}
+              onClick={() => {
+                const applicableDefinitions = authSelectors.definitionsForRequirements(security)
+                authActions.showDefinitions(applicableDefinitions)
+              }}
+            />
+        }
+      </div>
+    )
+
+  }
+}

src/core/components/operation.jsx

@@ -62,34 +62,26 @@ export default class Operation extends PureComponent {
     let operationProps = this.props.operation
 
     let {
-      summary,
       deprecated,
       isShown,
-      isAuthorized,
       path,
       method,
       op,
       tag,
-      showSummary,
       operationId,
-      originalOperationId,
       allowTryItOut,
-      displayOperationId,
       displayRequestDuration,
-      isDeepLinkingEnabled,
       tryItOutEnabled,
       executeInProgress
     } = operationProps.toJS()
 
     let {
-      summary: resolvedSummary,
       description,
       externalDocs,
       schemes
     } = op
 
     let operation = operationProps.getIn(["op"])
-    let security = operationProps.get("security")
     let responses = operation.get("responses")
     let produces = operation.get("produces")
     let parameters = getList(operation, ["parameters"])
@@ -101,14 +93,12 @@ export default class Operation extends PureComponent {
     const Parameters = getComponent( "parameters" )
     const Execute = getComponent( "execute" )
     const Clear = getComponent( "clear" )
-    const AuthorizeOperationBtn = getComponent( "authorizeOperationBtn" )
-    const JumpToPath = getComponent("JumpToPath", true)
     const Collapse = getComponent( "Collapse" )
     const Markdown = getComponent( "Markdown" )
     const Schemes = getComponent( "schemes" )
     const OperationServers = getComponent( "OperationServers" )
     const OperationExt = getComponent( "OperationExt" )
-    const DeepLink = getComponent( "DeepLink" )
+    const OperationSummary = getComponent( "OperationSummary" )
 
     const { showExtensions } = getConfigs()
 
@@ -122,39 +112,7 @@ export default class Operation extends PureComponent {
 
     return (
         <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
-          <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} >
-            {/*TODO: convert this into a component, that can be wrapped
-              and pulled in with getComponent */}
-              <span className="opblock-summary-method">{method.toUpperCase()}</span>
-              <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-              <DeepLink
-                  enabled={isDeepLinkingEnabled}
-                  isShown={isShown}
-                  path={`${isShownKey.join("/")}`}
-                  text={path} />
-                <JumpToPath path={specPath} /> {/*TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
-              </span>
-
-            { !showSummary ? null :
-                <div className="opblock-summary-description">
-                  { resolvedSummary || summary }
-                </div>
-            }
-
-            { displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null } 
-
-            {
-              (!security || !security.count()) ? null :
-                <AuthorizeOperationBtn
-                  isAuthorized={ isAuthorized }
-                  onClick={() => {
-                    const applicableDefinitions = authSelectors.definitionsForRequirements(security)
-                    authActions.showDefinitions(applicableDefinitions)
-                  }}
-                />
-            }
-          </div>
-
+        <OperationSummary operationProps={operationProps} toggleShown={toggleShown} getComponent={getComponent} authActions={authActions} authSelectors={authSelectors} specPath={specPath} />
           <Collapse isOpened={isShown}>
             <div className="opblock-body">
               { (operation && operation.size) || operation === null ? null :

src/core/presets/base.js

@@ -33,6 +33,9 @@ import OnlineValidatorBadge from "core/components/online-validator-badge"
 import Operations from "core/components/operations"
 import OperationTag from "core/components/operation-tag"
 import Operation from "core/components/operation"
+import OperationSummary from "core/components/operation-summary"
+import OperationSummaryMethod from "core/components/operation-summary-method"
+import OperationSummaryPath from "core/components/operation-summary-path"
 import OperationExt from "core/components/operation-extensions"
 import OperationExtRow from "core/components/operation-extension-row"
 import HighlightCode from "core/components/highlight-code"
@@ -102,6 +105,9 @@ export default function() {
       onlineValidatorBadge: OnlineValidatorBadge,
       operations: Operations,
       operation: Operation,
+      OperationSummary,
+      OperationSummaryMethod,
+      OperationSummaryPath,
       highlightCode: HighlightCode,
       responses: Responses,
       response: Response,