feat: add OpenAPIVersion component

src/core/components/info.jsx

@@ -89,6 +89,7 @@ class Info extends React.Component {
     const Markdown = getComponent("Markdown", true)
     const Link = getComponent("Link")
     const VersionStamp = getComponent("VersionStamp")
+    const OpenAPIVersion = getComponent("OpenAPIVersion")
     const InfoUrl = getComponent("InfoUrl")
     const InfoBasePath = getComponent("InfoBasePath")
     const License = getComponent("License")
@@ -99,7 +100,8 @@ class Info extends React.Component {
         <hgroup className="main">
           <h2 className="title">
             {title}
-            {version && <VersionStamp version={version}></VersionStamp>}
+            {version && <VersionStamp version={version} />}
+            <OpenAPIVersion oasVersion="2.0" />
           </h2>
           {host || basePath ? (
             <InfoBasePath host={host} basePath={basePath} />

src/core/components/openapi-version.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+
+const OpenAPIVersion = ({ oasVersion }) => (
+  <small className="version-stamp">
+    <pre className="version">OAS {oasVersion}</pre>
+  </small>
+)
+
+OpenAPIVersion.propTypes = {
+  oasVersion: PropTypes.string.isRequired
+}
+
+export default OpenAPIVersion

src/core/containers/info.jsx

@@ -19,14 +19,13 @@ export default class InfoContainer extends React.Component {
     const host = specSelectors.host()
     const externalDocs = specSelectors.externalDocs()
     const selectedServer = oas3Selectors.selectedServer()
-
     const Info = getComponent("info")
 
     return (
       <div>
         {info && info.count() ? (
           <Info info={info} url={url} host={host} basePath={basePath} externalDocs={externalDocs}
-                getComponent={getComponent} selectedServer={selectedServer} />
+                getComponent={getComponent} selectedServer={selectedServer}/>
         ) : null}
       </div>
     )

src/core/plugins/oas3/wrap-components/index.js

@@ -1,15 +1,15 @@
 import Markdown from "./markdown"
 import AuthItem from "./auth-item"
-import VersionStamp from "./version-stamp"
 import OnlineValidatorBadge from "./online-validator-badge"
 import Model from "./model"
 import JsonSchema_string from "./json-schema-string"
+import OpenAPIVersion from "./openapi-version"
 
 export default {
   Markdown,
   AuthItem,
+  OpenAPIVersion,
   JsonSchema_string,
-  VersionStamp,
   model: Model,
   onlineValidatorBadge: OnlineValidatorBadge,
 }

src/core/plugins/oas3/wrap-components/openapi-version.jsx

@@ -0,0 +1,7 @@
+import React from "react"
+import { OAS30ComponentWrapFactory } from "../helpers"
+
+export default OAS30ComponentWrapFactory((props) => {
+  const { Ori } = props
+  return <Ori oasVersion="3.0" />
+})

src/core/plugins/oas31/components/info.jsx

@@ -23,6 +23,7 @@ const Info = ({ getComponent, specSelectors }) => {
   const Markdown = getComponent("Markdown", true)
   const Link = getComponent("Link")
   const VersionStamp = getComponent("VersionStamp")
+  const OpenAPIVersion = getComponent("OpenAPIVersion")
   const InfoUrl = getComponent("InfoUrl")
   const InfoBasePath = getComponent("InfoBasePath")
   const License = getComponent("License", true)
@@ -34,7 +35,8 @@ const Info = ({ getComponent, specSelectors }) => {
       <hgroup className="main">
         <h2 className="title">
           {title}
-          {version && <VersionStamp version={version}></VersionStamp>}
+          {version && <VersionStamp version={version} />}
+          <OpenAPIVersion oasVersion="3.1" />
         </h2>
 
         {(host || basePath) && <InfoBasePath host={host} basePath={basePath} />}

src/core/plugins/oas31/index.js

@@ -15,7 +15,6 @@ import InfoWrapper from "./wrap-components/info"
 import ModelWrapper from "./wrap-components/model"
 import ModelsWrapper from "./wrap-components/models"
 import VersionPragmaFilterWrapper from "./wrap-components/version-pragma-filter"
-import VersionStampWrapper from "./wrap-components/version-stamp"
 import {
   isOAS31 as isOAS31Fn,
   createOnlyOAS31Selector as createOnlyOAS31SelectorFn,
@@ -91,7 +90,6 @@ const OAS31Plugin = ({ fn }) => {
       License: LicenseWrapper,
       Contact: ContactWrapper,
       VersionPragmaFilter: VersionPragmaFilterWrapper,
-      VersionStamp: VersionStampWrapper,
       Model: ModelWrapper,
       Models: ModelsWrapper,
       JSONSchema202012KeywordDescription:

src/core/presets/base.js

@@ -86,6 +86,7 @@ import Property from "core/components/property"
 import TryItOutButton from "core/components/try-it-out-button"
 import VersionPragmaFilter from "core/components/version-pragma-filter"
 import VersionStamp from "core/components/version-stamp"
+import OpenAPIVersion from "core/components/openapi-version"
 import DeepLink from "core/components/deep-link"
 import SvgAssets from "core/components/svg-assets"
 import Markdown from "core/components/providers/markdown"
@@ -157,6 +158,7 @@ export default function () {
       BaseLayout,
       VersionPragmaFilter,
       VersionStamp,
+      OpenAPIVersion,
       OperationExt,
       OperationExtRow,
       ParameterExt,

test/e2e-cypress/e2e/features/oas3-badge.cy.js → test/e2e-cypress/e2e/features/oas-badge.cy.js

@@ -1,14 +1,24 @@
-describe("OpenAPI 3.x.y Badge", () => {
+describe("OpenAPI Badge", () => {
+  it("should display light green badge with version indicator for Swagger 2.0", () => {
+    cy.visit("/?url=/documents/features/info-openAPI2.yaml")
+      .get("#swagger-ui")
+      .get('*[class^="version-stamp"]')
+      .get("pre.version")
+      .contains("OAS 2.0")
+  })
+
   it("should display light green badge with version indicator for OpenAPI 3.0.x", () => {
     cy.visit("/?url=/documents/petstore-expanded.openapi.yaml")
       .get("#swagger-ui")
+      .get('*[class^="version-stamp"]')
       .get("pre.version")
       .contains("OAS 3.0")
   })
 
   it("should display light green badge with version indicator for OpenAPI 3.1.0", () => {
     cy.visit("/?url=/documents/features/info-openAPI31.yaml")
       .get("#swagger-ui")
+      .get('*[class^="version-stamp"]')
       .get("pre.version")
       .contains("OAS 3.1")
   })

test/e2e-cypress/e2e/features/urls.cy.js

@@ -18,7 +18,7 @@ describe("configuration options: `urls` and `urls.primaryName`", () => {
     it("should render the first URL in the list", () => {
       cy.visit("/?configUrl=/configs/urls.yaml")
         .get("h2.title")
-        .should("have.text", "One")
+        .should("have.text", "OneOAS 2.0")
         .window()
         .then(win => win.ui.specSelectors.url())
         .should("equal", "/documents/features/urls/1.yaml")
@@ -30,7 +30,7 @@ describe("configuration options: `urls` and `urls.primaryName`", () => {
       .get("select")
       .should("have.value", "/documents/features/urls/2.yaml")
       .get("h2.title")
-      .should("have.text", "Two")
+      .should("have.text", "TwoOAS 3.0")
       .window()
       .then(win => win.ui.specSelectors.url())
       .should("equal", "/documents/features/urls/2.yaml")

test/unit/components/info-wrapper.jsx

@@ -14,7 +14,9 @@ describe("<InfoContainer/>", function () {
       url () {},
       basePath () {},
       host () {},
-      externalDocs () {},
+      externalDocs() {},
+      isSwagger2 () {},
+      isOAS30 () {}
     },
     oas3Selectors: {
       selectedServer () {},