Transform the queue type and added tooltips

Author: matt-aitken

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

@@ -1,8 +1,8 @@
 import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
-import { marqs } from "~/v3/marqs/index.server";
 import { engine } from "~/v3/runEngine.server";
 import { BasePresenter } from "./basePresenter.server";
-import { EnvironmentQueuePresenter, type Environment } from "./EnvironmentQueuePresenter.server";
+import { type TaskQueueType } from "@trigger.dev/database";
+import { assertExhaustive } from "@trigger.dev/core";
 
 export class QueueListPresenter extends BasePresenter {
   private readonly ITEMS_PER_PAGE = 25;
@@ -63,10 +63,21 @@ export class QueueListPresenter extends BasePresenter {
     // Transform queues to include running and queued counts
     return queues.map((queue) => ({
       name: queue.name.replace(/^task\//, ""),
-      type: queue.type,
+      type: queueTypeFromType(queue.type),
       running: results[1][queue.name] ?? 0,
       queued: results[0][queue.name] ?? 0,
       concurrencyLimit: queue.concurrencyLimit ?? null,
     }));
   }
 }
+
+export function queueTypeFromType(type: TaskQueueType) {
+  switch (type) {
+    case "NAMED":
+      return "custom" as const;
+    case "VIRTUAL":
+      return "task" as const;
+    default:
+      assertExhaustive(type);
+  }
+}

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

@@ -289,10 +289,16 @@ export default function Page() {
                         <TableRow key={queue.name}>
                           <TableCell>
                             <span className="flex items-center gap-2">
-                              {queue.type === "VIRTUAL" ? (
-                                <TaskIcon className="size-4 text-blue-500" />
+                              {queue.type === "task" ? (
+                                <SimpleTooltip
+                                  button={<TaskIcon className="size-4 text-blue-500" />}
+                                  content={`This queue was automatically created from your "${queue.name}" task`}
+                                />
                               ) : (
-                                <RectangleStackIcon className="size-4 text-purple-500" />
+                                <SimpleTooltip
+                                  button={<RectangleStackIcon className="size-4 text-purple-500" />}
+                                  content={`This is a custom queue you added in your code.`}
+                                />
                               )}
                               <span>{queue.name}</span>
                             </span>