fix(docs) hide integrations when empty

Author: sergical

src/components/docPage/type.scss

@@ -206,7 +206,8 @@
     margin-top: 0;
   }
 
-  [data-onboarding-option].hidden {
+  [data-onboarding-option].hidden,
+  [data-integrations-wrapper].hidden {
     display: none;
   }
   // force hide markers (___PRODUCT_OPTION_START___ and ___PRODUCT_OPTION_END___)

src/components/onboarding/index.tsx

@@ -229,6 +229,46 @@ export function updateElementsVisibilityForOptions(
       });
     }
   });
+
+  // Handle integrations wrapper: hide opening/closing brackets if no integrations are visible
+  const openWrappers = document.querySelectorAll<HTMLElement>('[data-integrations-wrapper="open"]');
+
+  openWrappers.forEach(openLine => {
+    const codeBlock = openLine.closest('code.code-highlight');
+    if (!codeBlock) return;
+
+    const allLines = Array.from(codeBlock.children) as HTMLElement[];
+    const openIndex = allLines.indexOf(openLine);
+
+    // Find the matching close line in the same code block
+    let closeIndex = -1;
+    for (let i = openIndex + 1; i < allLines.length; i++) {
+      if (allLines[i].dataset.integrationsWrapper === 'close') {
+        closeIndex = i;
+        break;
+      }
+    }
+
+    if (closeIndex === -1) return;
+
+    // Check if any lines between open and close are visible option lines
+    let hasVisibleIntegrations = false;
+    for (let i = openIndex + 1; i < closeIndex; i++) {
+      const line = allLines[i];
+      const isOption = line.dataset.onboardingOption;
+      const isHidden = line.classList.contains('hidden');
+      const isMarker = line.dataset.onboardingOptionHidden;
+
+      if (isOption && !isMarker && !isHidden) {
+        hasVisibleIntegrations = true;
+        break;
+      }
+    }
+
+    // Toggle visibility of both open and close lines
+    openLine.classList.toggle('hidden', !hasVisibleIntegrations);
+    allLines[closeIndex].classList.toggle('hidden', !hasVisibleIntegrations);
+  });
 }
 
 export function OnboardingOptionButtons({

src/rehype-onboarding-lines.js

@@ -42,6 +42,8 @@ function handle_inline_options(node) {
   // ___PRODUCT_OPTION_END___ session-replay
   const PRODUCT_OPTION_START = '___PRODUCT_OPTION_START___';
   const PRODUCT_OPTION_END = '___PRODUCT_OPTION_END___';
+
+  // First pass: mark lines with options
   node.children?.forEach(line => {
     const lineStr = toString(line);
     if (lineStr.includes(PRODUCT_OPTION_START)) {
@@ -55,4 +57,35 @@ function handle_inline_options(node) {
       line.properties['data-onboarding-option'] = currentOption;
     }
   });
+
+  // Second pass: Mark integrations array opening/closing lines
+  // These should be hidden if all content inside is from options that are disabled
+  for (let i = 0; i < (node.children?.length ?? 0); i++) {
+    const line = node.children[i];
+    const lineStr = toString(line).trim();
+
+    // Found "integrations: ["
+    if (lineStr.match(/integrations:\s*\[/)) {
+      console.log('🎯 Found integrations opening at line', i, ':', lineStr);
+      // Mark the opening line and hide it by default
+      line.properties['data-integrations-wrapper'] = 'open';
+      line.properties.className = [...(line.properties.className || []), 'hidden'];
+
+      // Find the closing "],"
+      for (let j = i + 1; j < node.children.length; j++) {
+        const closeStr = toString(node.children[j]).trim();
+        if (closeStr.includes('],')) {
+          console.log('🎯 Found integrations closing at line', j, ':', closeStr);
+          // Mark the closing line and hide it by default
+          node.children[j].properties['data-integrations-wrapper'] = 'close';
+          node.children[j].properties.className = [
+            ...(node.children[j].properties.className || []),
+            'hidden',
+          ];
+          break;
+        }
+      }
+      break; // Only handle first integrations array
+    }
+  }
 }