fix(alerts): hide the alerts preview from admins when alerts are not enabled

fix(webapp): hide the Alerts section on installations where alerts are
disabled

Mono-RevId: ed9b4658376cddba2969bcb40d86e5dfc77732a3

Author: kathiekiwi

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

@@ -346,7 +346,7 @@ export function SideMenu({
   const isFreeUser = currentPlan?.v3Subscription?.isPaying === false;
   const isAdmin = useHasAdminAccess();
   const isViewingAsUser = useIsViewingAsUser();
-  const { isManagedCloud } = useFeatures();
+  const { isManagedCloud, alertsConfigured } = useFeatures();
   const featureFlags = useFeatureFlags();
   const incidentStatus = useIncidentStatus();
   const isV3Project = project.engine === "V1";
@@ -749,6 +749,7 @@ export function SideMenu({
     project,
     environment,
     isAdmin,
+    alertsConfigured,
     featureFlags,
     isManagedCloud,
     dashboards: {

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

@@ -81,6 +81,7 @@ export function buildSideMenuSections({
   project,
   environment,
   isAdmin,
+  alertsConfigured,
   featureFlags,
   isManagedCloud,
   dashboards,
@@ -89,6 +90,7 @@ export function buildSideMenuSections({
   project: ProjectForPath;
   environment: EnvironmentForPath;
   isAdmin: boolean;
+  alertsConfigured: boolean;
   featureFlags: {
     hasAiAccess?: boolean;
     hasQueryAccess?: boolean;
@@ -138,7 +140,8 @@ export function buildSideMenuSections({
   const showObservability =
     isAdmin || featureFlags.hasQueryAccess || featureFlags.hasLogsPageAccess;
   const alertsInObservability =
-    showObservability && computeCanUseAlertsList(featureFlags.alertsEnabled === true, isAdmin);
+    showObservability &&
+    computeCanUseAlertsList(featureFlags.alertsEnabled === true, isAdmin, alertsConfigured);
 
   if (showObservability) {
     staticSections.push({

apps/webapp/app/features.server.ts

@@ -1,4 +1,5 @@
 import { env } from "./env.server";
+import { isAlertsConfigured } from "./v3/services/alerts/alertsConfigured.server";
 import { queueMetricsEnabled } from "./v3/services/alerts/offeredCapabilities.server";
 import { requestUrl } from "./utils/requestUrl.server";
 
@@ -7,6 +8,7 @@ export type TriggerFeatures = {
   hasPrivateConnections: boolean;
   queueMetricsQueryTables: boolean;
   queueMetricsEnabled: boolean;
+  alertsConfigured: boolean;
 };
 
 const MANAGED_CLOUD_HOSTS = ["cloud.trigger.dev", "test-cloud.trigger.dev", "internal.trigger.dev"];
@@ -34,6 +36,7 @@ function featuresForHost(host: string): TriggerFeatures {
     hasPrivateConnections: hasPrivateConnections(host),
     queueMetricsQueryTables: env.QUEUE_METRICS_QUERY_TABLES_VISIBLE === "1",
     queueMetricsEnabled: queueMetricsEnabled(),
+    alertsConfigured: isAlertsConfigured({ alertsEnabled: env.ALERTS_ENABLED }),
   };
 }
 

apps/webapp/app/hooks/useFeatures.ts

@@ -11,6 +11,7 @@ export function useFeatures(): TriggerFeatures {
       hasPrivateConnections: false,
       queueMetricsQueryTables: false,
       queueMetricsEnabled: true,
+      alertsConfigured: false,
     }
   );
 }

apps/webapp/app/routes/account._index/route.tsx

@@ -725,7 +725,7 @@ function CustomizeSidebarButton({
 }) {
   const user = useUser();
   const isAdmin = useHasAdminAccess();
-  const { isManagedCloud } = useFeatures();
+  const { isManagedCloud, alertsConfigured } = useFeatures();
   const favorites = useFavorites();
   const [isOpen, setIsOpen] = useState(false);
   const [isConfirming, setIsConfirming] = useState(false);
@@ -767,16 +767,18 @@ function CustomizeSidebarButton({
           },
         ]
       : []),
-    ...buildSideMenuSections({ ...context, isAdmin, isManagedCloud }).map((section) => ({
-      id: section.id,
-      title: section.title,
-      items: section.items.map((item) => ({
-        id: item.id,
-        name: item.name,
-        icon: item.icon,
-        defaultHidden: item.defaultHidden,
-      })),
-    })),
+    ...buildSideMenuSections({ ...context, isAdmin, alertsConfigured, isManagedCloud }).map(
+      (section) => ({
+        id: section.id,
+        title: section.title,
+        items: section.items.map((item) => ({
+          id: item.id,
+          name: item.name,
+          icon: item.icon,
+          defaultHidden: item.defaultHidden,
+        })),
+      })
+    ),
   ];
 
   return (

apps/webapp/app/v3/canUseAlertsList.server.ts

@@ -5,6 +5,7 @@ import { v3ProjectAlertsPath } from "~/utils/pathBuilder";
 import { FEATURE_FLAG } from "~/v3/featureFlags";
 import { makeFlag } from "~/v3/featureFlags.server";
 import { computeCanUseAlertsList, isAlertsEnabledEnv } from "./canUseAlertsList";
+import { isAlertsConfigured } from "./services/alerts/alertsConfigured.server";
 
 async function isAlertsFlagEnabled(
   orgFeatureFlags: Record<string, unknown> | null | undefined
@@ -53,7 +54,11 @@ export async function canUseAlertsList(options: {
     isAdmin = user?.admin ?? false;
   }
 
-  return computeCanUseAlertsList(Boolean(flagResult), isAdmin);
+  return computeCanUseAlertsList(
+    Boolean(flagResult),
+    isAdmin,
+    isAlertsConfigured({ alertsEnabled: env.ALERTS_ENABLED })
+  );
 }
 
 type AlertsGateParams = {

apps/webapp/app/v3/canUseAlertsList.test.ts

@@ -2,16 +2,20 @@ import { describe, expect, it } from "vitest";
 import { computeCanUseAlertsList, isAlertsEnabledEnv } from "./canUseAlertsList";
 
 describe("computeCanUseAlertsList", () => {
-  it("admin, flag off -> true", () => {
-    expect(computeCanUseAlertsList(false, true)).toBe(true);
+  it("admin, flag off, configured -> true", () => {
+    expect(computeCanUseAlertsList(false, true, true)).toBe(true);
+  });
+
+  it("admin, flag off, not configured -> false", () => {
+    expect(computeCanUseAlertsList(false, true, false)).toBe(false);
   });
 
   it("non-admin, flag off -> false", () => {
-    expect(computeCanUseAlertsList(false, false)).toBe(false);
+    expect(computeCanUseAlertsList(false, false, true)).toBe(false);
   });
 
   it("non-admin, flag on -> true", () => {
-    expect(computeCanUseAlertsList(true, false)).toBe(true);
+    expect(computeCanUseAlertsList(true, false, false)).toBe(true);
   });
 });
 

apps/webapp/app/v3/canUseAlertsList.ts

@@ -1,10 +1,14 @@
 /**
  * The single Alerts-list gating rule: the `alertsEnabled` flag (per-org override
- * winning), or the viewer being a platform admin. Off leaves the legacy channel-list
- * page unchanged for non-admins.
+ * winning), or a platform admin on an install where alerts are configured. Off leaves
+ * the legacy channel-list page unchanged.
  */
-export function computeCanUseAlertsList(flagEnabled: boolean, isAdmin: boolean): boolean {
-  return flagEnabled || isAdmin;
+export function computeCanUseAlertsList(
+  flagEnabled: boolean,
+  isAdmin: boolean,
+  alertsConfigured: boolean
+): boolean {
+  return flagEnabled || (isAdmin && alertsConfigured);
 }
 
 export function isAlertsEnabledEnv(value: string | undefined): boolean {

apps/webapp/test/alertsGateRoutes.test.ts

@@ -1,3 +1,4 @@
+import type * as AlertsGate from "~/v3/canUseAlertsList.server";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 
 vi.setConfig({ testTimeout: 30_000 });
@@ -35,8 +36,11 @@ vi.mock("~/services/routeBuilders/dashboardBuilder", () => {
 vi.mock("~/services/session.server", () => ({ requireUserId: async () => "user_1" }));
 
 vi.mock("~/db.server", () => ({
-  prisma: { organizationIntegration: { findFirst: async () => ({ id: "int_1" }) } },
-  $replica: {},
+  prisma: {
+    organizationIntegration: { findFirst: async () => ({ id: "int_1" }) },
+    user: { findFirst: async () => ({ admin: true }) },
+  },
+  $replica: { organization: { findFirst: async () => ({ featureFlags: {} }) } },
 }));
 
 vi.mock("~/models/project.server", async (importOriginal) => ({
@@ -132,6 +136,11 @@ vi.mock("~/v3/canUseAlertsList.server", async () => {
   };
 });
 
+vi.mock("~/v3/featureFlags.server", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  makeFlag: () => async (opts: { defaultValue: unknown }) => opts.defaultValue,
+}));
+
 const P = "_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam";
 const params = { organizationSlug: "o", projectParam: "p", envParam: "dev", channelId: "c" };
 const request = (method = "GET") => new Request("http://localhost/x", { method });
@@ -189,6 +198,15 @@ describe("new alerts surfaces when alertsEnabled is off", () => {
   });
 });
 
+describe("admin preview when ALERTS_ENABLED is unset", () => {
+  it("the real gate redirects an admin to the old alerts page", async () => {
+    const real = await vi.importActual<typeof AlertsGate>("~/v3/canUseAlertsList.server");
+    const res = await thrown(() => real.requireAlertsEnabledOrRedirect("user_1", params));
+    expect(res?.status).toBe(302);
+    expect(await real.canUseAlertsList({ orgFeatureFlags: {}, user: { admin: true } })).toBe(false);
+  });
+});
+
 describe("preview-series authorization", () => {
   it("responds 403 to a member denied read:alerts", async () => {
     STATE.enabled = true;

apps/webapp/test/alertsRequireEnabled.test.ts

@@ -1,8 +1,14 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-const STATE = vi.hoisted(() => ({ member: true, flag: false, admin: false }));
+const STATE = vi.hoisted(() => ({ member: true, flag: false, admin: false, configured: "1" }));
 
-vi.mock("~/env.server", () => ({ env: {} }));
+vi.mock("~/env.server", () => ({
+  env: {
+    get ALERTS_ENABLED() {
+      return STATE.configured;
+    },
+  },
+}));
 vi.mock("~/v3/featureFlags.server", () => ({ makeFlag: () => async () => STATE.flag }));
 vi.mock("~/db.server", () => ({
   prisma: { user: { findFirst: async () => ({ admin: STATE.admin }) } },
@@ -34,6 +40,7 @@ beforeEach(() => {
   STATE.member = true;
   STATE.flag = false;
   STATE.admin = false;
+  STATE.configured = "1";
 });
 
 describe.each([
@@ -49,11 +56,17 @@ describe.each([
     expect(await thrown(run)).toBeUndefined();
   });
 
-  it("allows an admin member with the flag off", async () => {
+  it("allows an admin member with the flag off when alerts are configured", async () => {
     STATE.admin = true;
     expect(await thrown(run)).toBeUndefined();
   });
 
+  it("denies an admin member with the flag off when alerts are not configured", async () => {
+    STATE.admin = true;
+    STATE.configured = "";
+    expect((await thrown(run))?.status).toBe(deniedStatus);
+  });
+
   it("denies a non-member even with the flag on", async () => {
     STATE.member = false;
     STATE.flag = true;