Don't use customized site title for space in search selector (#2367)

packages/gitbook/e2e/pages.spec.ts

@@ -14,10 +14,10 @@ import { getContentTestURL } from '../tests/utils';
 
 interface Test {
     name: string;
-    url: string;
-    run?: (page: Page) => Promise<unknown>;
-    fullPage?: boolean;
-    screenshot?: false;
+    url: string; // URL to visit for testing
+    run?: (page: Page) => Promise<unknown>; // The test to run
+    fullPage?: boolean; // Whether the test should be fullscreened during testing
+    screenshot?: false; // Should a screenshot be stored
 }
 
 interface TestsCase {
@@ -106,6 +106,31 @@ const testCases: TestsCase[] = [
                 name: 'RFC variant',
                 url: 'v/rfcs',
             },
+            {
+                name: 'Customized variant titles are displayed',
+                url: '',
+                run: async (page) => {
+                    const spaceDrowpdown = page.locator('[data-testid="space-dropdown-button"]');
+                    await spaceDrowpdown.click();
+
+                    const variantSelectionDropdown = page.locator(
+                        'css=[data-testid="space-dropdown-button"] + div',
+                    );
+                    // the customized space title
+                    await expect(
+                        variantSelectionDropdown.getByRole('link', {
+                            name: 'Multi-Variants',
+                        }),
+                    ).toBeVisible();
+
+                    // the NON-customized space title
+                    await expect(
+                        variantSelectionDropdown.getByRole('link', {
+                            name: 'RFCs',
+                        }),
+                    ).toBeVisible();
+                },
+            },
         ],
     },
     {

packages/gitbook/src/app/(space)/fetch.ts

@@ -13,6 +13,7 @@ import {
     getCurrentSiteData,
     getSite,
     getSiteSpaces,
+    getCurrentSiteCustomization,
 } from '@/lib/api';
 import { resolvePagePath, resolvePageId } from '@/lib/pages';
 
@@ -87,11 +88,13 @@ export async function fetchSpaceData() {
     );
 
     const parent = await (parentSite ?? fetchParentCollection(space));
+    // we grab the space attached to the parent as it contains overriden customizations
+    const spaceRelativeToParent = parent?.spaces.find((space) => space.id === content.spaceId);
 
     return {
         content,
         contentTarget,
-        space,
+        space: spaceRelativeToParent ?? space,
         pages,
         customization,
         scripts,
@@ -195,15 +198,17 @@ async function fetchParentSite(args: {
     siteShareKey: string | undefined;
 }) {
     const { organizationId, siteId, siteShareKey } = args;
-    const [site, siteSpaces] = await Promise.all([
+    const [site, siteSpaces, siteParentCustomizations] = await Promise.all([
         getSite(organizationId, siteId),
         getSiteSpaces({ organizationId, siteId, siteShareKey }),
+        getCurrentSiteCustomization({ organizationId, siteId, siteSpaceId: undefined }),
     ]);
 
     const spaces: Record<string, Space> = {};
     siteSpaces.forEach((siteSpace) => {
         spaces[siteSpace.space.id] = {
             ...siteSpace.space,
+            title: siteSpace.title ?? siteSpace.space.title,
             urls: {
                 ...siteSpace.space.urls,
                 published: siteSpace.urls.published,
@@ -211,7 +216,16 @@ async function fetchParentSite(args: {
         };
     });
 
-    return { parent: site, spaces: Object.values(spaces) };
+    // override the title with the customization title
+    const parent = {
+        ...site,
+        ...(siteParentCustomizations?.title ? { title: siteParentCustomizations.title } : {}),
+    };
+
+    return {
+        parent,
+        spaces: Object.values(spaces),
+    };
 }
 
 /**

packages/gitbook/src/components/Header/HeaderLogo.tsx

@@ -85,9 +85,7 @@ export function HeaderLogo(props: HeaderLogoProps) {
                         )}
                     />
                 ) : (
-                    <>
-                        <LogoFallback {...props} />
-                    </>
+                    <LogoFallback {...props} />
                 )}
             </Link>
         </div>
@@ -98,6 +96,7 @@ function LogoFallback(props: HeaderLogoProps) {
     const { parent, space, customization } = props;
     const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : undefined;
     const customEmoji = 'emoji' in customization.favicon ? customization.favicon.emoji : undefined;
+
     return (
         <>
             <SpaceIcon

packages/gitbook/src/lib/utils.ts

@@ -17,7 +17,8 @@ export function getContentTitle(
     // When we are rendering a site, always give priority to the customization title first
     // and then fallback to the site title
     if (parent?.object === 'site') {
-        return customization.title ?? parent.title ?? space.title;
+        // the parent title for a site is already overridden by the customized title in the fetch call
+        return parent.title ?? space.title;
     }
 
     // Otherwise the legacy behavior is not changed to avoid regressions