From f99da73098a4e627a284cdf5d726717581a28730 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Thu, 18 Jan 2024 15:01:32 +0530
Subject: [PATCH] fix: [GH-4383]: handle special characters in the services
 name (#4388)

* fix: [GH-4383]: handle special characters in the services name
---
 frontend/src/container/MetricsApplication/Tabs/Overview.tsx | 6 +++++-
 .../ServiceApplication/Columns/GetColumnSearchProps.tsx     | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
index 36db03b567..032c3c0cb8 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -16,6 +16,7 @@ import {
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import { defaultTo } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
@@ -107,7 +108,10 @@ function Application(): JSX.Element {
 	);
 
 	const topLevelOperationsRoute = useMemo(
-		() => (topLevelOperations ? topLevelOperations[servicename || ''] : []),
+		() =>
+			topLevelOperations
+				? defaultTo(topLevelOperations[servicename || ''], [])
+				: [],
 		[servicename, topLevelOperations],
 	);
 
diff --git a/frontend/src/container/ServiceApplication/Columns/GetColumnSearchProps.tsx b/frontend/src/container/ServiceApplication/Columns/GetColumnSearchProps.tsx
index 4257dc57ec..b272a39475 100644
--- a/frontend/src/container/ServiceApplication/Columns/GetColumnSearchProps.tsx
+++ b/frontend/src/container/ServiceApplication/Columns/GetColumnSearchProps.tsx
@@ -26,7 +26,11 @@ export const getColumnSearchProps = (
 		const queryString = getQueryString(avialableParams, urlParams);
 
 		return (
-			<Link to={`${ROUTES.APPLICATION}/${metrics}?${queryString.join('')}`}>
+			<Link
+				to={`${ROUTES.APPLICATION}/${encodeURIComponent(
+					metrics,
+				)}?${queryString.join('')}`}
+			>
 				<Name>{metrics}</Name>
 			</Link>
 		);