feat(webapp,cli,core): list production project runtime updates

.changeset/list-project-runtime-updates.md

@@ -0,0 +1,6 @@
+---
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+List the current Production runtime for every accessible project with `trigger projects list`. Add `--needs-update` to identify projects currently running Node.js 21.

apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx

@@ -2,6 +2,7 @@ import { ArrowLeftIcon } from "@heroicons/react/24/solid";
 import { BellIcon } from "~/assets/icons/BellIcon";
 import { ChainLinkIcon } from "~/assets/icons/ChainLinkIcon";
 import { CreditCardIcon } from "~/assets/icons/CreditCardIcon";
+import { FolderOpenIcon } from "~/assets/icons/FolderOpenIcon";
 import { PadlockIcon } from "~/assets/icons/PadlockIcon";
 import { UsageIcon } from "~/assets/icons/UsageIcon";
 import { RolesIcon } from "~/assets/icons/RolesIcon";
@@ -16,6 +17,7 @@ import { cn } from "~/utils/cn";
 import {
   organizationPath,
   organizationRolesPath,
+  organizationRuntimeUpdatesPath,
   organizationSettingsPath,
   organizationSlackIntegrationPath,
   organizationSsoPath,
@@ -49,11 +51,13 @@ export function OrganizationSettingsSideMenu({
   buildInfo,
   isUsingPlugin,
   isSsoUsingPlugin,
+  hasProjectRuntimeUpdate,
 }: {
   organization: MatchedOrganization;
   buildInfo: BuildInfo;
   isUsingPlugin: boolean;
   isSsoUsingPlugin: boolean;
+  hasProjectRuntimeUpdate: boolean;
 }) {
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
@@ -127,6 +131,22 @@ export function OrganizationSettingsSideMenu({
               ) : null}
             </>
           )}
+          <SideMenuItem
+            name="Projects"
+            icon={FolderOpenIcon}
+            activeIconColor="text-text-bright"
+            inactiveIconColor="text-text-dimmed"
+            to={organizationRuntimeUpdatesPath(organization)}
+            data-action="runtime-updates"
+            badge={
+              hasProjectRuntimeUpdate ? (
+                <>
+                  <span aria-hidden className="size-2 shrink-0 rounded-full bg-warning" />
+                  <span className="sr-only">Runtime update available.</span>
+                </>
+              ) : undefined
+            }
+          />
           <SideMenuItem
             name="Team"
             icon={UserGroupIcon}

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

