Filter Bar

[Mbeaulne]

Description

Resolves: https://github.com/Shopify/oasis-frontend/issues/459

Added a new PipelineRunFiltersBar component that provides comprehensive filtering capabilities for pipeline runs. This component includes:

• Search by pipeline name with debounced input
• Status filtering with dropdown selection
• Date range filtering with a date picker
• Sorting options by date or name with direction toggle
• Annotation filtering with key-value pairs
• Visual indicators for active filters with the ability to remove individual filters
• Clear all filters functionality
• Display of filtered results count

Type of Change

• New feature
• Improvement

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

1. Navigate to a page that displays pipeline runs
2. Test each filter type:
   • Enter text in the search field to filter by name
   • Select different statuses from the dropdown
   • Set a date range using the date picker
   • Add annotations with key-value pairs
   • Try different sort options and directions
3. Verify that active filters display correctly with badges
4. Test removing individual filters and clearing all filters
5. Confirm the count of displayed runs updates correctly

[Mbeaulne]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Filter Bar #1708 : 2 dependent PRs (#1709 , #1711 ) 👈 (View in Graphite)
• Add created by me filter #1713
• Status filter #1707
• Annotation Filter input #1706
• Date picker #1705
• Add pipeline run filters bar with search functionality #1734
• Add useRunSearchParams hook for pipeline run filtering #1704
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.