Added nice queue cell rendering

Author: matt-aitken

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -27,6 +27,7 @@ import { SimpleTooltip } from "../primitives/Tooltip";
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { QueueName } from "../runs/v3/QueueName";
 
 /**
  * Check if a ClickHouse type is a DateTime type
@@ -168,6 +169,13 @@ function CellValue({
         }
         return <span>{String(value)}</span>;
       }
+      case "queue": {
+        if (typeof value === "string") {
+          const type = value.startsWith("task/") ? "task" : "custom";
+          return <QueueName type={type} name={value.replace("task/", "")} />;
+        }
+        return <span>{String(value)}</span>;
+      }
     }
   }
 

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

@@ -0,0 +1,41 @@
+import { TaskIconSmall } from "~/assets/icons/TaskIcon";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { cn } from "~/utils/cn";
+import { RectangleStackIcon } from "@heroicons/react/20/solid";
+
+export function QueueName({
+  name,
+  type,
+  paused,
+  className,
+}: {
+  name: string;
+  type: "task" | "custom";
+  paused?: boolean;
+  className?: string;
+}) {
+  return (
+    <span className={cn("flex items-center gap-1", className)}>
+      {type === "task" ? (
+        <SimpleTooltip
+          button={
+            <TaskIconSmall
+              className={cn("size-[1.125rem] text-blue-500", paused && "opacity-50")}
+            />
+          }
+          content={`This queue was automatically created from your "${name}" task`}
+        />
+      ) : (
+        <SimpleTooltip
+          button={
+            <RectangleStackIcon
+              className={cn("size-[1.125rem] text-purple-500", paused && "opacity-50")}
+            />
+          }
+          content={`This is a custom queue you added in your code.`}
+        />
+      )}
+      <span className={paused ? "opacity-50" : undefined}>{name}</span>
+    </span>
+  );
+}

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

@@ -80,6 +80,7 @@ import { PauseEnvironmentService } from "~/v3/services/pauseEnvironment.server";
 import { PauseQueueService } from "~/v3/services/pauseQueue.server";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
+import { QueueName } from "~/components/runs/v3/QueueName";
 
 const SearchParamsSchema = z.object({
   query: z.string().optional(),
@@ -516,34 +517,7 @@ export default function Page() {
                         <TableRow key={queue.name}>
                           <TableCell>
                             <span className="flex items-center gap-2">
-                              {queue.type === "task" ? (
-                                <SimpleTooltip
-                                  button={
-                                    <TaskIconSmall
-                                      className={cn(
-                                        "size-[1.125rem] text-blue-500",
-                                        queue.paused && "opacity-50"
-                                      )}
-                                    />
-                                  }
-                                  content={`This queue was automatically created from your "${queue.name}" task`}
-                                />
-                              ) : (
-                                <SimpleTooltip
-                                  button={
-                                    <RectangleStackIcon
-                                      className={cn(
-                                        "size-[1.125rem] text-purple-500",
-                                        queue.paused && "opacity-50"
-                                      )}
-                                    />
-                                  }
-                                  content={`This is a custom queue you added in your code.`}
-                                />
-                              )}
-                              <span className={queue.paused ? "opacity-50" : undefined}>
-                                {queue.name}
-                              </span>
+                              <QueueName {...queue} />
                               {queue.concurrency?.overriddenAt ? (
                                 <SimpleTooltip
                                   button={

apps/webapp/app/v3/querySchemas.ts

@@ -96,7 +96,11 @@ export const runsSchema: TableSchema = {
     },
     queue: {
       name: "queue",
-      ...column("String", { description: "Queue name", example: "task/my-background-task" }),
+      ...column("String", {
+        description: "Queue name",
+        example: "task/my-background-task",
+        customRenderType: "queue",
+      }),
     },
     schedule_id: {
       name: "schedule_id",