Date picker

[Mbeaulne]

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

Description

Adds a date range picker to the pipeline run filters bar for filtering runs by creation date.

Note: This is a UI-only preview. The filters update the URL but are not properly connected to the API, causing a broken search state. This is resolved in a later PR in the stack.

Type of Change

• New feature

Changes

• Added Calendar and DatePickerWithRange UI components (shadCN with custom selection colors)
• Added date range picker to PipelineRunFiltersBar

Dependencies

• Added date-fns and react-day-picker for date range selection

Checklist

• I have tested this does not break current pipelines/runs functionality

Test Instructions

1. Enable the feature flag: Settings → Beta → "Pipeline run filters bar (UI only)"
2. Navigate to the Runs tab on the home page
3. Click the date range picker and verify:
   • Calendar popover opens with two months
   • Can select a date range
   • Selection uses the app's edge-selected color
   • Future dates are disabled

[Mbeaulne]

• Filter Bar #1708 : 2 dependent PRs (#1709 , #1711 )
• Add created by me filter #1713
• Status filter #1707
• Annotation Filter input #1706
• Date picker #1705 👈 (View in Graphite)
• 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.

[camielvs]

When I select a date the app crashes

TypeError: filter.split is not a function
    at parseFilter (RunSection.tsx:50:26)
    at RunSection (RunSection.tsx:62:22)
    ...

The above error occurred in the <RunSection> component.

[Mbeaulne]

When I select a date the app crashes

TypeError: filter.split is not a function
    at parseFilter (RunSection.tsx:50:26)
    at RunSection (RunSection.tsx:62:22)
    ...

The above error occurred in the <RunSection> component.

​That is correct. I haven't hooked the API up to the client so things break. Later in the stack you will see that it works.

[camielvs]

Any reason to not make it fail gracefully up until the PR where the functionality is actually implemented?

In theory we ship this stack as one. But there's a chance we don't... I feel a little icky about having a PR with a known crash in it (even if that crash is fixed later in the stack)

[Mbeaulne]

Any reason to not make it fail gracefully up until the PR where the functionality is actually implemented?

In theory we ship this stack as one. But there's a chance we don't... I feel a little icky about having a PR with a known crash in it (even if that crash is fixed later in the stack)

This is all behind a feature flag that explicitly says its UI only. I think its very low risk, and we will likely launch it all at once anyway

I Don't think we should be too concerned with "broken" UI since its behind a feature flag and will likely get merged into production at the same time as the rest of the stack

[Mbeaulne]

Merge activity

• Feb 18, 2:55 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Feb 18, 2:55 PM UTC: Graphite rebased this pull request as part of a merge.
• Feb 18, 2:57 PM UTC: @Mbeaulne merged this pull request with Graphite.