grafana/e2e-playwright
Deyan Halachliyski 62b2a202de
Alerting: Add saved searches feature for alert rules page (#115001)
* Alerting: Add saved searches feature for alert rules page

Add ability to save, rename, delete, and apply search queries on the
Alert Rules page. Includes auto-apply default search on navigation
and UserStorage persistence.

Behind feature toggle `alertingSavedSearches` (disabled by default).

* Alerting: Add i18n translations for saved searches

* Alerting: Remove unused imports in saved searches

* Alerting: Add CODEOWNERS for e2e-playwright/alerting-suite

* Alerting: Add useSavedSearches mock to RulesFilter.v2 tests

* Alerting: Fix failing unit tests for saved searches

- Fix Jest mock hoisting issue in useSavedSearches.test.ts by configuring
  UserStorage mock implementation after imports instead of inline
- Update SavedSearches.test.tsx to use findBy* queries for async popup content
- Fix tests to click apply button instead of text for applying searches
- Update maxLength test to verify attribute instead of trying to exceed it

* Alerting: Fix saved searches test mocking and assertions

- Fix UserStorage mock in useSavedSearches.test.ts by creating mock with
  default Promise-returning functions inside jest.mock() factory, then
  accessing the instance via getMockUserStorageInstance() helper
- Fix SavedSearches.test.tsx apply button tests to use correct accessible
  name "Apply this search" (from tooltip) instead of dynamic aria-label
- Fix disabled button assertion to check native disabled attribute instead
  of relying on aria-disabled which is set inconsistently by Button component
- Use findAllByRole for async popup content queries

* Alerting: Fix test query for disabled save button

Use findByText + closest instead of findByRole to find the disabled
"Save current search" button. The Grafana Button component renders
with conflicting accessibility attributes (disabled="" + aria-disabled="false")
which breaks role-based queries in React Testing Library.

* fix(alerting): preserve UserStorage mock reference before clearAllMocks

* fix(alerting): add missing test mocks for crypto and console

- Mock crypto.randomUUID for Node.js test environment
- Add console.error spy to tests expecting storage/parse errors
- Add console.warn spy to test expecting validation warnings

Fixes jest-fail-on-console failures and crypto.randomUUID TypeError.

* fix(alerting): add console.error spy to save failure test

* fix(alerting): address PR review feedback for saved searches

- Register alertingSavedSearches feature toggle in backend
- Extract shared types to SavedSearches.types.ts to fix circular dependencies
- Extract sub-components: InlineSaveInput, InlineRenameInput, SavedSearchItem
- Remove unused imports (IconButton, Input) and styles from SavedSearches.tsx
- Add try/catch for auto-apply default search error handling
- Remove maxLength validation and corresponding test

* fix(alerting): fix validation error display in saved searches

- Fix useEffect dependency array that was immediately clearing validation errors
- Remove error from deps so errors only clear when user types, not when set
- Run i18n-extract to remove unused error-name-too-long translation key

* fix(alerting): address PR review feedback for saved searches

- Replace toHaveBeenCalled assertions with UI verification using AppNotificationList
- Rename useSavedSearches.test.ts to .tsx for JSX support
- Update README documentation to reflect current test patterns
- Add test cleanup between E2E tests to prevent data leakage

* fix(alerting): remove unused import and fix test wrapper

- Remove unused locationService import from RulesFilter.v2.tsx
- Add missing bootData spread in useSavedSearches.test.tsx mock
- Add createWrapper to renderHook call for user-specific storage key test

* fix(alerting): add Redux wrapper to all useSavedSearches hook tests

All renderHook calls for useSavedSearches now include the createWrapper()
which provides the Redux Provider context required by useAppNotification.

* fix(alerting): use regex patterns in MSW handlers for UserStorage tests

MSW handlers now use regex patterns to match any namespace and user UID,
since UserStorage reads config values from internal imports that aren't
affected by jest.mock of @grafana/runtime.

* fix(alerting): mock UserStorage directly instead of using MSW

Replace MSW HTTP handlers with a direct mock of the UserStorage class.
The MSW approach failed because UserStorage evaluates config.namespace
at module load time, before jest.mock takes effect, causing the regex
patterns to not match the actual request URLs.

This follows the same pattern used in useFavoriteDatasources.test.ts.

* refactor(alerting): use react-hook-form and Dropdown for saved searches

- Migrate InlineRenameInput and InlineSaveInput to react-hook-form
- Replace custom PopupCard with Grafana Dropdown component
- Use useReducer for centralized dropdown state management
- Add stopPropagation handlers to prevent dropdown closing during form interactions
- Update tests to use real useSavedSearches hook with mocked UserStorage
- Consolidate and simplify saved searches test suite

* fix: resolve CI failures in SavedSearches component

- Fix TypeScript TS2540 errors by using MutableRefObject type for refs
- Fix form submission by using onClick instead of type="submit" on IconButton
  (IconButton doesn't forward the type prop to the underlying button)
- Fix action menu tests by stopping click propagation on ActionMenu wrapper
- Fix Escape key handling by focusing the dialog element instead of the
  potentially-disabled save button

* fix(alerting): add navTree to runtime mock in useSavedSearches tests

Add empty navTree array to the @grafana/runtime config mock to prevent
store initialization crash when buildInitialState() calls .find() on
undefined navTree.

* fix(alerting): add error handling for auto-apply default search

Wrap handleApplySearch call in try-catch to prevent unhandled exceptions
when auto-applying the default saved search on navigation.

* fix(alerting): prevent saved searches dropdown from closing when clicking action menu

The nested Dropdown components caused the outer SavedSearches dropdown to close
when clicking on action menu items (Set as default, Rename, Delete). This happened
because @floating-ui/react's useDismiss hook detected clicks on the inner Menu
(rendered via Portal) as "outside" clicks.

Fix: Replace the outer Dropdown with PopupCard and add custom click-outside
handling that explicitly excludes portal elements ([role="menu"] and
[data-popper-placement]). This matches the pattern used before the Dropdown
refactor.

Changes:
- SavedSearches.tsx: Use PopupCard instead of Dropdown, add click-outside handler
- SavedSearchItem.tsx: Add menuPortalRoot prop for action menu positioning
- RulesFilter.v2.tsx: Fix double analytics tracking on auto-apply

* fix(alerting): auto-apply default saved search on page navigation

The default saved search was not being applied when navigating to the
Alert rules page. This was caused by a race condition where `isLoading`
was `false` on initial render (status was 'not-executed'), causing the
auto-apply effect to run before saved searches were loaded.

Fix: Include the uninitialized state in the loading check so the effect
waits until data is actually loaded before attempting to auto-apply.

Also adds tests for the auto-apply functionality.

* fix(alerting): align action menu icon and improve saved search tests

- Fix vertical alignment of three-dot menu icon in saved search items
  by adding flex centering to the wrapper div
- Add feature toggle setup/teardown in saved searches test suite
- Fix location mocking in test for URL search parameter handling

* refactor(alerting): improve saved searches validation and organization

- Rename SavedSearches.types.ts to savedSearchesSchema.ts
- Use react-hook-form's built-in validation instead of manual setError
- Change error handling to throw ValidationError instead of returning it
- Add type guard isValidationError for safe error checking
- Add alphabetical sorting for saved searches (default first)
- Replace console.warn/error with logWarning/logError for analytics
- Extract helper functions: sortSavedSearches, loadSavedSearchesFromStorage, hasUrlSearchQuery

* refactor(alerting): address PR review comments for saved searches (steps 9-12)

- Add comprehensive comment explaining useEffect double-render limitation
  and potential future improvements for default search auto-apply (step 9)
- Add test documenting expected behavior when navigating back to alert list
  after leaving the page - default filter is re-applied (step 10)
- Update RulesFilter.v2.test.tsx to use testWithFeatureToggles helper and
  add MSW UserStorage handlers for future use (step 11)
- Update SavedSearches.test.tsx to use render from test/test-utils and
  byRole selectors for menu items (step 12)

* test(alerting): update saved searches tests for refactored API

- Update mockSavedSearches order to match sorted output (default first, then alphabetically)
- Change validation error tests to use rejects pattern (saveSearch/renameSearch now throw)
- Add hasPermission mock to contextSrv for module-level permission check

* fix(alerting): fix CI failures for saved searches

- Update onRenameComplete type to match throw-based API (Promise<void>)
- Run i18n-extract to add missing translation keys

* fix(alerting): salvage valid entries when saved searches validation fails

Instead of returning an empty array when array validation fails,
iterate through each item and keep only the valid entries.
This prevents losing all saved searches if a single entry is corrupted.

* test(alerting): update test to expect valid entries to be preserved

Update the test assertion to match the new behavior where valid saved
search entries are preserved when some entries fail validation, rather
than discarding all entries.

* fix(alerting): eliminate double API request on saved search auto-apply

Move saved searches loading and auto-apply logic from RulesFilterV2 to
RuleListPage. This ensures the default search filter is applied BEFORE
FilterView mounts, preventing double API requests on initial page load.

- Load saved searches at RuleListPage level
- Gate RuleList rendering until saved searches are loaded
- Pass savedSearchesResult as prop to avoid duplicate hook calls
- Remove auto-apply tests from RulesFilter.v2.test.tsx (behavior moved)

* fix(alerting): mock useSavedSearches in RuleList.v2 tests

The useSavedSearches hook triggers async state updates that complete
after tests finish, causing React act() warnings. Mock the hook to
prevent async operations during tests.

* refactor(alerting): migrate saved searches tests to use MSW

Address code review feedback by migrating UserStorage tests from
jest.mock to MSW-based mocking:

- Add MSW helper functions (setAlertingStorageItem, getAlertingStorageItem)
  to simplify test setup for UserStorage
- Migrate useSavedSearches.test.tsx to use MSW handlers instead of
  jest.mock('@grafana/runtime/internal')
- Migrate RulesFilter.v2.test.tsx to use MSW handlers
- Update README documentation to accurately reflect how tests use MSW
- Add tests for default search auto-apply behavior in RuleListPage
- Simplify comments to be concise and accurate

* fix(alerting): mock UserStorage directly in useSavedSearches tests

The UserStorage class caches its storage spec at the instance level,
and the useSavedSearches hook creates the instance at module level.
This caused test isolation issues where cached state leaked between
tests, making all tests that depended on loading data fail.

Fix by mocking UserStorage class directly instead of relying on MSW
handlers. This gives each test explicit control over what getItem
and setItem return, ensuring proper isolation.

Also update persistence assertions to verify mock.setItem calls
instead of reading from MSW storage (which the mock bypasses).

* refactor(alerting): remove setup helper in SavedSearches tests

Replace the `setup()` helper function with direct `render()` calls
as suggested in PR review. This makes tests more explicit about
what component is being rendered and with what props.

* refactor(alerting): extract default search auto-apply into dedicated hook

Moves the default saved search auto-apply logic from useSavedSearches into
a new useApplyDefaultSearch hook. This improves separation of concerns by
keeping useSavedSearches focused on CRUD operations while the new hook
handles the page-level auto-apply behavior.

Key changes:
- Created useApplyDefaultSearch hook with session-based visit tracking
- Removed getAutoApplySearch method and user-specific session keys from useSavedSearches
- Exported loadDefaultSavedSearch utility for independent default search loading
- Simplified test mocks to use loadDefaultSavedSearch instead of full hook mocking
- Removed unused savedSearchesResult prop passing through component tree

* fix(alerting): improve default search auto-apply timing and test reliability

Replace react-use's auto-executing useAsync with internal useAsync hook
for better control over when default search is loaded. This prevents
race conditions and ensures the async operation only executes when needed.

Test improvements:
- Add proper session storage cleanup in beforeEach
- Use waitFor to handle async operations correctly
- Prevent visited flag from affecting subsequent tests
- Clear mock call history between tests

The internal useAsync hook doesn't auto-execute on mount, allowing us to
control exactly when the default search loads based on conditions rather
than relying on dependency array triggers.

---------

Co-authored-by: Konrad Lalik <konradlalik@gmail.com>
2025-12-19 15:32:27 +01:00
..
alerting-suite Alerting: Add saved searches feature for alert rules page (#115001) 2025-12-19 15:32:27 +01:00
cloud-plugins-suite Azure: Resource picker improvements (#109458) (#109520) 2025-09-02 11:02:01 +01:00
dashboard-cujs Scopes: Don't use redirect if you're on an active scope navigation (#115149) 2025-12-11 17:42:47 +01:00
dashboard-new-layouts Dashboards: Add missing keyboard shortcuts for new layouts (#115377) 2025-12-16 09:34:10 -05:00
dashboards ConditionalRendering: Fix for repeated items (#114160) 2025-11-27 12:05:15 +01:00
dashboards-search-suite E2E: migrate to playwright (#107241) 2025-07-11 10:31:33 +01:00
dashboards-suite Dashboard : Allow applying variable regex to display text (#114426) 2025-12-09 10:55:51 -05:00
extensions Playwright: Changes needed for enterprise tests (#110424) 2025-09-03 15:45:54 +01:00
fixtures E2E: Fix trace-view-scrolling test flakiness (#111896) 2025-10-02 09:29:10 +01:00
panels-suite Table: Remove hardcoded assumption of __nestedFrames field name (#115117) 2025-12-12 21:57:47 +00:00
plugin-e2e Suggestions: improve styling for new version (#114381) 2025-12-02 11:36:46 -08:00
smoke-tests-suite Suggestions: improve styling for new version (#114381) 2025-12-02 11:36:46 -08:00
storybook E2E: fix storybook e2e playwright test (#108010) 2025-07-11 10:50:00 +00:00
test-plugins e2e: add tests for translations (#114390) 2025-12-08 10:19:44 +01:00
unauthenticated Playwright: Acceptance tests (#108770) 2025-07-28 17:32:18 +01:00
utils Scopes: Don't use redirect if you're on an active scope navigation (#115149) 2025-12-11 17:42:47 +01:00
various-suite AppChrome: Add proper menu icon for menu, logo icon becomes home (#114713) 2025-12-09 09:59:40 +01:00
start-server Playwright: Changes needed for enterprise tests (#110424) 2025-09-03 15:45:54 +01:00