Annotation Filter input by Mbeaulne · Pull Request #1706 · TangleML/tangle-ui

Mbeaulne · 2026-01-27T15:45:09Z

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

Description

Adds an annotation filter input component for filtering pipeline runs by key-value annotation pairs.

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 AnnotationFilterInput component with:
- Add annotation filters with key and optional value
- Inline editing of existing filters (double-click to edit)
- Remove filters with X button
- Keyboard support (Enter to add/save, Escape to cancel)
Integrated annotation filters into PipelineRunFiltersBar

Checklist

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

Test Instructions

Enable the feature flag: Settings → Beta → "Pipeline run filters bar (UI only)"
Navigate to the Runs tab on the home page
Click "Add filter" in the Annotations row
Enter a key and optional value, press Enter or click Add
Double-click a badge to edit, click X to remove

Mbeaulne · 2026-01-27T15:45:29Z

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

morgan-wowk · 2026-02-09T23:13:09Z

src/utils/pipelineRunFilterUtils.ts

  if (filters.pipeline_name) count++;
+  if (filters.annotations && filters.annotations.length > 0) {
+    count += filters.annotations.length;
+  }


Hmm, it's interesting that we have dedicated business logic for determining the active filters count. As opposed to just checking the length of active filters; Assuming there is a source of active filters or active filters actually mean something beyond just a count.

The reason I mention this is because with this business logic not just being a simple length check from a better source of truth, I could see this function diverging in the future and becoming inaccurate.

I agree this was a maintenance hazard. I refactored countActiveFilters to derive from serializeFiltersToUrl as the source of truth for which filters are active, rather than manually enumerating each field. Now new scalar filter fields are automatically counted via a generic Object.keys loop, and only the fields that need special counting logic (date range grouped as one, annotations counted individually) are explicitly special-cased. This way the function stays accurate as the PipelineRunFilters type grows.

camielvs · 2026-02-10T20:47:18Z

src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx

+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && keyInput.trim()) {
+      e.preventDefault();
+      handleAdd();
+    }
+    if (e.key === "Escape") {
+      setIsExpanded(false);
+      setKeyInput("");
+      setValueInput("");
+    }
+  };


I'm surprised these shortcuts are not already handle by our Input component?

Our Input is a thin styling wrapper around <input> — it doesn't handle any keyboard shortcuts. These are also app-specific behaviours (Enter = submit filter, Escape = collapse and reset), so they wouldn't really belong in a generic input primitive.

Hmm. Maybe we should consider if there's value adding onEscape and onEnter props to our input component and providing some base level of support. (separate to this PR)

src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx

camielvs · 2026-02-18T00:00:35Z

Side nit: it bothers me that the placeholder in this input field is cut off on the last letter

camielvs

This seems fine but it's hard to evaluate given the full E2E feature isn't implemented. e.g. I have no idea what the EditableAnnotationBadge looks or functions like because the app crashes (by design?) when I try to add a filter

Even though this is just a UI preview it should still function without crashing. Is it possible to just mock the flow instead of actually waiting and expecting anything from the backend? e.g. just store the k:v annotation pairs in an array and render them

Mbeaulne · 2026-02-18T15:09:51Z

Merge activity

Feb 18, 3:09 PM UTC: A user started a stack merge that includes this pull request via Graphite.
Feb 18, 3:10 PM UTC: @Mbeaulne merged this pull request with Graphite.

Mbeaulne mentioned this pull request Jan 27, 2026

Add useRunSearchParams hook for pipeline run filtering #1704

Merged

2 tasks

Mbeaulne mentioned this pull request Jan 27, 2026

Date picker #1705

Merged

2 tasks

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from 702e058 to 055a218 Compare January 27, 2026 15:48

This was referenced Jan 27, 2026

Status filter #1707

Merged

Filter Bar #1708

Open

Test filter route #1709

Draft

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from 055a218 to aeda0ef Compare January 27, 2026 15:59

Mbeaulne force-pushed the 01-27-date_picker branch from 9a6b47d to e7aedeb Compare January 27, 2026 15:59

Mbeaulne force-pushed the 01-27-annotation_filter_input branch 3 times, most recently from 185fc8e to d548dd0 Compare January 27, 2026 16:39

This was referenced Jan 27, 2026

Add BetaFeatureWrapper and pipeline run filters bar UI #1711

Open

Hook up filters to API where availiable #1712

Open

Add created by me filter #1713

Open

Mbeaulne force-pushed the 01-27-date_picker branch from e7aedeb to be6fe2f Compare January 27, 2026 18:57

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from d548dd0 to 57641b0 Compare January 27, 2026 18:57

Mbeaulne force-pushed the 01-27-date_picker branch from be6fe2f to 3c9b2c8 Compare January 28, 2026 20:46

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from 57641b0 to 60e5301 Compare January 28, 2026 20:46

Mbeaulne mentioned this pull request Feb 2, 2026

