Dashboard: Fix webhooks posthog feature flag conditional rendering (#7585)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a centralized webhooks feature, enhancing the sidebar layout and analytics for webhooks. It adds loading states, integrates feature flags, and modifies the handling of webhooks in various components.

### Detailed summary
- Added `Loading` components using `GenericLoadingPage` in multiple webhook pages.
- Updated `ProjectSidebarLayout` to include `isCentralizedWebhooksFeatureFlagEnabled`.
- Enhanced `ProjectLayout` to fetch and utilize the centralized webhooks feature flag.
- Modified `WebhooksAnalyticsPage` to check for the centralized webhooks feature flag before redirecting.
- Adjusted `WebhooksLayout` to conditionally render links based on the centralized webhooks feature flag.
- Refactored `isFeatureFlagEnabled` function for improved feature flag handling.
- Updated `WebhooksPage` to include centralized webhooks feature flag checks and redirection logic.
- Cleaned up imports and ensured consistent use of `params` across various components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Added multiple loading indicators across webhooks analytics, contracts, universal bridge, and sidebar routes for smoother user experience.
  * Sidebar and tab navigation dynamically update based on the centralized webhooks feature flag.

* **Bug Fixes**
  * Enhanced error handling with 404 responses for missing accounts, projects, or authentication on webhooks pages.
  * Redirects implemented when the centralized webhooks feature flag is disabled.

* **Refactor**
  * Updated feature flag checks to a new cached API accepting structured parameters.
  * Streamlined parameter handling and navigation logic for webhooks pages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/analytics/posthog-server.ts

@@ -1,45 +1,57 @@
 import "server-only";
+import { unstable_cache } from "next/cache";
 import { PostHog } from "posthog-node";
 
-let posthogServer: PostHog | null = null;
+let _posthogClient: PostHog | null = null;
 
 function getPostHogServer(): PostHog | null {
-  if (!posthogServer && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
-    posthogServer = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+  if (!_posthogClient && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+    _posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
       host: "https://us.i.posthog.com",
     });
   }
-  return posthogServer;
+  return _posthogClient;
 }
 
 /**
  * Check if a feature flag is enabled for a specific user
  * @param flagKey - The feature flag key
  * @param userEmail - The user's email address for filtering
  */
