Skip to content

Conversation

@iOvergaard
Copy link
Contributor

Summary

Refactors the log viewer search functionality to improve code quality and add user-requested features.

Changes:

  1. Fix date range fallback - Prevents console errors when dates are missing
  2. Replace RxJS Subject with UmbStringState - Resolves TODO by using Umbraco patterns instead of raw RxJS
  3. Improve architecture - Move search triggering to the messages list component (data consumer owns fetching)
  4. Add refresh button - Allows re-running searches with same query
  5. Maintain debouncing - Use local UmbStringState to preserve 250ms debounce on user input

Benefits:

  • Prevents unnecessary API calls when not viewing logs
  • Better separation of concerns
  • Improved user experience by adding a refresh button to the search field, so you can search for the same query again without activating polling

Test Steps

Basic Search Functionality

  1. Navigate to Settings → Log Viewer → Search tab
  2. Type a search query in the search field
  3. Verify search executes after ~250ms of stopping typing (debounced)
  4. Verify results appear correctly

Refresh Button

  1. Enter a search query and wait for results
  2. Click the refresh button (icon-refresh) next to the search field
  3. Verify search executes immediately without debounce delay

Saved Searches

  1. Enter a search query
  2. Click the save button (icon-favorite)
  3. Save the search with a name
  4. Click on the saved search from the dropdown
  5. Verify search executes immediately without debounce

URL Parameters

  1. Navigate to the log viewer with URL parameters: ?lq=Error&startDate=2025-11-19&endDate=2025-11-20
  2. Verify search criteria are applied from the URL on initial page load
  3. Share the URL with the current search - verify it works when others open it

Date Range Handling

  1. Navigate to the log viewer without date parameters in the URL
  2. Verify default dates (yesterday to today) are applied without console errors

iOvergaard and others added 6 commits November 20, 2025 10:53
…ture

- Replace RxJS Subject with UmbStringState to follow Umbraco patterns
- Move debounced search observation to messages list component
  - Only triggers when component is mounted (logs are visible)
  - Prevents unnecessary API calls on other views
- Simplify search input to just update context state
- Add semantic form structure with role="search" for accessibility
- Add visually-hidden submit button for keyboard navigation
- Allow re-running same query via form submission (bypasses debounce)
- Follow same architecture pattern as date range selector

This resolves the TODO to not use RxJS directly and significantly improves
separation of concerns where the data consumer (messages list) owns the
fetching logic.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Add refresh button with icon-refresh next to save and clear buttons
- Allows users to re-run search with same query (bypasses debounce)
- Remove form structure that couldn't work due to Shadow DOM boundaries
- Simplify parent component by removing form submission logic
- Keep role="search" for accessibility

The refresh button provides a more discoverable UI than the hidden submit
button approach and avoids Shadow DOM event bubbling issues.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Add local UmbStringState to debounce user input (250ms)
- Only update context filterExpression after debounce
- Remove debouncing from messages list (now handled at input level)
- Saved searches and refresh button still bypass debounce for immediate feedback

This restores the expected debouncing behavior while maintaining the clean
architecture where the messages list triggers searches based on context changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR refactors the log viewer search functionality to improve code quality and user experience. The main achievement is replacing RxJS Subject with the Umbraco-standard UmbStringState pattern, improving architecture by moving search triggering responsibility to the data consumer (messages list), and adding a user-requested refresh button.

Key changes:

  • Replaces RxJS Subject with UmbStringState for better alignment with Umbraco patterns
  • Moves search triggering logic from input component to messages list component (data consumer owns data fetching)
  • Adds refresh button functionality to re-run searches without toggling polling

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File Description
log-viewer-search-input.element.ts Refactors search input to use UmbStringState for debouncing, removes loader UI, adds refresh button functionality
log-viewer-messages-list.element.ts Adds observer for filterExpression changes to trigger search when component is mounted and filter changes
log-viewer-date-range-selector.element.ts Adds nullish coalescing to prevent console errors when dateRange is undefined
log-search-view.element.ts Adds accessibility attributes (role and aria-label) to search header

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Copy link
Member

@leekelleher leekelleher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested out, all working as described. 🚀

@leekelleher leekelleher merged commit 04f98a7 into main Nov 24, 2025
28 checks passed
@leekelleher leekelleher deleted the v17/bugfix/logviewer-search-on-enter branch November 24, 2025 08:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants