feature: swagger-ui-react module (via #5207)

* swagger-ui-react alpha.0

* alpha.1

* alpha.2

* alpha.3

* begin updating README

* alpha.4

* WIP: `displayOperationId` support

* move loading error readouts to BaseLayout

* add `url` prop

* export React component as default

* add interceptor support

* modify docs markup

* add `onComplete` prop

* add `spec` prop

* Update README.md

* alpha.6

* remove independent manifest; build releasable exclusively from template

* ensure dist is present; drop config field in manifest

* drop alpha field

this script is now able to release to npm!

* remove unused selector references

* Update README.md

src/core/components/layouts/base.jsx

@@ -13,7 +13,7 @@ export default class BaseLayout extends React.Component {
   }
 
   render() {
-    let {specSelectors, getComponent} = this.props
+    let {errSelectors, specSelectors, getComponent} = this.props
 
     let SvgAssets = getComponent("SvgAssets")
     let InfoContainer = getComponent("InfoContainer", true)
@@ -33,15 +33,43 @@ export default class BaseLayout extends React.Component {
 
     const isSpecEmpty = !specSelectors.specStr()
 
-    if(isSpecEmpty) {
-      let loadingMessage
-      let isLoading = specSelectors.loadingStatus() === "loading"
-      if(isLoading) {
-        loadingMessage = <div className="loading"></div>
-      } else {
-        loadingMessage = <h4>No API definition provided.</h4>
-      }
+    const loadingStatus = specSelectors.loadingStatus()
 
+    let loadingMessage = null
+  
+    if(loadingStatus === "loading") {
+      loadingMessage = <div className="info">
+        <div className="loading-container">
+          <div className="loading"></div>
+        </div>
+      </div>
+    }
+
+    if(loadingStatus === "failed") {
+      loadingMessage = <div className="info">
+        <div className="loading-container">
+          <h4 className="title">Failed to load API definition.</h4>
+          <Errors />
+        </div>
+      </div>
+    }
+
+    if (loadingStatus === "failedConfig") {
+      const lastErr = errSelectors.lastError()
+      const lastErrMsg = lastErr ? lastErr.get("message") : ""
+      loadingMessage = <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
+        <div className="loading-container">
+          <h4 className="title">Failed to load remote configuration.</h4>
+          <p>{lastErrMsg}</p>
+        </div>
+      </div>
+    }
+
+    if(!loadingMessage && isSpecEmpty) {
+      loadingMessage = <h4>No API definition provided.</h4>
+    }
+
+    if(loadingMessage) {
       return <div className="swagger-ui">
         <div className="loading-container">
           {loadingMessage}