feat: show retention info for cloud users and show count next to team… (#4536)

* feat: show retention info for cloud users and show count next to team members and pending invites

* feat: add safety check for saved views response

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -107,7 +107,7 @@ function ExplorerOptions({
 	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
 	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
 
-	const extraData = viewsData?.data.data.find((view) => view.uuid === viewKey)
+	const extraData = viewsData?.data?.data?.find((view) => view.uuid === viewKey)
 		?.extraData;
 
 	const extraDataColor = extraData ? JSON.parse(extraData).color : '';
@@ -134,7 +134,7 @@ function ExplorerOptions({
 	};
 
 	const onUpdateQueryHandler = (): void => {
-		const extraData = viewsData?.data.data.find((view) => view.uuid === viewKey)
+		const extraData = viewsData?.data?.data?.find((view) => view.uuid === viewKey)
 			?.extraData;
 		updateViewAsync(
 			{
@@ -166,7 +166,7 @@ function ExplorerOptions({
 		({ key }: { key: string }): void => {
 			const currentViewDetails = getViewDetailsUsingViewKey(
 				key,
-				viewsData?.data.data,
+				viewsData?.data?.data,
 			);
 			if (!currentViewDetails) return;
 			const {
@@ -296,7 +296,7 @@ function ExplorerOptions({
 						onClear={handleClearSelect}
 						ref={ref}
 					>
-						{viewsData?.data.data.map((view) => {
+						{viewsData?.data?.data?.map((view) => {
 							const extraData =
 								view.extraData !== '' ? JSON.parse(view.extraData) : '';
 							let bgColor = getRandomColor();

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -3,6 +3,7 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { Button, Card, Col, Divider, Modal, Row, Spin, Typography } from 'antd';
 import setRetentionApi from 'api/settings/setRetention';
 import TextToolTip from 'components/TextToolTip';
+import GeneralSettingsCloud from 'container/GeneralSettingsCloud';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
 import find from 'lodash-es/find';
@@ -24,6 +25,7 @@ import {
 	PayloadPropsTraces as GetRetentionPeriodTracesPayload,
 } from 'types/api/settings/getRetention';
 import AppReducer from 'types/reducer/app';
+import { isCloudUser } from 'utils/app';
 
 import Retention from './Retention';
 import StatusMessage from './StatusMessage';
@@ -394,6 +396,8 @@ function GeneralSettings({
 		onModalToggleHandler(type);
 	};
 
+	const isCloudUserVal = isCloudUser();
+
 	const renderConfig = [
 		{
 			name: 'Metrics',
@@ -521,7 +525,7 @@ function GeneralSettings({
 			return (
 				<Fragment key={category.name}>
 					<Col xs={22} xl={11} key={category.name} style={{ margin: '0.5rem' }}>
-						<Card style={{ height: '100%', minHeight: 300 }}>
+						<Card style={{ height: '100%' }}>
 							<Typography.Title style={{ margin: 0 }} level={3}>
 								{category.name}
 							</Typography.Title>
@@ -542,38 +546,43 @@ function GeneralSettings({
 									hide={!!retentionField.hide}
 								/>
 							))}
-							<ActionItemsContainer>
-								<Button
-									type="primary"
-									onClick={category.save.modalOpen}
-									disabled={category.save.isDisabled}
-								>
-									{category.save.saveButtonText}
-								</Button>
-								{category.statusComponent}
-							</ActionItemsContainer>
-							<Modal
-								title={t('retention_confirmation')}
-								focusTriggerAfterClose
-								forceRender
-								destroyOnClose
-								closable
-								onCancel={(): void =>
-									onModalToggleHandler(category.name.toLowerCase() as TTTLType)
-								}
-								onOk={(): Promise<void> =>
-									onOkHandler(category.name.toLowerCase() as TTTLType)
-								}
-								centered
-								open={category.save.modal}
-								confirmLoading={category.save.apiLoading}
-							>
-								<Typography>
-									{t('retention_confirmation_description', {
-										name: category.name.toLowerCase(),
-									})}
-								</Typography>
-							</Modal>
+
+							{!isCloudUserVal && (
+								<>
+									<ActionItemsContainer>
+										<Button
+											type="primary"
+											onClick={category.save.modalOpen}
+											disabled={category.save.isDisabled}
+										>
+											{category.save.saveButtonText}
+										</Button>
+										{category.statusComponent}
+									</ActionItemsContainer>
+									<Modal
+										title={t('retention_confirmation')}
+										focusTriggerAfterClose
+										forceRender
+										destroyOnClose
+										closable
+										onCancel={(): void =>
+											onModalToggleHandler(category.name.toLowerCase() as TTTLType)
+										}
+										onOk={(): Promise<void> =>
+											onOkHandler(category.name.toLowerCase() as TTTLType)
+										}
+										centered
+										open={category.save.modal}
+										confirmLoading={category.save.apiLoading}
+									>
+										<Typography>
+											{t('retention_confirmation_description', {
+												name: category.name.toLowerCase(),
+											})}
+										</Typography>
+									</Modal>
+								</>
+							)}
 						</Card>
 					</Col>
 				</Fragment>
@@ -587,16 +596,20 @@ function GeneralSettings({
 			{Element}
 			<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
 				<ErrorTextContainer>
-					<TextToolTip
-						{...{
-							text: `More details on how to set retention period`,
-							url: 'https://signoz.io/docs/userguide/retention-period/',
-						}}
-					/>
+					{!isCloudUserVal && (
+						<TextToolTip
+							{...{
+								text: `More details on how to set retention period`,
+								url: 'https://signoz.io/docs/userguide/retention-period/',
+							}}
+						/>
+					)}
 					{errorText && <ErrorText>{errorText}</ErrorText>}
 				</ErrorTextContainer>
 
 				<Row justify="start">{renderConfig}</Row>
+
+				{isCloudUserVal && <GeneralSettingsCloud />}
 			</Col>
 		</>
 	);

frontend/src/container/GeneralSettings/Retention.tsx

@@ -8,6 +8,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import { isCloudUser } from 'utils/app';
 
 import {
 	Input,
@@ -85,9 +86,13 @@ function Retention({
 			func(null);
 		}
 	};
+
 	if (hide) {
 		return null;
 	}
+
+	const isCloudUserVal = isCloudUser();
+
 	return (
 		<RetentionContainer>
 			<Row justify="space-between">
@@ -98,12 +103,14 @@ function Retention({
 					<RetentionFieldInputContainer>
 						<Input
 							value={selectedValue && selectedValue >= 0 ? selectedValue : ''}
+							disabled={isCloudUserVal}
 							onChange={(e): void => onChangeHandler(e, setSelectedValue)}
 							style={{ width: 75 }}
 						/>
 						<Select
 							value={selectedTimeUnit}
 							onChange={currentSelectedOption}
+							disabled={isCloudUserVal}
 							style={{ width: 100 }}
 						>
 							{menuItems}

frontend/src/container/GeneralSettings/StatusMessage.tsx

@@ -1,6 +1,6 @@
 import { green, orange, volcano } from '@ant-design/colors';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Card, Col, Row } from 'antd';
+import { Card, Col } from 'antd';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TStatus } from 'types/api/settings/getRetention';
@@ -43,9 +43,16 @@ function StatusMessage({
 				width: '100%',
 			}}
 		>
-			<Row style={{ gap: '1rem', alignItems: 'center', justifyContent: 'center' }}>
+			<div
+				style={{
+					display: 'flex',
+					gap: '1rem',
+					alignItems: 'center',
+					justifyContent: 'center',
+				}}
+			>
 				<Col xs={1}>
-					<InfoCircleOutlined style={{ fontSize: '1.5rem' }} />
+					<InfoCircleOutlined style={{ fontSize: '1rem' }} />
 				</Col>
 
 				<Col
@@ -56,7 +63,7 @@ function StatusMessage({
 				>
 					{statusMessage}
 				</Col>
-			</Row>
+			</div>
 		</Card>
 	) : null;
 }

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

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

frontend/src/container/OrganizationSettings/Members/index.tsx

@@ -231,7 +231,7 @@ function UserFunction({
 
 function Members(): JSX.Element {
 	const { org } = useSelector<AppState, AppReducer>((state) => state.app);
-	const { status, data } = useQuery({
+	const { status, data, isLoading } = useQuery({
 		queryFn: () =>
 			getOrgUser({
 				orgId: (org || [])[0].id,
@@ -308,7 +308,12 @@ function Members(): JSX.Element {
 
 	return (
 		<Space direction="vertical" size="middle">
-			<Typography.Title level={3}>Members</Typography.Title>
+			<Typography.Title level={3}>
+				Members{' '}
+				{!isLoading && dataSource && (
+					<div className="members-count"> ({dataSource.length}) </div>
+				)}
+			</Typography.Title>
 			<ResizeTable
 				columns={columns}
 				tableLayout="fixed"

frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx

@@ -271,7 +271,12 @@ function PendingInvitesContainer(): JSX.Element {
 
 			<Space direction="vertical" size="middle">
 				<TitleWrapper>
-					<Typography.Title level={3}>{t('pending_invites')}</Typography.Title>
+					<Typography.Title level={3}>
+						{t('pending_invites')}
+						{getPendingInvitesResponse.status !== 'loading' && dataSource && (
+							<div className="members-count"> ({dataSource.length})</div>
+						)}
+					</Typography.Title>
 
 					<Space>
 						<Typography.Text type="warning">

frontend/src/pages/Settings/utils.ts

@@ -5,7 +5,6 @@ import { isCloudUser } from 'utils/app';
 import {
 	alertChannels,
 	generalSettings,
-	generalSettingsCloud,
 	ingestionSettings,
 	organizationSettings,
 } from './config';
@@ -23,11 +22,12 @@ export const getRoutes = (
 	if (isCloudUser()) {
 		settings.push(...ingestionSettings(t));
 		settings.push(...alertChannels(t));
-		settings.push(...generalSettingsCloud(t));
 	} else {
 		settings.push(...alertChannels(t));
 		settings.push(...generalSettings(t));
 	}
 
+	settings.push(...generalSettings(t));
+
 	return settings;
 };

frontend/src/styles.scss

@@ -218,3 +218,9 @@ body {
 		gap: 8px;
 	}
 }
+
+.members-count {
+	display: inline-block;
+	margin-left: 8px;
+	margin-right: 8px;
+}