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,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -20,6 +20,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/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar.tsx

@@ -83,13 +83,13 @@ export function PipelineRunFiltersBar({
   const dateRange: DateRange | undefined =
     filters.created_after || filters.created_before
       ? {
-          from: filters.created_after
-            ? new Date(filters.created_after)
-            : undefined,
-          to: filters.created_before
-            ? new Date(filters.created_before)
-            : undefined,
-        }
+        from: filters.created_after
+          ? new Date(filters.created_after)
+          : undefined,
+        to: filters.created_before
+          ? new Date(filters.created_before)
+          : undefined,
+      }
       : undefined;
 
   const handleDateRangeChange = (range: DateRange | undefined) => {

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/hooks/useRunSearchParams.ts

@@ -2,6 +2,7 @@ import { useLocation, useNavigate, useSearch } from "@tanstack/react-router";
 import { useRef } from "react";
 
 import type { PipelineRunFilters } from "@/types/pipelineRunFilters";
+import { parseFilterParam } from "@/utils/pipelineRunFilterUtils";
 
 const DEBOUNCE_MS = 300;
 
@@ -13,26 +14,6 @@ function getStringOrUndefined(value: unknown): string | undefined {
   return typeof value === "string" ? value : undefined;
 }
 
-/**
- * Parse the filter query param from URL into PipelineRunFilters object.
- */
-function parseFiltersFromUrl(
-  filterParam: string | undefined,
-): PipelineRunFilters {
-  if (!filterParam) return {};
-
-  try {
-    const parsed: unknown = JSON.parse(filterParam);
-    if (isRecord(parsed)) {
-      return parsed as PipelineRunFilters;
-    }
-  } catch {
-    // Invalid JSON
-  }
-
-  return {};
-}
-
 /**
  * Serialize PipelineRunFilters to a JSON string for URL query param.
  */
@@ -95,7 +76,8 @@ export function useRunSearchParams(): UseRunSearchParamsReturn {
   const filterParam = isRecord(search)
     ? getStringOrUndefined(search.filter)
     : undefined;
-  const filters = parseFiltersFromUrl(filterParam);
+  // Use shared parser that handles both JSON (new) and key:value (legacy) formats
+  const filters = parseFilterParam(filterParam);
 
   const updateUrl = (newFilters: PipelineRunFilters) => {
     const serialized = serializeFiltersToUrl(newFilters);

src/utils/pipelineRunFilterUtils.ts

@@ -0,0 +1,163 @@
+import type { PipelineRunFilters } from "@/types/pipelineRunFilters";
+
+/**
+ * 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"];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Type guard to validate a parsed object has the expected PipelineRunFilters shape.
+ * Performs runtime validation instead of unsafe type assertion.
+ */
+function isPipelineRunFilters(value: unknown): value is PipelineRunFilters {
+  if (!isRecord(value)) return false;
+
+  // Validate known fields have correct types if present
+  if (value.status !== undefined && typeof value.status !== "string") {
+    return false;
+  }
+  if (value.created_by !== undefined && typeof value.created_by !== "string") {
+    return false;
+  }
+  if (
+    value.created_after !== undefined &&
+    typeof value.created_after !== "string"
+  ) {
+    return false;
+  }
+  if (
+    value.created_before !== undefined &&
+    typeof value.created_before !== "string"
+  ) {
+    return false;
+  }
+  if (
+    value.pipeline_name !== undefined &&
+    typeof value.pipeline_name !== "string"
+  ) {
+    return false;
+  }
+  if (value.annotations !== undefined && !Array.isArray(value.annotations)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * 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.
+ */
+export 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 | undefined,
+): PipelineRunFilters {
+  if (!filterParam) return {};
+
+  // Try JSON format first (new format from PipelineRunFiltersBar)
+  try {
+    const parsed: unknown = JSON.parse(filterParam);
+    if (isPipelineRunFilters(parsed)) {
+      return parsed;
+    }
+  } catch {
+    // Not JSON, fall through to legacy format
+  }
+
+  // Fall back to legacy key:value format
+  return parseApiStringToFilters(filterParam);
+}
+
+/**
+ * Returns the list of filter keys that are set but not supported by the API.
+ * Useful for showing users which filters are UI-only.
+ */
+export function getUnsupportedActiveFilters(
+  filters: PipelineRunFilters,
+): (keyof PipelineRunFilters)[] {
+  const unsupported: (keyof PipelineRunFilters)[] = [];
+
+  const allFilterKeys: (keyof PipelineRunFilters)[] = [
+    "status",
+    "created_by",
+    "created_after",
+    "created_before",
+    "pipeline_name",
+    "annotations",
+  ];
+
+  for (const key of allFilterKeys) {
+    const value = filters[key];
+    const hasValue =
+      value !== undefined &&
+      value !== null &&
+      value !== "" &&
+      !(Array.isArray(value) && value.length === 0);
+
+    if (hasValue && !SUPPORTED_API_FILTERS.includes(key)) {
+      unsupported.push(key);
+    }
+  }
+
+  return unsupported;
+}