feat: add enterprise connectors support and UI improvements

docusaurus/connector_registry_slim.json

@@ -3689,4 +3689,4 @@
     "supportLevel": "community",
     "docUrl": "https://docs.airbyte.com/integrations/sources/zendesk-sell"
   }
-]
+]

docusaurus/docusaurus.config.js

@@ -149,6 +149,7 @@ const config = {
         ],
       },
     ],
+    require.resolve("./src/plugins/enterpriseConnectors"),
     () => ({
       name: "Yaml loader",
       configureWebpack() {

docusaurus/src/components/ConnectorRegistry.jsx

@@ -1,3 +1,4 @@
+import { usePluginData } from "@docusaurus/useGlobalData";
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
 import React, { useEffect, useState } from "react";
@@ -36,15 +37,19 @@ function ConnectorTable({ connectors, connectorSupportLevel }) {
         <tr>
           <th>Connector Name</th>
           <th>Links</th>
-          <th>OSS</th>
+          <th>Self-managed</th>
           <th>Cloud</th>
           <th>Docker Image</th>
         </tr>
       </thead>
       <tbody>
         {connectors
           .sort(connectorSort)
-          .filter((c) => c.supportLevel_oss === connectorSupportLevel)
+          .filter(
+            (c) =>
+              connectorSupportLevel === "enterprise" ||
+              c.supportLevel_oss === connectorSupportLevel,
+          )
           .map((connector) => {
             const docsLink = connector.documentationUrl_oss?.replace(
               "https://docs.airbyte.com",
@@ -65,16 +70,25 @@ function ConnectorTable({ connectors, connectorSupportLevel }) {
                   </div>
                 </td>
                 {/* min width to prevent wrapping */}
-                <td style={{ minWidth: 75 }}>
-                  <a href={docsLink}>📕</a>
-                  {connector.supportLevel_oss != "archived" ? (
-                    <a href={connector.github_url}>⚙️</a>
-                  ) : (
-                    ""
-                  )}
-                  {connector.supportLevel_oss != "archived" ? (
-                    <a href={connector.issue_url}>🐛</a>
-                  ) : null}
+                <td style={{ minWidth: 90 }}>
+                  <div
+                    style={{
+                      display: "flex",
+                      gap: "8px",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <a href={docsLink}>📕</a>
+                    {connector.supportLevel_oss != "archived" &&
+                    connector.github_url  ? (
+                      <a href={connector.github_url}>⚙️</a>
+                    ) : (
+                      ""
+                    )}
+                    {connector.supportLevel_oss != "archived" ? (
+                      <a href={connector.issue_url}>🐛</a>
+                    ) : null}
+                  </div>
                 </td>
                 <td>{connector.is_oss ? "✅" : "❌"}</td>
                 <td>{connector.is_cloud ? "✅" : "❌"}</td>
@@ -95,12 +109,35 @@ function ConnectorTable({ connectors, connectorSupportLevel }) {
 }
 
 export default function ConnectorRegistry({ type }) {
+  const pluginData = usePluginData("enterprise-connectors-plugin");
   const [registry, setRegistry] = useState([]);
+  const [enterpriseConnectors, setEnterpriseConnectors] = useState([]);
 
   useEffect(() => {
     fetchCatalog(REGISTRY_URL, setRegistry);
   }, []);
 
+  useEffect(() => {
+    if (pluginData.enterpriseConnectors.length > 0 && registry.length > 0) {
+      const _connectors = pluginData.enterpriseConnectors
+        .filter((name) => name.includes(type))
+        .map((name) => {
+          const _name = name.replace(`${type}-`, "");
+
+          const info = registry.find(
+            (c) =>
+              c.name_oss?.includes(_name) ||
+              c.name_cloud?.includes(_name) ||
+              c.documentationUrl_oss?.includes(_name) ||
+              c.documentationUrl_cloud?.includes(_name),
+          );
+          return info;
+        })
+        .filter(Boolean);
+      setEnterpriseConnectors(_connectors);
+    }
+  }, [registry, pluginData]);
+
   if (registry.length === 0) return <div>{`Loading ${type}s...`}</div>;
 
   const connectors = registry
@@ -122,6 +159,12 @@ export default function ConnectorRegistry({ type }) {
           connectorSupportLevel={"community"}
         />
       </TabItem>
+      <TabItem value="enterprise" label="Enterprise" default>
+        <ConnectorTable
+          connectors={enterpriseConnectors}
+          connectorSupportLevel={"enterprise"}
+        />
+      </TabItem>
       {/* There are no archived connectors to show at the moment, so hiding for now */}
       {/* <TabItem value="archived" label="Archived" default>
         <ConnectorTable

docusaurus/src/connector_registry.js

@@ -48,6 +48,8 @@ function getSupportLevelDisplay(rawSupportLevel) {
       return "Airbyte";
     case "community":
       return "Marketplace";
+    case "enterprise":
+      return "Enterprise";
     case "archived":
       return "Archived";
     default:

docusaurus/src/plugins/enterpriseConnectors.js

@@ -0,0 +1,56 @@
+const fs = require("fs");
+
+const connectorsDocsRoot = "../docs/integrations";
+const enterpriseConnectorDocs = `${connectorsDocsRoot}/enterprise-connectors`;
+
+export function getFilenamesInDir(dir, excludes) {
+  return fs
+    .readdirSync(dir)
+    .filter(
+      (fileName) =>
+        !(
+          fileName.endsWith(".inapp.md") ||
+          fileName.endsWith("-migrations.md") ||
+          fileName.endsWith(".js") ||
+          fileName === "low-code.md"
+        ),
+    )
+    .map((fileName) => fileName.replace(".md", ""))
+    .filter((fileName) => excludes.indexOf(fileName.toLowerCase()) === -1);
+}
+
+function enterpriseConnectorsPlugin(context, options) {
+  return {
+    name: "enterprise-connectors-plugin",
+    async loadContent() {
+      try {
+        const enterpriseSources = getFilenamesInDir(enterpriseConnectorDocs, [
+          "readme",
+        ]);
+        return enterpriseSources;
+      } catch (e) {
+        console.warn(
+          "Could not read enterprise connectors directory:",
+          e.message,
+        );
+      }
+    },
+    async contentLoaded({ content, actions }) {
+      const { createData, setGlobalData } = actions;
+
+      const dataPath = await createData(
+        "enterprise-connectors.json",
+        JSON.stringify(content, null, 2),
+      );
+
+      setGlobalData({
+        enterpriseConnectors: content,
+      });
+
+      console.log(`Enterprise Connectors Plugin: ${dataPath}`);
+      console.log(`Enterprise Connectors Plugin: ${content}`);
+    },
+  };
+}
+
+module.exports = enterpriseConnectorsPlugin;