Merge branch 'ft/performance' into bug/3904-operation-not-updating

src/core/components/operation.jsx

@@ -1,32 +1,22 @@
 import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
 import { getList } from "core/utils"
-import * as CustomPropTypes from "core/proptypes"
 import { sanitizeUrl } from "core/utils"
-
-//import "less/opblock"
+import { Iterable } from "immutable"
 
 export default class Operation extends PureComponent {
   static propTypes = {
-    path: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
-    operation: PropTypes.object.isRequired,
-    showSummary: PropTypes.bool,
-    isShown: PropTypes.bool.isRequired,
+    operation: PropTypes.instanceOf(Iterable).isRequired,
+    response: PropTypes.instanceOf(Iterable),
+    request: PropTypes.instanceOf(Iterable),
 
-    tagKey: PropTypes.string,
-    operationKey: PropTypes.string,
-    jumpToKey: CustomPropTypes.arrayOrString.isRequired,
-
-    allowTryItOut: PropTypes.bool,
-
-    displayOperationId: PropTypes.bool,
-    displayRequestDuration: PropTypes.bool,
-
-    response: PropTypes.object,
-    request: PropTypes.object,
+    toggleShown: PropTypes.func.isRequired,
+    onTryoutClick: PropTypes.func.isRequired,
+    onCancelClick: PropTypes.func.isRequired,
+    onExecute: PropTypes.func.isRequired,
 
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     authActions: PropTypes.object,
     authSelectors: PropTypes.object,
     specActions: PropTypes.object.isRequired,
@@ -34,87 +24,64 @@ export default class Operation extends PureComponent {
     oas3Actions: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
-    fn: PropTypes.object.isRequired,
-    getConfigs: PropTypes.func.isRequired
+    fn: PropTypes.object.isRequired
   }
 
   static defaultProps = {
-    showSummary: true,
+    operation: null,
     response: null,
-    allowTryItOut: true,
-    displayOperationId: false,
-    displayRequestDuration: false
-  }
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      tryItOutEnabled: false
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if(nextProps.response !== this.props.response) {
-      this.setState({ executeInProgress: false })
-    }
-  }
-
-  toggleShown =() => {
-    let { layoutActions, tagKey, operationKey, isShown } = this.props
-    const isShownKey = ["operations", tagKey, operationKey]
-
-    layoutActions.show(isShownKey, !isShown)
-  }
-
-  onTryoutClick =() => {
-    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
-  }
-
-  onCancelClick =() => {
-    let { specActions, path, method } = this.props
-    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
-    specActions.clearValidateParams([path, method])
-  }
-
-  onExecute = () => {
-    this.setState({ executeInProgress: true })
+    request: null
   }
 
   render() {
     let {
-      operationKey,
-      tagKey,
-      isShown,
-      jumpToKey,
-      path,
-      method,
-      operation,
-      showSummary,
       response,
       request,
-      allowTryItOut,
-      displayOperationId,
-      displayRequestDuration,
+      toggleShown,
+      onTryoutClick,
+      onCancelClick,
+      onExecute,
       fn,
       getComponent,
+      getConfigs,
       specActions,
       specSelectors,
       authActions,
       authSelectors,
-      getConfigs,
       oas3Actions
     } = this.props
+    let operationProps = this.props.operation
 
-    let summary = operation.get("summary")
-    let description = operation.get("description")
-    let deprecated = operation.get("deprecated")
-    let externalDocs = operation.get("externalDocs")
+    let {
+      isShown,
+      isShownKey,
+      jumpToKey,
+      path,
+      method,
+      op,
+      showSummary,
+      operationId,
+      allowTryItOut,
+      displayOperationId,
+      displayRequestDuration,
+      isDeepLinkingEnabled,
+      tryItOutEnabled,
+      executeInProgress
+    } = operationProps.toJS()
+
+    let {
+      summary,
+      description,
+      deprecated,
+      externalDocs,
+      schemes
+    } = op.operation
+
+    let operation = operationProps.getIn(["op", "operation"])
     let responses = operation.get("responses")
-    let security = operation.get("security") || specSelectors.security()
     let produces = operation.get("produces")
-    let schemes = operation.get("schemes")
+    let security = operation.get("security") || specSelectors.security()
     let parameters = getList(operation, ["parameters"])
-    let operationId = operation.get("__originalOperationId")
     let operationScheme = specSelectors.operationScheme(path, method)
 
     const Responses = getComponent("responses")
@@ -127,22 +94,17 @@ export default class Operation extends PureComponent {
     const Markdown = getComponent( "Markdown" )
     const Schemes = getComponent( "schemes" )
 
-    const { deepLinking } = getConfigs()
-
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
-
     // Merge in Live Response
     if(responses && response && response.size > 0) {
       let notDocumented = !responses.get(String(response.get("status")))
       response = response.set("notDocumented", notDocumented)
     }
 
-    let { tryItOutEnabled } = this.state
     let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )
 
     return (
-        <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={`operations-${tagKey}-${operationKey}`} >
-          <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
+        <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} >
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
               <a
@@ -200,8 +162,8 @@ export default class Operation extends PureComponent {
                 parameters={parameters}
                 operation={operation}
                 onChangeKey={onChangeKey}
-                onTryoutClick = { this.onTryoutClick }
-                onCancelClick = { this.onCancelClick }
+                onTryoutClick = { onTryoutClick }
+                onCancelClick = { onCancelClick }
                 tryItOutEnabled = { tryItOutEnabled }
                 allowTryItOut={allowTryItOut}
 
@@ -226,25 +188,23 @@ export default class Operation extends PureComponent {
               { !tryItOutEnabled || !allowTryItOut ? null :
 
                   <Execute
-                    getComponent={getComponent}
                     operation={ operation }
                     specActions={ specActions }
                     specSelectors={ specSelectors }
                     path={ path }
                     method={ method }
-                    onExecute={ this.onExecute } />
+                    onExecute={ onExecute } />
               }
 
               { (!tryItOutEnabled || !response || !allowTryItOut) ? null :
                   <Clear
-                    onClick={ this.onClearClick }
                     specActions={ specActions }
                     path={ path }
                     method={ method }/>
               }
             </div>
 
-            {this.state.executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}
+            {executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}
 
               { !responses ? null :
                   <Responses
@@ -258,7 +218,8 @@ export default class Operation extends PureComponent {
                     specActions={ specActions }
                     produces={ produces }
                     producesValue={ operation.get("produces_value") }
-                    pathMethod={ [path, method] }
+                    path={ path }
+                    method={ method }
                     displayRequestDuration={ displayRequestDuration }
                     fn={fn} />
               }