improvement: hide Servers/Schemes/Authorize section when it's empty (via #4950)

src/core/components/layouts/base.jsx

@@ -22,9 +22,9 @@ export default class BaseLayout extends React.Component {
     let Models = getComponent("Models", true)
     let Row = getComponent("Row")
     let Col = getComponent("Col")
-    let ServersContainer = getComponent("ServersContainer", true)
     let Errors = getComponent("errors", true)
 
+    const ServersContainer = getComponent("ServersContainer", true)
     const SchemesContainer = getComponent("SchemesContainer", true)
     const AuthorizeBtnContainer = getComponent("AuthorizeBtnContainer", true)
     const FilterContainer = getComponent("FilterContainer", true)
@@ -49,6 +49,13 @@ export default class BaseLayout extends React.Component {
       </div>
     }
 
+    const servers = specSelectors.servers()
+    const schemes = specSelectors.schemes()
+
+    const hasServers = servers && servers.size
+    const hasSchemes = schemes && schemes.size
+    const hasSecurityDefinitions = !!specSelectors.securityDefinitions()
+
     return (
 
       <div className='swagger-ui'>
@@ -61,15 +68,15 @@ export default class BaseLayout extends React.Component {
               </Col>
             </Row>
 
-            <div>
+            {hasServers || hasSchemes || hasSecurityDefinitions ? (
               <div className="scheme-container">
                 <Col className="schemes wrapper" mobile={12}>
-                  <ServersContainer />
-                  <SchemesContainer />
-                  <AuthorizeBtnContainer />
+                  {hasServers ? (<ServersContainer />) : null}
+                  {hasSchemes ? (<SchemesContainer />) : null}
+                  {hasSecurityDefinitions ? (<AuthorizeBtnContainer />) : null}
                 </Col>
               </div>
-            </div>
+            ) : null}
 
             <FilterContainer/>