refactor: operations component (#7044)

src/core/components/operations.jsx

@@ -28,39 +28,33 @@ 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)
-    }
-
-    return (
-        <div>
-          {
-            taggedOps.map( (tagObj, tag) => {
     const operations = tagObj.get("operations")
     return (
       <OperationTag
@@ -73,6 +67,7 @@ export default class Operations extends React.Component {
         getConfigs={getConfigs}
         getComponent={getComponent}
         specUrl={specSelectors.url()}>
+        <div className="operation-tag-content">
           {
             operations.map(op => {
               const path = op.get("path")
@@ -92,25 +87,19 @@ export default class Operations extends React.Component {
                 return null
               }
 
-                      return <OperationContainer
+              return (
+                <OperationContainer
                   key={`${path}-${method}`}
                   specPath={specPath}
                   op={op}
                   path={path}
                   method={method}
-                                 tag={tag}
+                  tag={tag} />
-                                 />
-                    }).toArray()
-                  }
-
-
-                </OperationTag>
               )
             }).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
+}