-export async function isFeatureFlagEnabled(
-  flagKey: string,
-  userEmail?: string,
-): Promise<boolean> {
-  // For localdev environments where Posthog is not running, enable all feature flags.
-  if (!posthogServer) {
-    return true;
-  }
+export const isFeatureFlagEnabled = unstable_cache(
+  async (params: {
+    flagKey: string;
+    accountId: string;
+    email: string | undefined;
+  }): Promise<boolean> => {
+    const posthogClient = getPostHogServer();
+    if (!posthogClient) {
+      console.warn("Posthog client not set");
+      return true;
+    }
+
+    const { flagKey, accountId, email } = params;
 
-  try {
-    const client = getPostHogServer();
-    if (client && userEmail) {
-      const isEnabled = await client.isFeatureEnabled(flagKey, userEmail, {
-        personProperties: {
-          email: userEmail,
-        },
-      });
-      if (isEnabled !== undefined) {
-        return isEnabled;
+    try {
+      if (posthogClient && accountId) {
+        const isEnabled = await posthogClient.isFeatureEnabled(
+          flagKey,
+          accountId,
+          {
+            personProperties: email ? { email } : undefined,
+          },
+        );
+        if (isEnabled !== undefined) {
+          return isEnabled;
+        }
       }
+    } catch (error) {
+      console.error(`Error checking feature flag ${flagKey}:`, error);
     }
-  } catch (error) {
-    console.error(`Error checking feature flag ${flagKey}:`, error);
-  }
-  return false;
-}
+    return false;
+  },
+  ["is-feature-flag-enabled"],
+  {
+    revalidate: 3600, // 1 hour
+  },
+);

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx

@@ -22,8 +22,14 @@ export function ProjectSidebarLayout(props: {
   layoutPath: string;
   engineLinkType: "cloud" | "dedicated";
   children: React.ReactNode;
+  isCentralizedWebhooksFeatureFlagEnabled: boolean;
 }) {
-  const { layoutPath, engineLinkType, children } = props;
+  const {
+    layoutPath,
+    engineLinkType,
+    children,
+    isCentralizedWebhooksFeatureFlagEnabled,
+  } = props;
 
   return (
     <FullWidthSidebarLayout
@@ -119,8 +125,13 @@ export function ProjectSidebarLayout(props: {
       ]}
       footerSidebarLinks={[
         {
-          href: `${layoutPath}/webhooks`,
+          href: isCentralizedWebhooksFeatureFlagEnabled
+            ? `${layoutPath}/webhooks`
+            : `${layoutPath}/webhooks/contracts`,
           icon: BellIcon,
+          isActive: (pathname) => {
+            return pathname.startsWith(`${layoutPath}/webhooks`);
+          },
           label: (
             <span className="flex items-center gap-2">
               Webhooks <Badge>New</Badge>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx

@@ -1,4 +1,5 @@
 import { redirect } from "next/navigation";
+import { isFeatureFlagEnabled } from "@/analytics/posthog-server";
 import { getAuthToken, getAuthTokenWalletAddress } from "@/api/auth-token";
 import { getProject, getProjects, type Project } from "@/api/projects";
 import { getTeamBySlug, getTeams } from "@/api/team";
@@ -56,10 +57,18 @@ export default async function ProjectLayout(props: {
     teamId: team.id,
   });
 
-  const engineLinkType = await getEngineLinkType({
-    authToken,
-    project,
-  });
+  const [engineLinkType, isCentralizedWebhooksFeatureFlagEnabled] =
+    await Promise.all([
+      getEngineLinkType({
+        authToken,
+        project,
+      }),
+      isFeatureFlagEnabled({
+        flagKey: "centralized-webhooks",
+        accountId: account.id,
+        email: account.email,
+      }),
+    ]);
 
   const isStaffMode = !teams.some((t) => t.slug === team.slug);
 
@@ -81,6 +90,9 @@ export default async function ProjectLayout(props: {
         <ProjectSidebarLayout
           engineLinkType={engineLinkType}
           layoutPath={layoutPath}
+          isCentralizedWebhooksFeatureFlagEnabled={
+            isCentralizedWebhooksFeatureFlagEnabled
+          }
         >
           {props.children}
         </ProjectSidebarLayout>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/loading.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+
+export default function Loading() {
+  return <GenericLoadingPage className="border-none" />;
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/page.tsx

@@ -1,10 +1,12 @@
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { ResponsiveSearchParamsProvider } from "responsive-rsc";
+import { isFeatureFlagEnabled } from "@/analytics/posthog-server";
 import { getWebhookLatency, getWebhookRequests } from "@/api/analytics";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/projects";
 import { getWebhookConfigs } from "@/api/webhook-configs";
 import { getFiltersFromSearchParams } from "@/lib/time";
+import { getValidAccount } from "../../../../../../account/settings/getAccount";
 import { WebhooksAnalytics } from "./components/WebhooksAnalytics";
 
 export default async function WebhooksAnalyticsPage(props: {
@@ -16,14 +18,35 @@ export default async function WebhooksAnalyticsPage(props: {
     webhook?: string | undefined | string[];
   }>;
 }) {
-  const [authToken, params] = await Promise.all([getAuthToken(), props.params]);
+  const [authToken, params, account] = await Promise.all([
+    getAuthToken(),
+    props.params,
+    getValidAccount(),
+  ]);
+
+  if (!account || !authToken) {
+    notFound();
+  }
 
-  const project = await getProject(params.team_slug, params.project_slug);
+  const [isFeatureEnabled, project] = await Promise.all([
+    isFeatureFlagEnabled({
+      flagKey: "centralized-webhooks",
+      accountId: account.id,
+      email: account.email,
+    }),
+    getProject(params.team_slug, params.project_slug),
+  ]);
 
-  if (!project || !authToken) {
+  if (!project) {
     notFound();
   }
 
+  if (!isFeatureEnabled) {
+    redirect(
+      `/team/${params.team_slug}/${params.project_slug}/webhooks/contracts`,
+    );
+  }
+
   const searchParams = await props.searchParams;
   const { range, interval } = getFiltersFromSearchParams({
     defaultRange: "last-7",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/contracts/loading.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+
+export default function Loading() {
+  return <GenericLoadingPage className="border-none" />;
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/layout.tsx

@@ -10,10 +10,11 @@ export default async function WebhooksLayout(props: {
   }>;
 }) {
   const account = await getValidAccount();
-  const isFeatureEnabled = await isFeatureFlagEnabled(
-    "webhook-analytics-tab",
-    account.email,
-  );
+  const isFeatureEnabled = await isFeatureFlagEnabled({
+    flagKey: "centralized-webhooks",
+    accountId: account.id,
+    email: account.email,
+  });
 
   const params = await props.params;
   return (
@@ -29,33 +30,46 @@ export default async function WebhooksLayout(props: {
         </div>
       </div>
 
-      <TabPathLinks
-        links={[
-          ...(isFeatureEnabled
-            ? [
-                {
-                  exactMatch: true,
-                  name: "Overview",
-                  path: `/team/${params.team_slug}/${params.project_slug}/webhooks`,
-                },
-                {
-                  exactMatch: true,
-                  name: "Analytics",
-                  path: `/team/${params.team_slug}/${params.project_slug}/webhooks/analytics`,
-                },
-              ]
-            : []),
-          {
-            name: "Contracts",
-            path: `/team/${params.team_slug}/${params.project_slug}/webhooks/contracts`,
-          },
-          {
-            name: "Payments",
-            path: `/team/${params.team_slug}/${params.project_slug}/webhooks/universal-bridge`,
-          },
-        ]}
-        scrollableClassName="container max-w-7xl"
-      />
+      {isFeatureEnabled ? (
+        <TabPathLinks
+          links={[
+            {
+              exactMatch: true,
+              name: "Overview",
+              path: `/team/${params.team_slug}/${params.project_slug}/webhooks`,
+            },
+            {
+              exactMatch: true,
+              name: "Analytics",
+              path: `/team/${params.team_slug}/${params.project_slug}/webhooks/analytics`,
+            },
+            {
+              name: "Contracts",
+              path: `/team/${params.team_slug}/${params.project_slug}/webhooks/contracts`,
+            },
+            {
+              name: "Payments",
+              path: `/team/${params.team_slug}/${params.project_slug}/webhooks/universal-bridge`,
+            },
+          ]}
+          scrollableClassName="container max-w-7xl"
+        />
+      ) : (
+        <TabPathLinks
+          links={[
+            {
+              name: "Contracts",
+              path: `/team/${params.team_slug}/${params.project_slug}/webhooks/contracts`,
+            },
+            {
+              name: "Payments",
+              path: `/team/${params.team_slug}/${params.project_slug}/webhooks/universal-bridge`,
+            },
+          ]}
+          scrollableClassName="container max-w-7xl"
+        />
+      )}
+
       <div className="h-6" />
       <div className="container flex max-w-7xl grow flex-col">
         {props.children}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/loading.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+
+export default function Loading() {
+  return <GenericLoadingPage className="border-none" />;
+}