feat(rendering): gate rendering based on valid version identifiers (#4614)

* create VersionPragmaFilter component

* use VersionPragmaFilter in BaseLayout

* tighten version idenitifier constraints

* handle case where user specifies a valid `swagger` and `openapi` field

* add traceable class names for each message

* add tests

* linter fixes!

* UNRELATED CHANGE: remove travis short-circuit

* add bypass switch to VersionPragmaFilter

src/core/components/layouts/base.jsx

@@ -40,6 +40,7 @@ export default class BaseLayout extends React.Component {
     let servers = specSelectors.servers()
 
     let SvgAssets = getComponent("SvgAssets")
+    let VersionPragmaFilter = getComponent("VersionPragmaFilter")
     let Info = getComponent("info")
     let Operations = getComponent("operations", true)
     let Models = getComponent("Models", true)
@@ -49,6 +50,9 @@ export default class BaseLayout extends React.Component {
     let Servers = getComponent("Servers")
     let Errors = getComponent("errors", true)
 
+    let isSwagger2 = specSelectors.isSwagger2()
+    let isOAS3 = specSelectors.isOAS3()
+
     let isLoading = specSelectors.loadingStatus() === "loading"
     let isFailed = specSelectors.loadingStatus() === "failed"
     let filter = layoutSelectors.currentFilter()
@@ -80,7 +84,7 @@ export default class BaseLayout extends React.Component {
 
       <div className='swagger-ui'>
           <SvgAssets />
-          <div>
+          <VersionPragmaFilter isSwagger2={isSwagger2} isOAS3={isOAS3} alsoShow={<Errors/>}>
             <Errors/>
             <Row className="information-container">
               <Col mobile={12}>
@@ -142,7 +146,7 @@ export default class BaseLayout extends React.Component {
                 <Models/>
               </Col>
             </Row>
-          </div>
+          </VersionPragmaFilter>
         </div>
       )
   }

src/core/components/version-pragma-filter.jsx

@@ -0,0 +1,54 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class VersionPragmaFilter extends React.PureComponent {
+  static propTypes = {
+    isSwagger2: PropTypes.bool.isRequired,
+    isOAS3: PropTypes.bool.isRequired,
+    bypass: PropTypes.bool,
+    alsoShow: PropTypes.element,
+    children: PropTypes.any,
+  }
+
+  static defaultProps = {
+    alsoShow: null,
+    children: null,
+    bypass: false,
+  }
+
+  render() {
+    const { bypass, isSwagger2, isOAS3, alsoShow } = this.props
+
+    if(bypass) {
+      return <div>{ this.props.children }</div>
+    }
+
+    if(isSwagger2 && isOAS3) {
+      return <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--ambiguous">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p><code>swagger</code> and <code>openapi</code> fields cannot be present in the same Swagger or OpenAPI definition. Please remove one of the fields.</p>
+            <p>Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.0</code>).</p>
+          </div>
+        </div>
+      </div>
+    }
+
+    if(!isSwagger2 && !isOAS3) {
+      return <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--missing">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p>The provided definition does not specify a valid version field.</p>
+            <p>Please indicate a valid Swagger or OpenAPI version field. Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.0</code>).</p>
+          </div>
+        </div>
+      </div>
+    }
+
+    return <div>{ this.props.children }</div>
+  }
+}