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()) {
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+
+const ContactWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const system = getSystem()
   const OAS31Contact = system.getComponent("OAS31Contact", true)
 
   return <OAS31Contact />
-  }
-
-  return <Original {...props} />
-}
+})
 
 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()) {
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+
+const InfoWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const system = getSystem()
   const OAS31Info = system.getComponent("OAS31Info", true)
 
   return <OAS31Info />
-  }
-
-  return <Original {...props} />
-}
+})
 
 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()) {
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+
+const LicenseWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
+  const system = getSystem()
   const OAS31License = system.getComponent("OAS31License", true)
 
   return <OAS31License />
-  }
-
-  return <Original {...props} />
-}
+})
 
 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 (
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+
+const VersionStampWrapper = createOnlyOAS31ComponentWrapper(
+  ({ originalComponent: Original, ...restProps }) => (
     <span>
-        <Original {...props} />
+      <Original {...restProps} />
       <small className="version-stamp">
         <pre className="version">OAS 3.1</pre>
       </small>
     </span>
   )
-  }
-
-  return <Original {...props} />
-}
+)
 
 export default VersionStampWrapper