Added search to the Queues page (#2000)

* Added search to the queues page

* Fix for empty state copy

Author: matt-aitken

apps/webapp/app/presenters/v3/QueueListPresenter.server.ts

@@ -16,17 +16,27 @@ export class QueueListPresenter extends BasePresenter {
 
   public async call({
     environment,
+    query,
     page,
   }: {
     environment: AuthenticatedEnvironment;
+    query?: string;
     page: number;
     perPage?: number;
   }) {
+    const hasFilters = query !== undefined && query.length > 0;
+
     // Get total count for pagination
     const totalQueues = await this._replica.taskQueue.count({
       where: {
         runtimeEnvironmentId: environment.id,
         version: "V2",
+        name: query
+          ? {
+              contains: query,
+              mode: "insensitive",
+            }
+          : undefined,
       },
     });
 
@@ -45,6 +55,7 @@ export class QueueListPresenter extends BasePresenter {
             success: false as const,
             code: "engine-version",
             totalQueues: 1,
+            hasFilters,
           };
         }
       }
@@ -53,26 +64,38 @@ export class QueueListPresenter extends BasePresenter {
         success: false as const,
         code: "engine-version",
         totalQueues,
+        hasFilters,
       };
     }
 
     return {
       success: true as const,
-      queues: await this.getQueuesWithPagination(environment, page),
+      queues: await this.getQueuesWithPagination(environment, query, page),
       pagination: {
         currentPage: page,
         totalPages: Math.ceil(totalQueues / this.perPage),
         count: totalQueues,
       },
       totalQueues,
+      hasFilters,
     };
   }
 
-  private async getQueuesWithPagination(environment: AuthenticatedEnvironment, page: number) {
+  private async getQueuesWithPagination(
+    environment: AuthenticatedEnvironment,
+    query: string | undefined,
+    page: number
+  ) {
     const queues = await this._replica.taskQueue.findMany({
       where: {
         runtimeEnvironmentId: environment.id,
         version: "V2",
+        name: query
+          ? {
+              contains: query,
+              mode: "insensitive",
+            }
+          : undefined,
       },
       select: {
         friendlyId: true,

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -2,12 +2,20 @@ import {
   ArrowUpCircleIcon,
   BookOpenIcon,
   ChatBubbleLeftEllipsisIcon,
+  MagnifyingGlassIcon,
   PauseIcon,
   PlayIcon,
   RectangleStackIcon,
 } from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
-import { Form, useNavigation, useRevalidator, type MetaFunction } from "@remix-run/react";
+import {
+  Form,
+  useNavigate,
+  useNavigation,
+  useRevalidator,
+  useSearchParams,
+  type MetaFunction,
+} from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { type RuntimeEnvironmentType } from "@trigger.dev/database";
 import { useEffect, useState } from "react";
@@ -61,8 +69,11 @@ import { docsPath, EnvironmentParamSchema, v3BillingPath } from "~/utils/pathBui
 import { PauseEnvironmentService } from "~/v3/services/pauseEnvironment.server";
 import { PauseQueueService } from "~/v3/services/pauseQueue.server";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { Input } from "~/components/primitives/Input";
+import { useThrottle } from "~/hooks/useThrottle";
 
 const SearchParamsSchema = z.object({
+  query: z.string().optional(),
   page: z.coerce.number().min(1).default(1),
 });
 
@@ -79,7 +90,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
 
   const url = new URL(request.url);
-  const { page } = SearchParamsSchema.parse(Object.fromEntries(url.searchParams));
+  const { page, query } = SearchParamsSchema.parse(Object.fromEntries(url.searchParams));
 
   const project = await findProjectBySlug(organizationSlug, projectParam, userId);
   if (!project) {
@@ -101,6 +112,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     const queueListPresenter = new QueueListPresenter();
     const queues = await queueListPresenter.call({
       environment,
+      query,
       page,
     });
 
@@ -198,7 +210,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 };
 
 export default function Page() {
-  const { environment, queues, success, pagination, code, totalQueues } =
+  const { environment, queues, success, pagination, code, totalQueues, hasFilters } =
     useTypedLoaderData<typeof loader>();
 
   const organization = useOrganization();
@@ -285,10 +297,11 @@ export default function Page() {
           {success ? (
             <div
               className={cn(
-                "grid max-h-full min-h-full grid-rows-[1fr] overflow-x-auto",
-                pagination.totalPages > 1 && "grid-rows-[1fr_auto]"
+                "grid max-h-full min-h-full grid-rows-[auto_1fr] overflow-x-auto",
+                pagination.totalPages > 1 && "grid-rows-[auto_1fr_auto]"
               )}
             >
+              <QueueFilters />
               <Table containerClassName="border-t">
                 <TableHeader>
                   <TableRow>
@@ -407,7 +420,11 @@ export default function Page() {
                     <TableRow>
                       <TableCell colSpan={6}>
                         <div className="grid place-items-center py-6 text-text-dimmed">
-                          <Paragraph>No queues found</Paragraph>
+                          <Paragraph>
+                            {hasFilters
+                              ? "No queues found matching your filters"
+                              : "No queues found"}
+                          </Paragraph>
                         </div>
                       </TableCell>
                     </TableRow>
@@ -663,3 +680,39 @@ export function isEnvironmentPauseResumeFormSubmission(
       formData.get("action") === "environment-resume")
   );
 }
+
+export function QueueFilters() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const handleSearchChange = useThrottle((value: string) => {
+    if (value) {
+      setSearchParams((prev) => {
+        prev.set("query", value);
+        prev.delete("page");
+        return prev;
+      });
+    } else {
+      setSearchParams((prev) => {
+        prev.delete("query");
+        prev.delete("page");
+        return prev;
+      });
+    }
+  }, 300);
+
+  const search = searchParams.get("query") ?? "";
+
+  return (
+    <div className="flex w-full px-3 pb-3">
+      <Input
+        name="search"
+        placeholder="Search queue name"
+        icon={MagnifyingGlassIcon}
+        variant="tertiary"
+        className="grow"
+        defaultValue={search}
+        onChange={(e) => handleSearchChange(e.target.value)}
+      />
+    </div>
+  );
+}