feat: i18n support for setting route names

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)",

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'),
 			}}
 		/>
 	);

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'),
 			}}
 		/>
 	);