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-DDImplementation 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.vueKey Changes
- URL Sync Utilities (
utils/url_sync.js): Extracted 3 utility functions with 23 comprehensive tests - Bidirectional Synchronization:
- URL reading on mount and route watching
- URL updates when filters/page size change
- 29 new tests for URL synchronization features
- Code Reorganization: Moved
utils.js→utils/commit_grouping.jsfor better organization - Test Improvements: Reduced
wrapper.vmusage (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
- Parent Epic: &17482 Refactor repository Commit list
- Feedback Issue: #598401 Feedback: New commit list experience
- Original Request: #598401 (comment 3295523443)
- Implementation MR: !233641 (merged)
Feature Flag
Requires project_commits_refactor feature flag to be enabled.
Edited by 🤖 GitLab Bot 🤖