Query cancel for new discover

changelogs/fragments/10727.yml

@@ -0,0 +1,2 @@
+feat:
+- Add cancel query feature to discover ([#10727](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10727))

config/opensearch_dashboards.yml

@@ -415,4 +415,4 @@
 
 # @experimental Set the value to true to enable context provider
 # contextProvider:
-#   enabled: true
+#   enabled: true

src/plugins/data/public/index.ts

@@ -520,6 +520,7 @@ export {
   IUiStart as DataPublicPluginStartUi,
   useQueryStringManager,
   getEffectiveLanguageForAutoComplete,
+  useCancelButtonTiming,
 } from './ui';
 
 /**

src/plugins/data/public/ui/hooks/index.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+export { useCancelButtonTiming } from './use_cancel_button_timing';

src/plugins/data/public/ui/hooks/use_cancel_button_timing.test.ts

@@ -0,0 +1,111 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useCancelButtonTiming } from './use_cancel_button_timing';
+
+describe('useCancelButtonTiming', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('should show cancel button initially when showInitially is true', () => {
+    const { result } = renderHook(() => useCancelButtonTiming(false, true));
+    expect(result.current).toBe(true);
+  });
+
+  it('should not show cancel button initially when showInitially is false', () => {
+    const { result } = renderHook(() => useCancelButtonTiming(false, false));
+    expect(result.current).toBe(false);
+  });
+
+  it('should show cancel button after 50ms delay when shouldShow becomes true', () => {
+    const { result, rerender } = renderHook(
+      ({ shouldShow }) => useCancelButtonTiming(shouldShow, false),
+      { initialProps: { shouldShow: false } }
+    );
+
+    expect(result.current).toBe(false);
+
+    rerender({ shouldShow: true });
+    expect(result.current).toBe(false); // Still false immediately
+
+    act(() => {
+      jest.advanceTimersByTime(50);
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it('should keep cancel button visible for minimum 200ms when hiding', () => {
+    const { result, rerender } = renderHook(
+      ({ shouldShow }) => useCancelButtonTiming(shouldShow, true),
+      { initialProps: { shouldShow: false } }
+    );
+
+    expect(result.current).toBe(true);
+
+    // Start hiding process
+    rerender({ shouldShow: false });
+    expect(result.current).toBe(true); // Still visible
+
+    // Wait 100ms (less than 200ms minimum)
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+    expect(result.current).toBe(true);
+
+    // Complete 200ms minimum display time
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+    expect(result.current).toBe(false);
+  });
+
+  it('should transition from initial mode to delayed mode after first query', () => {
+    const { result, rerender } = renderHook(
+      ({ shouldShow }) => useCancelButtonTiming(shouldShow, true),
+      { initialProps: { shouldShow: true } }
+    );
+
+    expect(result.current).toBe(true);
+
+    // Complete initial query
+    rerender({ shouldShow: false });
+    act(() => {
+      jest.advanceTimersByTime(200);
+    });
+    expect(result.current).toBe(false);
+
+    // Start new query - should now use 50ms delay
+    rerender({ shouldShow: true });
+    expect(result.current).toBe(false); // No longer shows immediately
+
+    act(() => {
+      jest.advanceTimersByTime(50);
+    });
+    expect(result.current).toBe(true);
+  });
+
+  it('should clean up timers on unmount', () => {
+    const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+    const { unmount } = renderHook(() => useCancelButtonTiming(true, true));
+
+    unmount();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+    clearTimeoutSpy.mockRestore();
+  });
+});

src/plugins/data/public/ui/hooks/use_cancel_button_timing.ts

@@ -0,0 +1,73 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * Custom hook for managing cancel button visibility with proper timing
+ * - Shows cancel button initially on page load if showInitially=true (for initial queries)
+ * - Hides button when initial query completes
+ * - Shows cancel button after 50ms delay when shouldShow becomes true (prevents flickering for quick queries)
+ * - Keeps button visible for minimum 200ms (smooth UX)
+ */
+export const useCancelButtonTiming = (shouldShow: boolean, showInitially: boolean = true) => {
+  const [shouldShowCancelButton, setShouldShowCancelButton] = useState(showInitially);
+  const cancelButtonTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const minimumDisplayTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const hasCompletedInitialQueryRef = useRef(false); // Track if initial query has completed
+
+  useEffect(() => {
+    if (shouldShow) {
+      // Clear any existing minimum display timer
+      if (minimumDisplayTimerRef.current) {
+        clearTimeout(minimumDisplayTimerRef.current);
+        minimumDisplayTimerRef.current = null;
+      }
+
+      // Start timer to show cancel button after 50ms (existing logic)
+      cancelButtonTimerRef.current = setTimeout(() => {
+        setShouldShowCancelButton(true);
+      }, 50);
+    } else {
+      // Clear the show timer
+      if (cancelButtonTimerRef.current) {
+        clearTimeout(cancelButtonTimerRef.current);
+        cancelButtonTimerRef.current = null;
+      }
+
+      // Mark that initial query has completed (if we were showing initially)
+      if (showInitially && !hasCompletedInitialQueryRef.current) {
+        hasCompletedInitialQueryRef.current = true;
+      }
+
+      // If button is currently visible, keep it visible for minimum 200ms
+      if (shouldShowCancelButton) {
+        minimumDisplayTimerRef.current = setTimeout(() => {
+          setShouldShowCancelButton(false);
+        }, 200);
+      } else {
+        setShouldShowCancelButton(false);
+      }
+    }
+
+    // Cleanup timers on unmount
+    return () => {
+      if (cancelButtonTimerRef.current) {
+        clearTimeout(cancelButtonTimerRef.current);
+      }
+      if (minimumDisplayTimerRef.current) {
+        clearTimeout(minimumDisplayTimerRef.current);
+      }
+    };
+  }, [shouldShow, shouldShowCancelButton, showInitially]);
+
+  return shouldShowCancelButton;
+};

src/plugins/data/public/ui/index.ts

@@ -57,3 +57,4 @@ export { SuggestionsComponent } from './typeahead';
 export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector';
 export { AdvancedSelector } from './dataset_selector/advanced_selector';
 export { ConfiguratorV2 } from './dataset_selector/configurator/configurator_v2';
+export { useCancelButtonTiming } from './hooks';

src/plugins/data/public/ui/query_editor/_query_editor.scss

@@ -86,6 +86,13 @@
   max-width: 32px;
 }
 
+// Global cancel button styling - applies everywhere
+.osdQueryEditor__cancelButton {
+  border: 1px solid $euiColorDanger !important;
+  border-radius: $euiSizeXS !important;
+  background-color: transparent !important;
+}
+
 .osdQueryEditor--updateButtonWrapper {
   :first-child {
     min-width: 0 !important;