Hook up filters to API where availiable

Author: Mbeaulne

src/components/Home/RunSection/RunSection.tsx

@@ -22,6 +22,10 @@ import {
 import { useBackend } from "@/providers/BackendProvider";
 import { getBackendStatusString } from "@/utils/backend";
 import { fetchWithErrorHandling } from "@/utils/fetchWithErrorHandling";
+import {
+  filtersToApiString,
+  parseFilterParam,
+} from "@/utils/pipelineRunFilterUtils";
 
 import RunRow from "./RunRow";
 
@@ -42,25 +46,12 @@ export const RunSection = ({ onEmptyList }: { onEmptyList?: () => void }) => {
   const isCreatedByMeDefault = useFlagValue("created-by-me-default");
   const dataVersion = useRef(0);
 
-  // Parse filter into a dictionary
-  const parseFilter = (filter?: string): Record<string, string> => {
-    if (!filter) return {};
-
-    const filterDict: Record<string, string> = {};
-    const parts = filter.split(",");
-
-    for (const part of parts) {
-      const [key, value] = part.split(":");
-      if (key && value) {
-        filterDict[key.trim()] = value.trim();
-      }
-    }
+  // Parse filter from URL - supports both JSON (new) and key:value (legacy) formats
+  const filters = parseFilterParam(search.filter);
+  const createdByValue = filters.created_by;
 
-    return filterDict;
-  };
-
-  const filterDict = parseFilter(search.filter);
-  const createdByValue = filterDict.created_by;
+  // Convert filters to API format (only includes supported filters)
+  const apiFilterString = filtersToApiString(filters);
 
   const [searchUser, setSearchUser] = useState(createdByValue ?? "");
 
@@ -75,13 +66,15 @@ export const RunSection = ({ onEmptyList }: { onEmptyList?: () => void }) => {
 
   const { data, isLoading, isFetching, error, isFetched } =
     useQuery<ListPipelineJobsResponse>({
-      queryKey: ["runs", backendUrl, pageToken, search.filter],
+      queryKey: ["runs", backendUrl, pageToken, apiFilterString],
       refetchOnWindowFocus: false,
       enabled: configured && available,
       queryFn: async () => {
         const u = new URL(PIPELINE_RUNS_QUERY_URL, backendUrl);
         if (pageToken) u.searchParams.set(PAGE_TOKEN_QUERY_KEY, pageToken);
-        if (search.filter) u.searchParams.set(FILTER_QUERY_KEY, search.filter);
+        // Use translated filter string (only includes API-supported filters)
+        if (apiFilterString)
+          u.searchParams.set(FILTER_QUERY_KEY, apiFilterString);
 
         u.searchParams.set(INCLUDE_PIPELINE_NAME_QUERY_KEY, "true");
         u.searchParams.set(INCLUDE_EXECUTION_STATS_QUERY_KEY, "true");
@@ -108,22 +101,25 @@ export const RunSection = ({ onEmptyList }: { onEmptyList?: () => void }) => {
 
     if (value) {
       // If there's already a created_by filter, keep it; otherwise use "created_by:me"
-      if (!filterDict.created_by) {
+      if (!filters.created_by) {
         nextSearch.filter = CREATED_BY_ME_FILTER;
         setSearchUser("");
       }
     } else {
       // Remove created_by from filter, but keep other filters
-      const updatedFilterDict = { ...filterDict };
-      delete updatedFilterDict.created_by;
-
-      // Convert back to string format
-      const remainingFilters = Object.entries(updatedFilterDict)
-        .map(([key, value]) => `${key}:${value}`)
-        .join(",");
+      const updatedFilters = { ...filters };
+      delete updatedFilters.created_by;
+
+      // Check if any other filters remain
+      const hasRemainingFilters = Object.keys(updatedFilters).some((key) => {
+        const val = updatedFilters[key as keyof typeof updatedFilters];
+        if (val === undefined || val === null || val === "") return false;
+        if (Array.isArray(val) && val.length === 0) return false;
+        return true;
+      });
 
-      if (remainingFilters) {
-        nextSearch.filter = remainingFilters;
+      if (hasRemainingFilters) {
+        nextSearch.filter = JSON.stringify(updatedFilters);
       } else {
         if (isCreatedByMeDefault) {
           nextSearch.filter = "";
@@ -143,16 +139,9 @@ export const RunSection = ({ onEmptyList }: { onEmptyList?: () => void }) => {
     const nextSearch: RunSectionSearch = { ...search };
     delete nextSearch.page_token;
 
-    // Create or update the created_by filter
-    const updatedFilterDict = { ...filterDict };
-    updatedFilterDict.created_by = searchUser.trim();
-
-    // Convert back to string format
-    const newFilter = Object.entries(updatedFilterDict)
-      .map(([key, value]) => `${key}:${value}`)
-      .join(",");
-
-    nextSearch.filter = newFilter;
+    // Create or update the created_by filter, preserving other filters
+    const updatedFilters = { ...filters, created_by: searchUser.trim() };
+    nextSearch.filter = JSON.stringify(updatedFilters);
 
     setPreviousPageTokens([]);
     navigate({ to: pathname, search: nextSearch });

src/components/shared/CreatedByFilter/CreatedByFilter.tsx

@@ -1,5 +1,5 @@
 import type { KeyboardEvent } from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -21,6 +21,16 @@ interface CreatedByFilterProps {
 export function CreatedByFilter({ value, onChange }: CreatedByFilterProps) {
   const [searchUser, setSearchUser] = useState(value ?? "");
 
+  // Sync internal state when value prop changes externally (e.g., URL navigation, badge removal)
+  useEffect(() => {
+    // Only sync if value is different and not "me" (don't populate input with "me")
+    if (value !== undefined && value !== "me") {
+      setSearchUser(value);
+    } else if (value === undefined) {
+      setSearchUser("");
+    }
+  }, [value]);
+
   const isFilterActive = value !== undefined;
   const toggleText = value ? `Created by ${value}` : "Created by me";
 

src/flags.ts

@@ -67,9 +67,9 @@ export const ExistingFlags: ConfigFlags = {
   },
 
   ["pipeline-run-filters-bar"]: {
-    name: "Pipeline run filters bar (UI only)",
+    name: "Pipeline run filters bar",
     description:
-      "Non-functional UI preview. This filter bar is not connected to the API and is for testing/development purposes only.",
+      "Enable the advanced pipeline run filters bar. Note: Only 'Created by' filter is currently functional. Other filters are UI previews.",
     default: false,
     category: "beta",
   },

src/utils/pipelineRunFilterUtils.ts

@@ -9,6 +9,12 @@ import { isValidExecutionStatus } from "@/utils/executionStatus";
 const VALID_SORT_FIELDS: SortField[] = ["created_at", "pipeline_name"];
 const VALID_SORT_DIRECTIONS: SortDirection[] = ["asc", "desc"];
 
+/**
+ * List of filter keys that the API currently supports.
+ * Add keys here as the backend adds support for more filters.
+ */
+const SUPPORTED_API_FILTERS: (keyof PipelineRunFilters)[] = ["created_by"];
+
 export function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -78,6 +84,84 @@ export function validateFilters(parsed: unknown): PipelineRunFilters {
   return filters;
 }
 
+/**
+ * Converts PipelineRunFilters to the API's key:value string format.
+ * Only includes filters that the API actually supports.
+ *
+ * @example
+ * // Input: { created_by: "me", status: "FAILED", annotations: [...] }
+ * // Output: "created_by:me" (status and annotations are stripped as unsupported)
+ */
+export function filtersToApiString(
+  filters: PipelineRunFilters,
+): string | undefined {
+  const parts: string[] = [];
+
+  for (const key of SUPPORTED_API_FILTERS) {
+    const value = filters[key];
+    if (value !== undefined && value !== null && value !== "") {
+      // Handle simple string values
+      if (typeof value === "string") {
+        parts.push(`${key}:${value}`);
+      }
+      // Future: handle arrays or complex values when API supports them
+    }
+  }
+
+  return parts.length > 0 ? parts.join(",") : undefined;
+}
+
+/**
+ * Parses the legacy key:value,key2:value2 format into a filter object.
+ * Used for backwards compatibility with existing URLs.
+ */
+function parseApiStringToFilters(
+  filterString: string | undefined,
+): PipelineRunFilters {
+  if (!filterString) return {};
+
+  const filters: PipelineRunFilters = {};
+  const parts = filterString.split(",");
+
+  for (const part of parts) {
+    const colonIndex = part.indexOf(":");
+    if (colonIndex === -1) continue;
+
+    const key = part.slice(0, colonIndex).trim();
+    const value = part.slice(colonIndex + 1).trim();
+
+    if (key && value) {
+      if (key === "created_by") {
+        filters.created_by = value;
+      }
+      // Add more cases as API supports more filters
+    }
+  }
+
+  return filters;
+}
+
+/**
+ * Parses the filter URL param, handling both JSON format (new) and key:value format (legacy).
+ */
+export function parseFilterParam(
+  filterParam: string | Record<string, unknown> | undefined,
+): PipelineRunFilters {
+  if (!filterParam) return {};
+
+  // Already an object (parsed by router) - validate and return
+  if (isRecord(filterParam)) {
+    return validateFilters(filterParam);
+  }
+
+  try {
+    return validateFilters(JSON.parse(filterParam));
+  } catch {
+    // Invalid JSON - try legacy key:value format for backwards compatibility
+    return parseApiStringToFilters(filterParam);
+  }
+}
+
 /**
  * Clean and prepare PipelineRunFilters for URL serialization.
  * Returns the filter object - let TanStack Router handle JSON serialization.