chore: disabled default props rule in eslint

frontend/.eslintrc.js

@@ -54,6 +54,7 @@ module.exports = {
 			},
 		],
 		'react/prop-types': 'off',
+		'react/require-default-props': 'off',
 		'@typescript-eslint/explicit-function-return-type': 'error',
 		'@typescript-eslint/no-var-requires': 'error',
 		'react/no-array-index-key': 'error',

frontend/src/AppRoutes/index.tsx

@@ -12,6 +12,7 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
+import { useAppRoutes } from 'hooks/useAppRoutes';
 import { useThemeConfig } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { NotificationProvider } from 'hooks/useNotifications';
@@ -27,19 +28,15 @@ import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
-import { Route, Router, Switch } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { Router } from 'react-router-dom';
+import { CompatRouter, Route, Routes } from 'react-router-dom-v5-compat';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { Userpilot } from 'userpilot';
 import { extractDomain } from 'utils/app';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
-import defaultRoutes, {
-	AppRoutes,
-	LIST_LICENSES,
-	SUPPORT_ROUTE,
-} from './routes';
+import { AppRoutes, LIST_LICENSES, SUPPORT_ROUTE } from './routes';
 
 function App(): JSX.Element {
 	const themeConfig = useThemeConfig();
@@ -57,6 +54,7 @@ function App(): JSX.Element {
 		featureFlags,
 		org,
 	} = useAppContext();
+	const { routes: defaultRoutes } = useAppRoutes();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 
 	const { hostname, pathname } = window.location;
@@ -213,6 +211,7 @@ function App(): JSX.Element {
 			}
 			setRoutes(updatedRoutes);
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		isLoggedInState,
 		user,
@@ -363,6 +362,17 @@ function App(): JSX.Element {
 		}
 	}
 
