Unified the blank state panels and improved some copy in them

Author: samejr

apps/webapp/app/components/BlankStatePanels.tsx

@@ -10,7 +10,11 @@ import {
   ServerStackIcon,
   Squares2X2Icon,
 } from "@heroicons/react/20/solid";
+import { useLocation } from "react-use";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
 import { type MinimumEnvironment } from "~/presenters/SelectBestEnvironmentPresenter.server";
 import {
   docsPath,
@@ -22,20 +26,15 @@ import {
 import { InlineCode } from "./code/InlineCode";
 import { environmentFullTitle } from "./environments/EnvironmentLabel";
 import { Feedback } from "./Feedback";
+import { EnvironmentSelector } from "./navigation/EnvironmentSelector";
 import { Button, LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
 import { InfoPanel } from "./primitives/InfoPanel";
 import { Paragraph } from "./primitives/Paragraph";
 import { StepNumber } from "./primitives/StepNumber";
+import { TextLink } from "./primitives/TextLink";
 import { InitCommandV3, PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
 import { StepContentContainer } from "./StepContentContainer";
-import { useLocation } from "react-use";
-import { useEnvironment } from "~/hooks/useEnvironment";
-import { useOrganization } from "~/hooks/useOrganizations";
-import { useProject } from "~/hooks/useProject";
-import { TextLink } from "./primitives/TextLink";
-import { EnvironmentSelector } from "./navigation/EnvironmentSelector";
-import { Pi } from "lucide-react";
 
 export function HasNoTasksDev() {
   return (
@@ -104,18 +103,15 @@ export function SchedulesNoPossibleTaskPanel() {
       icon={ClockIcon}
       iconClassName="text-sun-500"
       panelClassName="max-w-full"
+      to={docsPath("v3/tasks-scheduled")}
+      buttonLabel="How to schedule tasks"
+      buttonVariant="docs/small"
+      buttonLeadingIcon={BookOpenIcon}
     >
       <Paragraph spacing variant="small">
         You have no scheduled tasks in your project. Before you can schedule a task you need to
         create a <InlineCode>schedules.task</InlineCode>.
       </Paragraph>
-      <LinkButton
-        to={docsPath("v3/tasks-scheduled")}
-        variant="docs/medium"
-        LeadingIcon={BookOpenIcon}
-      >
-        View the docs
-      </LinkButton>
     </InfoPanel>
   );
 }
@@ -166,14 +162,15 @@ export function BatchesNone() {
       icon={Squares2X2Icon}
       iconClassName="text-blue-500"
       panelClassName="max-w-full"
+      to={docsPath("triggering")}
+      buttonLabel="How to trigger batches"
+      buttonVariant="docs/small"
+      buttonLeadingIcon={BookOpenIcon}
     >
       <Paragraph spacing variant="small">
         You have no batches in this environment. You can trigger batches from your backend or from
         inside other tasks.
       </Paragraph>
-      <LinkButton to={docsPath("triggering")} variant="docs/medium" LeadingIcon={BookOpenIcon}>
-        How to trigger batches
-      </LinkButton>
     </InfoPanel>
   );
 }
@@ -182,23 +179,20 @@ export function TestHasNoTasks() {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
-
   return (
     <InfoPanel
-      title="No tasks to test"
+      title="You don't have any tasks to test"
       icon={BeakerIcon}
       iconClassName="text-lime-500"
       panelClassName="max-w-full"
+      to={v3EnvironmentPath(organization, project, environment)}
+      buttonLabel="Create a task"
     >
       <Paragraph spacing variant="small">
-        You have no tasks in this environment.
+        Before testing a task, you must first create one. Follow the instructions on the{" "}
+        <TextLink to={v3EnvironmentPath(organization, project, environment)}>Tasks page</TextLink>{" "}
+        to create a task, then return here to test it.
       </Paragraph>
-      <LinkButton
-        to={v3EnvironmentPath(organization, project, environment)}
-        variant="tertiary/medium"
-      >
-        Add tasks
-      </LinkButton>
     </InfoPanel>
   );
 }
@@ -376,20 +370,19 @@ export function QueuesHasNoTasks() {
 
   return (
     <InfoPanel
-      title="You have no queues"
+      title="You don't have any queues"
       icon={RectangleStackIcon}
       iconClassName="text-blue-500"
-      panelClassName="max-w-full"
+      panelClassName="max-w-md"
+      to={v3EnvironmentPath(organization, project, environment)}
+      buttonLabel="Create a task"
     >
       <Paragraph spacing variant="small">
-        This means you haven't got any tasks yet in this environment.
+        Queues will appear here when you have created a task in this environment. Follow the
+        instructions on the{" "}
+        <TextLink to={v3EnvironmentPath(organization, project, environment)}>Tasks page</TextLink>{" "}
+        to create a task, then return here to see its queue.
       </Paragraph>
-      <LinkButton
-        to={v3EnvironmentPath(organization, project, environment)}
-        variant="tertiary/medium"
-      >
-        Add tasks
-      </LinkButton>
     </InfoPanel>
   );
 }

apps/webapp/app/components/primitives/InfoPanel.tsx

@@ -22,6 +22,8 @@ type Props = {
   children: React.ReactNode;
   to?: string;
   buttonLabel?: string;
+  buttonVariant?: React.ComponentProps<typeof LinkButton>["variant"];
+  buttonLeadingIcon?: React.ComponentProps<typeof LinkButton>["LeadingIcon"];
   icon: React.ComponentType<any>;
   iconClassName?: string;
   variant?: InfoPanelVariant;
@@ -33,6 +35,8 @@ export function InfoPanel({
   children,
   to,
   buttonLabel,
+  buttonVariant = "secondary/small",
+  buttonLeadingIcon,
   icon,
   iconClassName,
   variant = "info",
@@ -54,7 +58,7 @@ export function InfoPanel({
         <Icon className={cn("size-5", iconClassName)} />
 
         {to && (
-          <LinkButton to={to} variant="secondary/small">
+          <LinkButton to={to} variant={buttonVariant} LeadingIcon={buttonLeadingIcon}>
             {buttonLabel}
           </LinkButton>
         )}