feat(webapp): node-21 deprecation banner

Mono-RevId: dab37c34d7f8fb423e9e41b5cf05baa9a7751d42

Author: carderne

.server-changes/node-runtime-update-banner.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Warn when Production projects still use Node.js 21 and link directly to update instructions

apps/webapp/app/components/billing/OrgBanner.tsx

@@ -10,11 +10,17 @@ import {
   useOrganization,
   useBillingLimit,
   useCanManageBillingLimits,
+  useHasProjectRuntimeUpdate,
 } from "~/hooks/useOrganizations";
 import { useOptionalProject, useProject } from "~/hooks/useProject";
 import { useShowSelfServe } from "~/hooks/useShowSelfServe";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
-import { v3BillingLimitsPath, v3BillingPath, v3QueuesPath } from "~/utils/pathBuilder";
+import {
+  organizationProjectsPath,
+  v3BillingLimitsPath,
+  v3BillingPath,
+  v3QueuesPath,
+} from "~/utils/pathBuilder";
 import { ENVIRONMENT_PAUSE_SOURCE_BILLING_LIMIT } from "~/utils/environmentPauseSource";
 
 function getUpgradeResetDate(): Date {
@@ -30,6 +36,7 @@ export function OrgBanner() {
   const project = useOptionalProject();
   const environment = useOptionalEnvironment();
   const billingLimit = useBillingLimit();
+  const hasProjectRuntimeUpdate = useHasProjectRuntimeUpdate();
   const currentPlan = useCurrentPlan();
   const showSelfServe = useShowSelfServe();
   const location = useLocation();
@@ -48,6 +55,7 @@ export function OrgBanner() {
   const isArchived = !!(organization && project && environment && environment.archivedAt);
 
   const bannerKind = selectOrgBanner({
+    hasProjectRuntimeUpdate,
     billingLimit,
     hasExceededFreeTier: currentPlan?.v3Usage.hasExceededFreeTier === true,
     showEnvironmentWarning: isPaused || isArchived,
@@ -58,6 +66,8 @@ export function OrgBanner() {
   const hideBillingLimitBanner = location.pathname.endsWith("/settings/billing-limits");
 
   switch (bannerKind) {
+    case OrgBannerKind.RuntimeUpdate:
+      return <RuntimeUpdateBanner />;
     case OrgBannerKind.LimitRejected:
       return hideBillingLimitBanner ? null : <LimitRejectedBanner />;
     case OrgBannerKind.LimitGrace:
@@ -77,6 +87,24 @@ export function OrgBanner() {
   }
 }
 
+function RuntimeUpdateBanner() {
+  const organization = useOrganization();
+
+  return (
+    <AnimatedOrgBannerBar
+      show
+      variant="warning"
+      action={
+        <LinkButton variant="tertiary/small" to={organizationProjectsPath(organization)}>
+          See projects and upgrade
+        </LinkButton>
+      }
+    >
+      At least one of your projects uses Node 21: deployments will fail from 5 October.
+    </AnimatedOrgBannerBar>
+  );
+}
+
 function LimitRejectedBanner() {
   const organization = useOrganization();
   const showSelfServe = useShowSelfServe();

apps/webapp/app/components/billing/selectOrgBanner.ts

@@ -1,6 +1,7 @@
 import type { BillingLimitResult } from "~/services/billingLimit.schemas";
 
 export enum OrgBannerKind {
+  RuntimeUpdate = "runtime-update",
   LimitRejected = "limit-rejected",
   LimitGrace = "limit-grace",
   NoLimitConfigured = "no-limit",
@@ -10,13 +11,24 @@ export enum OrgBannerKind {
 }
 
 export function selectOrgBanner(input: {
+  hasProjectRuntimeUpdate?: boolean;
   billingLimit?: BillingLimitResult;
   hasExceededFreeTier?: boolean;
   showEnvironmentWarning?: boolean;
   /** Self-serve billing UI — hide configure-limit prompt for managed customers. */
   showSelfServe?: boolean;
 }): OrgBannerKind {
-  const { billingLimit, hasExceededFreeTier, showEnvironmentWarning, showSelfServe = true } = input;
+  const {
+    hasProjectRuntimeUpdate,
+    billingLimit,
+    hasExceededFreeTier,
+    showEnvironmentWarning,
+    showSelfServe = true,
+  } = input;
+
+  if (hasProjectRuntimeUpdate) {
+    return OrgBannerKind.RuntimeUpdate;
+  }
 
   if (billingLimit?.isConfigured) {
     const status = billingLimit.limitState.status;

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

@@ -12,7 +12,7 @@ import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
 import { VercelLogo } from "~/components/integrations/VercelLogo";
 import { useFeatureFlags } from "~/hooks/useFeatureFlags";
 import { useFeatures } from "~/hooks/useFeatures";
-import { type MatchedOrganization } from "~/hooks/useOrganizations";
+import { type MatchedOrganization, useHasProjectRuntimeUpdate } from "~/hooks/useOrganizations";
 import { cn } from "~/utils/cn";
 import {
   organizationPath,
@@ -51,18 +51,17 @@ export function OrganizationSettingsSideMenu({
   buildInfo,
   isUsingPlugin,
   isSsoUsingPlugin,
-  hasProjectRuntimeUpdate,
 }: {
   organization: MatchedOrganization;
   buildInfo: BuildInfo;
   isUsingPlugin: boolean;
   isSsoUsingPlugin: boolean;
-  hasProjectRuntimeUpdate: boolean;
 }) {
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
   const currentPlan = useCurrentPlan();
   const showSelfServe = useShowSelfServe();
+  const hasProjectRuntimeUpdate = useHasProjectRuntimeUpdate();
   const isAdmin = useHasAdminAccess();
   const showBuildInfo = isAdmin || !isManagedCloud;
 

apps/webapp/app/hooks/useOrganizations.ts

@@ -94,3 +94,11 @@ export function useCanManageBillingLimits(matches?: UIMatch[]) {
   });
   return data?.canManageBillingLimits === true;
 }
+
+export function useHasProjectRuntimeUpdate(matches?: UIMatch[]) {
+  const data = useTypedMatchesData<typeof orgLoader>({
+    id: "routes/_app.orgs.$organizationSlug",
+    matches,
+  });
+  return data?.hasProjectRuntimeUpdate === true;
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx

@@ -1,5 +1,4 @@
 import { Outlet, useRouteLoaderData } from "@remix-run/react";
-import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { VERSION as coreVersion } from "@trigger.dev/core";
 import { type ReactNode } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -10,51 +9,15 @@ import {
   OrganizationSettingsSideMenu,
 } from "~/components/navigation/OrganizationSettingsSideMenu";
 import { useOrganization } from "~/hooks/useOrganizations";
-import { resolveOrgIdFromSlugForUser } from "~/models/organization.server";
-import { organizationHasProjectRuntimeUpdate } from "~/services/projectRuntimeUpdates.server";
 import { rbac } from "~/services/rbac.server";
-import { requireUserId } from "~/services/session.server";
 import { ssoController } from "~/services/sso.server";
 
 const SETTINGS_ROUTE_ID = "routes/_app.orgs.$organizationSlug.settings";
 
-// The side-menu dot links to the Projects settings page, which requires `read` on
-// `deployments`, so gate the dot on the same ability the page checks.
-async function canReadDeployments({
-  request,
-  userId,
-  organizationSlug,
-}: {
-  request: Request;
-  userId: string;
-  organizationSlug: string;
-}) {
-  // Membership-scoped so the dot is never computed against an org the user is not in.
-  const organizationId = await resolveOrgIdFromSlugForUser(organizationSlug, userId);
-  if (!organizationId) {
-    return false;
-  }
-
-  const auth = await rbac.authenticateAuthorizeSession(
-    request,
-    { userId, organizationId },
-    { action: "read", resource: { type: "deployments" } }
-  );
-  return auth.ok;
-}
-
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
-  const organizationSlug = params.organizationSlug;
-
-  const [isUsingPlugin, isSsoUsingPlugin, hasProjectRuntimeUpdate] = await Promise.all([
+export const loader = async () => {
+  const [isUsingPlugin, isSsoUsingPlugin] = await Promise.all([
     rbac.isUsingPlugin(),
     ssoController.isUsingPlugin(),
-    organizationSlug
-      ? canReadDeployments({ request, userId, organizationSlug }).then((canRead) =>
-          canRead ? organizationHasProjectRuntimeUpdate({ organizationSlug, userId }) : false
-        )
-      : Promise.resolve(false),
   ]);
   return typedjson({
     buildInfo: {
@@ -66,21 +29,18 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     } satisfies BuildInfo,
     isUsingPlugin,
     isSsoUsingPlugin,
-    hasProjectRuntimeUpdate,
   });
 };
 
 function SettingsChrome({
   buildInfo,
   isUsingPlugin,
   isSsoUsingPlugin,
-  hasProjectRuntimeUpdate,
   children,
 }: {
   buildInfo: BuildInfo;
   isUsingPlugin: boolean;
   isSsoUsingPlugin: boolean;
-  hasProjectRuntimeUpdate: boolean;
   children: ReactNode;
 }) {
   const organization = useOrganization();
@@ -93,7 +53,6 @@ function SettingsChrome({
           buildInfo={buildInfo}
           isUsingPlugin={isUsingPlugin}
           isSsoUsingPlugin={isSsoUsingPlugin}
-          hasProjectRuntimeUpdate={hasProjectRuntimeUpdate}
         />
         <MainBody>{children}</MainBody>
       </div>
@@ -102,15 +61,13 @@ function SettingsChrome({
 }
 
 export default function Page() {
-  const { buildInfo, isUsingPlugin, isSsoUsingPlugin, hasProjectRuntimeUpdate } =
-    useTypedLoaderData<typeof loader>();
+  const { buildInfo, isUsingPlugin, isSsoUsingPlugin } = useTypedLoaderData<typeof loader>();
 
   return (
     <SettingsChrome
       buildInfo={buildInfo}
       isUsingPlugin={isUsingPlugin}
       isSsoUsingPlugin={isSsoUsingPlugin}
-      hasProjectRuntimeUpdate={hasProjectRuntimeUpdate}
     >
       <Outlet />
     </SettingsChrome>
@@ -127,7 +84,6 @@ export function ErrorBoundary() {
         buildInfo: BuildInfo;
         isUsingPlugin: boolean;
         isSsoUsingPlugin: boolean;
-        hasProjectRuntimeUpdate: boolean;
       }
     | undefined;
 
@@ -140,7 +96,6 @@ export function ErrorBoundary() {
       buildInfo={data.buildInfo}
       isUsingPlugin={data.isUsingPlugin}
       isSsoUsingPlugin={data.isSsoUsingPlugin}
-      hasProjectRuntimeUpdate={data.hasProjectRuntimeUpdate}
     >
       <RouteErrorDisplay />
     </SettingsChrome>

apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx

@@ -9,9 +9,11 @@ import { useTypedMatchesData } from "~/hooks/useTypedMatchData";
 import { OrganizationsPresenter } from "~/presenters/OrganizationsPresenter.server";
 import { RegionsPresenter, type Region } from "~/presenters/v3/RegionsPresenter.server";
 import { getImpersonationId } from "~/services/impersonation.server";
+import { logger } from "~/services/logger.server";
 import { getCachedUsage, getBillingLimit, getCurrentPlan } from "~/services/platform.v3.server";
 import { rbac } from "~/services/rbac.server";
 import { ssoController } from "~/services/sso.server";
+import { organizationHasProjectRuntimeUpdate } from "~/services/projectRuntimeUpdates.server";
 import { canManageBillingLimits } from "~/services/routeBuilders/permissions.server";
 import { requireUser } from "~/services/session.server";
 import { telemetry } from "~/services/telemetry.server";
@@ -128,6 +130,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     regions,
     isUsingRbacPlugin,
     isUsingSsoPlugin,
+    organizationHasRuntimeUpdate,
   ] = await Promise.all([
     rbac
       .authenticateSession(request, {
@@ -157,10 +160,21 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     // items. Both calls are cheap and cached.
     rbac.isUsingPlugin().catch(() => false),
     ssoController.isUsingPlugin().catch(() => false),
+    organizationHasProjectRuntimeUpdate({ organizationId: organization.id }).catch((error) => {
+      logger.error("Failed to check project runtime updates", {
+        organizationId: organization.id,
+        error,
+      });
+      return false;
+    }),
   ]);
   const userCanManageBillingLimits = sessionAuth.ok
     ? canManageBillingLimits(sessionAuth.ability)
     : false;
+  const hasProjectRuntimeUpdate =
+    sessionAuth.ok &&
+    sessionAuth.ability.can("read", { type: "deployments" }) &&
+    organizationHasRuntimeUpdate;
 
   let hasExceededFreeTier = false;
   let usagePercentage = 0;
@@ -218,6 +232,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     },
     widgetLimitPerDashboard,
     canManageBillingLimits: userCanManageBillingLimits,
+    hasProjectRuntimeUpdate,
     isUsingRbacPlugin,
     isUsingSsoPlugin,
   });

apps/webapp/app/services/deleteProject.server.ts

@@ -1,5 +1,6 @@
 import type { PrismaClient } from "@trigger.dev/database";
 import { prisma } from "~/db.server";
+import { invalidateOrganizationProjectRuntimeUpdateCache } from "~/services/projectRuntimeUpdates.server";
 import { engine } from "~/v3/runEngine.server";
 import { controlPlaneResolver } from "~/v3/runOpsMigration/controlPlaneResolver.server";
 
@@ -58,6 +59,8 @@ export class DeleteProjectService {
       },
     });
 
+    await invalidateOrganizationProjectRuntimeUpdateCache(project.organization.id);
+
     /** project.deletedAt, which the engine gates enqueue and dequeue on, changed; drop every cached env of this project. */
     for (const environment of project.environments) {
       controlPlaneResolver.invalidateEnvironment(environment.id);