feat: add learn more urls to ingestion settings page (#5526)

* feat: add learn more urls to ingestion settings page

* feat: enable multi ingestion settins for editors, add basic test cases

frontend/src/components/Tags/Tags.tsx

@@ -5,7 +5,6 @@ import { Button } from 'antd';
 import { Tag } from 'antd/lib';
 import Input from 'components/Input';
 import { Check, X } from 'lucide-react';
-import { TweenOneGroup } from 'rc-tween-one';
 import React, { Dispatch, SetStateAction, useState } from 'react';
 
 function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
@@ -46,41 +45,19 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 		func(value);
 	};
 
-	const forMap = (tag: string): React.ReactElement => (
-		<span key={tag} style={{ display: 'inline-block' }}>
-			<Tag
-				closable
-				onClose={(e): void => {
-					e.preventDefault();
-					handleClose(tag);
-				}}
-			>
-				{tag}
-			</Tag>
-		</span>
-	);
-
-	const tagChild = tags.map(forMap);
-
-	const renderTagsAnimated = (): React.ReactElement => (
-		<TweenOneGroup
-			appear={false}
-			className="tags"
-			enter={{ scale: 0.8, opacity: 0, type: 'from', duration: 100 }}
-			leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
-			onEnd={(e): void => {
-				if (e.type === 'appear' || e.type === 'enter') {
-					(e.target as any).style = 'display: inline-block';
-				}
-			}}
-		>
-			{tagChild}
-		</TweenOneGroup>
-	);
-
 	return (
 		<div className="tags-container">
-			{renderTagsAnimated()}
+			{tags.map<React.ReactNode>((tag) => (
+				<Tag
+					key={tag}
+					closable
+					style={{ userSelect: 'none' }}
+					onClose={(): void => handleClose(tag)}
+				>
+					<span>{tag}</span>
+				</Tag>
+			))}
+
 			{inputVisible && (
 				<div className="add-tag-container">
 					<Input

frontend/src/container/IngestionSettings/IngestionSettings.styles.scss

@@ -940,3 +940,50 @@
 		border-color: var(--bg-vanilla-300) !important;
 	}
 }
+
+.mt-8 {
+	margin-top: 8px;
+}
+
+.mt-12 {
+	margin-top: 12px;
+}
+
+.mt-24 {
+	margin-top: 24px;
+}
+
+.mb-24 {
+	margin-bottom: 24px;
+}
+
+.ingestion-setup-details-links {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 24px;
+	padding: 12px;
+	border-radius: 4px;
+	background: rgba(113, 144, 249, 0.1);
+	color: var(--bg-robin-300, #95acfb);
+
+	.learn-more {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		text-decoration: underline;
+
+		color: var(--bg-robin-300, #95acfb);
+	}
+}
+
+.lightMode {
+	.ingestion-setup-details-links {
+		background: rgba(113, 144, 249, 0.1);
+		color: var(--bg-robin-500);
+
+		.learn-more {
+			color: var(--bg-robin-500);
+		}
+	}
+}

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -35,10 +35,12 @@ import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionK
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import {
+	ArrowUpRight,
 	CalendarClock,
 	Check,
 	Copy,
 	Infinity,
+	Info,
 	Minus,
 	PenLine,
 	Plus,
@@ -875,10 +877,35 @@ function MultiIngestionSettings(): JSX.Element {
 	return (
 		<div className="ingestion-key-container">
 			<div className="ingestion-key-content">
+				<div className="ingestion-setup-details-links">
+					<Info size={14} />
+
+					<span>
+						Find your ingestion URL and learn more about sending data to SigNoz{' '}
+						<a
+							href="https://signoz.io/docs/ingestion/signoz-cloud/overview/"
+							target="_blank"
+							className="learn-more"
+							rel="noreferrer"
+						>
+							here <ArrowUpRight size={14} />
+						</a>
+					</span>
+				</div>
+
 				<header>
 					<Typography.Title className="title"> Ingestion Keys </Typography.Title>
 					<Typography.Text className="subtitle">
-						Create and manage ingestion keys for the SigNoz Cloud
+						Create and manage ingestion keys for the SigNoz Cloud{' '}
+						<a
+							href="https://signoz.io/docs/ingestion/signoz-cloud/keys/"
+							target="_blank"
+							className="learn-more"
+							rel="noreferrer"
+						>
+							{' '}
+							Learn more <ArrowUpRight size={14} />
+						</a>
 					</Typography.Text>
 				</header>
 

frontend/src/container/IngestionSettings/__tests__/MultiIngestionSettings.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from 'tests/test-utils';
+
+import MultiIngestionSettings from '../MultiIngestionSettings';
+
+describe('MultiIngestionSettings Page', () => {
+	beforeEach(() => {
+		render(<MultiIngestionSettings />);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders MultiIngestionSettings page without crashing', () => {
+		expect(
+			screen.getByText(
+				'Find your ingestion URL and learn more about sending data to SigNoz',
+			),
+		).toBeInTheDocument();
+
+		expect(screen.getByText('Ingestion Keys')).toBeInTheDocument();
+
+		expect(
+			screen.getByText('Create and manage ingestion keys for the SigNoz Cloud'),
+		).toBeInTheDocument();
+
+		const overviewLink = screen.getByRole('link', { name: /here/i });
+		expect(overviewLink).toHaveAttribute(
+			'href',
+			'https://signoz.io/docs/ingestion/signoz-cloud/overview/',
+		);
+		expect(overviewLink).toHaveAttribute('target', '_blank');
+		expect(overviewLink).toHaveClass('learn-more');
+		expect(overviewLink).toHaveAttribute('rel', 'noreferrer');
+
+		const aboutKeyslink = screen.getByRole('link', { name: /Learn more/i });
+		expect(aboutKeyslink).toHaveAttribute(
+			'href',
+			'https://signoz.io/docs/ingestion/signoz-cloud/keys/',
+		);
+		expect(aboutKeyslink).toHaveAttribute('target', '_blank');
+		expect(aboutKeyslink).toHaveClass('learn-more');
+		expect(aboutKeyslink).toHaveAttribute('rel', 'noreferrer');
+	});
+});

frontend/src/pages/Settings/utils.ts

@@ -26,7 +26,10 @@ export const getRoutes = (
 		settings.push(...organizationSettings(t));
 	}
 
-	if (isGatewayEnabled && userRole === USER_ROLES.ADMIN) {
+	if (
+		isGatewayEnabled &&
+		(userRole === USER_ROLES.ADMIN || userRole === USER_ROLES.EDITOR)
+	) {
 		settings.push(...multiIngestionSettings(t));
 	}