fix(editor): ensure version and headertabs are aware of root slug alias (#4648)

Co-authored-by: Stephen Chen <[email protected]>

Author: sbawabe

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@headertabs/page.tsx

@@ -2,7 +2,7 @@ import { getTabs } from "@fern-api/docs-server/handle-node-fallbacks";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { slugjoin } from "@fern-api/fdr-sdk/navigation";
 import { HeaderTabsList } from "@fern-docs/components/HeaderTabsList";
-
+import { getRootAliasAwareNavigationSlug } from "@fern-docs/components/navigation";
 import { getCurrentSession } from "@/app/services/auth0/getCurrentSession";
 import { getCachedEditableDocsLoader } from "@/app/services/docs-loader/cachedEditableDocsLoader";
 import { getHostFromHeaders } from "@/utils/getHostFromHeaders";
@@ -35,7 +35,8 @@ export default async function HeaderTabsPage({
 
     const showAuthenticatedNodes = (await loader.getEdgeFlags()).isAuthenticatedPagesDiscoverable;
 
-    const foundNode = FernNavigation.utils.findNode(root, slugjoin(slug));
+    const navigationSlug = getRootAliasAwareNavigationSlug(slugjoin(slug), root);
+    const foundNode = FernNavigation.utils.findNode(root, navigationSlug);
 
     const tabs = getTabs(
         foundNode,

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@logo/page.tsx

@@ -3,8 +3,8 @@ import { withLogo } from "@fern-api/docs-server/withLogo";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { getPageId, slugjoin } from "@fern-api/fdr-sdk/navigation";
 import { AbstractLogo } from "@fern-docs/components/abstract/logo";
+import { getRootAliasAwareNavigationSlug } from "@fern-docs/components/navigation";
 import { getFrontmatter } from "@fern-docs/mdx";
-
 import { getCurrentSession } from "@/app/services/auth0/getCurrentSession";
 import { getCachedEditableDocsLoader } from "@/app/services/docs-loader/cachedEditableDocsLoader";
 import { getHostFromHeaders } from "@/utils/getHostFromHeaders";
@@ -34,7 +34,8 @@ export default async function LogoPage({
     ]);
 
     const resolveFileSrc = createFileResolver(files);
-    const foundNode = FernNavigation.utils.findNode(root, slugjoin(slug));
+    const navigationSlug = getRootAliasAwareNavigationSlug(slugjoin(slug), root);
+    const foundNode = FernNavigation.utils.findNode(root, navigationSlug);
 
     let frontmatter = null;
     if (foundNode.type === "found") {

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@productSelect/page.tsx

@@ -4,6 +4,7 @@ import { getFallbackProduct } from "@fern-api/docs-server/handle-node-fallbacks"
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { slugjoin } from "@fern-api/fdr-sdk/navigation";
 import { ProductDropdown } from "@fern-docs/components/header/ProductDropdown";
+import { getRootAliasAwareNavigationSlug } from "@fern-docs/components/navigation";
 import { getCurrentSession } from "@/app/services/auth0/getCurrentSession";
 import { getCachedEditableDocsLoader } from "@/app/services/docs-loader/cachedEditableDocsLoader";
 import { getHostFromHeaders } from "@/utils/getHostFromHeaders";
@@ -34,9 +35,10 @@ export default async function ProductSelectPage({
     ]);
     const useDenseLayout = layout.isHeaderDisabled;
 
-    const foundNode = FernNavigation.utils.findNode(root, slugjoin(slug));
+    const navigationSlug = getRootAliasAwareNavigationSlug(slugjoin(slug), root);
+    const foundNode = FernNavigation.utils.findNode(root, navigationSlug);
 
-    const fallbackProduct = getFallbackProduct(foundNode, root, slug);
+    const fallbackProduct = getFallbackProduct(foundNode, root, navigationSlug);
     if (fallbackProduct == null) {
         return null;
     }

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@versionSelect/page.tsx

@@ -4,6 +4,7 @@ import { getFallbackProduct, getFallbackVersion } from "@fern-api/docs-server/ha
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { slugjoin } from "@fern-api/fdr-sdk/navigation";
 import { VersionDropdown } from "@fern-docs/components/header/VersionDropdown";
+import { getRootAliasAwareNavigationSlug } from "@fern-docs/components/navigation";
 import { getCurrentSession } from "@/app/services/auth0/getCurrentSession";
 import { getCachedEditableDocsLoader } from "@/app/services/docs-loader/cachedEditableDocsLoader";
 import { getHostFromHeaders } from "@/utils/getHostFromHeaders";
@@ -34,7 +35,8 @@ export default async function VersionSelectPage({
     ]);
     const useDenseLayout = layout.isHeaderDisabled;
 
-    const foundNode = FernNavigation.utils.findNode(root, slugjoin(slug));
+    const navigationSlug = getRootAliasAwareNavigationSlug(slugjoin(slug), root);
+    const foundNode = FernNavigation.utils.findNode(root, navigationSlug);
     const collector = FernNavigation.NodeCollector.collect(root);
     const versionNodes = collector.getVersionNodes();
 

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/page.tsx

@@ -6,8 +6,8 @@ import { AbstractLayoutEvaluatorContent } from "@fern-docs/components/layouts/Ab
 import {
     constructEditorSlug,
     getEditorRedirectSlug,
-    getSerializableFoundNode,
-    ROOT_SLUG_ALIAS
+    getRootAliasAwareNavigationSlug,
+    getSerializableFoundNode
 } from "@fern-docs/components/navigation";
 import { getFrontmatter } from "@fern-docs/mdx";
 
@@ -50,11 +50,8 @@ export default async function Page({
         branchName: branch
     });
 
-    const requestedSlug = slugjoin(slug);
     const root = await loader.getRoot();
-
-    // If requested slug == ROOT_SLUG_ALIAS ("root"), use slug from the root node instead
-    const navigationSlug = requestedSlug === ROOT_SLUG_ALIAS ? root.slug : requestedSlug;
+    const navigationSlug = getRootAliasAwareNavigationSlug(slugjoin(slug), root);
     const navigationNode = FernNavigation.utils.findNode(root, navigationSlug);
 
     // Handle notFound case first - treat as potential client page instead of redirecting

packages/fern-docs/components/src/navigation/index.ts

@@ -13,6 +13,11 @@ export {
     getAllSectionsFromSidebarRootNode,
     getClientPageDefaultFilename
 } from "./pageUtils";
-export { constructEditorSlug, getEditorRedirectSlug, ROOT_SLUG_ALIAS } from "./routingUtils";
+export {
+    constructEditorSlug,
+    getEditorRedirectSlug,
+    getRootAliasAwareNavigationSlug,
+    ROOT_SLUG_ALIAS
+} from "./routingUtils";
 export * from "./types";
 export * from "./useDerivedFoundNode";

packages/fern-docs/components/src/navigation/routingUtils.ts

@@ -91,3 +91,19 @@ function findFirstPageNode(
     }
     return undefined;
 }
+
+/**
+ * Returns the navigation slug to use for the requested slug, taking into account the root alias. This
+ * is used within the Editor to ensure that first land into editor (which uses a root alias) calculates
+ * the correct navigation slug to use.
+ *
+ * @param requestedSlug - The slug to find the navigation node for
+ * @param root - The root node of the navigation tree
+ * @returns The navigation slug to use for the requested slug, taking into account the root alias
+ */
+export function getRootAliasAwareNavigationSlug(
+    requestedSlug: string,
+    root: FernNavigation.RootNode
+): FernNavigation.Slug {
+    return requestedSlug === ROOT_SLUG_ALIAS ? root.slug : FernNavigation.Slug(requestedSlug);
+}