feat(oas31): add support for OpenAPI 3.1.0 badge (#8502)

Refs #8501

src/core/plugins/oas3/helpers.jsx

@@ -32,3 +32,18 @@ export function OAS3ComponentWrapFactory(Component) {
     }
   }
 }
+
+export function OAS30ComponentWrapFactory(Component) {
+  return (Ori, system) => (props) => {
+    if (typeof system.specSelectors?.isOAS30 === "function") {
+      if (system.specSelectors.isOAS30()) {
+        return <Component {...props} {...system} Ori={Ori}></Component>
+      } else {
+        return <Ori {...props}></Ori>
+      }
+    } else {
+      console.warn("OAS30 wrapper: couldn't get spec")
+      return null
+    }
+  }
+}

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

@@ -1,13 +1,19 @@
+/**
+ * @prettier
+ */
 import React from "react"
-import { OAS3ComponentWrapFactory } from "../helpers"
 
-export default OAS3ComponentWrapFactory((props) => {
+import { OAS30ComponentWrapFactory } from "../helpers"
+
+export default OAS30ComponentWrapFactory((props) => {
   const { Ori } = props
 
-  return <span>
+  return (
-    <Ori {...props} />
+    <span>
-    <small className="version-stamp">
+      <Ori {...props} />
-      <pre className="version">OAS3</pre>
+      <small className="version-stamp">
-    </small>
+        <pre className="version">OAS 3.0</pre>
-  </span>
+      </small>
+    </span>
+  )
 })

src/core/plugins/oas31/index.js

@@ -11,6 +11,7 @@ import LicenseWrapper from "./wrap-components/license"
 import ContactWrapper from "./wrap-components/contact"
 import InfoWrapper from "./wrap-components/info"
 import VersionPragmaFilterWrapper from "./wrap-components/version-pragma-filter"
+import VersionStampWrapper from "./wrap-components/version-stamp"
 import {
   license as selectLicense,
   contact as selectContact,
@@ -71,6 +72,7 @@ const OAS31Plugin = ({ fn }) => {
       License: LicenseWrapper,
       Contact: ContactWrapper,
       VersionPragmaFilter: VersionPragmaFilterWrapper,
+      VersionStamp: VersionStampWrapper,
     },
     statePlugins: {
       spec: {

src/core/plugins/oas31/wrap-components/version-stamp.jsx

@@ -0,0 +1,21 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+const VersionStampWrapper = (Original, system) => (props) => {
+  if (system.specSelectors.isOAS31()) {
+    return (
+      <span>
+        <Original {...props} />
+        <small className="version-stamp">
+          <pre className="version">OAS 3.1</pre>
+        </small>
+      </span>
+    )
+  }
+
+  return <Original {...props} />
+}
+
+export default VersionStampWrapper

test/e2e-cypress/tests/bugs/4865.js

@@ -5,7 +5,7 @@ describe("#4865: multiple invocations + OAS3 plugin", () => {
     cy.visit("/?url=/documents/petstore-expanded.openapi.yaml")
       .get("#swagger-ui")
       .get("pre.version")
-      .contains("OAS3")
+      .contains("OAS 3.0")
   })
 
   it("test: should render the OAS3 badge correctly after re-initializing the UI", () => {
@@ -14,6 +14,6 @@ describe("#4865: multiple invocations + OAS3 plugin", () => {
       .then(win => win.onload()) // re-initializes Swagger UI
       .get("#swagger-ui")
       .get("pre.version")
-      .contains("OAS3")
+      .contains("OAS 3.0")
   })
 })

test/e2e-cypress/tests/features/oas3-badge.js

@@ -0,0 +1,15 @@
+describe("OpenAPI 3.x.y Badge", () => {
+  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("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("pre.version")
+      .contains("OAS 3.1")
+  })
+})