Merge pull request #2917 from shockey/ft/base-layout

Base layout

dist/swagger-ui-bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;AAu/FA;AA6+FA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0dA;AAkoJA;AAyiCA;;;;;AAskCA;AA66IA;AA20FA;AAg3GA;AAonEA;AA+9CA;AA6/CA;AA+rCA;AA+3EA;AA68HA;;;;;;;;;;;;;;AA8tGA;AAyoIA;AAiuJA;AA8kHA;AAonGA;AAukEA;AA02DA;AAyxDA;AAw6BA;;;;;;AAs0EA;AA24FA;;;;;AAy3CA;AA2qFA;AAw2CA;AA2kCA;AAq/CA;AAwwEA;AA48FA;;;;;;;;;AA81BA;AA2zIA;AAi4DA;AA6tDA;;;;;;AAg3BA;AA8iHA;AAipGA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;AAu/FA;AA6+FA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0dA;AAkoJA;AAyiCA;;;;;AAskCA;AA66IA;AA20FA;AAg3GA;AAsnEA;AA+9CA;AA8/CA;AA+rCA;AA+3EA;AA68HA;;;;;;;;;;;;;;AA8tGA;AAyoIA;AAiuJA;AA8kHA;AAonGA;AAukEA;AA02DA;AAyxDA;AAw6BA;;;;;;AAs0EA;AA24FA;;;;;AAy3CA;AA2qFA;AAw2CA;AA2kCA;AAq/CA;AAwwEA;AA48FA;;;;;;;;;AA81BA;AA2zIA;AAi4DA;AAujDA;;;;;;AAsnCA;AA8iHA;AAipGA","sourceRoot":""}

dist/swagger-ui-standalone-preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA2SA;AAyiGA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA4OA;AAyiGA","sourceRoot":""}

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAuwCA;AAoyHA;AAmxHA;AAo8FA;AAooCA;AAghCA;AA0gCA;AAw4BA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAuwCA;AAoyHA;AAsxHA;AAo8FA;AAooCA;AAghCA;AA0gCA;AA06BA","sourceRoot":""}

src/core/components/layouts/base.jsx

@@ -0,0 +1,80 @@
+import React, { PropTypes } from "react"
+
+export default class BaseLayout extends React.Component {
+
+  static propTypes = {
+    errSelectors: PropTypes.object.isRequired,
+    errActions: PropTypes.object.isRequired,
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired
+  }
+
+  render() {
+    let { specSelectors, specActions, getComponent } = this.props
+
+    let info = specSelectors.info()
+    let url = specSelectors.url()
+    let basePath = specSelectors.basePath()
+    let host = specSelectors.host()
+    let securityDefinitions = specSelectors.securityDefinitions()
+    let externalDocs = specSelectors.externalDocs()
+    let schemes = specSelectors.schemes()
+
+    let Info = getComponent("info")
+    let Operations = getComponent("operations", true)
+    let Models = getComponent("models", true)
+    let AuthorizeBtn = getComponent("authorizeBtn", true)
+    let Row = getComponent("Row")
+    let Col = getComponent("Col")
+    let Errors = getComponent("errors", true)
+    const Schemes = getComponent("schemes")
+
+    const isSpecEmpty = !specSelectors.specStr()
+
+    if(isSpecEmpty) {
+      return <h4>No spec provided.</h4>
+    }
+
+    return (
+
+      <div className='swagger-ui'>
+          <div>
+            <Errors/>
+            <Row className="information-container">
+              <Col mobile={12}>
+                { info.count() ? (
+                  <Info info={ info } url={ url } host={ host } basePath={ basePath } externalDocs={externalDocs} getComponent={getComponent}/>
+                ) : null }
+              </Col>
+            </Row>
+            { schemes && schemes.size || securityDefinitions ? (
+              <div className="scheme-container">
+                <Col className="schemes wrapper" mobile={12}>
+                  { schemes && schemes.size ? (
+                    <Schemes schemes={ schemes } specActions={ specActions } />
+                  ) : null }
+                  { securityDefinitions ? (
+                    <AuthorizeBtn />
+                  ) : null }
+                </Col>
+              </div>
+            ) : null }
+
+            <Row>
+              <Col mobile={12} desktop={12} >
+                <Operations/>
+              </Col>
+            </Row>
+            <Row>
+              <Col mobile={12} desktop={12} >
+                <Models/>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      )
+  }
+}

