Add filter to home page

Author: Mbeaulne

src/components/shared/BetaFeatureWrapper/BetaFeatureWrapper.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+
+import { Icon } from "@/components/ui/icon";
+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">
+            <Icon
+              name="FlaskConical"
+              size="sm"
+              className="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/routes/Home/Home.tsx

@@ -1,6 +1,7 @@
 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";
@@ -40,7 +41,11 @@ const Home = () => {
           <PipelineSection />
         </TabsContent>
         <TabsContent value="runs" className="flex flex-col gap-4">
-          {isFiltersBarEnabled && <PipelineRunFiltersBar />}
+          {isFiltersBarEnabled && (
+            <BetaFeatureWrapper flagKey="pipeline-run-filters-bar">
+              <PipelineRunFiltersBar />
+            </BetaFeatureWrapper>
+          )}
           <RunSection onEmptyList={handlePipelineRunsEmpty} />
         </TabsContent>
       </Tabs>

src/types/pipelineRunFilters.ts

@@ -20,4 +20,9 @@ export interface PipelineRunFilters {
   created_before?: string; // ISO datetime
   pipeline_name?: string;
   annotations?: AnnotationFilter[];
+  sort_field?: "created_at" | "pipeline_name";
+  sort_direction?: "asc" | "desc";
 }
+
+export type SortField = NonNullable<PipelineRunFilters["sort_field"]>;
+export type SortDirection = NonNullable<PipelineRunFilters["sort_direction"]>;

src/utils/pipelineRunFilterUtils.ts

@@ -1,9 +1,14 @@
 import type {
   AnnotationFilter,
   PipelineRunFilters,
+  SortDirection,
+  SortField,
 } from "@/types/pipelineRunFilters";
 import { isValidExecutionStatus } from "@/utils/executionStatus";
 
+const VALID_SORT_FIELDS: SortField[] = ["created_at", "pipeline_name"];
+const VALID_SORT_DIRECTIONS: SortDirection[] = ["asc", "desc"];
+
 export function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -16,6 +21,14 @@ function isValidAnnotationFilter(value: unknown): value is AnnotationFilter {
   );
 }
 
+function isValidSortField(value: string): value is SortField {
+  return (VALID_SORT_FIELDS as string[]).includes(value);
+}
+
+function isValidSortDirection(value: string): value is SortDirection {
+  return (VALID_SORT_DIRECTIONS as string[]).includes(value);
+}
+
 /**
  * Validates and extracts filter fields from an unknown object.
  * Used for both parsed JSON and router-provided objects.
@@ -49,6 +62,18 @@ export function validateFilters(parsed: unknown): PipelineRunFilters {
       filters.annotations = validAnnotations;
     }
   }
+  if (
+    typeof parsed.sort_field === "string" &&
+    isValidSortField(parsed.sort_field)
+  ) {
+    filters.sort_field = parsed.sort_field;
+  }
+  if (
+    typeof parsed.sort_direction === "string" &&
+    isValidSortDirection(parsed.sort_direction)
+  ) {
+    filters.sort_direction = parsed.sort_direction;
+  }
 
   return filters;
 }