fix(webapp): remove Node 21 deprecation banner

Mono-RevId: d220091bd913394572a9c06aeb2f702461909a84

Author: carderne

.server-changes/remove-node-21-banner.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Removed the organization-wide Node.js 21 deprecation banner while keeping runtime upgrade guidance in Projects settings.

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

@@ -15,17 +15,11 @@ 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 {
-  concurrencyPath,
-  organizationProjectsPath,
-  v3BillingLimitsPath,
-  v3BillingPath,
-} from "~/utils/pathBuilder";
+import { concurrencyPath, v3BillingLimitsPath, v3BillingPath } from "~/utils/pathBuilder";
 import { ENVIRONMENT_PAUSE_SOURCE_BILLING_LIMIT } from "~/utils/environmentPauseSource";
 
 /** Wire values for the billing-limits route action's "remove the limit" submission. */
@@ -45,7 +39,6 @@ export function OrgBanner() {
   const project = useOptionalProject();
   const environment = useOptionalEnvironment();
   const billingLimit = useBillingLimit();
-  const hasProjectRuntimeUpdate = useHasProjectRuntimeUpdate();
   const currentPlan = useCurrentPlan();
   const showSelfServe = useShowSelfServe();
   const location = useLocation();
@@ -64,7 +57,6 @@ export function OrgBanner() {
   const isArchived = !!(organization && project && environment && environment.archivedAt);
 
   const bannerKind = selectOrgBanner({
-    hasProjectRuntimeUpdate,
     billingLimit,
     hasExceededFreeTier: currentPlan?.v3Usage.hasExceededFreeTier === true,
     showEnvironmentWarning: isPaused || isArchived,
@@ -75,8 +67,6 @@ 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:
@@ -96,24 +86,6 @@ 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,7 +1,6 @@
 import type { BillingLimitResult } from "~/services/billingLimit.schemas";
 
 export enum OrgBannerKind {
-  RuntimeUpdate = "runtime-update",
   LimitRejected = "limit-rejected",
   LimitGrace = "limit-grace",
   NoLimitConfigured = "no-limit",
@@ -11,24 +10,13 @@ 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 {
-    hasProjectRuntimeUpdate,
-    billingLimit,
-    hasExceededFreeTier,
-    showEnvironmentWarning,
-    showSelfServe = true,
-  } = input;
-
-  if (hasProjectRuntimeUpdate) {
-    return OrgBannerKind.RuntimeUpdate;
-  }
+  const { billingLimit, hasExceededFreeTier, showEnvironmentWarning, showSelfServe = true } = input;
 
   if (billingLimit?.isConfigured) {
     const status = billingLimit.limitState.status;

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

@@ -13,7 +13,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, useHasProjectRuntimeUpdate } from "~/hooks/useOrganizations";
+import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { cn } from "~/utils/cn";
 import {
   organizationPath,
@@ -53,17 +53,18 @@ 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,11 +94,3 @@ 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,4 +1,5 @@
 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";
@@ -9,15 +10,60 @@ import {
   OrganizationSettingsSideMenu,
 } from "~/components/navigation/OrganizationSettingsSideMenu";
 import { useOrganization } from "~/hooks/useOrganizations";
+import { resolveOrgIdFromSlugForUser } from "~/models/organization.server";
+import { logger } from "~/services/logger.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";
 
-export const loader = async () => {
-  const [isUsingPlugin, isSsoUsingPlugin] = await Promise.all([
+// 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([
     rbac.isUsingPlugin(),
     ssoController.isUsingPlugin(),
+    organizationSlug
+      ? canReadDeployments({ request, userId, organizationSlug })
+          .then((canRead) =>
+            canRead ? organizationHasProjectRuntimeUpdate({ organizationSlug, userId }) : false
+          )
+          .catch((error) => {
+            logger.error("Failed to check project runtime updates", {
+              organizationSlug,
+              error,
+            });
+            return false;
+          })
+      : Promise.resolve(false),
   ]);
   return typedjson({
     buildInfo: {
@@ -29,18 +75,21 @@ export const loader = async () => {
     } 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();
@@ -53,6 +102,7 @@ function SettingsChrome({
           buildInfo={buildInfo}
           isUsingPlugin={isUsingPlugin}
           isSsoUsingPlugin={isSsoUsingPlugin}
+          hasProjectRuntimeUpdate={hasProjectRuntimeUpdate}
         />
         <MainBody>{children}</MainBody>
       </div>
@@ -61,13 +111,15 @@ function SettingsChrome({
 }
 
 export default function Page() {
-  const { buildInfo, isUsingPlugin, isSsoUsingPlugin } = useTypedLoaderData<typeof loader>();
+  const { buildInfo, isUsingPlugin, isSsoUsingPlugin, hasProjectRuntimeUpdate } =
+    useTypedLoaderData<typeof loader>();
 
   return (
     <SettingsChrome
       buildInfo={buildInfo}
       isUsingPlugin={isUsingPlugin}
       isSsoUsingPlugin={isSsoUsingPlugin}
+      hasProjectRuntimeUpdate={hasProjectRuntimeUpdate}
     >
       <Outlet />
     </SettingsChrome>
@@ -84,6 +136,7 @@ export function ErrorBoundary() {
         buildInfo: BuildInfo;
         isUsingPlugin: boolean;
         isSsoUsingPlugin: boolean;
+        hasProjectRuntimeUpdate: boolean;
       }
     | undefined;
 
@@ -96,6 +149,7 @@ 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,11 +9,9 @@ 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";
@@ -130,7 +128,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     regions,
     isUsingRbacPlugin,
     isUsingSsoPlugin,
-    organizationHasRuntimeUpdate,
   ] = await Promise.all([
     rbac
       .authenticateSession(request, {
@@ -160,21 +157,10 @@ 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;
@@ -232,7 +218,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     },
     widgetLimitPerDashboard,
     canManageBillingLimits: userCanManageBillingLimits,
-    hasProjectRuntimeUpdate,
     isUsingRbacPlugin,
     isUsingSsoPlugin,
   });

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

@@ -1,6 +1,5 @@
 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";
 
@@ -59,8 +58,6 @@ 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);