Blank state if you have no queues

Author: matt-aitken

apps/webapp/app/components/BlankStatePanels.tsx

@@ -6,6 +6,7 @@ import {
   ClockIcon,
   PlusIcon,
   RectangleGroupIcon,
+  RectangleStackIcon,
   ServerStackIcon,
   Squares2X2Icon,
 } from "@heroicons/react/20/solid";
@@ -368,35 +369,28 @@ export function AlertsNoneDeployed() {
   );
 }
 
-function AlertsNoneProd() {
+export function QueuesHasNoTasks() {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
   return (
-    <div className="space-y-8">
-      <InfoPanel
-        icon={BellAlertIcon}
-        iconClassName="text-red-500"
-        title="Adding alerts"
-        panelClassName="max-w-full"
+    <InfoPanel
+      title="You have no queues"
+      icon={RectangleStackIcon}
+      iconClassName="text-purple-500"
+      panelClassName="max-w-full"
+    >
+      <Paragraph spacing variant="small">
+        This means you haven't got any tasks yet in this environment.
+      </Paragraph>
+      <LinkButton
+        to={v3EnvironmentPath(organization, project, environment)}
+        variant="tertiary/medium"
       >
-        <Paragraph spacing variant="small">
-          You can get alerted when deployed runs fail.
-        </Paragraph>
-        <Paragraph spacing variant="small">
-          We don't support alerts in the Development environment. Switch to a deployed environment
-          to setup alerts.
-        </Paragraph>
-        <div className="flex gap-3">
-          <LinkButton
-            to={docsPath("troubleshooting-alerts")}
-            variant="docs/medium"
-            LeadingIcon={BookOpenIcon}
-            className="inline-flex"
-          >
-            How to setup alerts
-          </LinkButton>
-        </div>
-      </InfoPanel>
-      <SwitcherPanel />
-    </div>
+        Add tasks
+      </LinkButton>
+    </InfoPanel>
   );
 }
 

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

@@ -22,23 +22,24 @@ export class QueueListPresenter extends BasePresenter {
     page: number;
     perPage?: number;
   }) {
+    // Get total count for pagination
+    const totalQueues = await this._replica.taskQueue.count({
+      where: {
+        runtimeEnvironmentId: environment.id,
+      },
+    });
+
     //check the engine is the correct version
     const engineVersion = await determineEngineVersion({ environment });
 
     if (engineVersion === "V1") {
       return {
         success: false as const,
         code: "engine-version",
+        totalQueues,
       };
     }
 
-    // Get total count for pagination
-    const totalQueues = await this._replica.taskQueue.count({
-      where: {
-        runtimeEnvironmentId: environment.id,
-      },
-    });
-
     return {
       success: true as const,
       queues: await this.getQueuesWithPagination(environment, page),
@@ -47,6 +48,7 @@ export class QueueListPresenter extends BasePresenter {
         totalPages: Math.ceil(totalQueues / this.perPage),
         count: totalQueues,
       },
+      totalQueues,
     };
   }
 

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

@@ -60,6 +60,7 @@ 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 { QueuesHasNoTasks } from "~/components/BlankStatePanels";
 
 const SearchParamsSchema = z.object({
   page: z.coerce.number().min(1).default(1),
@@ -197,7 +198,8 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 };
 
 export default function Page() {
-  const { environment, queues, success, pagination, code } = useTypedLoaderData<typeof loader>();
+  const { environment, queues, success, pagination, code, totalQueues } =
+    useTypedLoaderData<typeof loader>();
 
   const organization = useOrganization();
   const project = useProject();
@@ -406,7 +408,13 @@ export default function Page() {
           ) : (
             <div className="grid place-items-center py-6 text-text-dimmed">
               {code === "engine-version" ? (
-                <EngineVersionUpgradeCallout />
+                totalQueues === 0 ? (
+                  <div className="pt-12">
+                    <QueuesHasNoTasks />
+                  </div>
+                ) : (
+                  <EngineVersionUpgradeCallout />
+                )
               ) : (
                 <Callout variant="error">Something went wrong</Callout>
               )}