Basic filter bar and beta flag

Author: Mbeaulne

src/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { useRunSearchParams } from "@/hooks/useRunSearchParams";
+
+export function PipelineRunFiltersBar() {
+  const { filters, setFilter, setFilterDebounced } = useRunSearchParams();
+
+  const [nameInput, setNameInput] = useState(filters.pipeline_name ?? "");
+
+  return (
+    <BlockStack gap="3">
+      <InlineStack gap="3" align="center">
+        <div className="relative flex-1 min-w-0">
+          <Icon
+            name="Search"
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+          />
+          <Input
+            placeholder="Search by pipeline name..."
+            value={nameInput}
+            onChange={(e) => {
+              setNameInput(e.target.value);
+              setFilterDebounced("pipeline_name", e.target.value);
+            }}
+            className="pl-9 pr-8 w-full"
+          />
+          {nameInput && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                setNameInput("");
+                setFilter("pipeline_name", undefined);
+              }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 size-6 text-muted-foreground hover:text-foreground"
+              aria-label="Clear search"
+            >
+              <Icon name="X" size="sm" />
+            </Button>
+          )}
+        </div>
+      </InlineStack>
+    </BlockStack>
+  );
+}

src/flags.ts

@@ -65,4 +65,12 @@ export const ExistingFlags: ConfigFlags = {
     default: false,
     category: "beta",
   },
+
+  ["pipeline-run-filters-bar"]: {
+    name: "Pipeline run filters bar (UI only)",
+    description:
+      "Non-functional UI preview. This filter bar is not connected to the API and is for testing/development purposes only.",
+    default: false,
+    category: "beta",
+  },
 };

src/routes/Home/Home.tsx

@@ -1,10 +1,14 @@
 import { useRef, useState } from "react";
 
 import { PipelineSection, RunSection } from "@/components/Home";
+import { PipelineRunFiltersBar } from "@/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar";
+import { useFlagValue } from "@/components/shared/Settings/useFlags";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const Home = () => {
   const [activeTab, setActiveTab] = useState("runs");
+  const isFiltersBarEnabled = useFlagValue("pipeline-run-filters-bar");
+
   const handleTabSelect = (value: string) => {
     setActiveTab(value);
   };
@@ -35,7 +39,8 @@ const Home = () => {
         <TabsContent value="pipelines">
           <PipelineSection />
         </TabsContent>
-        <TabsContent value="runs" className="flex flex-col gap-1">
+        <TabsContent value="runs" className="flex flex-col gap-4">
+          {isFiltersBarEnabled && <PipelineRunFiltersBar />}
           <RunSection onEmptyList={handlePipelineRunsEmpty} />
         </TabsContent>
       </Tabs>