fix: repair schemes servers rendering (via #4913)

* create AuthorizeBtnContainer

* remove Servers and AuthorizeBtn from Schemes' concern

* add AuthorizeBtnContainer to base

* strengthen OAS3 definitionsToAuthorize

* drop obsolete tests

* linter fixes

Author: shockey

src/core/components/auth/authorize-btn.jsx

@@ -3,26 +3,21 @@ import PropTypes from "prop-types"
 
 export default class AuthorizeBtn extends React.Component {
   static propTypes = {
-    className: PropTypes.string
-  }
-
-  onClick =() => {
-    let { authActions, authSelectors } = this.props
-    let definitions = authSelectors.definitionsToAuthorize()
-
-    authActions.showDefinitions(definitions)
+    onClick: PropTypes.func,
+    isAuthorized: PropTypes.bool,
+    showPopup: PropTypes.bool,
+    getComponent: PropTypes.func.isRequired
   }
 
   render() {
-    let { authSelectors, getComponent } = this.props
+    let { isAuthorized, showPopup, onClick, getComponent } = this.props
+
     //must be moved out of button component
     const AuthorizationPopup = getComponent("authorizationPopup", true)
-    let showPopup = !!authSelectors.shownDefinitions()
-    let isAuthorized = !!authSelectors.authorized().size
 
     return (
       <div className="auth-wrapper">
-        <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={ this.onClick }>
+        <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={onClick}>
           <span>Authorize</span>
           <svg width="20" height="20">
             <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
@@ -32,12 +27,4 @@ export default class AuthorizeBtn extends React.Component {
       </div>
     )
   }
-
-
-  static propTypes = {
-    getComponent: PropTypes.func.isRequired,
-    authSelectors: PropTypes.object.isRequired,
-    errActions: PropTypes.object.isRequired,
-    authActions: PropTypes.object.isRequired,
-  }
 }

src/core/components/layouts/base.jsx

@@ -26,6 +26,7 @@ export default class BaseLayout extends React.Component {
     let Errors = getComponent("errors", true)
 
     const SchemesContainer = getComponent("SchemesContainer", true)
+    const AuthorizeBtnContainer = getComponent("AuthorizeBtnContainer", true)
     const FilterContainer = getComponent("FilterContainer", true)
     let isSwagger2 = specSelectors.isSwagger2()
     let isOAS3 = specSelectors.isOAS3()
@@ -60,10 +61,15 @@ export default class BaseLayout extends React.Component {
               </Col>
             </Row>
 
-            <SchemesContainer>
-              <ServersContainer/>
-            </SchemesContainer>
-
+            <div>
+              <div className="scheme-container">
+                <Col className="schemes wrapper" mobile={12}>
+                  <ServersContainer />
+                  <SchemesContainer />
+                  <AuthorizeBtnContainer />
+                </Col>
+              </div>
+            </div>
 
             <FilterContainer/>
 

src/core/containers/authorize-btn.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthorizeBtnContainer extends React.Component {
+
+  static propTypes = {
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    authActions: PropTypes.object.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { authActions, authSelectors, specSelectors, getComponent} = this.props
+    
+    const securityDefinitions = specSelectors.securityDefinitions()
+    const authorizableDefinitions = authSelectors.definitionsToAuthorize()
+
+    const AuthorizeBtn = getComponent("authorizeBtn")
+
+    return securityDefinitions ? (
+      <AuthorizeBtn
+        onClick={() => authActions.showDefinitions(authorizableDefinitions)}
+        isAuthorized={!!authSelectors.authorized().size}
+        showPopup={!!authSelectors.shownDefinitions()}
+        getComponent={getComponent}
+      />
+    ) : null
+  }
+}

src/core/containers/schemes.jsx

@@ -6,40 +6,25 @@ export default class SchemesContainer extends React.Component {
   static propTypes = {
     specActions: PropTypes.object.isRequired,
     specSelectors: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    children: PropTypes.any
+    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}>
-              {this.props.children}
-              {schemes && schemes.size ? (
-                <Schemes
-                  currentScheme={currentScheme}
-                  schemes={schemes}
-                  specActions={specActions}
-                />
-              ) : null}
-              {securityDefinitions ? (
-                <AuthorizeBtn/>
-              ) : null}
-            </Col>
-          </div>
-        ) : null}
-      </div>
-    )
+    const schemesArePresent = schemes && schemes.size
+
+    return schemesArePresent ? (
+        <Schemes
+          currentScheme={currentScheme}
+          schemes={schemes}
+          specActions={specActions}
+        />
+      ) : null
   }
 }

src/core/plugins/oas3/auth-extensions/wrap-selectors.js

@@ -26,6 +26,10 @@ export const definitionsToAuthorize = onlyOAS3(createSelector(
       // that look like Swagger2 definitions.
       let list = List()
 
+      if(!definitions) {
+        return list
+      }
+
       definitions.entrySeq().forEach( ([ defName, definition ]) => {
         const type = definition.get("type")
 

src/core/presets/base.js

@@ -18,6 +18,7 @@ import OperationContainer from "core/containers/OperationContainer"
 import App from "core/components/app"
 import AuthorizationPopup from "core/components/auth/authorization-popup"
 import AuthorizeBtn from "core/components/auth/authorize-btn"
+import AuthorizeBtnContainer from "core/containers/authorize-btn"
 import AuthorizeOperationBtn from "core/components/auth/authorize-operation-btn"
 import Auths from "core/components/auth/auths"
 import AuthItem from "core/components/auth/auth-item"
@@ -91,6 +92,7 @@ export default function() {
       App,
       authorizationPopup: AuthorizationPopup,
       authorizeBtn: AuthorizeBtn,
+      AuthorizeBtnContainer,
       authorizeOperationBtn: AuthorizeOperationBtn,
       auths: Auths,
       AuthItem: AuthItem,

test/components/schemes-wrapper.js

@@ -88,32 +88,4 @@ describe("<SchemesContainer/>", function(){
     const renderedSchemes = wrapper.find(Schemes)
     expect(renderedSchemes.length).toEqual(0)
   })
-
-  it("renders AuthorizeBtn inside SchemesContainer if security definition is provided", function(){
-
-    // Given
-    let props = {...mockedProps}
-    props.specSelectors = {...mockedProps.specSelectors}
-    props.specSelectors.securityDefinitions = function () {return fromJS(twoSecurityDefinitions)}
-
-    // When
-    let wrapper = render(<SchemesContainer {...props}/>)
-
-    // Then
-    const renderedAuthorizeBtn = wrapper.find("span.mocked-button")
-    expect(renderedAuthorizeBtn.length).toEqual(1)
-  })
-
-  it("does not render AuthorizeBtn if security definition is not provided", function(){
-
-    // Given
-    let props = {...mockedProps}
-
-    // When
-    let wrapper = render(<SchemesContainer {...props}/>)
-
-    // Then
-    const renderedAuthorizeBtn = wrapper.find("span.mocked-button")
-    expect(renderedAuthorizeBtn.length).toEqual(0)
-  })
 })