[docs] Filter connectors by suport level tabs (#45204)

Author: evantahler

docusaurus/src/components/ConnectorRegistry.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useEffect, useState } from "react";
-import { getSupportLevelDisplay } from "../connector_registry";
-
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 import styles from "./ConnectorRegistry.module.css";
 import { REGISTRY_URL } from "../connector_registry";
 
@@ -30,35 +30,23 @@ function connectorSort(a, b) {
   if (a.name_oss > b.name_oss) return 1;
 }
 
-export default function ConnectorRegistry({ type }) {
-  const [registry, setRegistry] = useState([]);
-
-  useEffect(() => {
-    fetchCatalog(REGISTRY_URL, setRegistry);
-  }, []);
-
-  if (registry.length === 0) return <div>{`Loading ${type}s...`}</div>;
-
-  const connectors = registry
-    .filter((c) => c.connector_type === type)
-    .filter((c) => c.name_oss)
-    .filter((c) => c.supportLevel_oss); // at lease one connector is missing a support level
-
+function ConnectorTable({ connectors, connectorSupportLevel }) {
   return (
-    <div>
-      <table>
-        <thead>
-          <tr>
-            <th>Connector Name</th>
-            <th>Links</th>
-            <th>Support Level</th>
-            <th>OSS</th>
-            <th>Cloud</th>
-            <th>Docker Image</th>
-          </tr>
-        </thead>
-        <tbody>
-          {connectors.sort(connectorSort).map((connector) => {
+    <table>
+      <thead>
+        <tr>
+          <th>Connector Name</th>
+          <th>Links</th>
+          <th>OSS</th>
+          <th>Cloud</th>
+          <th>Docker Image</th>
+        </tr>
+      </thead>
+      <tbody>
+        {connectors
+          .sort(connectorSort)
+          .filter((c) => c.supportLevel_oss === connectorSupportLevel)
+          .map((connector) => {
             const docsLink = connector.documentationUrl_oss?.replace(
               "https://docs.airbyte.com",
               ""
@@ -86,9 +74,6 @@ export default function ConnectorRegistry({ type }) {
                     <a href={connector.issue_url}>🐛</a>
                   ) : null}
                 </td>
-                <td>
-                  <small>{getSupportLevelDisplay(connector.supportLevel_oss)}</small>
-                </td>
                 <td>{connector.is_oss ? "✅" : "❌"}</td>
                 <td>{connector.is_cloud ? "✅" : "❌"}</td>
                 <td>
@@ -102,8 +87,46 @@ export default function ConnectorRegistry({ type }) {
               </tr>
             );
           })}
-        </tbody>
-      </table>
-    </div>
+      </tbody>
+    </table>
+  );
+}
+
+export default function ConnectorRegistry({ type }) {
+  const [registry, setRegistry] = useState([]);
+
+  useEffect(() => {
+    fetchCatalog(REGISTRY_URL, setRegistry);
+  }, []);
+
+  if (registry.length === 0) return <div>{`Loading ${type}s...`}</div>;
+
+  const connectors = registry
+    .filter((c) => c.connector_type === type)
+    .filter((c) => c.name_oss)
+    .filter((c) => c.supportLevel_oss); // at least one connector is missing a support level
+
+  return (
+    <Tabs>
+      <TabItem value="certified" label="Airbyte Connectors" default>
+        <ConnectorTable
+          connectors={connectors}
+          connectorSupportLevel={"certified"}
+        />
+      </TabItem>
+      <TabItem value="community" label="Marketplace" default>
+        <ConnectorTable
+          connectors={connectors}
+          connectorSupportLevel={"community"}
+        />
+      </TabItem>
+      {/* There are no archived connectors to show at the moment, so hiding for now */}
+      {/* <TabItem value="archived" label="Archived" default>
+        <ConnectorTable
+          connectors={connectors}
+          connectorSupportLevel={"archived"}
+        />
+      </TabItem> */}
+    </Tabs>
   );
 }