feat: show info message in general settings for cloud users to reachout for retention change (#4476)

frontend/src/container/GeneralSettingsCloud/GeneralSettingsCloud.styles.scss

@@ -0,0 +1,7 @@
+.general-settings-container {
+	.ant-card-body {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+}

frontend/src/container/GeneralSettingsCloud/GeneralSettingsCloud.tsx

@@ -0,0 +1,16 @@
+import './GeneralSettingsCloud.styles.scss';
+
+import { Card, Typography } from 'antd';
+import { Info } from 'lucide-react';
+
+export default function GeneralSettingsCloud(): JSX.Element {
+	return (
+		<Card className="general-settings-container">
+			<Info size={16} />
+			<Typography.Text>
+				Please email us or connect with us via intercom support to change the
+				retention period.
+			</Typography.Text>
+		</Card>
+	);
+}

frontend/src/container/GeneralSettingsCloud/index.tsx

@@ -0,0 +1,3 @@
+import GeneralSettingsCloud from './GeneralSettingsCloud';
+
+export default GeneralSettingsCloud;

frontend/src/container/SideNav/SideNav.tsx

@@ -253,6 +253,15 @@ function SideNav({
 		}
 	}, [isCloudUserVal, isEnterprise, isFetching]);
 
+	const [isCurrentOrgSettings] = useComponentPermission(
+		['current_org_settings'],
+		role,
+	);
+
+	const settingsRoute = isCurrentOrgSettings
+		? ROUTES.ORG_SETTINGS
+		: ROUTES.SETTINGS;
+
 	return (
 		<div className={cx('sideNav', collapsed ? 'collapsed' : '')}>
 			<div className="brand">
@@ -302,7 +311,9 @@ function SideNav({
 						item={item}
 						isActive={activeMenuKey === item.key}
 						onClick={(): void => {
-							if (item) {
+							if (item.key === ROUTES.SETTINGS) {
+								history.push(settingsRoute);
+							} else if (item) {
 								onClickHandler(item?.key as string);
 							}
 						}}

frontend/src/pages/Settings/config.ts

@@ -2,17 +2,21 @@ import { RouteTabProps } from 'components/RouteTab/types';
 import ROUTES from 'constants/routes';
 import AlertChannels from 'container/AllAlertChannels';
 import GeneralSettings from 'container/GeneralSettings';
+import GeneralSettingsCloud from 'container/GeneralSettingsCloud';
 import IngestionSettings from 'container/IngestionSettings/IngestionSettings';
 import OrganizationSettings from 'container/OrganizationSettings';
 import { TFunction } from 'i18next';
 
-export const commonRoutes = (t: TFunction): RouteTabProps['routes'] => [
+export const organizationSettings = (t: TFunction): RouteTabProps['routes'] => [
 	{
-		Component: GeneralSettings,
+		Component: OrganizationSettings,
-		name: t('routes:general').toString(),
+		name: t('routes:organization_settings').toString(),
-		route: ROUTES.SETTINGS,
+		route: ROUTES.ORG_SETTINGS,
-		key: ROUTES.SETTINGS,
+		key: ROUTES.ORG_SETTINGS,
 	},
+];
+
+export const alertChannels = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: AlertChannels,
 		name: t('routes:alert_channels').toString(),
@@ -30,11 +34,20 @@ export const ingestionSettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
-export const organizationSettings = (t: TFunction): RouteTabProps['routes'] => [
+export const generalSettings = (t: TFunction): RouteTabProps['routes'] => [
 	{
-		Component: OrganizationSettings,
+		Component: GeneralSettings,
-		name: t('routes:organization_settings').toString(),
+		name: t('routes:general').toString(),
-		route: ROUTES.ORG_SETTINGS,
+		route: ROUTES.SETTINGS,
-		key: ROUTES.ORG_SETTINGS,
+		key: ROUTES.SETTINGS,
+	},
+];
+
+export const generalSettingsCloud = (t: TFunction): RouteTabProps['routes'] => [
+	{
+		Component: GeneralSettingsCloud,
+		name: t('routes:general').toString(),
+		route: ROUTES.SETTINGS,
+		key: ROUTES.SETTINGS,
 	},
 ];

frontend/src/pages/Settings/utils.ts

@@ -3,7 +3,9 @@ import { TFunction } from 'i18next';
 import { isCloudUser } from 'utils/app';
 
 import {
-	commonRoutes,
+	alertChannels,
+	generalSettings,
+	generalSettingsCloud,
 	ingestionSettings,
 	organizationSettings,
 } from './config';
@@ -12,15 +14,20 @@ export const getRoutes = (
 	isCurrentOrgSettings: boolean,
 	t: TFunction,
 ): RouteTabProps['routes'] => {
-	let common = commonRoutes(t);
+	const settings = [];
 
 	if (isCurrentOrgSettings) {
-		common = [...common, ...organizationSettings(t)];
+		settings.push(...organizationSettings(t));
 	}
 
 	if (isCloudUser()) {
-		common = [...common, ...ingestionSettings(t)];
+		settings.push(...ingestionSettings(t));
+		settings.push(...alertChannels(t));
+		settings.push(...generalSettingsCloud(t));
+	} else {
+		settings.push(...alertChannels(t));
+		settings.push(...generalSettings(t));
 	}
 
-	return common;
+	return settings;
 };