feat(web): gate app builder behind PostHog feature flag (#3059)

* feat(web): gate app builder behind feature flag

Introduce the `app-builder-feature` flag to control access to the App Builder.
The feature is now hidden in the sidebars and returns a 404 not found
page if the flag is disabled, unless the application is running in
development mode.

* fix(web): check app builder feature flag by user id instead of organization id

---------

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>

Author: kilo-code-bot[bot]

apps/web/src/app/(app)/app-builder/[projectId]/page.tsx

@@ -1,4 +1,6 @@
+import { notFound } from 'next/navigation';
 import { AppBuilderPage } from '@/components/app-builder/AppBuilderPage';
+import { isFeatureFlagEnabled } from '@/lib/posthog-feature-flags';
 import { getUserFromAuthOrRedirect } from '@/lib/user.server';
 
 type Props = {
@@ -7,7 +9,16 @@ type Props = {
 
 export default async function ProjectPage({ params }: Props) {
   const { projectId } = await params;
-  await getUserFromAuthOrRedirect(`/users/sign_in?callbackPath=/app-builder/${projectId}`);
+  const user = await getUserFromAuthOrRedirect(
+    `/users/sign_in?callbackPath=/app-builder/${projectId}`
+  );
+
+  const isAppBuilderEnabled = await isFeatureFlagEnabled('app-builder-feature', user.id);
+  const isDevelopment = process.env.NODE_ENV === 'development';
+
+  if (!isAppBuilderEnabled && !isDevelopment) {
+    return notFound();
+  }
 
   return <AppBuilderPage organizationId={undefined} projectId={projectId} />;
 }

apps/web/src/app/(app)/app-builder/page.tsx

@@ -1,8 +1,17 @@
+import { notFound } from 'next/navigation';
 import { AppBuilderPage } from '@/components/app-builder/AppBuilderPage';
+import { isFeatureFlagEnabled } from '@/lib/posthog-feature-flags';
 import { getUserFromAuthOrRedirect } from '@/lib/user.server';
 
 export default async function CreatePage() {
-  await getUserFromAuthOrRedirect('/users/sign_in?callbackPath=/app-builder');
+  const user = await getUserFromAuthOrRedirect('/users/sign_in?callbackPath=/app-builder');
+
+  const isAppBuilderEnabled = await isFeatureFlagEnabled('app-builder-feature', user.id);
+  const isDevelopment = process.env.NODE_ENV === 'development';
+
+  if (!isAppBuilderEnabled && !isDevelopment) {
+    return notFound();
+  }
 
   return <AppBuilderPage organizationId={undefined} projectId={undefined} />;
 }

apps/web/src/app/(app)/components/OrganizationAppSidebar.tsx

@@ -57,6 +57,7 @@ export default function OrganizationAppSidebar({
 
   // Feature flags
   const isAutoTriageFeatureEnabled = useFeatureFlagEnabled('auto-triage-feature');
+  const isAppBuilderEnabled = useFeatureFlagEnabled('app-builder-feature');
   const isDevelopment = process.env.NODE_ENV === 'development';
 
   // Get current organization role and data
@@ -159,11 +160,15 @@ export default function OrganizationAppSidebar({
     url: string;
     className?: string;
   }> = [
-    {
-      title: 'App Builder',
-      icon: Plus,
-      url: `/organizations/${organizationId}/app-builder`,
-    },
+    ...(isAppBuilderEnabled || isDevelopment
+      ? [
+          {
+            title: 'App Builder',
+            icon: Plus,
+            url: `/organizations/${organizationId}/app-builder`,
+          },
+        ]
+      : []),
     {
       title: 'Cloud Agent',
       icon: Cloud,

apps/web/src/app/(app)/components/PersonalAppSidebar.tsx

@@ -50,6 +50,7 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
   // Feature flags
   const isAutoTriageFeatureEnabled = useFeatureFlagEnabled('auto-triage-feature');
   const isGastownEnabled = useFeatureFlagEnabled('gastown-access');
+  const isAppBuilderEnabled = useFeatureFlagEnabled('app-builder-feature');
   const isDevelopment = process.env.NODE_ENV === 'development';
 
   // Dashboard group
@@ -112,11 +113,15 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
     url: string;
     className?: string;
   }> = [
-    {
-      title: 'App Builder',
-      icon: Plus,
-      url: '/app-builder',
-    },
+    ...(isAppBuilderEnabled || isDevelopment
+      ? [
+          {
+            title: 'App Builder',
+            icon: Plus,
+            url: '/app-builder',
+          },
+        ]
+      : []),
     {
       title: 'Cloud Agent',
       icon: Cloud,

apps/web/src/app/(app)/organizations/[id]/app-builder/[projectId]/page.tsx

@@ -1,6 +1,7 @@
-import { redirect } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { AppBuilderPage } from '@/components/app-builder/AppBuilderPage';
 import { getAuthorizedOrgContext } from '@/lib/organizations/organization-auth';
+import { isFeatureFlagEnabled } from '@/lib/posthog-feature-flags';
 import { signInUrlWithCallbackPath } from '@/lib/user.server';
 
 type Props = {
@@ -19,5 +20,15 @@ export default async function OrgAppBuilderProjectPage({ params }: Props) {
     redirect('/profile');
   }
 
+  const isAppBuilderEnabled = await isFeatureFlagEnabled(
+    'app-builder-feature',
+    result.data.user.id
+  );
+  const isDevelopment = process.env.NODE_ENV === 'development';
+
+  if (!isAppBuilderEnabled && !isDevelopment) {
+    return notFound();
+  }
+
   return <AppBuilderPage organizationId={organizationId} projectId={projectId} />;
 }

apps/web/src/app/(app)/organizations/[id]/app-builder/page.tsx

@@ -1,6 +1,7 @@
-import { redirect } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { AppBuilderPage } from '@/components/app-builder/AppBuilderPage';
 import { getAuthorizedOrgContext } from '@/lib/organizations/organization-auth';
+import { isFeatureFlagEnabled } from '@/lib/posthog-feature-flags';
 import { signInUrlWithCallbackPath } from '@/lib/user.server';
 
 type Props = {
@@ -19,5 +20,15 @@ export default async function OrgAppBuilderPage({ params }: Props) {
     redirect('/profile');
   }
 
+  const isAppBuilderEnabled = await isFeatureFlagEnabled(
+    'app-builder-feature',
+    result.data.user.id
+  );
+  const isDevelopment = process.env.NODE_ENV === 'development';
+
+  if (!isAppBuilderEnabled && !isDevelopment) {
+    return notFound();
+  }
+
   return <AppBuilderPage organizationId={organizationId} projectId={undefined} />;
 }