feat(webapp): put the Slack support channel behind a feature flag

The feature needs a plan entitlement and Slack app scopes that ship
separately, so it must stay dark until both are live. Off by default, with
a per-organization override so one org can be switched on first.

When off the route 404s and the nav item is hidden, rather than showing an
upsell for something that cannot be bought yet.

Author: isshaddad

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

@@ -50,11 +50,13 @@ export function OrganizationSettingsSideMenu({
   buildInfo,
   isUsingPlugin,
   isSsoUsingPlugin,
+  supportChannelEnabled,
 }: {
   organization: MatchedOrganization;
   buildInfo: BuildInfo;
   isUsingPlugin: boolean;
   isSsoUsingPlugin: boolean;
+  supportChannelEnabled: boolean;
 }) {
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
@@ -136,7 +138,7 @@ export function OrganizationSettingsSideMenu({
             to={organizationTeamPath(organization)}
             data-action="team"
           />
-          {isManagedCloud && (
+          {isManagedCloud && supportChannelEnabled && (
             <SideMenuItem
               name="Support"
               icon={SlackIcon}

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

@@ -9,16 +9,28 @@ import {
   type BuildInfo,
   OrganizationSettingsSideMenu,
 } from "~/components/navigation/OrganizationSettingsSideMenu";
+import { prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { rbac } from "~/services/rbac.server";
+import { getUserId } from "~/services/session.server";
 import { ssoController } from "~/services/sso.server";
+import { isSupportChannelEnabled } from "~/services/supportChannelFlag.server";
 
 const SETTINGS_ROUTE_ID = "routes/_app.orgs.$organizationSlug.settings";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const [isUsingPlugin, isSsoUsingPlugin] = await Promise.all([
+  const userId = await getUserId(request);
+  const organization = userId
+    ? await prisma.organization.findFirst({
+        where: { slug: params.organizationSlug ?? "", members: { some: { userId } } },
+        select: { id: true },
+      })
+    : null;
+
+  const [isUsingPlugin, isSsoUsingPlugin, supportChannelEnabled] = await Promise.all([
     rbac.isUsingPlugin(),
     ssoController.isUsingPlugin(),
+    organization ? isSupportChannelEnabled(organization.id) : Promise.resolve(false),
   ]);
   return typedjson({
     buildInfo: {
@@ -30,18 +42,21 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     } satisfies BuildInfo,
     isUsingPlugin,
     isSsoUsingPlugin,
+    supportChannelEnabled,
   });
 };
 
 function SettingsChrome({
   buildInfo,
   isUsingPlugin,
   isSsoUsingPlugin,
+  supportChannelEnabled,
   children,
 }: {
   buildInfo: BuildInfo;
   isUsingPlugin: boolean;
   isSsoUsingPlugin: boolean;
+  supportChannelEnabled: boolean;
   children: ReactNode;
 }) {
   const organization = useOrganization();
@@ -54,6 +69,7 @@ function SettingsChrome({
           buildInfo={buildInfo}
           isUsingPlugin={isUsingPlugin}
           isSsoUsingPlugin={isSsoUsingPlugin}
+          supportChannelEnabled={supportChannelEnabled}
         />
         <MainBody>{children}</MainBody>
       </div>
@@ -62,13 +78,15 @@ function SettingsChrome({
 }
 
 export default function Page() {
-  const { buildInfo, isUsingPlugin, isSsoUsingPlugin } = useTypedLoaderData<typeof loader>();
+  const { buildInfo, isUsingPlugin, isSsoUsingPlugin, supportChannelEnabled } =
+    useTypedLoaderData<typeof loader>();
 
   return (
     <SettingsChrome
       buildInfo={buildInfo}
       isUsingPlugin={isUsingPlugin}
       isSsoUsingPlugin={isSsoUsingPlugin}
+      supportChannelEnabled={supportChannelEnabled}
     >
       <Outlet />
     </SettingsChrome>
@@ -81,7 +99,12 @@ export default function Page() {
 // available via useRouteLoaderData.
 export function ErrorBoundary() {
   const data = useRouteLoaderData(SETTINGS_ROUTE_ID) as
-    | { buildInfo: BuildInfo; isUsingPlugin: boolean; isSsoUsingPlugin: boolean }
+    | {
+        buildInfo: BuildInfo;
+        isUsingPlugin: boolean;
+        isSsoUsingPlugin: boolean;
+        supportChannelEnabled: boolean;
+      }
     | undefined;
 
   if (!data) {
@@ -93,6 +116,7 @@ export function ErrorBoundary() {
       buildInfo={data.buildInfo}
       isUsingPlugin={data.isUsingPlugin}
       isSsoUsingPlugin={data.isSsoUsingPlugin}
+      supportChannelEnabled={data.supportChannelEnabled}
     >
       <RouteErrorDisplay />
     </SettingsChrome>

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

@@ -0,0 +1,31 @@
+import { type PrismaClient } from "@trigger.dev/database";
+import { prisma } from "~/db.server";
+import { resolveSupportChannelEnabled } from "~/services/supportChannelFlag";
+import { FEATURE_FLAG } from "~/v3/featureFlags";
+
+type SupportChannelFlagPrismaClient = Pick<PrismaClient, "featureFlag" | "organization">;
+
+export async function isSupportChannelEnabled(
+  organizationId: string,
+  prismaClient: SupportChannelFlagPrismaClient = prisma
+): Promise<boolean> {
+  const [organization, globalFlags] = await Promise.all([
+    prismaClient.organization.findFirst({
+      where: { id: organizationId },
+      select: { featureFlags: true },
+    }),
+    prismaClient.featureFlag.findMany({
+      where: { key: { in: [FEATURE_FLAG.supportChannelEnabled] } },
+      select: { key: true, value: true },
+    }),
+  ]);
+
+  if (!organization) {
+    return false;
+  }
+
+  return resolveSupportChannelEnabled(
+    Object.fromEntries(globalFlags.map((featureFlag) => [featureFlag.key, featureFlag.value])),
+    (organization.featureFlags as Record<string, unknown> | null) ?? undefined
+  );
+}

apps/webapp/app/services/supportChannelFlag.ts

@@ -0,0 +1,22 @@
+import { FEATURE_FLAG, type FeatureFlagCatalog } from "~/v3/featureFlags";
+
+/**
+ * Resolves whether the private Slack support channel is switched on for an org.
+ *
+ * A per-organization value wins over the global one in both directions, so a
+ * single org can be enabled ahead of a global rollout, or excluded during one.
+ * Absent everywhere means off — the feature depends on a plan entitlement and
+ * Slack app scopes that ship separately, so defaulting on would surface a
+ * button that cannot work.
+ */
+export function resolveSupportChannelEnabled(
+  globalFlags: Partial<FeatureFlagCatalog> | Record<string, unknown> | undefined,
+  organizationFlags: Record<string, unknown> | undefined
+): boolean {
+  const organizationOverride = organizationFlags?.[FEATURE_FLAG.supportChannelEnabled];
+  if (organizationOverride === true || organizationOverride === false) {
+    return organizationOverride;
+  }
+
+  return globalFlags?.[FEATURE_FLAG.supportChannelEnabled] === true;
+}

apps/webapp/app/v3/featureFlags.ts

@@ -34,6 +34,11 @@ export const FEATURE_FLAG = {
   // System-wide kill switch for additional (scoped) environment API-key lookup.
   // Defaults off; enable during rollout once the new lookup path is trusted.
   additionalApiKeyLookupEnabled: "additionalApiKeyLookupEnabled",
+  // Gates the private Slack support channel. Off by default: the feature only
+  // works once the plan entitlement and the Slack app scopes are both live, and
+  // those ship independently of this code. Per-organization override supported,
+  // so a single org can be switched on first.
+  supportChannelEnabled: "supportChannelEnabled",
 } as const;
 
 export const FeatureFlagCatalog = {
@@ -98,6 +103,7 @@ export const FeatureFlagCatalog = {
   [FEATURE_FLAG.additionalApiKeysEnabled]: z.boolean(),
   [FEATURE_FLAG.additionalApiKeyIssuanceEnabled]: z.boolean(),
   [FEATURE_FLAG.additionalApiKeyLookupEnabled]: z.boolean(),
+  [FEATURE_FLAG.supportChannelEnabled]: z.boolean(),
 };
 
 export type FeatureFlagKey = keyof typeof FeatureFlagCatalog;

apps/webapp/test/supportChannelFlag.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { resolveSupportChannelEnabled } from "~/services/supportChannelFlag";
+
+describe("resolveSupportChannelEnabled", () => {
+  it("is off when nothing is set", () => {
+    expect(resolveSupportChannelEnabled(undefined, undefined)).toBe(false);
+    expect(resolveSupportChannelEnabled({}, {})).toBe(false);
+  });
+
+  it("follows the global flag when the org has no override", () => {
+    expect(resolveSupportChannelEnabled({ supportChannelEnabled: true }, {})).toBe(true);
+    expect(resolveSupportChannelEnabled({ supportChannelEnabled: false }, {})).toBe(false);
+  });
+
+  it("lets an org opt in ahead of a global rollout", () => {
+    expect(resolveSupportChannelEnabled({}, { supportChannelEnabled: true })).toBe(true);
+  });
+
+  it("lets an org be excluded from a global rollout", () => {
+    expect(
+      resolveSupportChannelEnabled(
+        { supportChannelEnabled: true },
+        { supportChannelEnabled: false }
+      )
+    ).toBe(false);
+  });
+
+  it("ignores a non-boolean org override and falls back to the global flag", () => {
+    expect(
+      resolveSupportChannelEnabled(
+        { supportChannelEnabled: true },
+        { supportChannelEnabled: "yes" }
+      )
+    ).toBe(true);
+    expect(
+      resolveSupportChannelEnabled({ supportChannelEnabled: false }, { supportChannelEnabled: 1 })
+    ).toBe(false);
+  });
+
+  it("treats a truthy-but-not-true global value as off", () => {
+    expect(resolveSupportChannelEnabled({ supportChannelEnabled: "true" }, {})).toBe(false);
+  });
+});