Hook up filters to API where availiable

[Mbeaulne]

Description

Implemented support for advanced pipeline run filters with a new JSON-based filter format while maintaining backward compatibility with the legacy key:value format. This change enables the pipeline run filters bar feature flag to be more than just a UI preview.

Type of Change

• New feature
• Improvement
• Refactor

Checklist

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

Test Instructions

1. Enable the "pipeline-run-filters-bar" feature flag
2. Verify that the "Created by" filter works correctly in both the new UI and via URL parameters
3. Test that both JSON format filters and legacy key:value format filters work in the URL
4. Confirm that only supported filters (currently only "created_by") are sent to the API

Additional Comments

This PR adds a new utility file pipelineRunFilterUtils.ts that handles parsing and serializing filter formats. The flag description has been updated to clarify that only the "Created by" filter is currently functional, while other filters are UI previews that will be connected to the API in future PRs.

[Mbeaulne]

• Add filter badge key to active filters badge #1779
• Redesign CreatedByFilter component and add hideFilters prop to RunSection #1733
• Hook up filters to API where availiable #1712 👈 (View in Graphite)
• Add BetaFeatureWrapper and pipeline run filters bar UI #1711
• Filter Bar #1708 : 1 other dependent PR (#1709 )
• 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.

[morgan-wowk]

Do you have links to the documentation for the current state of our API and the future state?

It would help with the review here

[camielvs]

Is there a longer-term plan to deprecate the legacy format?

[camielvs]

I notice the filter url is slightly different between old vs new

just want to confirm this is intended and expected

[camielvs]

Suggested change

	if (val === undefined || val === null || val === "") return false;
	if (!val) return false;

[camielvs]

^ surely this works? the empty string case should be captured by the next if statement

[camielvs]

Suggested change

	useEffect(() => {
	// Only sync if value is different and not "me" (don't populate input with "me")
	if (value !== undefined && value !== DEFAULT_CREATED_BY_ME_FILTER_VALUE) {
	setSearchUser(value);
	} else if (value === undefined) {
	setSearchUser("");
	}
	}, [value]);
	useEffect(() => {
	if (!value) {
	setSearchUser("");
	}
	// Only sync if value is different and not "me" (don't populate input with "me")
	if (value !== DEFAULT_CREATED_BY_ME_FILTER_VALUE) {
	setSearchUser(value);
	}
	}, [value]);

[camielvs]

^ I feel like this is more readable

[maxy-shpfy]

Agreed

[camielvs]

!!value && value !== ""?

Though given we seem to have this parretn coming up a fair bit maybe we make a typeguard for IsDefinedAndNotEmpty

[maxy-shpfy]

Tested according to instructions - looks good to me. Outgoing request is the same, despite different UI and URL on the frontend.

Screen Recording 2026-02-26 at 9.34.23 AM.mov (uploaded via Graphite)

[maxy-shpfy]

I see some issues with responsiveness:

Screen Recording 2026-02-26 at 9.36.28 AM.mov (uploaded via Graphite)

[maxy-shpfy]

NIT: have unit tests for this function

[maxy-shpfy]

NIT: can be concise with filters() and map().

  const result = SUPPORTED_API_FILTERS.filter((key) => filters[key])
    .map((key) => `${key}:${filters[key]}`)
    .join(",");

  return result || undefined;

[maxy-shpfy]

NIT: using regexp might be a good solution in this case.. smth like

const filters: PipelineRunFilters = {};
  const pattern = /(\w+):([^,]+)/g;

  for (const [, key, value] of filterString.matchAll(pattern)) {
    const trimmedValue = value.trim();
    if (!trimmedValue) continue;

    // Must be kept in sync with SUPPORTED_API_FILTERS as new filters are added
    if (key === "created_by") {
      filters.created_by = trimmedValue;
    }
  }

[maxy-shpfy]

We might want also to go further in being fancy with types:

const SUPPORTED_API_STRING_FILTERS = ["created_by"] as const;

type SupportedApiStringFilter = (typeof SUPPORTED_API_STRING_FILTERS)[number];

const SUPPORTED_API_STRING_FILTER_SET = new Set<string>(
  SUPPORTED_API_STRING_FILTERS,
);

function isSupportedApiStringFilter(
  key: string,
): key is SupportedApiStringFilter {
  return SUPPORTED_API_STRING_FILTER_SET.has(key);
}

So we can keep logic generalized as SOLID

    if (isSupportedApiStringFilter(key)) {
      filters[key] = trimmedValue;
    }

[maxy-shpfy]

LGTM, I left a couple of NIT suggestions to improve readability.

Also responsiveness in UX should be addressed, but likely in a follow-up PR

[Mbeaulne]

I will address the responsiveness in another PR. I think there will be enough changes later that we can lump it in there. Thanks!

[Mbeaulne]

Merge activity

• Feb 26, 6:37 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Feb 26, 6:38 PM UTC: @Mbeaulne merged this pull request with Graphite.