@redpanda-data/docs-extensions-and-macros 3.3.1 → 3.3.3

package/extensions/algolia-indexer/generate-index.js

@@ -175,7 +175,7 @@ function generateIndex (playbook, contentCatalog, { indexLatestOnly = false, exc
       .replace(/\s+/g, ' ')
       .trim();
 
-    var tag = `${component.title} ${version ? 'v' + version : ''}`
+    var tag = `${component.title} ${version ? 'v' + version : ''}`.trim();
     var indexItem;
     const deployment = page.asciidoc?.attributes['env-kubernetes'] ? 'Kubernetes' : page.asciidoc?.attributes['env-linux'] ? 'Linux' : page.asciidoc?.attributes['env-docker'] ? 'Docker' : page.asciidoc?.attributes['page-cloud'] ? 'Redpanda Cloud' : ''
 

package/extensions/generate-rp-connect-categories.js

@@ -3,8 +3,7 @@
 module.exports.register = function ({ config }) {
   const logger = this.getLogger('redpanda-connect-category-aggregation-extension');
 
-  // TODO: Integrate these as attributes like common-name in the autogenerated source pages.
-  // This hardcoded map is just for launch.
+  // Component name mapping for common names
   const componentNameMap = {
     "aws_kinesis_data_streams": "AWS Kinesis Data Streams",
     "aws_kinesis_firehose": "AWS Kinesis Firehose",
@@ -46,7 +45,6 @@ module.exports.register = function ({ config }) {
     "mongodb": "MongoDB",
     "mqtt": "MQTT",
     "mysql": "MySQL",
-    "nanomsg": "nanomsg",
     "nats": "NATS",
     "nsq": "NSQ",
     "opensearch": "OpenSearch",
@@ -58,22 +56,90 @@ module.exports.register = function ({ config }) {
     "ristretto": "Ristretto",
     "schema_registry": "Schema Registry",
     "sentry": "Sentry",
+    "splunk_hec": "Splunk",
+    "snowflake_put": "Snowflake",
     "socket": "Socket",
     "sql": "SQL",
     "sqlite": "SQLite",
     "trino": "Trino",
-    "wasm": "Wasm (WebAssembly)",
+    "wasm": "WebAssembly",
     "websocket": "WebSocket",
-    "twitter_search": "X (Twitter)",
+    "twitter_search": "X/Twitter",
     "xml": "XML"
   };
 
+  const certifiedConnectors = {
+    "amqp_0_9": ["input", "output"],
+    "archive": ["processor"],
+    "aws_dynamodb_partiql": ["processor"],
+    "aws_kinesis": ["input", "output"],
+    "aws_kinesis_firehose": ["output"],
+    "aws_lambda": ["processor"],
+    "aws_s3": ["input", "output"],
+    "aws_sqs": ["input", "output"],
+    "bloblang": ["processor"],
+    "bounds_check": ["processor"],
+    "cache": ["processor"],
+    "cached": ["processor"],
+    "command": ["processor"],
+    "compress": ["processor"],
+    "csv": ["input"],
+    "decompress": ["processor"],
+    "dedupe": ["processor"],
+    "file": ["input", "output"],
+    "generate": ["input"],
+    "group_by": ["processor"],
+    "group_by_value": ["processor"],
+    "http": ["processor"],
+    "http_client": ["input", "output"],
+    "http_server": ["input", "output"],
+    "javascript": ["processor"],
+    "jmespath": ["processor"],
+    "jq": ["processor"],
+    "json_schema": ["processor"],
+    "kafka": ["input", "output"],
+    "kafka_franz": ["input", "output"],
+    "log": ["processor"],
+    "mapping": ["processor"],
+    "metric": ["processor"],
+    "mutation": ["processor"],
+    "nats": ["input", "output"],
+    "nats_jetstream": ["input", "output"],
+    "nats_kv": ["input", "output", "processor"],
+    "nats_request_reply": ["processor"],
+    "opensearch": ["output"],
+    "parquet_decode": ["processor"],
+    "parquet_encode": ["processor"],
+    "protobuf": ["processor"],
+    "rate_limit": ["processor"],
+    "redis": ["processor"],
+    "redis_hash": ["output"],
+    "redis_list": ["input", "output"],
+    "redis_pubsub": ["input", "output"],
+    "redis_script": ["processor"],
+    "redis_streams": ["input", "output"],
+    "schema_registry_decode": ["processor"],
+    "schema_registry_encode": ["processor"],
+    "select_parts": ["processor"],
+    "sftp": ["output"],
+    "sleep": ["processor"],
+    "socket": ["input", "output"],
+    "socket_server": ["input", "output"],
+    "sql_insert": ["output", "processor"],
+    "sql_raw": ["input", "output", "processor"],
+    "sql_select": ["input", "output", "processor"],
+    "unarchive": ["processor"],
+    "websocket": ["input", "output"],
+    "workflow": ["processor"]
+  };
+
   this.once('contentClassified', ({ siteCatalog, contentCatalog }) => {
     const redpandaConnect = contentCatalog.getComponents().find(component => component.name === 'redpanda-connect');
     if (!redpandaConnect || !redpandaConnect.latest) {
       logger.info('Could not find the redpanda-connect component');
       return;
     }
+
     const descriptions = redpandaConnect.latest.asciidoc.attributes.categories;
     if (!descriptions) {
       logger.info('No categories attribute found in redpanda-connect component');
@@ -82,6 +148,8 @@ module.exports.register = function ({ config }) {
 
     const connectCategoriesData = {};
     const flatComponentsData = [];
+    const driverSupportData = {};
+    const cacheSupportData = {};
     const types = Object.keys(descriptions);
 
     // Initialize connectCategoriesData for each type
@@ -93,32 +161,38 @@ module.exports.register = function ({ config }) {
       const files = contentCatalog.findBy({ component: 'redpanda-connect', family: 'page' });
 
       files.forEach(file => {
-        const content = file.contents.toString('utf8');
+        let content = file.contents.toString('utf8');
         const categoryMatch = /:categories: (.*)/.exec(content);
         const typeMatch = /:type: (.*)/.exec(content);
         const statusMatch = /:status: (.*)/.exec(content);
+        const driverSupportMatch = /:driver-support: (.*)/.exec(content);
+        const cacheSupportMatch = /:cache-support: (.*)/.exec(content);
+        const enterpriseMatch = /:enterprise: true/.exec(content);
         const pubUrl = file.pub.url;
         const name = file.src.stem;
 
-        if (categoryMatch && typeMatch) {
-          let categories = categoryMatch[1];
+        if (typeMatch) {
           const fileType = typeMatch[1];
-          let status = statusMatch ? statusMatch[1] : 'Enterprise';
-          if (status === 'beta' || status === 'experimental') status = 'Community';
-          if (status === 'stable') status = 'Enterprise';
+
+          let status = statusMatch ? statusMatch[1] : 'community';
+          //if (status === 'beta' || status === 'experimental') status = 'community';
+          //if (status === 'stable') status = 'certified';
 
           // Skip deprecated components
           if (status === 'deprecated') return;
 
-          // Map component name to common name
-          const commonName = componentNameMap[name] || name;
+          // Override status to "certified" if in the lookup table
+          if (certifiedConnectors[name] && certifiedConnectors[name].includes(fileType) || enterpriseMatch) {
+            status = 'certified';
+          } else {
+            status = 'community';
+          }
+
+          const commonName = componentNameMap?.[name] ?? name;
 
           // Populate connectCategoriesData
-          if (types.includes(fileType) && categories) {
-            if (typeof categories === 'string') {
-              categories = categories.replace(/[\[\]"]/g, '').split(',').map(category => category.trim());
-            }
-
+          if (types.includes(fileType) && categoryMatch) {
+            const categories = categoryMatch[1].replace(/[\[\]"]/g, '').split(',').map(category => category.trim());
             categories.forEach(category => {
               let categoryObj = connectCategoriesData[fileType].find(cat => cat.name === category);
 
@@ -134,26 +208,29 @@ module.exports.register = function ({ config }) {
 
           // Populate flatComponentsData
           let flatItem = flatComponentsData.find(item => item.name === commonName);
-          if (flatItem) {
-            if (!flatItem.types.includes(fileType)) {
-              flatItem.types.push({ type: fileType, url: pubUrl });
-            }
-          } else {
-            flatItem = { name: commonName, originalName: name, support: status, types: [{ type: fileType, url: pubUrl }] };
+          if (!flatItem) {
+            flatItem = { name: commonName, originalName: name, support: status, types: [], enterprise: enterpriseMatch ? true : false};
             flatComponentsData.push(flatItem);
           }
+
+          if (!flatItem.types.some(type => type.type === fileType)) {
+            flatItem.types.push({ type: fileType, url: pubUrl, enterprise: enterpriseMatch? true : false, support: status});
+          }
+
+          // Populate support data
+          if (driverSupportMatch) driverSupportData[name] = driverSupportMatch[1];
+          if (cacheSupportMatch) cacheSupportData[name] = cacheSupportMatch[1];
         }
       });
 
-      try {
-        redpandaConnect.latest.asciidoc.attributes.connectCategoriesData = connectCategoriesData;
-        redpandaConnect.latest.asciidoc.attributes.flatComponentsData = flatComponentsData;
-        logger.info(`Added Redpanda Connect data to latest Asciidoc object: ${JSON.stringify({ connectCategoriesData, flatComponentsData }, null, 2)}`);
-      } catch (error) {
-        logger.error(`Error updating latest Asciidoc object for Redpanda Connect: ${error.message}`);
-      }
+      redpandaConnect.latest.asciidoc.attributes.connectCategoriesData = connectCategoriesData;
+      redpandaConnect.latest.asciidoc.attributes.flatComponentsData = flatComponentsData;
+      redpandaConnect.latest.asciidoc.attributes.driverSupportData = driverSupportData;
+      redpandaConnect.latest.asciidoc.attributes.cacheSupportData = cacheSupportData;
+
+      logger.info(`Added Redpanda Connect data to latest Asciidoc object: ${JSON.stringify({ connectCategoriesData, flatComponentsData }, null, 2)}`);
     } catch (error) {
       logger.error(`Error processing Redpanda Connect files: ${error.message}`);
     }
   });
-};
+};

package/macros/enterprise-label.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports.register = function (registry) {
+  registry.inlineMacro(function () {
+    const self = this;
+    self.named('enterprise-label');
+    self.process((parent, target, attrs) => {
+      return `<span class="inline-enterprise-label">Enterprise</span>`;
+    });
+  });
+};

package/macros/rp-connect-components.js

@@ -3,6 +3,38 @@
 module.exports.register = function (registry, context) {
   let tabsCounter = 1; // Counter for generating unique IDs
 
+  const driverNameMap = {
+    "gocosmos": "Azure Cosmos DB",
+    "clickhouse": "ClickHouse",
+    "oracle": "Oracle",
+    "mssql": "Microsoft SQL Server",
+    "mysql": "MYSQL",
+    "snowflake": "Snowflake",
+    "postgresql": "PostgreSQL",
+    "postgres": "PostgreSQL",
+    "sqlite": "SQLite",
+    "trino": "Trino",
+  }
+
+  const cacheNameMap = {
+    "aws_dynamodb": "AWS DynamoDB",
+    "memcached": "Memcached",
+    "redis": "Redis",
+    "aws_s3": "AWS S3",
+    "memory": "Memory",
+    "ristretto": "Ristretto",
+    "couchbase": "Couchbase",
+    "mongodb": "MongoDB",
+    "sql": "SQL",
+    "file": "File",
+    "multilevel": "Multilevel",
+    "ttlru": "TTL LRU",
+    "gcp_cloud_storage": "GCP Cloud Storage",
+    "nats_kv": "NATS KV",
+    "lru": "LRU",
+    "noop": "Noop",
+  };
+
   // Add the category tabs for components
   registry.blockMacro(function () {
     const self = this;
@@ -11,8 +43,9 @@ module.exports.register = function (registry, context) {
     self.process((parent, target, attrs) => {
       const type = attrs.type;
       const categoriesData = context.config?.attributes?.connectCategoriesData || {}
-      const categories = categoriesData[type] || {};
+      const categories = categoriesData[type] || null;
       const currentTabsId = `tabs-${tabsCounter++}`; // Unique ID for this set of tabs
+      if (!categories) return
 
       let tabsHtml = `
 <div id="${currentTabsId}" class="openblock tabs is-sync is-loaded" data-sync-group-id="${type}">
@@ -62,136 +95,196 @@ module.exports.register = function (registry, context) {
     const self = this;
     self.named('component_table');
     self.process((parent, target, attrs) => {
-      const flatComponentsData = context.config?.attributes?.flatComponentsData || []
+      const flatComponentsData = context.config?.attributes?.flatComponentsData || [];
+      const driverSupportData = context.config?.attributes?.driverSupportData || {};
+      const cacheSupportData = context.config?.attributes?.cacheSupportData || {};
 
       // Sort flatComponentsData alphabetically by name
       flatComponentsData.sort((a, b) => a.name.localeCompare(b.name));
 
       let tableHtml = `
-  <div class="table-filters">
-  <input class="table-search" type="text" id="componentTableSearch" onkeyup="filterComponentTable()" placeholder="Search for components...">
-  <select class="type-dropdown" id="supportFilter" onchange="filterComponentTable()">
-    <option value="">All Support</option>`;
+      <div class="table-filters">
+        <input class="table-search" type="text" id="componentTableSearch" onkeyup="filterComponentTable()" placeholder="Search for components...">
+        <select class="type-dropdown" id="supportFilter" onchange="filterComponentTable()">
+          <option value="">All Support</option>`;
 
       // Extract unique support values for the filter
-      const uniqueSupportValues = [...new Set(flatComponentsData.map(item => item.support))];
+      const uniqueSupportValues = [...new Set(Object.values(driverSupportData).flatMap(support => support.split(', ').map(pair => pair.split('=')[1])))];
       uniqueSupportValues.forEach(support => {
-        tableHtml += `<option value="${support}">${support}</option>`;
+        tableHtml += `<option value="${support}">${support.charAt(0).toUpperCase() + support.slice(1)}</option>`;
       });
 
       tableHtml += `
-  </select>
-  <select class="type-dropdown" id="typeFilter" onchange="filterComponentTable()">
-    <option value="">All Types</option>`;
+        </select>
+        <select class="type-dropdown" id="typeFilter" onchange="filterComponentTable()">
+          <option value="">All Types</option>`;
 
-      // Extract unique types for the filter
-      const uniqueTypes = [...new Set(flatComponentsData.flatMap(item => item.types.map(typeObj => typeObj.type)))];
+      // Extract unique types for the filter, only include input, processor, and output
+      const uniqueTypes = [...new Set(flatComponentsData.flatMap(item => item.types.map(typeObj => typeObj.type)))].filter(type => ['input', 'processor', 'output'].includes(type));
       uniqueTypes.forEach(type => {
         tableHtml += `<option value="${type}">${type.charAt(0).toUpperCase() + type.slice(1)}</option>`;
       });
 
       tableHtml += `
-  </select>
-  </div>
-  <table class="tableblock frame-all grid-all stripes-even no-clip stretch component-table" id="componentTable">
-  <colgroup>
-    <col style="width: 33.3%;">
-    <col style="width: 33.3%;">
-    <col style="width: 33.3%;">
-  </colgroup>
-  <thead>
-    <tr>
-      <th class="tableblock halign-left valign-top">Connector</th>
-      <th class="tableblock halign-left valign-top">Support</th>
-      <th class="tableblock halign-left valign-top">Type</th>
-    </tr>
-  </thead>
-  <tbody>`;
+        </select>
+      </div>
+      <table class="tableblock frame-all grid-all stripes-even no-clip stretch component-table" id="componentTable">
+        <colgroup>
+          <col style="width: 33.3%;">
+          <col style="width: 33.3%;">
+          <col style="width: 33.3%;">
+        </colgroup>
+        <thead>
+          <tr>
+            <th class="tableblock halign-left valign-top">Connector</th>
+            <th class="tableblock halign-left valign-top">Support</th>
+            <th class="tableblock halign-left valign-top">Type</th>
+          </tr>
+        </thead>
+        <tbody>`;
 
       flatComponentsData.forEach(item => {
-        const typeDropdown = item.types.length > 1
-          ? `<select class="type-dropdown" onchange="updateComponentUrl(this, true)">
-              ${item.types.map(typeObj => `<option value="${typeObj.url}">${typeObj.type.charAt(0).toUpperCase() + typeObj.type.slice(1)}</option>`).join('')}
-            </select>`
-          : item.types[0].type;
-
-        tableHtml += `
-    <tr>
-      <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="${item.types[0].url}">${item.name}</a></p></td>
-      <td class="tableblock halign-left valign-top"><p class="tableblock">${item.support}</p></td>
-      <td class="tableblock halign-left valign-top"><p class="tableblock">${typeDropdown}</p></td>
-    </tr>`;
+        const commonName = item.originalName !== item.name ? ` <small>(${item.name})</small>`: '';
+        const isEnterprise = item.enterprise ? '<span class="enterprise-label" title="Requires an Enterprise Edition license">Enterprise</span>' : '';
+        if (driverSupportData[item.originalName]) {
+          const drivers = driverSupportData[item.originalName].split(', ');
+          drivers.forEach(driverSupportPair => {
+            const [driver, support] = driverSupportPair.split('=');
+            // Map driver name to common name
+            const driverName = driverNameMap[driver] || driver;
+
+            // Filter for types of input, processor, and output only
+            const filteredTypes = item.types.filter(typeOption => ['input', 'processor', 'output'].includes(typeOption.type));
+            if (filteredTypes.length > 0) {
+              const typeDropdown = filteredTypes.length > 1
+                ? `<select class="type-dropdown" onchange="updateComponentUrl(this, true)">
+                    ${filteredTypes.map(typeOption => `<option value="${typeOption.url}">${typeOption.type.charAt(0).toUpperCase() + typeOption.type.slice(1)}</option>`).join('')}
+                  </select>`
+                : filteredTypes[0].type.charAt(0).toUpperCase() + filteredTypes[0].type.slice(1);
+
+              tableHtml += `
+                <tr>
+                  <td class="tableblock halign-left valign-top"><p class="tableblock"><p class="enterprise-label-container">${isEnterprise}</p><code><a href="${filteredTypes[0].url}">${item.originalName}</a></code> ${commonName}<br><span style="font-size:0.9rem;">${driverName} driver</span></p></td>
+                  <td class="tableblock halign-left valign-top"><p class="tableblock">${support.charAt(0).toUpperCase() + support.slice(1)}</p></td>
+                  <td class="tableblock halign-left valign-top"><p class="tableblock">${typeDropdown}</p></td>
+                </tr>`;
+            }
+          });
+        } else if (cacheSupportData[item.originalName]) {
+          const caches = cacheSupportData[item.originalName].split(', ');
+          caches.forEach(cacheSupportPair => {
+            const [cache, support] = cacheSupportPair.split('=');
+            // Map driver name to common name
+            const cacheName = cacheNameMap[cache] || cache;
+
+            // Filter for types of input, processor, and output only
+            const filteredTypes = item.types.filter(typeOption => ['input', 'processor', 'output'].includes(typeOption.type));
+            if (filteredTypes.length > 0) {
+              const typeDropdown = filteredTypes.length > 1
+                ? `<select class="type-dropdown" onchange="updateComponentUrl(this, true)">
+                    ${filteredTypes.map(typeOption => `<option value="${typeOption.url}">${typeOption.type.charAt(0).toUpperCase() + typeOption.type.slice(1)}</option>`).join('')}
+                  </select>`
+                : filteredTypes[0].type.charAt(0).toUpperCase() + filteredTypes[0].type.slice(1);
+
+              tableHtml += `
+                <tr>
+                  <td class="tableblock halign-left valign-top"><p class="tableblock"><p class="enterprise-label-container">${isEnterprise}</p><code><a href="${filteredTypes[0].url}">${item.originalName}</a></code> ${commonName}<br><span style="font-size:0.9rem;">${cacheName}</span></p></td>
+                  <td class="tableblock halign-left valign-top"><p class="tableblock">${support.charAt(0).toUpperCase() + support.slice(1)}</p></td>
+                  <td class="tableblock halign-left valign-top"><p class="tableblock">${typeDropdown}</p></td>
+                </tr>`;
+            }
+          });
+        } else {
+          // Filter for types of input, processor, and output only
+          const filteredTypes = item.types.filter(typeOption => ['input', 'processor', 'output'].includes(typeOption.type));
+          if (filteredTypes.length > 0) {
+            const typeDropdown = filteredTypes.length > 1
+              ? `<select class="type-dropdown" onchange="updateComponentUrl(this, true)">
+                  ${filteredTypes.map(typeObj => `<option value="${typeObj.url}">${typeObj.type.charAt(0).toUpperCase() + typeObj.type.slice(1)}</option>`).join('')}
+                </select>`
+              : filteredTypes[0].type.charAt(0).toUpperCase() + filteredTypes[0].type.slice(1);
+
+            tableHtml += `
+              <tr>
+                <td class="tableblock halign-left valign-top"><p class="tableblock"><p class="enterprise-label-container">${isEnterprise}</p><code><a href="${filteredTypes[0].url}">${item.originalName}</a></code> ${commonName}</p></td>
+                <td class="tableblock halign-left valign-top"><p class="tableblock">${item.support.charAt(0).toUpperCase() + item.support.slice(1)}</p></td>
+                <td class="tableblock halign-left valign-top"><p class="tableblock">${typeDropdown}</p></td>
+              </tr>`;
+          }
+        }
       });
 
       tableHtml += `
-  </tbody>
-  </table>
-  <script>
-  function filterComponentTable() {
-  const nameInput = document.getElementById('componentTableSearch').value.toLowerCase();
-  const supportFilter = document.getElementById('supportFilter').value;
-  const typeFilter = document.getElementById('typeFilter').value;
-  const table = document.getElementById('componentTable');
-  const trs = table.getElementsByTagName('tr');
-
-  for (let i = 1; i < trs.length; i++) {
-    const nameTd = trs[i].getElementsByTagName('td')[0];
-    const supportTd = trs[i].getElementsByTagName('td')[1];
-    const typeTd = trs[i].getElementsByTagName('td')[2];
-    const typeDropdown = typeTd.querySelector('.type-dropdown');
-    let showRow =
-      (!nameInput || nameTd.textContent.toLowerCase().includes(nameInput)) &&
-      (!supportFilter || supportTd.textContent === supportFilter) &&
-      (!typeFilter || (typeDropdown ? Array.from(typeDropdown.options).some(option => option.text.toLowerCase() === typeFilter.toLowerCase()) : typeTd.textContent.toLowerCase().includes(typeFilter.toLowerCase())));
-
-    trs[i].style.display = showRow ? '' : 'none';
-
-    if (showRow && typeFilter && typeDropdown) {
-      const matchingOption = Array.from(typeDropdown.options).find(option => option.text.toLowerCase() === typeFilter.toLowerCase());
-      typeDropdown.value = matchingOption.value;
-      updateComponentUrl(typeDropdown, false);
-    }
-  }
-  }
-  function getQueryParams() {
-    const params = {};
-    const searchParams = new URLSearchParams(window.location.search);
-    searchParams.forEach((value, key) => {
-      params[key] = value;
-    });
-    return params;
-  }
+        </tbody>
+      </table>
+      <script>
+      function filterComponentTable() {
+        const nameInput = document.getElementById('componentTableSearch').value.toLowerCase();
+        const supportFilter = document.getElementById('supportFilter').value;
+        const typeFilter = document.getElementById('typeFilter').value;
+        const table = document.getElementById('componentTable');
+        const trs = table.getElementsByTagName('tr');
 
-  function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-  }
+        for (let i = 1; i < trs.length; i++) {
+          const nameTd = trs[i].getElementsByTagName('td')[0];
+          const supportTd = trs[i].getElementsByTagName('td')[1];
+          const typeTd = trs[i].getElementsByTagName('td')[2];
+          const typeDropdown = typeTd.querySelector('.type-dropdown');
+          let showRow =
+            (!nameInput || nameTd.textContent.toLowerCase().includes(nameInput)) &&
+            (!supportFilter || supportTd.textContent.toLowerCase() === supportFilter.toLowerCase()) &&
+            (!typeFilter || (typeDropdown ? Array.from(typeDropdown.options).some(option => option.text.toLowerCase() === typeFilter.toLowerCase()) : typeTd.textContent.toLowerCase().includes(typeFilter.toLowerCase())));
 
-  function updateComponentUrl(select, redirect) {
-    const anchor = select.closest('tr').querySelector('a');
-    anchor.href = select.value;
-    if (redirect) {
-      window.location.href = select.value; // Redirect to the new URL
-    }
-  }
-  // Initialize Choices.js for type dropdowns
-  document.addEventListener('DOMContentLoaded', function() {
-    const params = getQueryParams();
-    if (params.search) {
-      document.getElementById('componentTableSearch').value = params.search;
-    }
-    if (params.support) {
-      document.getElementById('supportFilter').value = capitalizeFirstLetter(params.support);
-    }
-    if (params.type) {
-      document.getElementById('typeFilter').value = params.type;
-    }
-    filterComponentTable();
-    const typeDropdowns = document.querySelectorAll('.type-dropdown');
-    typeDropdowns.forEach(dropdown => {
-      new Choices(dropdown, { searchEnabled: false,  allowHTML: true});
-    });
-  });
-  </script>`;
+          trs[i].style.display = showRow ? '' : 'none';
+
+          if (showRow && typeFilter && typeDropdown) {
+            const matchingOption = Array.from(typeDropdown.options).find(option => option.text.toLowerCase() === typeFilter.toLowerCase());
+            typeDropdown.value = matchingOption.value;
+            updateComponentUrl(typeDropdown, false);
+          }
+        }
+      }
+
+      function getQueryParams() {
+        const params = {};
+        const searchParams = new URLSearchParams(window.location.search);
+        searchParams.forEach((value, key) => {
+          params[key] = value;
+        });
+        return params;
+      }
+
+      function capitalizeFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+      }
+
+      function updateComponentUrl(select, redirect) {
+        const anchor = select.closest('tr').querySelector('a');
+        anchor.href = select.value;
+        if (redirect) {
+          window.location.href = select.value; // Redirect to the new URL
+        }
+      }
+
+      // Initialize Choices.js for type dropdowns
+      document.addEventListener('DOMContentLoaded', function() {
+        const params = getQueryParams();
+        if (params.search) {
+          document.getElementById('componentTableSearch').value = params.search;
+        }
+        if (params.support) {
+          document.getElementById('supportFilter').value = params.support;
+        }
+        if (params.type) {
+          document.getElementById('typeFilter').value = params.type;
+        }
+        filterComponentTable();
+        const typeDropdowns = document.querySelectorAll('.type-dropdown');
+        typeDropdowns.forEach(dropdown => {
+          new Choices(dropdown, { searchEnabled: false, allowHTML: true });
+        });
+      });
+      </script>`;
 
       return self.createBlock(parent, 'pass', tableHtml);
     });
@@ -206,17 +299,38 @@ module.exports.register = function (registry, context) {
       const type = attributes['type'];
 
       if (!name || !type) {
-        console.log('Name or type attribute is missing');
         return self.createBlock(parent, 'pass', '');
       }
 
       const flatComponentsData = context.config?.attributes?.flatComponentsData || []
       const component = flatComponentsData.find(item => item.originalName === name);
 
-      if (!component || component.types.length <= 1) {
+      if (!component) {
         return self.createBlock(parent, 'pass', '');
       }
 
+      // Check if the component requires an Enterprise license
+      let enterpriseAdmonition = '';
+      if (component.enterprise) {
+        enterpriseAdmonition = `
+        <div class="admonitionblock note">
+          <table>
+            <tbody>
+              <tr>
+                <td class="icon">
+                  <i class="fa icon-note" title="Note"></i>
+                </td>
+                <td class="content">
+                  <div class="paragraph">
+                  <p>This feature requires an <a href="https://redpanda.com/compare-platform-editions" target="_blank">Enterprise license</a>. To upgrade, contact <a href="https://redpanda.com/try-redpanda?section=enterprise-trial" target="_blank" rel="noopener">Redpanda sales</a>.</p>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>`;
+      }
+
       // Move the page's current type to the first position in the dropdown
       const sortedTypes = [...component.types];
       const currentTypeIndex = sortedTypes.findIndex(typeObj => typeObj.type === type);
@@ -224,25 +338,26 @@ module.exports.register = function (registry, context) {
         const [currentType] = sortedTypes.splice(currentTypeIndex, 1);
         sortedTypes.unshift(currentType);
       }
-
-      const typeDropdown = `
-<div class="page-type-dropdown">
-  <p>Type: </p>
-  <select class="type-dropdown" onchange="window.location.href=this.value">
-    ${sortedTypes.map(typeObj => `<option value="${typeObj.url}" data-support="${typeObj.support}">${typeObj.type.charAt(0).toUpperCase() + typeObj.type.slice(1)}</option>`).join('')}
-  </select>
-</div>
-<script>
-// Initialize Choices.js for type dropdowns
-document.addEventListener('DOMContentLoaded', function() {
-  const typeDropdowns = document.querySelectorAll('.type-dropdown');
-  typeDropdowns.forEach(dropdown => {
-    new Choices(dropdown, { searchEnabled: false, allowHTML: true, shouldSort: false });
-  });
-});
-</script>`;
-
-      return self.createBlock(parent, 'pass', typeDropdown);
+      let typeDropdown = '';
+      if (component.types.length > 1) {
+        typeDropdown = `
+        <div class="page-type-dropdown">
+          <p>Type: </p>
+          <select class="type-dropdown" onchange="window.location.href=this.value">
+            ${sortedTypes.map(typeObj => `<option value="${typeObj.url}" data-support="${typeObj.support}">${typeObj.type.charAt(0).toUpperCase() + typeObj.type.slice(1)}</option>`).join('')}
+          </select>
+        </div>
+        <script>
+        // Initialize Choices.js for type dropdowns
+        document.addEventListener('DOMContentLoaded', function() {
+          const typeDropdowns = document.querySelectorAll('.type-dropdown');
+          typeDropdowns.forEach(dropdown => {
+            new Choices(dropdown, { searchEnabled: false, allowHTML: true, shouldSort: false });
+          });
+        });
+        </script>`;
+      }
+      return self.createBlock(parent, 'pass', typeDropdown + enterpriseAdmonition);
     });
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redpanda-data/docs-extensions-and-macros",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "description": "Antora extensions and macros developed for Redpanda documentation.",
   "keywords": [
     "antora",