Fix: Encode section pages URLs if a section name has special symbols (#…

…1384)

Closes #1332

src/client/utils/__tests__/getUrl.spec.js

@@ -69,6 +69,11 @@ describe('getUrl', () => {
 		expect(result).toBe('/styleguide/#/Documentation/FooBar');
 	});
 
+	it('should return a route path with encoded name if name has inappropriate symbols', () => {
+		const result = getUrl({ name: '@foo/components', slug, hashPath: ['Documentation'] }, loc);
+		expect(result).toBe('/styleguide/#/Documentation/%40foo%2Fcomponents');
+	});
+
 	it('should return a route path with a param id=foobar', () => {
 		const result = getUrl({ name, slug, hashPath: ['Documentation'], id: true }, loc);
 		expect(result).toBe('/styleguide/#/Documentation?id=foobar');

src/client/utils/__tests__/handleHash.spec.js

@@ -44,6 +44,11 @@ describe('handleHash', () => {
 		expect(result).toEqual(['FooBar', 'Component']);
 	});
 
+	it('getHashAsArray should return array with an encoded component name', () => {
+		const result = getHashAsArray('#/Documentation/Files/%40foo%2Fcomponents', routeHash);
+		expect(result).toEqual(['Documentation', 'Files', '@foo/components']);
+	});
+
 	it('getHashAsArray should return array without params', () => {
 		const result = getHashAsArray('#/FooBar/Component?id=Example/Perfect', routeHash);
 		expect(result).toEqual(['FooBar', 'Component']);

src/client/utils/getUrl.js

@@ -29,15 +29,17 @@ export default function getUrl(
 		url += '?nochrome';
 	}
 
+	const encodedName = encodeURIComponent(name);
+
 	if (anchor) {
 		url += `#${slug}`;
 	} else if (isolated || nochrome) {
-		url += `#!/${name}`;
+		url += `#!/${encodedName}`;
 	}
 
 	if (hashPath) {
 		if (!id) {
-			hashPath = [...hashPath, name];
+			hashPath = [...hashPath, encodedName];
 		}
 		url += `#/${hashPath.join('/')}`;
 	}

src/client/utils/handleHash.js

@@ -51,7 +51,9 @@ export const getHash = (hash, prependHash) => {
  * @return {Array.<string>}
  */
 export const getHashAsArray = (hash, prependHash) => {
-	return getHash(hash, prependHash).split(separator);
+	return trimParams(trimHash(hash, prependHash))
+		.split(separator)
+		.map(decodeURIComponent);
 };
 
 /**