Redesign CreatedByFilter component and add hideFilters prop to RunSection #1733

Open

4 tasks

Mbeaulne force-pushed the 01-27-annotation_filter_input branch 3 times, most recently from a4e2ef4 to e9ccb7d Compare February 2, 2026 20:31

Mbeaulne force-pushed the 01-27-date_picker branch from 3c9b2c8 to a558f5b Compare February 2, 2026 20:31

Mbeaulne mentioned this pull request Feb 2, 2026

Add pipeline run filters bar with search functionality #1734

Merged

2 tasks

Mbeaulne force-pushed the 01-27-annotation_filter_input branch 2 times, most recently from f74981d to fbe5916 Compare February 2, 2026 21:08

Mbeaulne force-pushed the 01-27-date_picker branch 2 times, most recently from 713cdad to 7e04972 Compare February 2, 2026 21:10

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from fbe5916 to 40b0fda Compare February 2, 2026 21:10

morgan-wowk reviewed Feb 9, 2026

View reviewed changes

Mbeaulne force-pushed the 01-27-date_picker branch from 22e0cd0 to e2dc28d Compare February 10, 2026 15:03

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from 4df5ece to baaaa48 Compare February 10, 2026 15:03

Mbeaulne force-pushed the 01-27-date_picker branch 2 times, most recently from 8ecc3fd to 757b00a Compare February 10, 2026 15:35

Mbeaulne force-pushed the 01-27-annotation_filter_input branch 2 times, most recently from 5ec1579 to 0c832cc Compare February 10, 2026 17:00

Mbeaulne force-pushed the 01-27-date_picker branch from 757b00a to 376ee50 Compare February 10, 2026 17:00

Mbeaulne requested a review from morgan-wowk February 10, 2026 17:22

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from 0c832cc to 13eccc4 Compare February 10, 2026 17:22

Mbeaulne mentioned this pull request Feb 10, 2026

Add filter badge key to active filters badge #1779

Open

4 tasks

camielvs reviewed Feb 10, 2026

View reviewed changes

src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx Outdated Show resolved Hide resolved

Mbeaulne force-pushed the 01-27-date_picker branch from 376ee50 to dd5fc17 Compare February 17, 2026 15:45

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from 13eccc4 to e072f6e Compare February 17, 2026 15:45

Mbeaulne requested a review from camielvs February 17, 2026 16:00

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from e072f6e to 5c53819 Compare February 17, 2026 16:00

morgan-wowk approved these changes Feb 18, 2026

View reviewed changes

camielvs reviewed Feb 18, 2026

View reviewed changes

Mbeaulne changed the base branch from 01-27-date_picker to graphite-base/1706 February 18, 2026 14:55

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from 5c53819 to 0be99fb Compare February 18, 2026 14:57

Mbeaulne force-pushed the graphite-base/1706 branch from dd5fc17 to 00e3822 Compare February 18, 2026 14:57

graphite-app bot changed the base branch from graphite-base/1706 to master February 18, 2026 14:58

Annotation Filter input

00dbf7b

Mbeaulne force-pushed the 01-27-annotation_filter_input branch from 0be99fb to 00dbf7b Compare February 18, 2026 14:58

Mbeaulne merged commit 49988e5 into master Feb 18, 2026
8 checks passed

Mbeaulne deleted the 01-27-annotation_filter_input branch February 18, 2026 15:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Annotation Filter input#1706

Annotation Filter input#1706
Mbeaulne merged 1 commit intomasterfrom
01-27-annotation_filter_input

Mbeaulne commented Jan 27, 2026 •

edited

Loading

Uh oh!

Mbeaulne commented Jan 27, 2026 •

edited

Loading

Uh oh!

morgan-wowk Feb 9, 2026 •

edited

Loading

Uh oh!

Mbeaulne Feb 10, 2026

Uh oh!

morgan-wowk Feb 18, 2026

Uh oh!

camielvs Feb 10, 2026

Uh oh!

Mbeaulne Feb 17, 2026

Uh oh!

camielvs Feb 17, 2026

Uh oh!

Uh oh!

camielvs commented Feb 18, 2026 •

edited

Loading

Uh oh!

camielvs left a comment •

edited

Loading

Uh oh!

Mbeaulne commented Feb 18, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Conversation

Mbeaulne commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Changes

Checklist

Test Instructions

Uh oh!

Mbeaulne commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

morgan-wowk Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mbeaulne Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

morgan-wowk Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

camielvs Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Mbeaulne Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

camielvs Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

camielvs commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

camielvs left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mbeaulne commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Mbeaulne commented Jan 27, 2026 •

edited

Loading

Mbeaulne commented Jan 27, 2026 •

edited

Loading

morgan-wowk Feb 9, 2026 •

edited

Loading

camielvs commented Feb 18, 2026 •

edited

Loading

camielvs left a comment •

edited

Loading

Mbeaulne commented Feb 18, 2026 •

edited

Loading