refactor: operations component (#7044)

src/core/components/operations.jsx

@@ -28,89 +28,78 @@ export default class Operations extends React.Component {
   render() {
     let {
       specSelectors,
+    } = this.props
+
+    const taggedOps = specSelectors.taggedOperations()
+
+    if(taggedOps.size === 0) {
+      return <h3> No operations defined in spec!</h3>
+    }
+
+    return (
+      <div>
+        { taggedOps.map(this.renderOperationTag).toArray() }
+        { taggedOps.size < 1 ? <h3> No operations defined in spec! </h3> : null }
+      </div>
+    )
+  }
+
+  renderOperationTag = (tagObj, tag) => {
+    const {
+      specSelectors,
       getComponent,
       oas3Selectors,
       layoutSelectors,
       layoutActions,
       getConfigs,
-      fn
     } = this.props
-
-    let taggedOps = specSelectors.taggedOperations()
-
     const OperationContainer = getComponent("OperationContainer", true)
     const OperationTag = getComponent("OperationTag")
-
-    let {
-      maxDisplayedTags,
-    } = getConfigs()
-
-    let filter = layoutSelectors.currentFilter()
-
-    if (filter) {
-      if (filter !== true && filter !== "true" && filter !== "false") {
-        taggedOps = fn.opsFilter(taggedOps, filter)
-      }
-    }
-
-    if (maxDisplayedTags && !isNaN(maxDisplayedTags) && maxDisplayedTags >= 0) {
-      taggedOps = taggedOps.slice(0, maxDisplayedTags)
-    }
-
+    const operations = tagObj.get("operations")
     return (
-        <div>
+      <OperationTag
+        key={"operation-" + tag}
+        tagObj={tagObj}
+        tag={tag}
+        oas3Selectors={oas3Selectors}
+        layoutSelectors={layoutSelectors}
+        layoutActions={layoutActions}
+        getConfigs={getConfigs}
+        getComponent={getComponent}
+        specUrl={specSelectors.url()}>
+        <div className="operation-tag-content">
           {
-            taggedOps.map( (tagObj, tag) => {
-              const operations = tagObj.get("operations")
+            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
+
+              if (validMethods.indexOf(method) === -1) {
+                return null
+              }
+
               return (
-                <OperationTag
-                  key={"operation-" + tag}
-                  tagObj={tagObj}
-                  tag={tag}
-                  oas3Selectors={oas3Selectors}
-                  layoutSelectors={layoutSelectors}
-                  layoutActions={layoutActions}
-                  getConfigs={getConfigs}
-                  getComponent={getComponent}
-                  specUrl={specSelectors.url()}>
-                  {
-                    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
-
-                      if(validMethods.indexOf(method) === -1) {
-                        return null
-                      }
-
-                      return <OperationContainer
-                                 key={`${path}-${method}`}
-                                 specPath={specPath}
-                                 op={op}
-                                 path={path}
-                                 method={method}
-                                 tag={tag}
-                                 />
-                    }).toArray()
-                  }
-
-
-                </OperationTag>
+                <OperationContainer
+                  key={`${path}-${method}`}
+                  specPath={specPath}
+                  op={op}
+                  path={path}
+                  method={method}
+                  tag={tag} />
               )
             }).toArray()
           }
-
-          { taggedOps.size < 1 ? <h3> No operations defined in spec! </h3> : null }
         </div>
+      </OperationTag>
     )
   }
 

src/core/plugins/layout/index.js

@@ -1,6 +1,7 @@
 import reducers from "./reducers"
 import * as actions from "./actions"
 import * as selectors from "./selectors"
+import * as wrapSelectors from "./spec-extensions/wrap-selector"
 
 export default function() {
   return {
@@ -9,6 +10,9 @@ export default function() {
         reducers,
         actions,
         selectors
+      },
+      spec: {
+        wrapSelectors
       }
     }
   }

src/core/plugins/layout/spec-extensions/wrap-selector.js

@@ -0,0 +1,22 @@
+
+export const taggedOperations = (oriSelector, system) => (state, ...args) => {
+  let taggedOps = oriSelector(state, ...args)
+
+  const { fn, layoutSelectors, getConfigs } = system.getSystem()
+  const configs = getConfigs()
+  const { maxDisplayedTags } = configs
+
+  // Filter, if requested
+  let filter = layoutSelectors.currentFilter()
+  if (filter) {
+    if (filter !== true && filter !== "true" && filter !== "false") {
+      taggedOps = fn.opsFilter(taggedOps, filter)
+    }
+  }
+  // Limit to [max] items, if specified
+  if (maxDisplayedTags && !isNaN(maxDisplayedTags) && maxDisplayedTags >= 0) {
+    taggedOps = taggedOps.slice(0, maxDisplayedTags)
+  }
+
+  return taggedOps
+}