improve: nest Servers within Schemes container (via #4911)

* improve: nest Servers within Schemes container

* linter fixes

Author: shockey

src/core/components/layouts/base.jsx

@@ -60,9 +60,10 @@ export default class BaseLayout extends React.Component {
               </Col>
             </Row>
 
-            <SchemesContainer/>
+            <SchemesContainer>
+              <ServersContainer/>
+            </SchemesContainer>
 
-            <ServersContainer/>
 
             <FilterContainer/>
 

src/core/containers/schemes.jsx

@@ -7,6 +7,7 @@ export default class SchemesContainer extends React.Component {
     specActions: PropTypes.object.isRequired,
     specSelectors: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    children: PropTypes.any
   }
 
   render () {
@@ -24,6 +25,7 @@ export default class SchemesContainer extends React.Component {
         {schemes && schemes.size || securityDefinitions ? (
           <div className="scheme-container">
             <Col className="schemes wrapper" mobile={12}>
+              {this.props.children}
               {schemes && schemes.size ? (
                 <Schemes
                   currentScheme={currentScheme}

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

@@ -15,28 +15,19 @@ export default class ServersContainer extends React.Component {
 
     const servers = specSelectors.servers()
 
-    const Col = getComponent("Col")
     const Servers = getComponent("Servers")
 
-    return (
+    return servers && servers.size ? (
       <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>
-    )
+        <span className="servers-title">Servers</span>
+        <Servers
+          servers={servers}
+          currentServer={oas3Selectors.selectedServer()}
+          setSelectedServer={oas3Actions.setSelectedServer}
+          setServerVariableValue={oas3Actions.setServerVariableValue}
+          getServerVariable={oas3Selectors.serverVariableValue}
+          getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+        />
+      </div> ) : null
   }
-}
+}

src/style/_layout.scss

@@ -667,7 +667,7 @@
     .schemes
     {
         display: flex;
-        align-items: center;
+        align-items: flex-end;
 
          > label
         {

src/style/_servers.scss

@@ -53,19 +53,9 @@
     }
 }
 
-
-.global-server-container
-{
-    margin: 0 0 20px 0;
-    padding: 30px 0;
-
-    background: $server-container-background-color;
-    box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15);
-
-    .servers-title {
-      line-height: 2em;
-      font-weight: bold;
-    }
+.servers-title {
+    font-size: 12px;
+    font-weight: bold;
 }
 
 .operation-servers {