Retain filtered search results in URL for Commits list

Summary

Implement URL synchronization for the refactored commit list page to persist filter state in the URL, enabling shareable links and browser navigation support.

This addresses a missing feature identified in the feedback issue for the commit list refactor.

Problem

The refactored commit list (&17482) introduced a filtered search bar but doesn't persist filter selections in the URL. This means:

  • Users cannot share filtered views via URL
  • Browser back/forward navigation doesn't work with filters
  • Refreshing the page loses all applied filters
  • No deep linking support for specific filtered views

Solution

Implement bidirectional URL synchronization:

  • Read from URL: Initialize filters from query parameters on page load
  • Write to URL: Update URL when filters or page size changes
  • Route watching: Respond to browser navigation (back/forward)

URL Format

?author=username&message=searchtext&page_size=N&committed_after=YYYY-MM-DD&committed_before=YYYY-MM-DD

Implementation Details

Code Organization

Created dedicated utilities folder structure:

app/assets/javascripts/projects/commits/
├── utils/
│   ├── commit_grouping.js    ← Groups commits by day
│   └── url_sync.js            ← URL ↔ filter state conversion (extracted utilities)
└── components/
    ├── commit_list_app.vue
    ├── commit_list_header.vue
    └── commit_filtered_search.vue

Key Changes

  1. URL Sync Utilities (utils/url_sync.js): Extracted 3 utility functions with 23 comprehensive tests
  2. Bidirectional Synchronization:
    • URL reading on mount and route watching
    • URL updates when filters/page size change
    • 29 new tests for URL synchronization features
  3. Code Reorganization: Moved utils.jsutils/commit_grouping.js for better organization
  4. Test Improvements: Reduced wrapper.vm usage (31 → 7 instances), improved test descriptions

Supported Filters

  • Author (?author=username)
  • Message (?message=searchtext)
  • Committed after (?committed_after=YYYY-MM-DD)
  • Committed before (?committed_before=YYYY-MM-DD)
  • Page size (?page_size=N, omitted when default value of 20)

Testing

Comprehensive test coverage includes:

  • Reading filters from URL on mount
  • Writing filters to URL when changed
  • Browser back/forward navigation
  • Page size persistence
  • Filter clearing
  • Branch switching with filters
  • Default value handling

References

Feature Flag

Requires project_commits_refactor feature flag to be enabled.

Edited by 🤖 GitLab Bot 🤖