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/plugins/oas3/components/index.js

@@ -2,6 +2,7 @@ import Callbacks from "./callbacks"
 import RequestBody from "./request-body"
 import OperationLink from "./operation-link.jsx"
 import Servers from "./servers"
+import ServersContainer from "./servers-container"
 import RequestBodyEditor from "./request-body-editor"
 import HttpAuth from "./http-auth"
 import OperationServers from "./operation-servers"
@@ -11,6 +12,7 @@ export default {
   HttpAuth,
   RequestBody,
   Servers,
+  ServersContainer,
   RequestBodyEditor,
   OperationServers,
   operationLink: OperationLink

src/core/plugins/oas3/components/servers-container.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class ServersContainer extends React.Component {
+
+  static propTypes = {
+    specSelectors: PropTypes.object.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render () {
+    const {specSelectors, oas3Selectors, oas3Actions, getComponent} = this.props
+
+    const servers = specSelectors.servers()
+
+    const Col = getComponent("Col")
+    const Servers = getComponent("Servers")
+
+    return (
+      <div>
+        {servers && servers.size ? (
+          <div className="global-server-container">
+            <Col className="servers wrapper" mobile={12}>
+              <span className="servers-title">Server</span>
+              <Servers
+                servers={servers}
+                currentServer={oas3Selectors.selectedServer()}
+                setSelectedServer={oas3Actions.setSelectedServer}
+                setServerVariableValue={oas3Actions.setServerVariableValue}
+                getServerVariable={oas3Selectors.serverVariableValue}
+                getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+              />
+            </Col>
+          </div>
+
+        ) : null}
+      </div>
+    )
+  }
+}