refactor(oas31): change Contact component to be smart (#8478)

Refs #8474

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

@@ -0,0 +1,43 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { sanitizeUrl } from "core/utils"
+
+const Contact = ({ getComponent, specSelectors }) => {
+  const name = specSelectors.selectContactNameField()
+  const url = specSelectors.selectContactUrl()
+  const email = specSelectors.selectContactEmailField()
+
+  const Link = getComponent("Link")
+
+  return (
+    <div className="info__contact">
+      {url && (
+        <div>
+          <Link href={sanitizeUrl(url)} target="_blank">
+            {name} - Website
+          </Link>
+        </div>
+      )}
+      {email && (
+        <Link href={sanitizeUrl(`mailto:${email}`)}>
+          {url ? `Send email to ${name}` : `Contact ${name}`}
+        </Link>
+      )}
+    </div>
+  )
+}
+
+Contact.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  specSelectors: PropTypes.shape({
+    selectContactNameField: PropTypes.func.isRequired,
+    selectContactUrl: PropTypes.func.isRequired,
+    selectContactEmailField: PropTypes.func.isRequired,
+  }).isRequired,
+}
+
+export default Contact

src/core/plugins/oas31/index.js

@@ -3,15 +3,22 @@
  */
 import Webhooks from "./components/webhooks"
 import License from "./components/license"
+import Contact from "./components/contact"
 import Info from "./components/info"
 import LicenseWrapper from "./wrap-components/license"
+import ContactWrapper from "./wrap-components/contact"
 import InfoWrapper from "./wrap-components/info"
 import {
   license,
+  contact,
   webhooks,
   selectLicenseNameField,
   selectLicenseUrlField,
   selectLicenseIdentifierField,
+  selectContactNameField,
+  selectContactEmailField,
+  selectContactUrlField,
+  makeSelectContactUrl,
   makeIsOAS31,
   makeSelectLicenseUrl,
 } from "./spec-extensions/selectors"
@@ -27,18 +34,22 @@ const OAS31Plugin = () => {
       const oas31Selectors = this.statePlugins.oas31.selectors
       const specSelectors = this.statePlugins.spec.selectors
 
-      specSelectors.selectLicenseUrl = makeSelectLicenseUrl(system)
       specSelectors.isOAS31 = makeIsOAS31(system)
+      specSelectors.selectLicenseUrl = makeSelectLicenseUrl(system)
+      specSelectors.selectContactUrl = makeSelectContactUrl(system)
+
       oas31Selectors.selectLicenseUrl = makeOAS31SelectLicenseUrl(system)
     },
     components: {
       Webhooks,
       OAS31Info: Info,
       OAS31License: License,
+      OAS31Contact: Contact,
     },
     wrapComponents: {
-      License: LicenseWrapper,
       info: InfoWrapper,
+      License: LicenseWrapper,
+      Contact: ContactWrapper,
     },
     statePlugins: {
       spec: {
@@ -47,6 +58,10 @@ const OAS31Plugin = () => {
           selectLicenseNameField,
           selectLicenseUrlField,
           selectLicenseIdentifierField,
+          contact,
+          selectContactNameField,
+          selectContactEmailField,
+          selectContactUrlField,
           webhooks,
         },
         wrapSelectors: {

src/core/plugins/oas31/spec-extensions/selectors.js

@@ -20,6 +20,10 @@ export const license = () => (system) => {
   return system.specSelectors.info().get("license", map)
 }
 
+export const contact = () => (system) => {
+  return system.specSelectors.info().get("contact", map)
+}
+
 export const selectLicenseNameField = () => (system) => {
   return system.specSelectors.license().get("name", "License")
 }
@@ -28,10 +32,6 @@ export const selectLicenseUrlField = () => (system) => {
   return system.specSelectors.license().get("url")
 }
 
-export const selectLicenseIdentifierField = onlyOAS31(() => (system) => {
-  return system.specSelectors.license().get("identifier")
-})
-
 export const makeSelectLicenseUrl = (system) =>
   createSelector(
     () => system.specSelectors.url(),
@@ -45,3 +45,33 @@ export const makeSelectLicenseUrl = (system) =>
       return undefined
     }
   )
+
+export const selectLicenseIdentifierField = onlyOAS31(() => (system) => {
+  return system.specSelectors.license().get("identifier")
+})
+
+export const selectContactNameField = () => (system) => {
+  return system.specSelectors.contact().get("name", "the developer")
+}
+
+export const selectContactEmailField = () => (system) => {
+  return system.specSelectors.contact().get("email")
+}
+
+export const selectContactUrlField = () => (system) => {
+  return system.specSelectors.contact().get("url")
+}
+
+export const makeSelectContactUrl = (system) =>
+  createSelector(
+    () => system.specSelectors.url(),
+    () => system.oas3Selectors.selectedServer(),
+    () => system.specSelectors.selectContactUrlField(),
+    (specUrl, selectedServer, url) => {
+      if (url) {
+        return safeBuildUrl(url, specUrl, { selectedServer })
+      }
+
+      return undefined
+    }
+  )

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

@@ -0,0 +1,16 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+const ContactWrapper = (Original, system) => (props) => {
+  if (system.specSelectors.isOAS31()) {
+    const OAS31Contact = system.getComponent("OAS31Contact", true)
+
+    return <OAS31Contact />
+  }
+
+  return <Original {...props} />
+}
+
+export default ContactWrapper