Got the fake filtering working

Author: matt-aitken

apps/webapp/app/components/runs/v3/AIFilterInput.tsx

@@ -1,16 +1,15 @@
-import { useFetcher } from "@remix-run/react";
-import { useState, useEffect } from "react";
+import { useFetcher, useNavigate } from "@remix-run/react";
+import { useEffect, useState } from "react";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
-import { Button } from "~/components/primitives/Buttons";
 import { Input } from "~/components/primitives/Input";
+import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { Spinner } from "~/components/primitives/Spinner";
-import { useSearchParams } from "~/hooks/useSearchParam";
+import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useEnvironment } from "~/hooks/useEnvironment";
-import { type TaskRunListSearchFilters } from "./RunFilters";
+import { useSearchParams } from "~/hooks/useSearchParam";
 import { objectToSearchParams } from "~/utils/searchParams";
-import { ShortcutKey } from "~/components/primitives/ShortcutKey";
+import { type TaskRunListSearchFilters } from "./RunFilters";
 
 type AIFilterResult =
   | {
@@ -26,32 +25,37 @@ type AIFilterResult =
 
 export function AIFilterInput() {
   const [text, setText] = useState("");
-  const { replace } = useSearchParams();
+  const navigate = useNavigate();
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
 
   const fetcher = useFetcher<AIFilterResult>();
 
   useEffect(() => {
-    if (fetcher.data?.success) {
+    if (fetcher.data?.success && fetcher.state === "loading") {
+      // Clear the input after successful application
+      setText("");
+
       const searchParams = objectToSearchParams(fetcher.data.filters);
       if (!searchParams) {
         return;
       }
 
-      replace(searchParams);
+      console.log("AI filter success", {
+        data: fetcher.data,
+        searchParams: searchParams.toString(),
+      });
 
-      // Clear the input after successful application
-      setText("");
+      navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
 
       // TODO: Show success message with explanation
       console.log(`AI applied filters: ${fetcher.data.explanation}`);
     } else if (fetcher.data?.success === false) {
       // TODO: Show error with suggestions
       console.error(fetcher.data.error, fetcher.data.suggestions);
     }
-  }, [fetcher.data, replace]);
+  }, [fetcher.data, navigate]);
 
   const isLoading = fetcher.state === "submitting";
 

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.ai-filter.tsx

@@ -3,6 +3,8 @@ import { z } from "zod";
 import { requireUserId } from "~/services/session.server";
 import { EnvironmentParamSchema } from "~/utils/pathBuilder";
 import { type TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 
 const RequestSchema = z.object({
   text: z.string().min(1),
@@ -26,14 +28,30 @@ export async function action({ request, params }: ActionFunctionArgs) {
     );
   }
 
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Project not found",
+    });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Environment not found",
+    });
+  }
+
   const { text } = submission.data;
 
   // TODO: Replace this with actual AI processing
   // For now, return fake successful data
   const fakeFilters: TaskRunListSearchFilters = {
-    statuses: ["COMPLETED_WITH_ERRORS"],
+    statuses: ["COMPLETED_WITH_ERRORS", "COMPLETED_SUCCESSFULLY"],
+    machines: ["small-2x"],
     period: "7d",
-    tags: ["test-tag"],
   };
 
   return json<{ success: true; filters: TaskRunListSearchFilters; explanation: string }>({