fix(FE): encode URL query params (#3501)

frontend/src/container/ErrorDetails/index.tsx

@@ -5,6 +5,7 @@ import { ResizeTable } from 'components/ResizeTable';
 import { getNanoSeconds } from 'container/AllError/utils';
 import dayjs from 'dayjs';
 import { useNotifications } from 'hooks/useNotifications';
+import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import { useMemo, useState } from 'react';
@@ -95,10 +96,14 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				return;
 			}
 
+			const queryParams = {
+				groupId: idPayload.groupID,
+				timestamp: getNanoSeconds(timestamp),
+				errorId: id,
+			};
+
 			history.replace(
-				`${history.location.pathname}?&groupId=${
+				`${history.location.pathname}?${createQueryParams(queryParams)}`,
-					idPayload.groupID
-				}&timestamp=${getNanoSeconds(timestamp)}&errorId=${id}`,
 			);
 		} catch (error) {
 			notifications.error({

frontend/src/container/GridGraphLayout/Graph/WidgetGraphComponent.tsx

@@ -4,6 +4,7 @@ import { Events } from 'constants/events';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { useChartMutable } from 'hooks/useChartMutable';
 import { useNotifications } from 'hooks/useNotifications';
+import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { isEmpty, isEqual } from 'lodash-es';
 import {
@@ -190,9 +191,13 @@ function WidgetGraphComponent({
 					message: 'Panel cloned successfully, redirecting to new copy.',
 				});
 
+				const queryParams = {
+					graphType: widget?.panelTypes,
+					widgetId: uuid,
+				};
 				setTimeout(() => {
 					history.push(
-						`${history.location.pathname}/new?graphType=${widget?.panelTypes}&widgetId=${uuid}`,
+						`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
 					);
 				}, 1500);
 			});

frontend/src/container/NewDashboard/ComponentsSlider/index.tsx

@@ -2,6 +2,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { queryParamNamesMap } from 'constants/queryBuilderQueryNames';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
+import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { CSSProperties, useCallback } from 'react';
 import { connect, useSelector } from 'react-redux';
@@ -42,12 +43,16 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element {
 
 				toggleAddWidget(false);
 
+				const queryParams = {
+					graphType: name,
+					widgetId: emptyLayout.i,
+					[queryParamNamesMap.compositeQuery]: JSON.stringify(
+						initialQueriesMap.metrics,
+					),
+				};
+
 				history.push(
-					`${history.location.pathname}/new?graphType=${name}&widgetId=${
+					`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
-						emptyLayout.i
-					}&${queryParamNamesMap.compositeQuery}=${encodeURIComponent(
-						JSON.stringify(initialQueriesMap.metrics),
-					)}`,
 				);
 			} catch (error) {
 				notifications.error({

frontend/src/lib/createQueryParams.ts

@@ -1,6 +1,8 @@
 const createQueryParams = (params: { [x: string]: string | number }): string =>
 	Object.keys(params)
-		.map((k) => `${k}=${encodeURI(String(params[k]))}`)
+		.map(
+			(k) => `${encodeURIComponent(k)}=${encodeURIComponent(String(params[k]))}`,
+		)
 		.join('&');
 
 export default createQueryParams;

frontend/src/store/actions/trace/util.ts

@@ -1,4 +1,5 @@
 import { AllTraceFilterEnum } from 'container/Trace/Filters';
+import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { PayloadProps as GetFilterPayload } from 'types/api/trace/getFilters';
 import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
@@ -51,20 +52,25 @@ export const updateURL = (
 		}
 	});
 
+	const preResultParams = preResult.reduce((acc, item) => {
+		acc[item.key] = item.value;
+		return acc;
+	}, {} as Record<string, string>);
+
+	const queryParams = {
+		selected: JSON.stringify(Object.fromEntries(selectedFilter)),
+		filterToFetchData: JSON.stringify(filterToFetchData),
+		spanAggregateCurrentPage,
+		spanAggregateOrder,
+		spanAggregateCurrentPageSize,
+		spanAggregateOrderParam,
+		selectedTags: JSON.stringify(selectedTags),
+		...preResultParams,
+		isFilterExclude: JSON.stringify(Object.fromEntries(isFilterExclude)),
+		userSelectedFilter: JSON.stringify(Object.fromEntries(userSelectedFilter)),
+	};
 	history.replace(
-		`${history.location.pathname}?selected=${JSON.stringify(
+		`${history.location.pathname}?${createQueryParams(queryParams)}`,
-			Object.fromEntries(selectedFilter),
-		)}&filterToFetchData=${JSON.stringify(
-			filterToFetchData,
-		)}&spanAggregateCurrentPage=${spanAggregateCurrentPage}&selectedTags=${JSON.stringify(
-			selectedTags,
-		)}&${preResult
-			.map((e) => `${e.key}=${e.value}`)
-			.join('&')}&isFilterExclude=${JSON.stringify(
-			Object.fromEntries(isFilterExclude),
-		)}&userSelectedFilter=${JSON.stringify(
-			Object.fromEntries(userSelectedFilter),
-		)}&spanAggregateCurrentPage=${spanAggregateCurrentPage}&spanAggregateOrder=${spanAggregateOrder}&spanAggregateCurrentPageSize=${spanAggregateCurrentPageSize}&spanAggregateOrderParam=${spanAggregateOrderParam}`,
 	);
 };