refactor(oas31): use OpenAPI 3.1 specific component wrapper util (#8503)

src/core/plugins/oas31/fn.js

@@ -1,6 +1,7 @@
 /**
  * @prettier
  */
+import React from "react"
 
 export const isOAS31 = (jsSpec) => {
   const oasVersion = jsSpec.get("openapi")
@@ -70,3 +71,20 @@ export const createSystemSelector =
       ? selectedValue(system)
       : selectedValue
   }
+
+/* eslint-disable  react/jsx-filename-extension */
+export const createOnlyOAS31ComponentWrapper =
+  (Component) => (Original, system) => (props) => {
+    if (system.specSelectors.isOAS31()) {
+      return (
+        <Component
+          {...props}
+          originalComponent={Original}
+          getSystem={system.getSystem}
+        />
+      )
+    }
+
+    return <Original {...props} />
+  }
+/* eslint-enable  react/jsx-filename-extension */

src/core/plugins/oas31/wrap-components/contact.jsx

@@ -3,14 +3,13 @@
  */
 import React from "react"
 
-const ContactWrapper = (Original, system) => (props) => {
-  if (system.specSelectors.isOAS31()) {
-    const OAS31Contact = system.getComponent("OAS31Contact", true)
+import { createOnlyOAS31ComponentWrapper } from "../fn"
 
-    return <OAS31Contact />
-  }
+const ContactWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const system = getSystem()
+  const OAS31Contact = system.getComponent("OAS31Contact", true)
 
-  return <Original {...props} />
-}
+  return <OAS31Contact />
+})
 
 export default ContactWrapper

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

@@ -3,14 +3,13 @@
  */
 import React from "react"
 
-const InfoWrapper = (Original, system) => (props) => {
-  if (system.specSelectors.isOAS31()) {
-    const OAS31Info = system.getComponent("OAS31Info", true)
+import { createOnlyOAS31ComponentWrapper } from "../fn"
 
-    return <OAS31Info />
-  }
+const InfoWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const system = getSystem()
+  const OAS31Info = system.getComponent("OAS31Info", true)
 
-  return <Original {...props} />
-}
+  return <OAS31Info />
+})
 
 export default InfoWrapper

src/core/plugins/oas31/wrap-components/license.jsx

@@ -3,14 +3,13 @@
  */
 import React from "react"
 
-const LicenseWrapper = (Original, system) => (props) => {
-  if (system.specSelectors.isOAS31()) {
-    const OAS31License = system.getComponent("OAS31License", true)
+import { createOnlyOAS31ComponentWrapper } from "../fn"
 
-    return <OAS31License />
-  }
+const LicenseWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const system = getSystem()
+  const OAS31License = system.getComponent("OAS31License", true)
 
-  return <Original {...props} />
-}
+  return <OAS31License />
+})
 
 export default LicenseWrapper

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

@@ -3,19 +3,17 @@
  */
 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>
-    )
-  }
+import { createOnlyOAS31ComponentWrapper } from "../fn"
 
-  return <Original {...props} />
-}
+const VersionStampWrapper = createOnlyOAS31ComponentWrapper(
+  ({ originalComponent: Original, ...restProps }) => (
+    <span>
+      <Original {...restProps} />
+      <small className="version-stamp">
+        <pre className="version">OAS 3.1</pre>
+      </small>
+    </span>
+  )
+)
 
 export default VersionStampWrapper