Add filter to home page

Author: Mbeaulne

src/components/shared/BetaFeatureWrapper/BetaFeatureWrapper.tsx

@@ -0,0 +1,53 @@
+import { FlaskConical } from "lucide-react";
+import type { ReactNode } from "react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { ExistingFlags } from "@/flags";
+import { cn } from "@/lib/utils";
+
+interface BetaFeatureWrapperProps {
+  flagKey: keyof typeof ExistingFlags;
+  children: ReactNode;
+  className?: string;
+}
+
+export function BetaFeatureWrapper({
+  flagKey,
+  children,
+  className,
+}: BetaFeatureWrapperProps) {
+  const flag = ExistingFlags[flagKey];
+
+  if (!flag) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative rounded-lg border-2 border-amber-400/50 bg-amber-50/30 dark:bg-amber-950/10",
+        className,
+      )}
+    >
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="absolute -right-2 -top-2 flex size-6 cursor-help items-center justify-center rounded-full border border-amber-400 bg-amber-100 dark:bg-amber-900">
+            <FlaskConical className="size-3.5 text-amber-600 dark:text-amber-400" />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-xs">
+          <div className="space-y-1">
+            <p className="font-medium">{flag.name}</p>
+            <p className="text-xs opacity-90">{flag.description}</p>
+            <p className="text-xs italic opacity-70">Beta feature</p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+      <div className="p-3">{children}</div>
+    </div>
+  );
+}

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,15 @@
 import { useRef, useState } from "react";
 
 import { PipelineSection, RunSection } from "@/components/Home";
+import { BetaFeatureWrapper } from "@/components/shared/BetaFeatureWrapper/BetaFeatureWrapper";
+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 +40,12 @@ 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 && (
+            <BetaFeatureWrapper flagKey="pipeline-run-filters-bar">
+              <PipelineRunFiltersBar />
+            </BetaFeatureWrapper>
+          )}
           <RunSection onEmptyList={handlePipelineRunsEmpty} />
         </TabsContent>
       </Tabs>