fix: Fix navigation to 404 page while in isolation mode (#1509)

Fixes #1492

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

@@ -6,6 +6,11 @@ describe('getUrl', () => {
 		pathname: '/styleguide/',
 		hash: '#/Components',
 	};
+	const locHashedURL = {
+		origin: 'http://example.com',
+		pathname: '/styleguide/',
+		hash: '#button',
+	}
 	const name = 'FooBar';
 	const slug = 'foobar';
 
@@ -44,6 +49,11 @@ describe('getUrl', () => {
 		expect(result).toBe('/styleguide/#!/Components/FooBar/3');
 	});
 
+	it('should return an isolated example for a HashedURL', () => {
+		const result = getUrl({ name, slug, example: 0, isolated: true }, locHashedURL);
+		expect(result).toBe('/styleguide/#!/FooBar/0');
+	});
+
 	it('should return an isolated example=0 URL', () => {
 		const result = getUrl({ name, slug, example: 0, isolated: true }, loc);
 		expect(result).toBe('/styleguide/#!/Components/FooBar/0');

src/client/utils/getUrl.ts

@@ -1,3 +1,24 @@
+/* Returns the HashPath to be included in the isolated page view url */
+function getCurrentHashPath(stripFragment:RegExp,stripTrailingSlash:RegExp,currentHash: string):string {
+
+	/*This pattern matches urls like http://hostname.com/#button etc.,
+	these urls are generated when we click on a component in the side nav-bar.
+	This will verify whether the first character after the '#' symbol is an alphanumeric char or "_".
+	this pattern used to validate the components names.*/
+	const hashUrlPattern = /^#[a-zA-Z0-9_]/; // Ex. matches "#button","#1button","#_button"
+
+	/* This pattern matches "#!/" string pattern in the 'currentHash' const
+	this url pattern is used to show isolated page view mode in this project. */
+	const isolatedPageViewUrlPattern = /^#!\//; // Ex. matches "#!/button"  
+
+	if (hashUrlPattern.test(currentHash)) {
+		return '';
+	} else {
+		return (currentHash && !isolatedPageViewUrlPattern.test(currentHash)) ?
+			 currentHash.replace(stripFragment, '').replace(stripTrailingSlash, '') + '/' : '';
+	}
+}
+
 /**
  * Gets the URL fragment for an isolated or nochrome link.
  *
@@ -14,11 +35,8 @@ function buildIsolatedOrNoChromeFragment({
 }): string {
 	const stripFragment = /^#\/?/;
 	const stripTrailingSlash = /\/$/;
-	const currentHashPath =
-		// skip if we are already using `#!/`
-		currentHash && !currentHash.includes('#!/')
-			? currentHash.replace(stripFragment, '').replace(stripTrailingSlash, '') + '/'
-			: '';
+
+	const currentHashPath = getCurrentHashPath(stripFragment,stripTrailingSlash,currentHash);
 	return `#!/${currentHashPath}${encodedName}`;
 }