fix(js): Apply fixes for CoPilot suggestions.

pull/6079/head
Jason Stirnaman 2025-05-27 17:38:51 -05:00
parent 0696335ff6
commit c214ff44a8
3 changed files with 50 additions and 33 deletions

View File

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

View File

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

View File

@ -7,6 +7,7 @@ export default function SearchInteractions({ searchInput }) {
let observer = null; let observer = null;
let dropdownObserver = null; let dropdownObserver = null;
let dropdownMenu = null; let dropdownMenu = null;
const debug = false; // Set to true for debugging logs
// Fade content wrapper when focusing on search input // Fade content wrapper when focusing on search input
function handleFocus() { function handleFocus() {
@ -18,9 +19,11 @@ export default function SearchInteractions({ searchInput }) {
function handleBlur(event) { function handleBlur(event) {
// Only process blur if not clicking within dropdown // Only process blur if not clicking within dropdown
const relatedTarget = event.relatedTarget; const relatedTarget = event.relatedTarget;
if (relatedTarget && ( if (
relatedTarget.closest('.algolia-autocomplete') || relatedTarget &&
relatedTarget.closest('.ds-dropdown-menu'))) { (relatedTarget.closest('.algolia-autocomplete') ||
relatedTarget.closest('.ds-dropdown-menu'))
) {
return; return;
} }
@ -41,10 +44,10 @@ export default function SearchInteractions({ searchInput }) {
observer = new MutationObserver((mutations) => { observer = new MutationObserver((mutations) => {
for (const mutation of mutations) { for (const mutation of mutations) {
if (mutation.type === 'childList') { 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) { if (newDropdown) {
console.log('DocSearch dropdown detected');
// Save reference to dropdown // Save reference to dropdown
dropdownMenu = newDropdown; dropdownMenu = newDropdown;
newDropdown.setAttribute('data-monitored', 'true'); newDropdown.setAttribute('data-monitored', 'true');
@ -52,9 +55,16 @@ export default function SearchInteractions({ searchInput }) {
// Monitor dropdown removal/display changes // Monitor dropdown removal/display changes
dropdownObserver = new MutationObserver((dropdownMutations) => { dropdownObserver = new MutationObserver((dropdownMutations) => {
for (const dropdownMutation of dropdownMutations) { for (const dropdownMutation of dropdownMutations) {
if (dropdownMutation.type === 'attributes' && if (debug) {
dropdownMutation.attributeName === 'style') { if (
console.log('Dropdown style changed:', dropdownMenu.style.display); dropdownMutation.type === 'attributes' &&
dropdownMutation.attributeName === 'style'
) {
console.log(
'Dropdown style changed:',
dropdownMenu.style.display
);
}
} }
} }
}); });
@ -62,7 +72,7 @@ export default function SearchInteractions({ searchInput }) {
// Observe changes to dropdown attributes (like style) // Observe changes to dropdown attributes (like style)
dropdownObserver.observe(dropdownMenu, { dropdownObserver.observe(dropdownMenu, {
attributes: true, attributes: true,
attributeFilter: ['style'] attributeFilter: ['style'],
}); });
// Add event listeners to keep dropdown open when interacted with // Add event listeners to keep dropdown open when interacted with
@ -78,7 +88,7 @@ export default function SearchInteractions({ searchInput }) {
// Start observing the document body for dropdown creation // Start observing the document body for dropdown creation
observer.observe(document.body, { observer.observe(document.body, {
childList: true, childList: true,
subtree: true subtree: true,
}); });
// Return cleanup function // Return cleanup function