@@ -142,7 +142,8 @@ export function ClipboardField({
         readOnly={true}
         className={cn(
           "shrink grow select-all overflow-x-auto",
-          fullWidth ? "w-full" : "max-w-fit",
+          // min-w-0 stops the input's intrinsic min-width pushing the copy button out of the row.
+          fullWidth ? "w-full min-w-0" : "max-w-fit",
           input
         )}
         onFocus={(e) => {

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

@@ -50,7 +50,7 @@ export function CopyButton({
         onClick={copy}
         className={cn(
           buttonSize,
-          "flex items-center justify-center rounded border border-border-bright bg-background-hover",
+          "flex shrink-0 items-center justify-center rounded border border-border-bright bg-background-hover",
           copied
             ? "text-green-500"
             : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright",

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

@@ -2,7 +2,8 @@ import * as React from "react";
 import { cn } from "~/utils/cn";
 import { InfoIconTooltip } from "./Tooltip";
 
-const variants = {
+// Non-form labels (e.g. settings row titles) share this typography, so it is exported.
+export const labelVariants = {
   small: {
     text: "font-sans text-[0.8125rem] font-normal text-text-bright leading-tight flex items-center gap-1",
   },
@@ -17,7 +18,7 @@ const variants = {
 type LabelProps = React.AllHTMLAttributes<HTMLLabelElement> & {
   className?: string;
   children: React.ReactNode;
-  variant?: keyof typeof variants;
+  variant?: keyof typeof labelVariants;
   required?: boolean;
   tooltip?: React.ReactNode;
 };
@@ -30,7 +31,7 @@ export function Label({
   tooltip,
   ...props
 }: LabelProps) {
-  const variation = variants[variant];
+  const variation = labelVariants[variant];
   return (
     <label className={cn(variation.text, className)} {...props}>
       {children}

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

@@ -3,6 +3,7 @@ import { type ReactNode } from "react";
 import { MainHorizontallyCenteredContainer } from "~/components/layout/AppLayout";
 import { cn } from "~/utils/cn";
 import { Header2, Header3 } from "./Headers";
+import { labelVariants } from "./Label";
 import { Paragraph } from "./Paragraph";
 
 // A composable layout system for settings pages: a centered container holds
@@ -82,7 +83,7 @@ export function SettingsHeader({
         className
       )}
     >
-      <div className="space-y-1">
+      <div className="space-y-0.5">
         <Heading>{title}</Heading>
         {description ? <Paragraph variant="small">{description}</Paragraph> : null}
       </div>
@@ -101,10 +102,7 @@ export function SettingsRowTitle({
   htmlFor?: string;
   className?: string;
 }) {
-  const classes = cn(
-    "block font-sans text-sm font-semibold leading-tight text-text-bright",
-    className
-  );
+  const classes = cn(labelVariants.medium.text, className);
   return htmlFor ? (
     <label htmlFor={htmlFor} className={classes}>
       {children}
@@ -123,7 +121,7 @@ export function SettingsRowDescription({
   className?: string;
 }) {
   return (
-    <Paragraph variant="small" className={className}>
+    <Paragraph variant="extra-small" className={className}>
       {children}
     </Paragraph>
   );
@@ -170,7 +168,7 @@ export function SettingsRow({
       )}
     >
       {children ?? (
-        <div className="flex-1 space-y-1">
+        <div className="flex-1 space-y-0.5">
           {title ? (
             <SettingsRowTitle htmlFor={htmlFor} className={titleClassName}>
               {title}
@@ -229,7 +227,7 @@ export function SettingsAlertRow({
 
   return (
     <SettingsRow action={action}>
-      <div className="flex-1 space-y-1">
+      <div className="flex-1 space-y-0.5">
         <div className="flex items-center gap-1.5">
           <Icon className={cn("size-4 shrink-0", color)} />
           <SettingsRowTitle className={color}>{title}</SettingsRowTitle>

apps/webapp/app/routes/[_].$.ts

@@ -3,11 +3,16 @@ import { prisma } from "~/db.server";
 import { getUsersInvites } from "~/models/member.server";
 import { SelectBestEnvironmentPresenter } from "~/presenters/SelectBestEnvironmentPresenter.server";
 import { requireUser } from "~/services/session.server";
-import { deeplinkSuffix, resolveDeeplinkPage } from "~/utils/deeplinkPages";
+import {
+  deeplinkSuffix,
+  resolveDeeplinkPage,
+  resolveOrganizationDeeplinkPage,
+} from "~/utils/deeplinkPages";
 import {
   invitesPath,
   newOrganizationPath,
   newProjectPath,
+  organizationRuntimeUpdatesPath,
   v3EnvironmentPath,
 } from "~/utils/pathBuilder";
 
@@ -16,7 +21,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
 
   const { pathname, search } = new URL(request.url);
-  const page = resolveDeeplinkPage(deeplinkSuffix(pathname));
+  const suffix = deeplinkSuffix(pathname);
+  const page = resolveDeeplinkPage(suffix);
+  const organizationPage = resolveOrganizationDeeplinkPage(suffix);
 
   const invites = await getUsersInvites({ email: user.email });
   if (invites.length > 0) {
@@ -26,11 +33,14 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const presenter = new SelectBestEnvironmentPresenter();
   try {
     const { project, organization, environment } = await presenter.call({ user });
-    const environmentPath = v3EnvironmentPath(organization, project, environment);
+    if (organizationPage === "runtime-updates") {
+      return redirect(`${organizationRuntimeUpdatesPath(organization)}${search}`);
+    }
 
-    const suffix = page ? `/${page}` : "";
+    const environmentPath = v3EnvironmentPath(organization, project, environment);
+    const pageSuffix = page ? `/${page}` : "";
 
-    return redirect(`${environmentPath}${suffix}${search}`);
+    return redirect(`${environmentPath}${pageSuffix}${search}`);
   } catch (_e) {
     const organization = await prisma.organization.findFirst({
       where: {
@@ -47,6 +57,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     });
 
     if (organization) {
+      if (organizationPage === "runtime-updates") {
+        return redirect(`${organizationRuntimeUpdatesPath(organization)}${search}`);
+      }
+
       return redirect(newProjectPath(organization));
     }