fix(docs): clicking the detail view link opens two new windows (#4989)

* refactor: integrated logic out of openVariantInNewWindow to getHref

Author: mfranzke

showcases/react-showcase/src/components/default-component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { DBCard, DBDivider, DBLink } from '../../../../output/react/src';
 import type {
 	ReactDefaultComponentProps,
@@ -115,41 +115,24 @@ const DefaultComponent = ({
 	const color = useQuery(redirectURLSearchParameters)[2];
 
 	const getHref = (variantName: string): string => {
-		if (typeof globalThis !== 'undefined') {
-			const searchParameters = new URLSearchParams(
-				globalThis?.location?.href.split('?')[1]
-			);
-			searchParameters.set('page', variantName.toLowerCase());
-			return `${globalThis?.location?.href.split('?')[0]}?${searchParameters.toString()}`;
-		}
-
-		return '';
-	};
-
-	const openVariantInNewWindow = (
-		event: React.MouseEvent<HTMLAnchorElement>,
-		variantName: string
-	) => {
 		if (
-			typeof globalThis === 'undefined' ||
-			!globalThis.location.origin ||
-			!globalThis.location.href
+			globalThis.window === undefined ||
+			globalThis.location === undefined
 		) {
-			return;
+			return `?page=${encodeURIComponent(variantName.toLowerCase())}`;
 		}
 
-		const currentUrl = globalThis.location.href.split('?');
-		const rawComponentUrl = currentUrl[0];
-		const searchParameters = new URLSearchParams(currentUrl[1] ?? '');
+		const [baseUrl, query = ''] = globalThis.location.href.split('?');
+		const searchParameters = new URLSearchParams(query);
 		searchParameters.set('page', variantName.toLowerCase());
 
 		const regexComponentOverviewFragment = /\/[a-z\d\-_]*\/overview/;
 
-		const openUrl = componentName
-			? `${rawComponentUrl.replace(regexComponentOverviewFragment, `/${componentName}/overview`)}?${searchParameters.toString()}`
-			: `${currentUrl[0]}?${searchParameters.toString()}`;
+		if (componentName) {
+			return `${baseUrl.replace(regexComponentOverviewFragment, `/${componentName}/overview`)}?${searchParameters.toString()}`;
+		}
 
-		window.open(openUrl, '_blank');
+		return `${baseUrl}?${searchParameters.toString()}`;
 	};
 
 	if (pageName) {
@@ -196,9 +179,7 @@ const DefaultComponent = ({
 								className="link-headline"
 								content="external"
 								target="_blank"
-								onClick={(event) => {
-									openVariantInNewWindow(event, variant.name);
-								}}
+								rel="noopener noreferrer"
 								href={getHref(variant.name)}>
 								{variant.name}
 							</DBLink>

showcases/react-showcase/src/hooks/use-universal-search-parameters.ts

@@ -24,10 +24,12 @@ const useUniversalSearchParameters = (): [
 			: useSearchParams();
 
 	const setSearchParameters = (parameters: Record<string, string>) => {
-		if (typeof globalThis !== 'undefined') {
-			const currentParameters = new URLSearchParams(
-				globalThis.location.href.split('?')[1]
-			);
+		if (
+			globalThis.window !== undefined &&
+			globalThis.location !== undefined
+		) {
+			const searchPart = globalThis.location.search || '';
+			const currentParameters = new URLSearchParams(searchPart);
 			currentParameters.sort();
 			const newParameters = new URLSearchParams(parameters);
 			newParameters.sort();