gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-22 10:33:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix issue where nav route/path is not retained when switching variants (#2372)

Browse Source
This commit is contained in:
spastorelli
2024-07-10 17:10:19 +02:00
committed by GitHub
parent d99b453bc4
commit 6ce57bcda1
3 changed files with 126 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/pages.spec.ts
+87
View File
@@ -106,6 +106,93 @@ const testCases: TestsCase[] = [
},
],
},
{
name: 'GitBook Site (Navigation when switching variant)',
baseUrl: 'https://gitbook-open-e2e-sites.gitbook.io/',
tests: [
{
name: 'Keep navigation path/route when switching variant (Public)',
url: 'api-multi-versions/reference/api-reference/pets',
screenshot: false,
run: async (page) => {
const spaceDrowpdown = await page.waitForSelector(
'[data-testid="space-dropdown-button"]',
);
await spaceDrowpdown.click();
// Click the second variant in the dropdown
await page
.getByRole('link', {
name: '2.0',
})
.click();
// It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
await page.waitForURL(
'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions/v/2.0/reference/api-reference/pets',
);
},
},
{
name: 'Keep navigation path/route when switching variant (Share link)',
url: 'api-multi-versions-share-links/bRfQbzwsK8rbN1GRxx7K/reference/api-reference/pets',
screenshot: false,
run: async (page) => {
const spaceDrowpdown = await page.waitForSelector(
'[data-testid="space-dropdown-button"]',
);
await spaceDrowpdown.click();
// Click the second variant in the dropdown
await page
.getByRole('link', {
name: '2.0',
})
.click();
// It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
await page.waitForURL(
'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions-share-links/bRfQbzwsK8rbN1GRxx7K/v/2.0/reference/api-reference/pets',
);
},
},
{
name: 'Keep navigation path/route when switching variant (VA)',
screenshot: false,
url: (() => {
const privateKey = 'c26190fc-74b2-4b54-9fc7-df9941104953';
const token = jwt.sign(
{
name: 'gitbook-open-tests',
},
privateKey,
{
expiresIn: '24h',
},
);
return `api-multi-versions-va/reference/api-reference/pets?jwt_token=${token}`;
})(),
run: async (page) => {
const spaceDrowpdown = await page.waitForSelector(
'[data-testid="space-dropdown-button"]',
);
await spaceDrowpdown.click();
// Click the second variant in the dropdown
await page
.getByRole('link', {
name: '2.0',
})
.click();
// It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
await page.waitForURL(
'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions-va/v/2.0/reference/api-reference/pets',
);
},
},
],
},
{
name: 'GitBook',
baseUrl: 'https://docs.gitbook.com',
src/components/Header/SpacesDropdown.tsx
+9 -10
View File
@@ -1,8 +1,9 @@
import { Collection, Space } from '@gitbook/api';
import { Space } from '@gitbook/api';
import { tcls } from '@/lib/tailwind';
import { Dropdown, DropdownChevron, DropdownMenu, DropdownMenuItem } from './Dropdown';
import { Dropdown, DropdownChevron, DropdownMenu } from './Dropdown';
import { SpacesDropdownMenuItem } from './SpacesDropdownMenuItem';
export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
const { space, spaces } = props;
@@ -29,14 +30,12 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
)}
>
<DropdownMenu>
{spaces.map((otherSpace) => (
<DropdownMenuItem
key={otherSpace.id}
href={otherSpace.urls.published ?? otherSpace.urls.app}
active={otherSpace.id === space.id}
>
{otherSpace.title}
</DropdownMenuItem>
{spaces.map((otherSpace, index) => (
<SpacesDropdownMenuItem
key={`${otherSpace.id}-${index}`}
currentSpace={space}
variantSpace={otherSpace}
/>
))}
</DropdownMenu>
</Dropdown>
src/components/Header/SpacesDropdownMenuItem.tsx
+30
View File
@@ -0,0 +1,30 @@
'use client';
import { Space } from '@gitbook/api';
import { useSelectedLayoutSegment } from 'next/navigation';
import { DropdownMenuItem } from './Dropdown';
function useVariantSpaceHref(variantSpace: Space) {
const currentPathname = useSelectedLayoutSegment() ?? '';
const targetUrl = new URL(variantSpace.urls.published ?? variantSpace.urls.app);
targetUrl.pathname += `/${currentPathname}`;
targetUrl.pathname = targetUrl.pathname.replace(/\/{2,}/g, '/').replace(/\/$/, '');
return targetUrl.toString();
}
export function SpacesDropdownMenuItem(props: { variantSpace: Space; currentSpace: Space }) {
const { variantSpace, currentSpace } = props;
const variantHref = useVariantSpaceHref(variantSpace);
return (
<DropdownMenuItem
key={variantSpace.id}
href={variantHref}
active={variantSpace.id === currentSpace.id}
>
{variantSpace.title}
</DropdownMenuItem>
);
}