fix(js): Apply fixes for CoPilot suggestions.

Author: jstirnaman

assets/js/components/doc-search.js

@@ -2,6 +2,7 @@
  * DocSearch component for InfluxData documentation
  * Handles asynchronous loading and initialization of Algolia DocSearch
  */
+const debug = false; // Set to true for debugging output
 
 export default function DocSearch({ component }) {
   // Store configuration from component data attributes
@@ -26,7 +27,9 @@ export default function DocSearch({ component }) {
 
   // Load DocSearch asynchronously
   function loadDocSearch() {
-    console.log('Loading DocSearch script...');
+    if (debug) {
+      console.log('Loading DocSearch script...');
+    }
     const script = document.createElement('script');
     script.src =
       'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js';
@@ -37,7 +40,9 @@ export default function DocSearch({ component }) {
 
   // Initialize DocSearch after script loads
   function initializeDocSearch() {
-    console.log('Initializing DocSearch...');
+    if (debug) {
+      console.log('Initializing DocSearch...');
+    }
     const multiVersion = ['influxdb'];
 
     // Use object-based lookups instead of conditionals for version and product names
@@ -168,6 +173,8 @@ export default function DocSearch({ component }) {
   // Return cleanup function
   return function cleanup() {
     // Clean up any event listeners if needed
-    console.log('DocSearch component cleanup');
+    if (debug) {
+      console.log('DocSearch component cleanup');
+    }
   };
 }

assets/js/flux-group-keys.js

@@ -116,7 +116,7 @@ export default function FluxGroupKeysDemo({ component }) {
     toggleCheckbox($(this));
     groupKey = getChecked(component);
     groupData();
-    buildGroupExample();
+    buildGroupExample(component);
   });
 
   // Group and render tables on load
@@ -240,8 +240,8 @@ function toggleCheckbox(element) {
 }
 
 // Build example group function
-function buildGroupExample($component) {
-  var columnCollection = getChecked($component)
+function buildGroupExample(component) {
+  var columnCollection = getChecked(component)
     .map((i) => '<span class=\"s2\">"' + i + '"</span>')
     .join(', ');
   $('pre#group-by-example')[0].innerHTML =

assets/js/utils/search-interactions.js

@@ -7,7 +7,8 @@ export default function SearchInteractions({ searchInput }) {
   let observer = null;
   let dropdownObserver = null;
   let dropdownMenu = null;
-  
+  const debug = false; // Set to true for debugging logs
+
   // Fade content wrapper when focusing on search input
   function handleFocus() {
     contentWrapper.style.opacity = '0.35';
@@ -18,53 +19,62 @@ export default function SearchInteractions({ searchInput }) {
   function handleBlur(event) {
     // Only process blur if not clicking within dropdown
     const relatedTarget = event.relatedTarget;
-    if (relatedTarget && (
-        relatedTarget.closest('.algolia-autocomplete') || 
-        relatedTarget.closest('.ds-dropdown-menu'))) {
+    if (
+      relatedTarget &&
+      (relatedTarget.closest('.algolia-autocomplete') ||
+        relatedTarget.closest('.ds-dropdown-menu'))
+    ) {
       return;
     }
-    
+
     contentWrapper.style.opacity = '1';
     contentWrapper.style.transition = 'opacity 200ms';
-    
+
     // Hide dropdown if it exists
     if (dropdownMenu) {
       dropdownMenu.style.display = 'none';
     }
   }
-  
+
   // Add event listeners
   searchInput.addEventListener('focus', handleFocus);
   searchInput.addEventListener('blur', handleBlur);
-  
+
   // Use MutationObserver to detect when dropdown is added to the DOM
   observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
       if (mutation.type === 'childList') {
-        const newDropdown = document.querySelector('.ds-dropdown-menu:not([data-monitored])');
+        const newDropdown = document.querySelector(
+          '.ds-dropdown-menu:not([data-monitored])'
+        );
         if (newDropdown) {
-          console.log('DocSearch dropdown detected');
-          
           // Save reference to dropdown
           dropdownMenu = newDropdown;
           newDropdown.setAttribute('data-monitored', 'true');
-          
+
           // Monitor dropdown removal/display changes
           dropdownObserver = new MutationObserver((dropdownMutations) => {
             for (const dropdownMutation of dropdownMutations) {
-              if (dropdownMutation.type === 'attributes' && 
-                  dropdownMutation.attributeName === 'style') {
-                console.log('Dropdown style changed:', dropdownMenu.style.display);
+              if (debug) {
+                if (
+                  dropdownMutation.type === 'attributes' &&
+                  dropdownMutation.attributeName === 'style'
+                ) {
+                  console.log(
+                    'Dropdown style changed:',
+                    dropdownMenu.style.display
+                  );
+                }
               }
             }
           });
-          
+
           // Observe changes to dropdown attributes (like style)
-          dropdownObserver.observe(dropdownMenu, { 
+          dropdownObserver.observe(dropdownMenu, {
             attributes: true,
-            attributeFilter: ['style']
+            attributeFilter: ['style'],
           });
-          
+
           // Add event listeners to keep dropdown open when interacted with
           dropdownMenu.addEventListener('mousedown', (e) => {
             // Prevent blur on searchInput when clicking in dropdown
@@ -74,24 +84,24 @@ export default function SearchInteractions({ searchInput }) {
       }
     }
   });
-  
+
   // Start observing the document body for dropdown creation
-  observer.observe(document.body, { 
-    childList: true, 
-    subtree: true 
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
   });
-  
+
   // Return cleanup function
   return function cleanup() {
     searchInput.removeEventListener('focus', handleFocus);
     searchInput.removeEventListener('blur', handleBlur);
-    
+
     if (observer) {
       observer.disconnect();
     }
-    
+
     if (dropdownObserver) {
       dropdownObserver.disconnect();
     }
   };
-}
+}