chore(dashboard): put create new docs site behind feature flag (#4842)

Author: sbawabe

packages/fern-dashboard/src/app/[orgName]/(wizard)/layout.tsx

@@ -1,7 +1,9 @@
+import { redirect } from "next/navigation";
 import { ThemeProvider } from "next-themes";
-
+import { getCurrentSession } from "@/app/services/auth0/getCurrentSession";
+import { PosthogFeatureFlag } from "@/components/posthog/feature-flags/flags";
+import { isFeatureFlagEnabledForUser } from "@/components/posthog/feature-flags/server-side";
 import { ServerSidePylonSetup } from "@/components/pylon/ServerSidePylonSetup";
-
 import type { Auth0OrgName } from "../../services/auth0/types";
 import { OrgNameProvider } from "../context/OrgNameContext";
 
@@ -14,6 +16,21 @@ export default async function WizardLayout({
 }>) {
     const { orgName } = await params;
 
+    const session = await getCurrentSession();
+    if (session == null) {
+        redirect("/");
+    }
+
+    const isCreateDocsNewSiteEnabled = await isFeatureFlagEnabledForUser(
+        PosthogFeatureFlag.ENABLE_CREATE_DOCS_NEW_SITE,
+        session.user.sub,
+        orgName
+    );
+
+    if (!isCreateDocsNewSiteEnabled) {
+        redirect(`/${orgName}/docs`);
+    }
+
     return (
         <>
             <ServerSidePylonSetup />

packages/fern-dashboard/src/components/docs-page/DocsZeroState.tsx

@@ -1,7 +1,4 @@
 import type { User } from "@auth0/nextjs-auth0/types";
-import { PlusIcon } from "lucide-react";
-import Link from "next/link";
-import { Button } from "../ui/button";
 import { DocsZeroStateButton } from "./DocsZeroStateButton";
 import { DocsZeroStateImage } from "./DocsZeroStateImage";
 

packages/fern-dashboard/src/components/docs-page/DocsZeroStateButton.tsx

@@ -1,15 +1,16 @@
-"use client";
-
 import { PlusIcon } from "lucide-react";
 import Link from "next/link";
-import { useOrgNameFromPathname } from "@/utils/useOrgNameFromPathname";
 import { Button } from "../ui/button";
 
 export function DocsZeroStateButton() {
-    const orgName = useOrgNameFromPathname();
     return (
         <Button variant="default" asChild>
-            <Link href={`/${orgName}/docs/new`} className="flex items-center gap-2" rel="noopener">
+            <Link
+                href="https://buildwithfern.com/learn/docs/getting-started/quickstart"
+                target="_blank"
+                className="flex items-center gap-2"
+                rel="noopener"
+            >
                 <PlusIcon className="h-4 w-4" />
                 Create your first docs site
             </Link>

packages/fern-dashboard/src/components/navbar/DocsNavbarItems.tsx

@@ -39,7 +39,7 @@ export async function DocsNavbarItems({ orgName }: { orgName: Auth0OrgName }) {
                     firstDocsSite != null ? `/docs/${constructDocsUrlParam(getDocsSiteUrl(firstDocsSite))}` : undefined
                 }
             />
-            <DocsNavbarSubItems docsSites={docsSites} />
+            <DocsNavbarSubItems docsSites={docsSites} orgName={orgName} />
         </>
     );
 }

packages/fern-dashboard/src/components/navbar/DocsNavbarSubItems.tsx

@@ -1,20 +1,34 @@
-"use client";
+import "server-only";
 
 import type { FdrAPI } from "@fern-api/fdr-sdk/client/types";
 
 import { PlusIcon } from "lucide-react";
 import Link from "next/link";
-
+import { getCurrentSession } from "@/app/services/auth0/getCurrentSession";
+import type { Auth0OrgName } from "@/app/services/auth0/types";
 import { constructDocsUrlParam } from "@/utils/constructDocsUrlParam";
 import { getDocsSiteUrl } from "@/utils/getDocsSiteUrl";
-import { useOrgNameFromPathname } from "@/utils/useOrgNameFromPathname";
 import { cn } from "@/utils/utils";
-
+import { PosthogFeatureFlag } from "../posthog/feature-flags/flags";
+import { FeatureFlaggedServerSide, isFeatureFlagEnabledForUser } from "../posthog/feature-flags/server-side";
 import { NavbarSubItem } from "./NavbarSubItem";
 
-export function DocsNavbarSubItems({ docsSites }: { docsSites: FdrAPI.dashboard.DocsSite[] }) {
-    const orgName = useOrgNameFromPathname();
-
+export async function DocsNavbarSubItems({
+    docsSites,
+    orgName
+}: {
+    docsSites: FdrAPI.dashboard.DocsSite[];
+    orgName: Auth0OrgName;
+}) {
+    const session = await getCurrentSession();
+    if (session == null) {
+        return null;
+    }
+    const isCreateDocsNewSiteEnabled = await isFeatureFlagEnabledForUser(
+        PosthogFeatureFlag.ENABLE_CREATE_DOCS_NEW_SITE,
+        session?.user.sub,
+        orgName
+    );
     return (
         <>
             {docsSites.map((docsSite) => {
@@ -25,12 +39,17 @@ export function DocsNavbarSubItems({ docsSites }: { docsSites: FdrAPI.dashboard.
                 );
             })}
             <Link
-                href={`/${orgName}/docs/new`}
+                href={
+                    isCreateDocsNewSiteEnabled
+                        ? `/${orgName}/docs/new`
+                        : "https://buildwithfern.com/learn/docs/getting-started/quickstart"
+                }
                 className={cn(
                     "hidden md:flex",
                     "flex-1 flex-row gap-2 text-sm transition",
                     "hover:text-primary text-gray-900"
                 )}
+                target={isCreateDocsNewSiteEnabled ? "_self" : "_blank"}
             >
                 <div className="flex w-5 shrink-0 justify-center">
                     <div className="w-px bg-gray-700" />

packages/fern-dashboard/src/components/posthog/feature-flags/flags.ts

@@ -8,7 +8,8 @@ export const PosthogFeatureFlag = {
     ENABLE_DOCS_ASK_FERN_BILLING: "dashboard-enable-docs-ask-fern-billing",
     ENABLE_VE_BRANCH_PRS: "dashboard-enable-ve-branch-prs",
     ENABLE_WEB_ANALYTICS_TAB: "dashboard-enable-web-analytics-tab",
-    ENABLE_INCIDENTS_PAGE: "dashboard-enable-incidents-page"
+    ENABLE_INCIDENTS_PAGE: "dashboard-enable-incidents-page",
+    ENABLE_CREATE_DOCS_NEW_SITE: "dashboard-create-new-docs-site"
 } as const;
 
 export type PosthogFeatureFlag = (typeof PosthogFeatureFlag)[keyof typeof PosthogFeatureFlag];