+	const renderRoutes = (routes: AppRoutes[]): JSX.Element[] | null => {
+		if (!routes || routes.length === 0) {
+			return null;
+		}
+		return routes.map(({ path, element: Component, children }: AppRoutes) => (
+			<Route key={`${path}`} path={path as string} element={<Component />}>
+				{children && renderRoutes(children)}
+			</Route>
+		));
+	};
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<ConfigProvider theme={themeConfig}>
@@ -379,18 +389,11 @@ function App(): JSX.Element {
 													<AlertRuleProvider>
 														<AppLayout>
 															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																<Switch>
-																	{routes.map(({ path, component, exact }) => (
-																		<Route
-																			key={`${path}`}
-																			exact={exact}
-																			path={path}
-																			component={component}
-																		/>
-																	))}
-																	<Route exact path="/" component={Home} />
-																	<Route path="*" component={NotFound} />
-																</Switch>
+																<Routes>
+																	{routes && renderRoutes(routes)}
+																	<Route path="/" element={<Home />} />
+																	<Route path="*" element={<NotFound />} />
+																</Routes>
 															</Suspense>
 														</AppLayout>
 													</AlertRuleProvider>

frontend/src/AppRoutes/pageComponents.ts

@@ -128,11 +128,23 @@ export const AlertOverview = Loadable(
 );
 
 export const CreateAlertChannelAlerts = Loadable(
-	() => import(/* webpackChunkName: "Create Channels" */ 'pages/Settings'),
+	() =>
+		import(/* webpackChunkName: "Create Channels" */ 'pages/CreateAlertChannels'),
 );
 
-export const AllAlertChannels = Loadable(
-	() => import(/* webpackChunkName: "All Channels" */ 'pages/Settings'),
+export const AllAlertChannelsPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "All Alert Channels" */ 'pages/AllAlertChannelsSettings'
+		),
+);
+
+export const ChannelsEditPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "Channels Edit Page" */
+			'pages/ChannelsEdit'
+		),
 );
 
 export const AllErrors = Loadable(
@@ -147,25 +159,40 @@ export const StatusPage = Loadable(
 	() => import(/* webpackChunkName: "All Status" */ 'pages/Status'),
 );
 
-export const OrganizationSettings = Loadable(
-	() => import(/* webpackChunkName: "All Settings" */ 'pages/Settings'),
+export const OrganizationSettingsPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "Organization Settings" */ 'pages/OrganizationSettings'
+		),
 );
 
 export const IngestionSettings = Loadable(
-	() => import(/* webpackChunkName: "Ingestion Settings" */ 'pages/Settings'),
+	() =>
+		import(
+			/* webpackChunkName: "Ingestion Settings" */ 'pages/IngestionSettings'
+		),
 );
 
 export const APIKeys = Loadable(
-	() => import(/* webpackChunkName: "All Settings" */ 'pages/Settings'),
+	() => import(/* webpackChunkName: "API Keys Settings" */ 'pages/APIKeys'),
 );
 
 export const MySettings = Loadable(
-	() => import(/* webpackChunkName: "All MySettings" */ 'pages/Settings'),
+	() => import(/* webpackChunkName: "All MySettings" */ 'pages/MySettings'),
+);
+
+export const GeneralSettings = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "General MySettings" */ 'pages/Settings/GeneralSettings'
+		),
 );
 
 export const CustomDomainSettings = Loadable(
 	() =>
-		import(/* webpackChunkName: "Custom Domain Settings" */ 'pages/Settings'),
+		import(
+			/* webpackChunkName: "Custom Domain Settings" */ 'pages/CustomDomainSettings'
+		),
 );
 
 export const Logs = Loadable(
@@ -217,7 +244,7 @@ export const LogsIndexToFields = Loadable(
 );
 
 export const BillingPage = Loadable(
-	() => import(/* webpackChunkName: "BillingPage" */ 'pages/Settings'),
+	() => import(/* webpackChunkName: "BillingPage" */ 'pages/Billing'),
 );
 
 export const SupportPage = Loadable(
@@ -244,7 +271,7 @@ export const WorkspaceAccessRestricted = Loadable(
 );
 
 export const ShortcutsPage = Loadable(
-	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
+	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Shortcuts'),
 );
 
 export const InstalledIntegrations = Loadable(

frontend/src/AppRoutes/routes.ts

@@ -1,21 +1,28 @@
 import ROUTES from 'constants/routes';
 import MessagingQueues from 'pages/MessagingQueues';
-import { RouteProps } from 'react-router-dom';
+import React from 'react';
+import { RouteProps } from 'react-router-dom-v5-compat';
 
 import {
 	AlertHistory,
 	AlertOverview,
-	AllAlertChannels,
+	AllAlertChannelsPage,
 	AllErrors,
+	APIKeys,
 	ApiMonitoring,
+	BillingPage,
+	ChannelsEditPage,
 	CreateAlertChannelAlerts,
 	CreateNewAlerts,
+	CustomDomainSettings,
 	DashboardPage,
 	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
+	GeneralSettings,
 	Home,
 	InfrastructureMonitoring,
+	IngestionSettings,
 	InstalledIntegrations,
 	LicensePage,
 	ListAllALertsPage,
@@ -26,10 +33,12 @@ import {
 	LogsIndexToFields,
 	LogsSaveViews,
 	MetricsExplorer,
+	MySettings,
 	NewDashboardPage,
 	OldLogsExplorer,
 	Onboarding,
 	OnboardingV2,
+	OrganizationSettingsPage,
 	OrgOnboarding,
 	PasswordReset,
 	PipelinePage,
@@ -38,6 +47,7 @@ import {
 	ServicesTablePage,
 	ServiceTopLevelOperationsPage,
 	SettingsPage,
+	ShortcutsPage,
 	SignupPage,
 	SomethingWentWrong,
 	StatusPage,
@@ -57,387 +67,388 @@ import {
 
 const routes: AppRoutes[] = [
 	{
-		component: SignupPage,
+		element: SignupPage,
 		path: ROUTES.SIGN_UP,
-		exact: true,
 		isPrivate: false,
 		key: 'SIGN_UP',
 	},
 	{
 		path: ROUTES.GET_STARTED,
-		exact: false,
-		component: Onboarding,
+		element: Onboarding,
 		isPrivate: true,
 		key: 'GET_STARTED',
 	},
 	{
 		path: ROUTES.GET_STARTED_WITH_CLOUD,
-		exact: false,
-		component: OnboardingV2,
+		element: OnboardingV2,
 		isPrivate: true,
 		key: 'GET_STARTED_WITH_CLOUD',
 	},
 	{
 		path: ROUTES.HOME,
-		exact: true,
-		component: Home,
+		element: Home,
 		isPrivate: true,
 		key: 'HOME',
 	},
 	{
 		path: ROUTES.ONBOARDING,
-		exact: false,
-		component: OrgOnboarding,
+		element: OrgOnboarding,
 		isPrivate: true,
 		key: 'ONBOARDING',
 	},
 	{
-		component: LogsIndexToFields,
+		element: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,
-		exact: true,
 		isPrivate: true,
 		key: 'LOGS_INDEX_FIELDS',
 	},
 	{
-		component: ServicesTablePage,
+		element: ServicesTablePage,
 		path: ROUTES.APPLICATION,
-		exact: true,
 		isPrivate: true,
 		key: 'APPLICATION',
 	},
 	{
 		path: ROUTES.SERVICE_METRICS,
-		exact: true,
-		component: ServiceMetricsPage,
+		element: ServiceMetricsPage,
 		isPrivate: true,
 		key: 'SERVICE_METRICS',
 	},
 	{
 		path: ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
-		exact: true,
-		component: ServiceTopLevelOperationsPage,
+		element: ServiceTopLevelOperationsPage,
 		isPrivate: true,
 		key: 'SERVICE_TOP_LEVEL_OPERATIONS',
 	},
 	{
 		path: ROUTES.SERVICE_MAP,
-		component: ServiceMapPage,
+		element: ServiceMapPage,
 		isPrivate: true,
-		exact: true,
 		key: 'SERVICE_MAP',
 	},
 	{
 		path: ROUTES.LOGS_SAVE_VIEWS,
-		component: LogsSaveViews,
+		element: LogsSaveViews,
 		isPrivate: true,
-		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACE_DETAIL,
-		exact: true,
-		component: TraceDetail,
+		element: TraceDetail,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,
-		exact: false,
-		component: SettingsPage,
+		element: SettingsPage,
 		isPrivate: true,
 		key: 'SETTINGS',
+		children: [
+			{
+				path: '', // Route for /settings
+				element: GeneralSettings,
+				isPrivate: true,
+				key: 'SETTINGS',
+			},
+			{
+				path: 'my-settings',
+				element: MySettings,
+				isPrivate: true,
+				key: 'MY_SETTINGS',
+			},
+			{
+				path: 'custom-domain-settings',
+				element: CustomDomainSettings,
+				isPrivate: true,
+				key: 'CUSTOM_DOMAIN_SETTINGS',
+			},
+			{
+				path: 'org-settings',
+				element: OrganizationSettingsPage,
+				isPrivate: true,
+				key: 'ORG_SETTINGS',
+			},
+			{
+				path: 'channels',
+				element: AllAlertChannelsPage,
+				isPrivate: true,
+				key: 'ALL_CHANNELS',
+			},
+			{
+				path: 'ingestion-settings',
+				element: IngestionSettings,
+				isPrivate: true,
+				key: 'INGESTION_SETTINGS',
+			},
+			{
+				path: 'api-keys',
+				element: APIKeys,
+				isPrivate: true,
+				key: 'API_KEYS',
+			},
+			{
+				path: 'billing',
+				element: BillingPage,
+				isPrivate: true,
+				key: 'BILLING',
+			},
+			{
+				path: 'shortcuts',
+				element: ShortcutsPage,
+				isPrivate: true,
+				key: 'SHORTCUTS',
+			},
+			{
+				path: 'channels/new',
+				element: CreateAlertChannelAlerts,
+				isPrivate: true,
+				key: 'CHANNELS_NEW',
+			},
+			{
+				path: 'channels/edit/:channelId',
+				element: ChannelsEditPage,
+				isPrivate: true,
+				key: 'CHANNELS_EDIT',
+			},
+		],
 	},
 	{
 		path: ROUTES.USAGE_EXPLORER,
-		exact: true,
-		component: UsageExplorerPage,
+		element: UsageExplorerPage,
 		isPrivate: true,
 		key: 'USAGE_EXPLORER',
 	},
 	{
 		path: ROUTES.ALL_DASHBOARD,
-		exact: true,
-		component: DashboardPage,
+		element: DashboardPage,
 		isPrivate: true,
 		key: 'ALL_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD,
-		exact: true,
-		component: NewDashboardPage,
+		element: NewDashboardPage,
 		isPrivate: true,
 		key: 'DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD_WIDGET,
-		exact: true,
-		component: DashboardWidget,
+		element: DashboardWidget,
 		isPrivate: true,
 		key: 'DASHBOARD_WIDGET',
 	},
 	{
 		path: ROUTES.EDIT_ALERTS,
-		exact: true,
-		component: EditRulesPage,
+		element: EditRulesPage,
 		isPrivate: true,
 		key: 'EDIT_ALERTS',
 	},
 	{
 		path: ROUTES.LIST_ALL_ALERT,
-		exact: true,
-		component: ListAllALertsPage,
+		element: ListAllALertsPage,
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
 	{
 		path: ROUTES.ALERTS_NEW,
-		exact: true,
-		component: CreateNewAlerts,
+		element: CreateNewAlerts,
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
 	{
 		path: ROUTES.ALERT_HISTORY,
-		exact: true,
-		component: AlertHistory,
+		element: AlertHistory,
 		isPrivate: true,
 		key: 'ALERT_HISTORY',
 	},
 	{
 		path: ROUTES.ALERT_OVERVIEW,
-		exact: true,
-		component: AlertOverview,
+		element: AlertOverview,
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
 	{
 		path: ROUTES.TRACE,
-		exact: true,
-		component: TraceFilter,
+		element: TraceFilter,
 		isPrivate: true,
 		key: 'TRACE',
 	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
-		exact: true,
-		component: TracesExplorer,
+		element: TracesExplorer,
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
 	{
 		path: ROUTES.TRACES_SAVE_VIEWS,
-		exact: true,
-		component: TracesSaveViews,
+		element: TracesSaveViews,
 		isPrivate: true,
 		key: 'TRACES_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
-		exact: true,
-		component: TracesFunnels,
+		element: TracesFunnels,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS_DETAIL,
-		exact: true,
-		component: TracesFunnelDetails,
+		element: TracesFunnelDetails,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS_DETAIL',
 	},
-	{
-		path: ROUTES.CHANNELS_NEW,
-		exact: true,
-		component: CreateAlertChannelAlerts,
-		isPrivate: true,
-		key: 'CHANNELS_NEW',
-	},
-	{
-		path: ROUTES.ALL_CHANNELS,
-		exact: true,
-		component: AllAlertChannels,
-		isPrivate: true,
-		key: 'ALL_CHANNELS',
-	},
 	{
 		path: ROUTES.ALL_ERROR,
-		exact: true,
 		isPrivate: true,
-		component: AllErrors,
+		element: AllErrors,
 		key: 'ALL_ERROR',
 	},
 	{
 		path: ROUTES.ERROR_DETAIL,
-		exact: true,
-		component: ErrorDetails,
+		element: ErrorDetails,
 		isPrivate: true,
 		key: 'ERROR_DETAIL',
 	},
 	{
 		path: ROUTES.VERSION,
-		exact: true,
-		component: StatusPage,
+		element: StatusPage,
 		isPrivate: true,
 		key: 'VERSION',
 	},
 	{
 		path: ROUTES.LOGS,
-		exact: true,
-		component: Logs,
+		element: Logs,
 		key: 'LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_EXPLORER,
-		exact: true,
-		component: LogsExplorer,
+		element: LogsExplorer,
 		key: 'LOGS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.OLD_LOGS_EXPLORER,
-		exact: true,
-		component: OldLogsExplorer,
+		element: OldLogsExplorer,
 		key: 'OLD_LOGS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LIVE_LOGS,
-		exact: true,
-		component: LiveLogs,
+		element: LiveLogs,
 		key: 'LIVE_LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
-		exact: true,
-		component: PipelinePage,
+		element: PipelinePage,
 		key: 'LOGS_PIPELINES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGIN,
-		exact: true,
-		component: Login,
+		element: Login,
 		isPrivate: false,
 		key: 'LOGIN',
 	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
-		exact: true,
-		component: UnAuthorized,
+		element: UnAuthorized,
 		key: 'UN_AUTHORIZED',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.PASSWORD_RESET,
-		exact: true,
-		component: PasswordReset,
+		element: PasswordReset,
 		key: 'PASSWORD_RESET',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.SOMETHING_WENT_WRONG,
-		exact: true,
-		component: SomethingWentWrong,
+		element: SomethingWentWrong,
 		key: 'SOMETHING_WENT_WRONG',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.WORKSPACE_LOCKED,
-		exact: true,
-		component: WorkspaceBlocked,
+		element: WorkspaceBlocked,
 		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
 	{
 		path: ROUTES.WORKSPACE_SUSPENDED,
-		exact: true,
-		component: WorkspaceSuspended,
+		element: WorkspaceSuspended,
 		isPrivate: true,
 		key: 'WORKSPACE_SUSPENDED',
 	},
 	{
 		path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
-		exact: true,
-		component: WorkspaceAccessRestricted,
+		element: WorkspaceAccessRestricted,
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
 	{
 		path: ROUTES.INTEGRATIONS,
-		exact: true,
-		component: InstalledIntegrations,
+		element: InstalledIntegrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
-		exact: true,
-		component: MessagingQueues,
+		element: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
-		exact: true,
-		component: MessagingQueues,
+		element: MessagingQueues,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
-		exact: true,
-		component: MessagingQueues,
+		element: MessagingQueues,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
-		exact: true,
-		component: MessagingQueues,
+		element: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
-		exact: true,
-		component: InfrastructureMonitoring,
+		element: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
-		exact: true,
-		component: InfrastructureMonitoring,
+		element: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER,
-		exact: true,
-		component: MetricsExplorer,
+		element: MetricsExplorer,
 		key: 'METRICS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_EXPLORER,
-		exact: true,
-		component: MetricsExplorer,
+		element: MetricsExplorer,
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VIEWS,
-		exact: true,
-		component: MetricsExplorer,
+		element: MetricsExplorer,
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.API_MONITORING,
-		exact: true,
-		component: ApiMonitoring,
+		element: ApiMonitoring,
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
@@ -445,16 +456,14 @@ const routes: AppRoutes[] = [
 
 export const SUPPORT_ROUTE: AppRoutes = {
 	path: ROUTES.SUPPORT,
-	exact: true,
-	component: SupportPage,
+	element: SupportPage,
 	key: 'SUPPORT',
 	isPrivate: true,
 };
 
 export const LIST_LICENSES: AppRoutes = {
 	path: ROUTES.LIST_LICENSES,
-	exact: true,
-	component: LicensePage,
+	element: LicensePage,
 	isPrivate: true,
 	key: 'LIST_LICENSES',
 };
@@ -487,11 +496,13 @@ export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 ];
 
 export interface AppRoutes {
-	component: RouteProps['component'];
+	element:
+		| React.ComponentType<any>
+		| React.LazyExoticComponent<React.ComponentType<any>>;
 	path: RouteProps['path'];
-	exact: RouteProps['exact'];
 	isPrivate: boolean;
 	key: keyof typeof ROUTES;
+	children?: AppRoutes[];
 }
 
 export default routes;

frontend/src/constants/routes.ts

@@ -27,18 +27,23 @@ const ROUTES = {
 	ALERTS_NEW: '/alerts/new',
 	ALERT_HISTORY: '/alerts/history',
 	ALERT_OVERVIEW: '/alerts/overview',
-	ALL_CHANNELS: '/settings/channels',
-	CHANNELS_NEW: '/settings/channels/new',
-	CHANNELS_EDIT: '/settings/channels/edit/:channelId',
-	ALL_ERROR: '/exceptions',
-	ERROR_DETAIL: '/error-detail',
-	VERSION: '/status',
+
+	// Setting routes
 	SETTINGS: '/settings',
 	MY_SETTINGS: '/settings/my-settings',
 	ORG_SETTINGS: '/settings/org-settings',
 	CUSTOM_DOMAIN_SETTINGS: '/settings/custom-domain-settings',
 	API_KEYS: '/settings/api-keys',
 	INGESTION_SETTINGS: '/settings/ingestion-settings',
+	ALL_CHANNELS: '/settings/channels',
+	CHANNELS_NEW: '/settings/channels/new',
+	CHANNELS_EDIT: '/settings/channels/edit/:channelId',
+	BILLING: '/settings/billing',
+	SHORTCUTS: '/settings/shortcuts',
+
+	ALL_ERROR: '/exceptions',
+	ERROR_DETAIL: '/error-detail',
+	VERSION: '/status',
 	SOMETHING_WENT_WRONG: '/something-went-wrong',
 	UN_AUTHORIZED: '/un-authorized',
 	NOT_FOUND: '/not-found',
@@ -52,7 +57,6 @@ const ROUTES = {
 	LIST_LICENSES: '/licenses',
 	LOGS_INDEX_FIELDS: '/logs-explorer/index-fields',
 	TRACE_EXPLORER: '/trace-explorer',
-	BILLING: '/settings/billing',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',
@@ -60,7 +64,6 @@ const ROUTES = {
 	TRACES_FUNNELS_DETAIL: '/traces/funnels/:funnelId',
 	WORKSPACE_LOCKED: '/workspace-locked',
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
-	SHORTCUTS: '/settings/shortcuts',
 	INTEGRATIONS: '/integrations',
 	MESSAGING_QUEUES_BASE: '/messaging-queues',
 	MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka',
@@ -80,4 +83,17 @@ const ROUTES = {
 	HOME_PAGE: '/',
 } as const;
 
+export const SETTINGS_NESTED_ROUTES = {
+	MY_SETTINGS: 'my-settings',
+	ORG_SETTINGS: 'org-settings',
+	CUSTOM_DOMAIN_SETTINGS: 'custom-domain-settings',
+	API_KEYS: 'api-keys',
+	INGESTION_SETTINGS: 'ingestion-settings',
+	ALL_CHANNELS: 'channels',
+	CHANNELS_NEW: 'channels/new',
+	CHANNELS_EDIT: 'channels/edit/:channelId',
+	BILLING: 'billing',
+	SHORTCUTS: 'shortcuts',
+};
+
 export default ROUTES;

frontend/src/container/CreateAlertChannels/index.tsx

@@ -571,7 +571,7 @@ function CreateAlertChannels({
 }
 
 interface CreateAlertChannelsProps {
-	preType: ChannelType;
+	preType?: ChannelType;
 }
 
 export default CreateAlertChannels;

frontend/src/container/TopNav/index.tsx

@@ -3,40 +3,37 @@ import './TopNav.styles.scss';
 import { Col, Row, Space } from 'antd';
 import ROUTES from 'constants/routes';
 import { useMemo } from 'react';
-import { matchPath, useHistory } from 'react-router-dom';
+import { matchPath, useLocation } from 'react-router-dom-v5-compat';
 
 import NewExplorerCTA from '../NewExplorerCTA';
 import DateTimeSelector from './DateTimeSelectionV2';
 import { routesToDisable, routesToSkip } from './DateTimeSelectionV2/config';
 
 function TopNav(): JSX.Element | null {
-	const { location } = useHistory();
+	const location = useLocation();
+
+	console.log({
+		location,
+		match: matchPath(location.pathname, '/settings/channels/edit/:channelId'),
+	});
 
 	const isRouteToSkip = useMemo(
-		() =>
-			routesToSkip.some((route) =>
-				matchPath(location.pathname, { path: route, exact: true }),
-			),
+		() => routesToSkip.some((route) => matchPath(route, location.pathname)),
 		[location.pathname],
 	);
 
 	const isDisabled = useMemo(
-		() =>
-			routesToDisable.some((route) =>
-				matchPath(location.pathname, { path: route, exact: true }),
-			),
+		() => routesToDisable.some((route) => matchPath(route, location.pathname)),
 		[location.pathname],
 	);
 
 	const isSignUpPage = useMemo(
-		() => matchPath(location.pathname, { path: ROUTES.SIGN_UP, exact: true }),
+		() => matchPath(location.pathname, ROUTES.SIGN_UP),
 		[location.pathname],
 	);
 
 	const isNewAlertsLandingPage = useMemo(
-		() =>
-			matchPath(location.pathname, { path: ROUTES.ALERTS_NEW, exact: true }) &&
-			!location.search,
+		() => matchPath(location.pathname, ROUTES.ALERTS_NEW) && !location.search,
 		[location.pathname, location.search],
 	);
 

frontend/src/hooks/useAppRoutes.ts

@@ -0,0 +1,49 @@
+import routes, { AppRoutes } from 'AppRoutes/routes';
+import { FeatureKeys } from 'constants/features';
+import { getRoutes } from 'pages/Settings/utils';
+import { useAppContext } from 'providers/App/App';
+import { useMemo } from 'react';
+
+import useComponentPermission from './useComponentPermission';
+import { useGetTenantLicense } from './useGetTenantLicense';
+
+export const useAppRoutes = (): { routes: AppRoutes[] } => {
+	const { user, featureFlags, trialInfo } = useAppContext();
+
+	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+
+	const [isCurrentOrgSettings] = useComponentPermission(
+		['current_org_settings'],
+		user.role,
+	);
+
+	const isGatewayEnabled =
+		featureFlags?.find((feature) => feature.name === FeatureKeys.GATEWAY)
+			?.active || false;
+
+	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
+
+	const tabRoutes = useMemo(
+		() =>
+			getRoutes(
+				user.role,
+				isCurrentOrgSettings,
+				isGatewayEnabled,
+				isWorkspaceBlocked,
+				isCloudUser,
+				isEnterpriseSelfHostedUser,
+			),
+		[
+			user.role,
+			isCurrentOrgSettings,
+			isGatewayEnabled,
+			isWorkspaceBlocked,
+			isCloudUser,
+			isEnterpriseSelfHostedUser,
+		],
+	);
+
+	console.log({ tabRoutes });
+
+	return { routes };
+};

frontend/src/pages/APIKeys/index.tsx

@@ -0,0 +1,7 @@
+import APIKeysSettingsContainer from 'container/APIKeys/APIKeys';
+
+function APIKeysSettings(): JSX.Element {
+	return <APIKeysSettingsContainer />;
+}
+
+export default APIKeysSettings;

frontend/src/pages/AllAlertChannelsSettings/index.tsx

@@ -0,0 +1,7 @@
+import AllAlertChannelsSettingsContainer from 'container/AllAlertChannels';
+
+function AllAlertChannelsSettings(): JSX.Element {
+	return <AllAlertChannelsSettingsContainer />;
+}
+
+export default AllAlertChannelsSettings;

frontend/src/pages/CreateAlertChannels/index.tsx

@@ -0,0 +1,7 @@
+import CreateAlertChannelsContainer from 'container/CreateAlertChannels';
+
+function CreateAlertChannelsSettings(): JSX.Element {
+	return <CreateAlertChannelsContainer />;
+}
+
+export default CreateAlertChannelsSettings;

frontend/src/pages/CustomDomainSettings/index.tsx

@@ -0,0 +1,6 @@
+import CustomDomainSettingsContainer from 'container/CustomDomainSettings';
+
+function CustomDomainSettings(): JSX.Element {
+	return <CustomDomainSettingsContainer />;
+}
+export default CustomDomainSettings;

frontend/src/pages/IngestionSettings/index.tsx

@@ -0,0 +1,7 @@
+import IngestionSettingsContainer from 'container/IngestionSettings/MultiIngestionSettings';
+
+function IngestionSettings(): JSX.Element {
+	return <IngestionSettingsContainer />;
+}
+
+export default IngestionSettings;

frontend/src/pages/OrganizationSettings/index.tsx

@@ -0,0 +1,7 @@
+import OrganizationSettingsContainer from 'container/OrganizationSettings';
+
+function OrganizationSettings(): JSX.Element {
+	return <OrganizationSettingsContainer />;
+}
+
+export default OrganizationSettings;

frontend/src/pages/Settings/GeneralSettings.tsx

@@ -0,0 +1,7 @@
+import GeneralSettingsContainer from 'container/GeneralSettings';
+
+function GeneralSettings(): JSX.Element {
+	return <GeneralSettingsContainer />;
+}
+
+export default GeneralSettings;

frontend/src/pages/Settings/Settings.tsx

@@ -1,35 +1,25 @@
 import './Settings.styles.scss';
 
 import logEvent from 'api/common/logEvent';
-import RouteTab from 'components/RouteTab';
-import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
 import { routeConfig } from 'container/SideNav/config';
 import { getQueryString } from 'container/SideNav/helper';
 import { settingsMenuItems as defaultSettingsMenuItems } from 'container/SideNav/menuItems';
 import NavItem from 'container/SideNav/NavItem/NavItem';
 import { SidebarItem } from 'container/SideNav/sideNav.types';
-import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
 import { Wrench } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router-dom-v5-compat';
 import { USER_ROLES } from 'types/roles';
 
-import { getRoutes } from './utils';
-
 function SettingsPage(): JSX.Element {
 	const { pathname, search } = useLocation();
 
-	const {
-		user,
-		featureFlags,
-		trialInfo,
-		isFetchingActiveLicense,
-	} = useAppContext();
+	const { user, trialInfo, isFetchingActiveLicense } = useAppContext();
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
 
 	const [settingsMenuItems, setSettingsMenuItems] = useState<SidebarItem[]>(
@@ -39,18 +29,6 @@ function SettingsPage(): JSX.Element {
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isEditor = user.role === USER_ROLES.EDITOR;
 
-	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
-
-	const [isCurrentOrgSettings] = useComponentPermission(
-		['current_org_settings'],
-		user.role,
-	);
-	const { t } = useTranslation(['routes']);
-
-	const isGatewayEnabled =
-		featureFlags?.find((feature) => feature.name === FeatureKeys.GATEWAY)
-			?.active || false;
-
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
 		setSettingsMenuItems((prevItems) => {
@@ -162,28 +140,6 @@ function SettingsPage(): JSX.Element {
 		pathname,
 	]);
 
-	const routes = useMemo(
-		() =>
-			getRoutes(
-				user.role,
-				isCurrentOrgSettings,
-				isGatewayEnabled,
-				isWorkspaceBlocked,
-				isCloudUser,
-				isEnterpriseSelfHostedUser,
-				t,
-			),
-		[
-			user.role,
-			isCurrentOrgSettings,
-			isGatewayEnabled,
-			isWorkspaceBlocked,
-			isCloudUser,
-			isEnterpriseSelfHostedUser,
-			t,
-		],
-	);
-
 	const isCtrlMetaKey = (e: MouseEvent): boolean => e.ctrlKey || e.metaKey;
 
 	const openInNewTab = (path: string): void => {
@@ -261,12 +217,7 @@ function SettingsPage(): JSX.Element {
 				</div>
 
 				<div className="settings-page-content">
-					<RouteTab
-						routes={routes}
-						activeKey={pathname}
-						history={history}
-						tabBarStyle={{ display: 'none' }}
-					/>
+					<Outlet />
 				</div>
 			</div>
 		</div>

frontend/src/pages/Settings/utils.ts

@@ -1,22 +1,6 @@
-import { RouteTabProps } from 'components/RouteTab/types';
-import { TFunction } from 'i18next';
+import ROUTES, { SETTINGS_NESTED_ROUTES } from 'constants/routes';
 import { ROLES, USER_ROLES } from 'types/roles';
 
-import {
-	alertChannels,
-	apiKeys,
-	billingSettings,
-	createAlertChannels,
-	customDomainSettings,
-	editAlertChannels,
-	generalSettings,
-	ingestionSettings,
-	keyboardShortcuts,
-	multiIngestionSettings,
-	mySettings,
-	organizationSettings,
-} from './config';
-
 export const getRoutes = (
 	userRole: ROLES | null,
 	isCurrentOrgSettings: boolean,
@@ -24,8 +8,7 @@ export const getRoutes = (
 	isWorkspaceBlocked: boolean,
 	isCloudUser: boolean,
 	isEnterpriseSelfHostedUser: boolean,
-	t: TFunction,
-): RouteTabProps['routes'] => {
+): string[] => {
 	const settings = [];
 
 	const isAdmin = userRole === USER_ROLES.ADMIN;
@@ -33,44 +16,47 @@ export const getRoutes = (
 
 	if (isWorkspaceBlocked && isAdmin) {
 		settings.push(
-			...organizationSettings(t),
-			...mySettings(t),
-			...billingSettings(t),
-			...keyboardShortcuts(t),
+			SETTINGS_NESTED_ROUTES.ORG_SETTINGS,
+			SETTINGS_NESTED_ROUTES.MY_SETTINGS,
+			SETTINGS_NESTED_ROUTES.BILLING,
+			SETTINGS_NESTED_ROUTES.SHORTCUTS,
 		);
 
 		return settings;
 	}
 
-	settings.push(...generalSettings(t));
+	settings.push(ROUTES.SETTINGS);
 
 	if (isCurrentOrgSettings) {
-		settings.push(...organizationSettings(t));
+		settings.push(SETTINGS_NESTED_ROUTES.ORG_SETTINGS);
 	}
 
 	if (isGatewayEnabled && (isAdmin || isEditor)) {
-		settings.push(...multiIngestionSettings(t));
+		settings.push(SETTINGS_NESTED_ROUTES.INGESTION_SETTINGS);
 	}
 
 	if (isCloudUser && !isGatewayEnabled) {
-		settings.push(...ingestionSettings(t));
+		settings.push(SETTINGS_NESTED_ROUTES.INGESTION_SETTINGS);
 	}
 
-	settings.push(...alertChannels(t));
+	settings.push(SETTINGS_NESTED_ROUTES.ALL_CHANNELS);
 
 	if (isAdmin) {
-		settings.push(...apiKeys(t));
+		settings.push(SETTINGS_NESTED_ROUTES.API_KEYS);
 	}
 
 	if ((isCloudUser || isEnterpriseSelfHostedUser) && isAdmin) {
-		settings.push(...customDomainSettings(t), ...billingSettings(t));
+		settings.push(
+			SETTINGS_NESTED_ROUTES.CUSTOM_DOMAIN_SETTINGS,
+			SETTINGS_NESTED_ROUTES.BILLING,
+		);
 	}
 
 	settings.push(
-		...mySettings(t),
-		...createAlertChannels(t),
-		...editAlertChannels(t),
-		...keyboardShortcuts(t),
+		SETTINGS_NESTED_ROUTES.MY_SETTINGS,
+		SETTINGS_NESTED_ROUTES.CHANNELS_NEW,
+		SETTINGS_NESTED_ROUTES.CHANNELS_EDIT,
+		SETTINGS_NESTED_ROUTES.SHORTCUTS,
 	);
 
 	return settings;