Replaces many props with a single ‘accessory’ React node on the Info Panel component

samejr · samejr · commit 611a5e67de89 · 2025-03-24T13:23:58.000Z
diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
@@ -82,10 +82,15 @@ export function HasNoTasksDeployed({ environment }: { environment: MinimumEnviro
       icon={TaskIcon}
       iconClassName="text-blue-500"
       panelClassName="max-w-full"
-      to={docsPath("deployment/overview")}
-      buttonLabel="How to deploy tasks"
-      buttonVariant="docs/small"
-      buttonLeadingIcon={BookOpenIcon}
+      accessory={
+        <LinkButton
+          to={docsPath("deployment/overview")}
+          variant="docs/small"
+          LeadingIcon={BookOpenIcon}
+        >
+          How to deploy tasks
+        </LinkButton>
+      }
     >
       <Paragraph spacing variant="small">
         Run the <TextLink to={docsPath("deployment/overview")}>CLI deploy command</TextLink> to
@@ -102,10 +107,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}
+      accessory={
+        <LinkButton
+          to={docsPath("v3/tasks-scheduled")}
+          variant="docs/small"
+          LeadingIcon={BookOpenIcon}
+        >
+          How to schedule tasks
+        </LinkButton>
+      }
     >
       <Paragraph spacing variant="small">
         You have no scheduled tasks in your project. Before you can schedule a task you need to
@@ -135,15 +145,16 @@ export function SchedulesNoneAttached() {
       <div className="flex gap-2">
         <LinkButton
           to={`${v3NewSchedulePath(organization, project, environment)}${location.search}`}
-          variant="primary/small"
+          variant="secondary/medium"
           LeadingIcon={RectangleGroupIcon}
           className="inline-flex"
+          leadingIconClassName="text-sun-500"
         >
           Use the dashboard
         </LinkButton>
         <LinkButton
           to={docsPath("v3/tasks-scheduled")}
-          variant="primary/small"
+          variant="docs/medium"
           LeadingIcon={BookOpenIcon}
           className="inline-flex"
         >
@@ -161,10 +172,11 @@ 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}
+      accessory={
+        <LinkButton to={docsPath("triggering")} variant="docs/small" LeadingIcon={BookOpenIcon}>
+          How to trigger batches
+        </LinkButton>
+      }
     >
       <Paragraph spacing variant="small">
         You have no batches in this environment. You can trigger batches from your backend or from
@@ -184,8 +196,15 @@ export function TestHasNoTasks() {
       icon={BeakerIcon}
       iconClassName="text-lime-500"
       panelClassName="max-w-full"
-      to={v3EnvironmentPath(organization, project, environment)}
-      buttonLabel="Create a task"
+      accessory={
+        <LinkButton
+          to={v3EnvironmentPath(organization, project, environment)}
+          variant="secondary/small"
+          LeadingIcon={PlusIcon}
+        >
+          Create a task
+        </LinkButton>
+      }
     >
       <Paragraph spacing variant="small">
         Before testing a task, you must first create one. Follow the instructions on the{" "}
@@ -373,8 +392,15 @@ export function QueuesHasNoTasks() {
       icon={RectangleStackIcon}
       iconClassName="text-blue-500"
       panelClassName="max-w-md"
-      to={v3EnvironmentPath(organization, project, environment)}
-      buttonLabel="Create a task"
+      accessory={
+        <LinkButton
+          to={v3EnvironmentPath(organization, project, environment)}
+          variant="secondary/small"
+          LeadingIcon={PlusIcon}
+        >
+          Create a task
+        </LinkButton>
+      }
     >
       <Paragraph spacing variant="small">
         Queues will appear here when you have created a task in this environment. Follow the
diff --git a/apps/webapp/app/components/primitives/InfoPanel.tsx b/apps/webapp/app/components/primitives/InfoPanel.tsx
@@ -1,7 +1,7 @@
 import { cn } from "~/utils/cn";
-import { LinkButton } from "./Buttons";
 import { Header2 } from "./Headers";
 import { Paragraph } from "./Paragraph";
+import { type ReactNode } from "react";
 
 const variants = {
   info: {
@@ -20,10 +20,7 @@ type InfoPanelVariant = keyof typeof variants;
 type Props = {
   title?: string;
   children: React.ReactNode;
-  to?: string;
-  buttonLabel?: string;
-  buttonVariant?: React.ComponentProps<typeof LinkButton>["variant"];
-  buttonLeadingIcon?: React.ComponentProps<typeof LinkButton>["LeadingIcon"];
+  accessory?: ReactNode;
   icon: React.ComponentType<any>;
   iconClassName?: string;
   variant?: InfoPanelVariant;
@@ -33,10 +30,7 @@ type Props = {
 export function InfoPanel({
   title,
   children,
-  to,
-  buttonLabel,
-  buttonVariant = "secondary/small",
-  buttonLeadingIcon,
+  accessory,
   icon,
   iconClassName,
   variant = "info",
@@ -54,14 +48,10 @@ export function InfoPanel({
         panelClassName
       )}
     >
-      <div className={cn("flex items-center gap-2", to ? "w-full justify-between" : "")}>
+      <div className={cn("flex items-center gap-2", accessory ? "w-full justify-between" : "")}>
         <Icon className={cn("size-5", iconClassName)} />
 
-        {to && (
-          <LinkButton to={to} variant={buttonVariant} LeadingIcon={buttonLeadingIcon}>
-            {buttonLabel}
-          </LinkButton>
-        )}
+        {accessory}
       </div>
       <div className="flex flex-col gap-1">
         {title && <Header2 className="text-text-bright">{title}</Header2>}
diff --git a/apps/webapp/app/presenters/v3/ScheduleListPresenter.server.ts b/apps/webapp/app/presenters/v3/ScheduleListPresenter.server.ts
@@ -50,10 +50,7 @@ export class ScheduleListPresenter extends BasePresenter {
     pageSize = DEFAULT_PAGE_SIZE,
   }: ScheduleListOptions) {
     const hasFilters =
-      type !== undefined ||
-      tasks !== undefined ||
-      environments !== undefined ||
-      (search !== undefined && search !== "");
+      type !== undefined || tasks !== undefined || (search !== undefined && search !== "");
 
     const filterType =
       type === "declarative" ? "DECLARATIVE" : type === "imperative" ? "IMPERATIVE" : undefined;
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
@@ -153,8 +153,11 @@ export default function Page() {
             icon={LockOpenIcon}
             iconClassName="text-indigo-500"
             title="Unlock more team members"
-            to={v3BillingPath(organization)}
-            buttonLabel="Upgrade"
+            accessory={
+              <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
+                Upgrade
+              </LinkButton>
+            }
             panelClassName="mb-4"
           >
             <Paragraph variant="small">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -23,15 +23,16 @@ import { type RuntimeEnvironmentType } from "@trigger.dev/database";
 import { motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
+import { DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
 import { ShowParentIcon, ShowParentIconSelected } from "~/assets/icons/ShowParentIcon";
 import tileBgPath from "~/assets/images/error-banner-tile@2x.png";
+import { useDevPresence } from "~/components/DevPresence";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
-import { InlineCode } from "~/components/code/InlineCode";
-import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
 import { PageBody } from "~/components/layout/AppLayout";
 import { Badge } from "~/components/primitives/Badge";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
+import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { DateTimeShort } from "~/components/primitives/DateTime";
 import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { Header3 } from "~/components/primitives/Headers";
@@ -93,9 +94,6 @@ import {
 } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
-import { useDevPresence } from "~/components/DevPresence";
-import { DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
-import { ClipboardField } from "~/components/primitives/ClipboardField";
 
 const resizableSettings = {
   parent: {
@@ -404,8 +402,11 @@ function NoLogsView({ run, resizable }: LoaderData) {
                 icon={LockOpenIcon}
                 iconClassName="text-indigo-500"
                 title="Unlock longer log retention"
-                to={v3BillingPath(organization)}
-                buttonLabel="Upgrade"
+                accessory={
+                  <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
+                    Upgrade
+                  </LinkButton>
+                }
               >
                 <Paragraph variant="small">
                   The logs for this run have been deleted because the run completed{" "}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx
@@ -33,9 +33,11 @@ import { TextLink } from "~/components/primitives/TextLink";
 import { RunsFilters, TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
 import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable";
 import { BULK_ACTION_RUN_LIMIT } from "~/consts";
+import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { RunListPresenter } from "~/presenters/v3/RunListPresenter.server";
 import {
   getRootOnlyFilterPreference,
@@ -47,15 +49,11 @@ import { cn } from "~/utils/cn";
 import {
   docsPath,
   EnvironmentParamSchema,
-  ProjectParamSchema,
   v3ProjectPath,
   v3RunsPath,
   v3TestPath,
 } from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
-import { prisma } from "~/db.server";
-import { useEnvironment } from "~/hooks/useEnvironment";
-import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 
 export const meta: MetaFunction = () => {
   return [
@@ -438,8 +436,11 @@ function CreateFirstTaskInstructions() {
         iconClassName="text-blue-500"
         panelClassName="max-full"
         title="Create your first task"
-        to={v3ProjectPath(organization, project)}
-        buttonLabel="Create a task"
+        accessory={
+          <LinkButton to={v3ProjectPath(organization, project)} variant="primary/small">
+            Create a task
+          </LinkButton>
+        }
       >
         <Paragraph variant="small">
           Before running a task, you must first create one. Follow the instructions on the{" "}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx
@@ -357,8 +357,11 @@ export default function Page() {
                 icon={BookOpenIcon}
                 iconClassName="text-indigo-500"
                 variant="info"
-                buttonLabel="Docs"
-                to="https://trigger.dev/docs/v3/tasks-scheduled"
+                accessory={
+                  <LinkButton to="https://trigger.dev/docs/v3/tasks-scheduled" variant="docs/small">
+                    Docs
+                  </LinkButton>
+                }
                 panelClassName="max-w-full"
               >
                 You can only edit a declarative schedule by updating your schedules.task and then
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
@@ -226,8 +226,11 @@ export default function Page() {
               icon={LockOpenIcon}
               iconClassName="text-indigo-500"
               title="Unlock more team members"
-              to={v3BillingPath(organization)}
-              buttonLabel="Upgrade"
+              accessory={
+                <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
+                  Upgrade
+                </LinkButton>
+              }
               panelClassName="mt-4"
             >
               <Paragraph variant="small">
diff --git a/apps/webapp/app/routes/storybook.info-panel/route.tsx b/apps/webapp/app/routes/storybook.info-panel/route.tsx