src/core/index.js

@@ -13,7 +13,7 @@ module.exports = function SwaggerUI(opts) {
     dom_id: null,
     spec: {},
     url: "",
-    layout: "Layout",
+    layout: "BaseLayout",
     validatorUrl: "https://online.swagger.io/validator",
     configs: {
     },

src/core/presets/base.js

@@ -46,6 +46,8 @@ import Model from "core/components/model"
 import Models from "core/components/models"
 import TryItOutButton from "core/components/try-it-out-button"
 
+import BaseLayout from "core/components/layouts/base"
+
 import * as LayoutUtils from "core/components/layout-utils"
 import * as JsonSchemaComponents from "core/json-schema-components"
 
@@ -87,6 +89,7 @@ export default function() {
       model: Model,
       models: Models,
       TryItOutButton,
+      BaseLayout
     }
   }
 

src/standalone/layout.jsx

@@ -13,28 +13,16 @@ export default class StandaloneLayout extends React.Component {
   }
 
   render() {
-    let { specSelectors, specActions, getComponent } = this.props
+    let { getComponent, specSelectors } = this.props
 
-    let info = specSelectors.info()
-    let url = specSelectors.url()
-    let basePath = specSelectors.basePath()
-    let host = specSelectors.host()
-    let securityDefinitions = specSelectors.securityDefinitions()
-    let externalDocs = specSelectors.externalDocs()
-    let schemes = specSelectors.schemes()
-
-    let Info = getComponent("info")
-    let Operations = getComponent("operations", true)
-    let Models = getComponent("models", true)
-    let AuthorizeBtn = getComponent("authorizeBtn", true)
     let Container = getComponent("Container")
     let Row = getComponent("Row")
     let Col = getComponent("Col")
-    let Errors = getComponent("errors", true)
-    const Schemes = getComponent("schemes")
 
     const Topbar = getComponent("Topbar", true)
+    const BaseLayout = getComponent("BaseLayout", true)
     const OnlineValidatorBadge = getComponent("onlineValidatorBadge", true)
+
     const loadingStatus = specSelectors.loadingStatus()
 
     return (
@@ -56,46 +44,12 @@ export default class StandaloneLayout extends React.Component {
             <h4 className="title">Failed to load config.</h4>
           </div>
         }
-        { loadingStatus === "success" &&
+        { !loadingStatus || loadingStatus === "success" && <BaseLayout/> }
-          <div>
+        <Row>
-              <Errors/>
+          <Col>
-              <Row className="information-container">
+            <OnlineValidatorBadge />
-                <Col mobile={12}>
+          </Col>
-                  { info.count() ? (
+        </Row>
-                    <Info info={ info } url={ url } host={ host } basePath={ basePath } externalDocs={externalDocs} getComponent={getComponent}/>
-                  ) : null }
-                </Col>
-              </Row>
-              { schemes && schemes.size || securityDefinitions ? (
-              <div className="scheme-container">
-                <Col className="schemes wrapper" mobile={12}>
-                  { schemes && schemes.size ? (
-                    <Schemes schemes={ schemes } specActions={ specActions } />
-                  ) : null }
-                  { securityDefinitions ? (
-                    <AuthorizeBtn />
-                  ) : null }
-                </Col>
-              </div>
-            ) : null }
-
-              <Row>
-                <Col mobile={12} desktop={12} >
-                  <Operations/>
-                </Col>
-              </Row>
-              <Row>
-                <Col mobile={12} desktop={12} >
-                  <Models/>
-                </Col>
-              </Row>
-          </div> }
-
-          <Row>
-            <Col>
-              <OnlineValidatorBadge />
-            </Col>
-          </Row>
       </Container>
     )
   }