Skip to content

Commit 6ce57bc

Browse files
spastorellispastorelli
authored
Fix issue where nav route/path is not retained when switching variants (#2372)
1 parent d99b453 commit 6ce57bc

File tree

3 files changed

+126
-10
lines changed

3 files changed

+126
-10
lines changed

‎e2e/pages.spec.ts

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,93 @@ const testCases: TestsCase[] = [
106106
},
107107
],
108108
},
109+
{
110+
name: 'GitBook Site (Navigation when switching variant)',
111+
baseUrl: 'https://gitbook-open-e2e-sites.gitbook.io/',
112+
tests: [
113+
{
114+
name: 'Keep navigation path/route when switching variant (Public)',
115+
url: 'api-multi-versions/reference/api-reference/pets',
116+
screenshot: false,
117+
run: async (page) => {
118+
const spaceDrowpdown = await page.waitForSelector(
119+
'[data-testid="space-dropdown-button"]',
120+
);
121+
await spaceDrowpdown.click();
122+
123+
// Click the second variant in the dropdown
124+
await page
125+
.getByRole('link', {
126+
name: '2.0',
127+
})
128+
.click();
129+
130+
// It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
131+
await page.waitForURL(
132+
'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions/v/2.0/reference/api-reference/pets',
133+
);
134+
},
135+
},
136+
{
137+
name: 'Keep navigation path/route when switching variant (Share link)',
138+
url: 'api-multi-versions-share-links/bRfQbzwsK8rbN1GRxx7K/reference/api-reference/pets',
139+
screenshot: false,
140+
run: async (page) => {
141+
const spaceDrowpdown = await page.waitForSelector(
142+
'[data-testid="space-dropdown-button"]',
143+
);
144+
await spaceDrowpdown.click();
145+
146+
// Click the second variant in the dropdown
147+
await page
148+
.getByRole('link', {
149+
name: '2.0',
150+
})
151+
.click();
152+
153+
// It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
154+
await page.waitForURL(
155+
'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions-share-links/bRfQbzwsK8rbN1GRxx7K/v/2.0/reference/api-reference/pets',
156+
);
157+
},
158+
},
159+
{
160+
name: 'Keep navigation path/route when switching variant (VA)',
161+
screenshot: false,
162+
url: (() => {
163+
const privateKey = 'c26190fc-74b2-4b54-9fc7-df9941104953';
164+
const token = jwt.sign(
165+
{
166+
name: 'gitbook-open-tests',
167+
},
168+
privateKey,
169+
{
170+
expiresIn: '24h',
171+
},
172+
);
173+
return `api-multi-versions-va/reference/api-reference/pets?jwt_token=${token}`;
174+
})(),
175+
run: async (page) => {
176+
const spaceDrowpdown = await page.waitForSelector(
177+
'[data-testid="space-dropdown-button"]',
178+
);
179+
await spaceDrowpdown.click();
180+
181+
// Click the second variant in the dropdown
182+
await page
183+
.getByRole('link', {
184+
name: '2.0',
185+
})
186+
.click();
187+
188+
// It should keep the current page path, i.e "reference/api-reference/pets" when navigating to the new variant
189+
await page.waitForURL(
190+
'https://gitbook-open-e2e-sites.gitbook.io/api-multi-versions-va/v/2.0/reference/api-reference/pets',
191+
);
192+
},
193+
},
194+
],
195+
},
109196
{
110197
name: 'GitBook',
111198
baseUrl: 'https://docs.gitbook.com',

‎src/components/Header/SpacesDropdown.tsx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Collection, Space } from '@gitbook/api';
1+
import { Space } from '@gitbook/api';
22

33
import { tcls } from '@/lib/tailwind';
44

5-
import { Dropdown, DropdownChevron, DropdownMenu, DropdownMenuItem } from './Dropdown';
5+
import { Dropdown, DropdownChevron, DropdownMenu } from './Dropdown';
6+
import { SpacesDropdownMenuItem } from './SpacesDropdownMenuItem';
67

78
export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
89
const { space, spaces } = props;
@@ -29,14 +30,12 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[] }) {
2930
)}
3031
>
3132
<DropdownMenu>
32-
{spaces.map((otherSpace) => (
33-
<DropdownMenuItem
34-
key={otherSpace.id}
35-
href={otherSpace.urls.published ?? otherSpace.urls.app}
36-
active={otherSpace.id === space.id}
37-
>
38-
{otherSpace.title}
39-
</DropdownMenuItem>
33+
{spaces.map((otherSpace, index) => (
34+
<SpacesDropdownMenuItem
35+
key={`${otherSpace.id}-${index}`}
36+
currentSpace={space}
37+
variantSpace={otherSpace}
38+
/>
4039
))}
4140
</DropdownMenu>
4241
</Dropdown>

‎src/components/Header/SpacesDropdownMenuItem.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use client';
2+
3+
import { Space } from '@gitbook/api';
4+
import { useSelectedLayoutSegment } from 'next/navigation';
5+
6+
import { DropdownMenuItem } from './Dropdown';
7+
8+
function useVariantSpaceHref(variantSpace: Space) {
9+
const currentPathname = useSelectedLayoutSegment() ?? '';
10+
const targetUrl = new URL(variantSpace.urls.published ?? variantSpace.urls.app);
11+
targetUrl.pathname += `/${currentPathname}`;
12+
targetUrl.pathname = targetUrl.pathname.replace(/\/{2,}/g, '/').replace(/\/$/, '');
13+
14+
return targetUrl.toString();
15+
}
16+
17+
export function SpacesDropdownMenuItem(props: { variantSpace: Space; currentSpace: Space }) {
18+
const { variantSpace, currentSpace } = props;
19+
const variantHref = useVariantSpaceHref(variantSpace);
20+
21+
return (
22+
<DropdownMenuItem
23+
key={variantSpace.id}
24+
href={variantHref}
25+
active={variantSpace.id === currentSpace.id}
26+
>
27+
{variantSpace.title}
28+
</DropdownMenuItem>
29+
);
30+
}

0 commit comments

Comments
 (0)