chore: fix regex issue in route tab (#8440)

frontend/src/components/RouteTab/index.tsx

@@ -1,5 +1,10 @@
 import { Tabs, TabsProps } from 'antd';
-import { useLocation, useParams } from 'react-router-dom';
+import {
+	generatePath,
+	matchPath,
+	useLocation,
+	useParams,
+} from 'react-router-dom';
 
 import { RouteTabProps } from './types';
 
@@ -17,20 +22,13 @@ function RouteTab({
 	const params = useParams<Params>();
 	const location = useLocation();
 
-	// Replace dynamic parameters in routes
-	const routesWithParams = routes.map((route) => ({
-		...route,
-		route: route.route.replace(
-			/:(\w+)/g,
-			(match, param) => params[param] || match,
-		),
-	}));
-
 	// Find the matching route for the current pathname
-	const currentRoute = routesWithParams.find((route) => {
+	const currentRoute = routes.find((route) => {
-		const routePattern = route.route.replace(/:(\w+)/g, '([^/]+)');
+		const routePath = route.route.split('?')[0];
-		const regex = new RegExp(`^${routePattern}$`);
+		return matchPath(location.pathname, {
-		return regex.test(location.pathname);
+			path: routePath,
+			exact: true,
+		});
 	});
 
 	const onChange = (activeRoute: string): void => {
@@ -38,14 +36,15 @@ function RouteTab({
 			onChangeHandler(activeRoute);
 		}
 
-		const selectedRoute = routesWithParams.find((e) => e.key === activeRoute);
+		const selectedRoute = routes.find((e) => e.key === activeRoute);
 
 		if (selectedRoute) {
-			history.push(selectedRoute.route);
+			const resolvedRoute = generatePath(selectedRoute.route, params);
+			history.push(resolvedRoute);
 		}
 	};
 
-	const items = routesWithParams.map(({ Component, name, route, key }) => ({
+	const items = routes.map(({ Component, name, route, key }) => ({
 		label: name,
 		key,
 		tabKey: route,

frontend/src/constants/query.ts

@@ -46,4 +46,5 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
+	tab = 'tab',
 }

frontend/src/pages/MetricsApplication/MetricsApplication.styles.scss

@@ -1,3 +1,26 @@
 .service-route-tab {
 	margin-bottom: 64px;
+	.ant-tabs-nav {
+		&::before {
+			border-bottom: 1px solid var(--bg-slate-400);
+		}
+		.ant-tabs-nav-wrap {
+			.ant-tabs-nav-list {
+				.ant-tabs-ink-bar {
+					background-color: var(--bg-robin-500) !important;
+				}
+				.ant-tabs-tab {
+					font-size: 13px;
+					font-family: 'Inter';
+					color: var(--text-vanilla-100);
+					line-height: 20px;
+					letter-spacing: -0.07px;
+					gap: 10px;
+				}
+				.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+					color: var(--bg-robin-500);
+				}
+			}
+		}
+	}
 }

frontend/src/pages/MetricsApplication/MetricsApplication.tsx

@@ -1,15 +1,14 @@
 import './MetricsApplication.styles.scss';
 
-import RouteTab from 'components/RouteTab';
+import { Tabs, TabsProps } from 'antd/lib';
-import ROUTES from 'constants/routes';
+import { QueryParams } from 'constants/query';
 import DBCall from 'container/MetricsApplication/Tabs/DBCall';
 import External from 'container/MetricsApplication/Tabs/External';
 import Overview from 'container/MetricsApplication/Tabs/Overview';
 import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
+import { useParams } from 'react-router-dom';
-import { useCallback, useMemo } from 'react';
-import { generatePath, useParams } from 'react-router-dom';
 
 import ApDexApplication from './ApDex/ApDexApplication';
 import { MetricsApplicationTab, TAB_KEY_VS_LABEL } from './types';
@@ -25,50 +24,41 @@ function MetricsApplication(): JSX.Element {
 	const activeKey = useMetricsApplicationTabKey();
 
 	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
 
-	const getRouteUrl = useCallback(
+	const items: TabsProps['items'] = [
-		(tab: MetricsApplicationTab): string => {
+		{
-			urlQuery.set('tab', tab);
+			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
-			return `${generatePath(ROUTES.SERVICE_METRICS, {
+			key: MetricsApplicationTab.OVER_METRICS,
-				servicename,
+			children: <Overview />,
-			})}?${urlQuery.toString()}`;
 		},
-		[servicename, urlQuery],
+		{
-	);
+			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.DB_CALL_METRICS],
+			key: MetricsApplicationTab.DB_CALL_METRICS,
+			children: <DBCall />,
+		},
+		{
+			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.EXTERNAL_METRICS],
+			key: MetricsApplicationTab.EXTERNAL_METRICS,
+			children: <External />,
+		},
+	];
 
-	const routes = useMemo(
+	const onTabChange = (tab: string): void => {
-		() => [
+		urlQuery.set(QueryParams.tab, tab);
-			{
+		safeNavigate(`/services/${servicename}?${urlQuery.toString()}`);
-				Component: Overview,
+	};
-				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
-				route: getRouteUrl(MetricsApplicationTab.OVER_METRICS),
-				key: MetricsApplicationTab.OVER_METRICS,
-			},
-			{
-				Component: DBCall,
-				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.DB_CALL_METRICS],
-				route: getRouteUrl(MetricsApplicationTab.DB_CALL_METRICS),
-				key: MetricsApplicationTab.DB_CALL_METRICS,
-			},
-			{
-				Component: External,
-				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.EXTERNAL_METRICS],
-				route: getRouteUrl(MetricsApplicationTab.EXTERNAL_METRICS),
-				key: MetricsApplicationTab.EXTERNAL_METRICS,
-			},
-		],
-		[getRouteUrl],
-	);
 
 	return (
 		<div className="metrics-application-container">
 			<ResourceAttributesFilter />
 			<ApDexApplication />
-			<RouteTab
+			<Tabs
-				routes={routes}
+				items={items}
-				history={history}
 				activeKey={activeKey}
 				className="service-route-tab"
+				destroyInactiveTabPane
+				onChange={onTabChange}
 			/>
 		</div>
 	);