From 42842b6b17d495e2c43bd6a7f3bc839e52305491 Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 15:51:38 +0530
Subject: [PATCH] feat: i18n support for setting route names

---
 frontend/public/locales/en/translation.json     |  4 ++++
 frontend/src/pages/AlertChannelCreate/index.tsx | 12 ++++++++----
 frontend/src/pages/AllAlertChannels/index.tsx   | 12 ++++++++----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index e18493e548..1b90499381 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -1,5 +1,9 @@
 {
 	"monitor_signup": "Monitor your applications. Find what is causing issues.",
+	"routes": {
+		"general": "General",
+		"alert_channels": "Alert Channels"
+	},
 	"settings": {
 		"total_retention_period": "Total Retention Period",
 		"move_to_s3": "Move to S3\n(should be lower than total retention period)",
diff --git a/frontend/src/pages/AlertChannelCreate/index.tsx b/frontend/src/pages/AlertChannelCreate/index.tsx
index 3de6ce9986..ecc94247a4 100644
--- a/frontend/src/pages/AlertChannelCreate/index.tsx
+++ b/frontend/src/pages/AlertChannelCreate/index.tsx
@@ -5,28 +5,32 @@ import CreateAlertChannels from 'container/CreateAlertChannels';
 import GeneralSettings from 'container/GeneralSettings';
 import history from 'lib/history';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 function SettingsPage(): JSX.Element {
 	const pathName = history.location.pathname;
-
+	const { t } = useTranslation();
 	return (
 		<RouteTab
 			{...{
 				routes: [
 					{
 						Component: GeneralSettings,
-						name: 'General',
+						name: t('routes.general'),
 						route: ROUTES.SETTINGS,
 					},
 					{
 						Component: (): JSX.Element => {
 							return <CreateAlertChannels preType="slack" />;
 						},
-						name: 'Alert Channels',
+						name: t('routes.alert_channels'),
 						route: ROUTES.ALL_CHANNELS,
 					},
 				],
-				activeKey: pathName === ROUTES.SETTINGS ? 'General' : 'Alert Channels',
+				activeKey:
+					pathName === ROUTES.SETTINGS
+						? t('routes.general')
+						: t('routes.alert_channels'),
 			}}
 		/>
 	);
diff --git a/frontend/src/pages/AllAlertChannels/index.tsx b/frontend/src/pages/AllAlertChannels/index.tsx
index b1d3820f66..1ab97d0db1 100644
--- a/frontend/src/pages/AllAlertChannels/index.tsx
+++ b/frontend/src/pages/AllAlertChannels/index.tsx
@@ -4,26 +4,30 @@ import AlertChannels from 'container/AllAlertChannels';
 import GeneralSettings from 'container/GeneralSettings';
 import history from 'lib/history';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 function AllAlertChannels(): JSX.Element {
 	const pathName = history.location.pathname;
-
+	const { t } = useTranslation();
 	return (
 		<RouteTab
 			{...{
 				routes: [
 					{
 						Component: GeneralSettings,
-						name: 'General',
+						name: t('routes.general'),
 						route: ROUTES.SETTINGS,
 					},
 					{
 						Component: AlertChannels,
-						name: 'Alert Channels',
+						name: t('routes.alert_channels'),
 						route: ROUTES.ALL_CHANNELS,
 					},
 				],
-				activeKey: pathName === ROUTES.SETTINGS ? 'General' : 'Alert Channels',
+				activeKey:
+					pathName === ROUTES.SETTINGS
+						? t('routes.general')
+						: t('routes.alert_channels'),
 			}}
 		/>
 	);