housekeeping: factor out components for easier BaseLayout reuse (#4604)

* improve: wrap schemes to encapsulate rendering logic
* improve: wrap filter to encapsulate rendering logic
* improve: wrap info section to encapsulate rendering logic
* improve: wrap servers plugin to encapsulate rendering logic
* improve: added tests for schemes-wrapper rendering logic
* improve: added tests for info-wrapper rendering logic, also do not render info if info is undefined
* improve: added tests for filter rendering logic
* improve: added tests for servers-wrapper rendering logic
* `InfoWrapper` -> `InfoContainer`
* add `containers` alias to Babel configuration
* `SchemesWrapper` -> `SchemesContainer`
* drop `container` from container file names
* `ServersWrapper` -> `ServersContainer`
* `Filter` -> `FilterContainer`
* follow `core/containers` pattern in BasePreset

src/core/containers/filter.jsx

@@ -0,0 +1,44 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class FilterContainer extends React.Component {
+
+  static propTypes = {
+    specSelectors: PropTypes.object.isRequired,
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  onFilterChange = (e) => {
+    const {target: {value}} = e
+    this.props.layoutActions.updateFilter(value)
+  }
+
+  render () {
+    const {specSelectors, layoutSelectors, getComponent} = this.props
+    const Col = getComponent("Col")
+
+    const isLoading = specSelectors.loadingStatus() === "loading"
+    const isFailed = specSelectors.loadingStatus() === "failed"
+    const filter = layoutSelectors.currentFilter()
+
+    const inputStyle = {}
+    if (isFailed) inputStyle.color = "red"
+    if (isLoading) inputStyle.color = "#aaa"
+
+    return (
+      <div>
+        {filter === null || filter === false ? null :
+          <div className="filter-container">
+            <Col className="filter wrapper" mobile={12}>
+              <input className="operation-filter-input" placeholder="Filter by tag" type="text"
+                     onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter}
+                     disabled={isLoading} style={inputStyle}/>
+            </Col>
+          </div>
+        }
+      </div>
+    )
+  }
+}

src/core/containers/info.jsx

@@ -0,0 +1,32 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class InfoContainer extends React.Component {
+
+  static propTypes = {
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render () {
+    const {specSelectors, getComponent} = this.props
+
+    const info = specSelectors.info()
+    const url = specSelectors.url()
+    const basePath = specSelectors.basePath()
+    const host = specSelectors.host()
+    const externalDocs = specSelectors.externalDocs()
+
+    const Info = getComponent("info")
+
+    return (
+      <div>
+        {info && info.count() ? (
+          <Info info={info} url={url} host={host} basePath={basePath} externalDocs={externalDocs}
+                getComponent={getComponent}/>
+        ) : null}
+      </div>
+    )
+  }
+}

src/core/containers/schemes.jsx

@@ -0,0 +1,43 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class SchemesContainer extends React.Component {
+
+  static propTypes = {
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render () {
+    const {specActions, specSelectors, getComponent} = this.props
+    const currentScheme = specSelectors.operationScheme()
+    const schemes = specSelectors.schemes()
+    const securityDefinitions = specSelectors.securityDefinitions()
+
+    const Col = getComponent("Col")
+    const AuthorizeBtn = getComponent("authorizeBtn", true)
+    const Schemes = getComponent("schemes")
+
+    return (
+      <div>
+        {schemes && schemes.size || securityDefinitions ? (
+          <div className="scheme-container">
+            <Col className="schemes wrapper" mobile={12}>
+              {schemes && schemes.size ? (
+                <Schemes
+                  currentScheme={currentScheme}
+                  schemes={schemes}
+                  specActions={specActions}
+                />
+              ) : null}
+              {securityDefinitions ? (
+                <AuthorizeBtn/>
+              ) : null}
+            </Col>
+          </div>
+        ) : null}
+      </div>
+    )
+  }
+}