Retain filtered search results in URL for Commits list

Paulina Sedlak-Jakubowskarequested to merge
psj-filtered-search-retain-in-url into master

What does this MR do and why?

Commit 1: Extract URL sync utilities to separate module

SHA: b2ef8a0b

  • Created utils/url_sync.js with 3 utility functions
  • Created utils/url_sync_spec.js with 23 comprehensive tests
  • Improved code organization and testability

Commit 2: Add URL reflection for commit filter search tokens

SHA: 50192faa

  • Implemented bidirectional URL synchronization
  • Added URL reading on mount and route watching
  • Added 29 new tests for URL synchronization features
  • URL format: ?author=username&message=searchtext&page_size=N

Commit 3: Reorganize commits utilities into dedicated utils folder

SHA: 704e735d

  • Moved utils.js → utils/commit_grouping.js (more descriptive)
  • Moved utils_spec.js → utils/commit_grouping_spec.js
  • Updated all import statements
  • Consolidated all utility modules in dedicated utils/ directory

Commit 4: Refactor URL synchronization tests to follow GitLab testing guidelines

SHA: cc691292

  • Reduced wrapper.vm usage: 31 → 7 instances
  • Reduced test count: 187 → 180 tests
  • Improved test descriptions using description field in it.each

📁 Final Structure app/assets/javascripts/projects/commits/

├── utils/
│   ├── commit_grouping.js    ← Groups commits by day
│   └── url_sync.js            ← URL ↔ filter state conversion
└── components/
    ├── commit_list_app.vue
    ├── commit_list_header.vue
    └── commit_filtered_search.vue
spec/frontend/projects/commits/
└── utils/
    ├── commit_grouping_spec.js (5 tests)
    └── url_sync_spec.js        (23 tests)

References

Screenshots or screen recordings

Before After

How to set up and validate locally

  1. In rails console enable the feature flag 
    Feature.enable(:project_commits_refactor)

Test 1: Apply Author Filter

  1. On the commits page, click on the Author filter in the search bar
  2. Select a user (e.g., your own username or any committer)
  3. Verify: The URL updates to include the author parameter: http://127.0.0.1:3000/.../commits/master?author=username
  4. Verify: The commit list filters to show only commits by that author

Test 2: Apply Message Filter

  1. Clear any existing filters by clicking the X on filter tokens
  2. In the search bar, type a search term (e.g., "fix" or "add")
  3. Press Enter or click outside the search box
  4. Verify: The URL updates to include the message parameter: http://127.0.0.1:3000/.../commits/master?message=fix
  5. Verify: The commit list shows only commits with that text in the message

Test 3: Apply Both Filters

  1. Apply an author filter (e.g., select a username)
  2. Then add a message filter (e.g., type "merge")
  3. Verify: The URL includes both parameters: http://127.0.0.1:3000/.../commits/master?author=username&message=merge
  4. Verify: Commits are filtered by both author AND message

Test 4: Change Page Size

  1. If commits list has pagination (more than 20 commits), scroll to the bottom
  2. In the page size selector dropdown, select 50 or 100
  3. Verify: The URL updates to include page_size parameter: http://127.0.0.1:3000/.../commits/master?page_size=50
  4. Verify: More commits are displayed per page Test 5: URL Persistence on Page Refresh
  5. Apply some filters (e.g., author and message)
  6. Copy the URL from the browser address bar
  7. Refresh the page (F5 or Cmd+R)
  8. Verify: The filters remain applied after refresh
  9. Verify: The filtered commit list is the same as before refresh

Test 6: Share URL with Filters

  1. Apply filters to get a specific view (e.g., ?author=admin&message=fix)
  2. Copy the URL from the address bar
  3. Open a new incognito/private browser window
  4. Paste the URL and navigate to it
  5. Verify: The same filters are automatically applied
  6. Verify: The commit list shows the same filtered results

Test 7: Browser Back/Forward Navigation

  1. Start on commits page without filters
  2. Apply an author filter → URL changes to ?author=username
  3. Apply a message filter → URL changes to ?author=username&message=fix
  4. Click browser Back button ←
  5. Verify: URL goes back to ?author=username
  6. Verify: Message filter is removed, only author filter remains
  7. Click browser Forward button →
  8. Verify: URL returns to ?author=username&message=fix
  9. Verify: Both filters are re-applied

Test 8: Clear Filters

  1. Apply multiple filters (author + message)
  2. Click the X button on each filter token to remove them
  3. Verify: URL parameters are removed as filters are cleared
  4. Verify: Final URL has no query parameters (or only default ones)
  5. Verify: All commits are displayed (unfiltered)

Test 9: Branch Switching with Filters

  1. Apply filters on master branch (e.g., ?author=admin)
  2. Use the branch selector dropdown to switch to a different branch
  3. Verify: Filters are preserved in the URL for the new branch: http://127.0.0.1:3000/.../commits/develop?author=admin
  4. Verify: Filters are applied to the new branch's commits

Test 10: Default Page Size Behavior

  1. Start with no filters applied
  2. Verify: URL does NOT include page_size parameter (default is 20)
  3. Change page size to 50 → URL includes ?page_size=50
  4. Change page size back to 20
  5. Verify: URL removes the page_size parameter (back to default)

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Paulina Sedlak-Jakubowska

Merge request reports