From 4887a1d8dd9f85f457e0a6176bd206adc8d2dfc2 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Wed, 22 May 2024 16:00:49 +0530
Subject: [PATCH] feat: added helper text, learn-more and doc-link (#5024)

* feat: added helper text, learn-more and doc-link

* feat: added collapse and uncollapse text on hover

* feat: added learn-more doc link for trace & logs explorer

* feat: added learn-more doc link

* feat: added learn-more doc link

* chore: added alert links and minor updates

* feat: added learn-more doc link

---------

Co-authored-by: makeavish <makeavish786@gmail.com>
---
 .../ExplorerOptions.styles.scss               |   8 ++
 .../ExplorerOptions/ExplorerOptions.tsx       |  23 ++++
 .../FormAlertRules/UserGuide/index.tsx        |   2 +-
 .../container/ListAlertRules/ListAlert.tsx    |   3 +-
 .../ListOfDashboard/DashboardsList.tsx        |   3 +-
 .../LeftContainer/QuerySection/index.tsx      |   5 +-
 .../Layouts/Pipeline/CreatePipelineButton.tsx |   2 +-
 .../PipelineListsView/PipelineListsView.tsx   |   2 +-
 .../PipelinePageLayout.test.tsx.snap          |   2 +-
 .../container/QueryBuilder/QueryBuilder.tsx   |  36 +++++-
 .../QBEntityOptions/QBEntityOptions.tsx       |  34 ++---
 .../QueryBuilder/components/Query/Query.tsx   | 117 ++++++++++++++----
 .../QueryFunctions/QueryFunctions.tsx         |  21 +++-
 .../src/pages/SaveView/SaveView.styles.scss   |   3 +
 frontend/src/pages/SaveView/index.tsx         |   9 +-
 15 files changed, 217 insertions(+), 53 deletions(-)

diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
index 7f6ac6a4dd..8af1e4ad0a 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@@ -64,6 +64,10 @@
 
 	.view-options,
 	.actions {
+		.info-icon {
+			padding: 8px;
+		}
+
 		.hidden {
 			display: none;
 		}
@@ -252,6 +256,10 @@
 				color: var(--bg-ink-200);
 				background-color: var(--bg-vanilla-300);
 			}
+
+			.info-icon {
+				color: var(--bg-ink-200);
+			}
 		}
 	}
 
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
index 0e9fd3704b..7253b45b94 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import './ExplorerOptions.styles.scss';
 
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
@@ -402,6 +403,28 @@ function ExplorerOptions({
 						</Button>
 					</div>
 					<div className="actions">
+						<Tooltip
+							title={
+								<div>
+									{sourcepage === DataSource.LOGS
+										? 'Learn more about Logs explorer '
+										: 'Learn more about Traces explorer '}
+									<Typography.Link
+										href={
+											sourcepage === DataSource.LOGS
+												? 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar'
+												: 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar'
+										}
+										target="_blank"
+									>
+										{' '}
+										here
+									</Typography.Link>{' '}
+								</div>
+							}
+						>
+							<InfoCircleOutlined className="info-icon" />
+						</Tooltip>
 						<Tooltip title="Hide">
 							<Button
 								disabled={disabled}
diff --git a/frontend/src/container/FormAlertRules/UserGuide/index.tsx b/frontend/src/container/FormAlertRules/UserGuide/index.tsx
index 86992d7226..ab4c091a5e 100644
--- a/frontend/src/container/FormAlertRules/UserGuide/index.tsx
+++ b/frontend/src/container/FormAlertRules/UserGuide/index.tsx
@@ -147,7 +147,7 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
 				<Col flex="none">
 					<TextToolTip
 						text={t('user_tooltip_more_help')}
-						url="https://signoz.io/docs/userguide/alerts-management/#create-alert-rules"
+						url="https://signoz.io/docs/userguide/alerts-management/?utm_source=product&utm_medium=create-alert#creating-a-new-alert-in-signoz"
 					/>
 				</Col>
 			</Row>
diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx
index 4b7c2f4cb9..39465e28a8 100644
--- a/frontend/src/container/ListAlertRules/ListAlert.tsx
+++ b/frontend/src/container/ListAlertRules/ListAlert.tsx
@@ -338,7 +338,8 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					<TextToolTip
 						{...{
 							text: `More details on how to create alerts`,
-							url: 'https://signoz.io/docs/userguide/alerts-management/',
+							url:
+								'https://signoz.io/docs/alerts/?utm_source=product&utm_medium=list-alerts',
 						}}
 					/>
 
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index ac3b835092..a0a31c3142 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -322,7 +322,8 @@ function DashboardsList(): JSX.Element {
 							<TextToolTip
 								{...{
 									text: `More details on how to create dashboards`,
-									url: 'https://signoz.io/docs/userguide/dashboards',
+									url:
+										'https://signoz.io/docs/userguide/dashboards?utm_source=product&utm_medium=list-dashboard',
 								}}
 							/>
 						</ButtonContainer>
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
index 82ac79bc59..11f01b402f 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -235,7 +235,10 @@ function QuerySection({
 				onChange={handleQueryCategoryChange}
 				tabBarExtraContent={
 					<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-						<TextToolTip text="This will temporarily save the current query and graph state. This will persist across tab change" />
+						<TextToolTip
+							text="This will temporarily save the current query and graph state. This will persist across tab change"
+							url="https://signoz.io/docs/userguide/query-builder?utm_source=product&utm_medium=query-builder"
+						/>
 						<Button
 							loading={queryResponse.isFetching}
 							type="primary"
diff --git a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
index cf8aec2be9..23eaf335fe 100644
--- a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
+++ b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
@@ -43,7 +43,7 @@ function CreatePipelineButton({
 		<ButtonContainer>
 			<TextToolTip
 				text={t('learn_more')}
-				url="https://signoz.io/docs/logs-pipelines/introduction/"
+				url="https://signoz.io/docs/logs-pipelines/introduction/?utm_source=product&utm_medium=pipelines-tab"
 			/>
 			{isAddNewPipelineVisible && (
 				<CustomButton
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
index c4494569df..6f846e21cb 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
@@ -66,7 +66,7 @@ function PipelinesListEmptyState(): JSX.Element {
 						<Typography>
 							{t('learn_more')}&nbsp;
 							<a
-								href="https://signoz.io/docs/logs-pipelines/introduction/"
+								href="https://signoz.io/docs/logs-pipelines/introduction/?utm_source=product&utm_medium=pipelines-tab"
 								target="_blank"
 								rel="noreferrer"
 							>
diff --git a/frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap b/frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap
index ba78fd6ded..308b09aebc 100644
--- a/frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap
+++ b/frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap
@@ -119,7 +119,7 @@ exports[`PipelinePage container test should render PipelinePageLayout section 1`
               >
                 learn_more 
                 <a
-                  href="https://signoz.io/docs/logs-pipelines/introduction/"
+                  href="https://signoz.io/docs/logs-pipelines/introduction/?utm_source=product&utm_medium=pipelines-tab"
                   rel="noreferrer"
                   target="_blank"
                 >
diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.tsx b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
index f95049a2d1..844f9e3ab3 100644
--- a/frontend/src/container/QueryBuilder/QueryBuilder.tsx
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
@@ -1,6 +1,6 @@
 import './QueryBuilder.styles.scss';
 
-import { Button, Col, Divider, Row, Tooltip } from 'antd';
+import { Button, Col, Divider, Row, Tooltip, Typography } from 'antd';
 import {
 	MAX_FORMULAS,
 	MAX_QUERIES,
@@ -133,13 +133,43 @@ export const QueryBuilder = memo(function QueryBuilder({
 			{!isListViewPanel && (
 				<div className="new-query-formula-buttons-container">
 					<Button.Group>
-						<Tooltip title="Add Query">
+						<Tooltip
+							title={
+								<div style={{ textAlign: 'center' }}>
+									Add New Query
+									<Typography.Link
+										href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#multiple-queries-and-functions"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
+							}
+						>
 							<Button disabled={isDisabledQueryButton} onClick={addNewBuilderQuery}>
 								<DatabaseZap size={12} />
 							</Button>
 						</Tooltip>
 
-						<Tooltip title="Add Formula">
+						<Tooltip
+							title={
+								<div style={{ textAlign: 'center' }}>
+									Add New Formula
+									<Typography.Link
+										href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#multiple-queries-and-functions"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
+							}
+						>
 							<Button disabled={isDisabledFormulaButton} onClick={addNewFormula}>
 								<Sigma size={12} />
 							</Button>
diff --git a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
index a2ec473921..652518f50d 100644
--- a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
+++ b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
@@ -66,21 +66,25 @@ export default function QBEntityOptions({
 				<div className="left-col-items">
 					<div className="options periscope-btn-group">
 						<Button.Group>
-							<Button
-								value="search"
-								className="periscope-btn collapse"
-								onClick={onCollapseEntity}
-							>
-								{isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
-							</Button>
-							<Button
-								value="query-builder"
-								className="periscope-btn visibility-toggle"
-								onClick={onToggleVisibility}
-								disabled={isListViewPanel}
-							>
-								{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
-							</Button>
+							<Tooltip title={isCollapsed ? 'Uncollapse' : 'Collapse'}>
+								<Button
+									value="search"
+									className="periscope-btn collapse"
+									onClick={onCollapseEntity}
+								>
+									{isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+								</Button>
+							</Tooltip>
+							<Tooltip title={entityData.disabled ? 'Show' : 'Hide'}>
+								<Button
+									value="query-builder"
+									className="periscope-btn visibility-toggle"
+									onClick={onToggleVisibility}
+									disabled={isListViewPanel}
+								>
+									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
+								</Button>
+							</Tooltip>
 
 							{entityType === 'query' && (
 								<Tooltip title={`Clone Query ${entityData.queryName}`}>
diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
index fb8b0e1561..074443364e 100644
--- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import './Query.styles.scss';
 
-import { Col, Input, Row } from 'antd';
+import { Col, Input, Row, Tooltip, Typography } from 'antd';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 // ** Constants
 import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
@@ -367,11 +367,29 @@ export const Query = memo(function Query({
 									<Row gutter={[11, 5]}>
 										{version && version === 'v3' && (
 											<Col flex="5.93rem">
-												<OperatorsSelect
-													value={query.aggregateOperator}
-													onChange={handleChangeOperator}
-													operators={operators}
-												/>
+												<Tooltip
+													title={
+														<div style={{ textAlign: 'center' }}>
+															Select Aggregate Operator
+															<Typography.Link
+																className="learn-more"
+																href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
+																target="_blank"
+																style={{ textDecoration: 'underline' }}
+															>
+																{' '}
+																<br />
+																Learn more
+															</Typography.Link>
+														</div>
+													}
+												>
+													<OperatorsSelect
+														value={query.aggregateOperator}
+														onChange={handleChangeOperator}
+														operators={operators}
+													/>
+												</Tooltip>
 											</Col>
 										)}
 
@@ -388,12 +406,30 @@ export const Query = memo(function Query({
 											Array.isArray(operators) &&
 											operators.length > 0 && (
 												<Col flex="5.93rem">
-													<OperatorsSelect
-														value={query.aggregateOperator}
-														onChange={handleChangeOperator}
-														operators={operators}
-														disabled={disableOperatorSelector}
-													/>
+													<Tooltip
+														title={
+															<div style={{ textAlign: 'center' }}>
+																Select Aggregate Operator
+																<Typography.Link
+																	className="learn-more"
+																	href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
+																	target="_blank"
+																	style={{ textDecoration: 'underline' }}
+																>
+																	{' '}
+																	<br />
+																	Learn more
+																</Typography.Link>
+															</div>
+														}
+													>
+														<OperatorsSelect
+															value={query.aggregateOperator}
+															onChange={handleChangeOperator}
+															operators={operators}
+															disabled={disableOperatorSelector}
+														/>
+													</Tooltip>
 												</Col>
 											)}
 									</Row>
@@ -422,11 +458,28 @@ export const Query = memo(function Query({
 						<Col span={11}>
 							<Row gutter={[11, 5]}>
 								<Col flex="5.93rem">
-									<OperatorsSelect
-										value={query.aggregateOperator}
-										onChange={handleChangeOperator}
-										operators={operators}
-									/>
+									<Tooltip
+										title={
+											<div style={{ textAlign: 'center' }}>
+												Select Aggregate Operator
+												<Typography.Link
+													href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
+													target="_blank"
+													style={{ textDecoration: 'underline' }}
+												>
+													{' '}
+													<br />
+													Learn more
+												</Typography.Link>
+											</div>
+										}
+									>
+										<OperatorsSelect
+											value={query.aggregateOperator}
+											onChange={handleChangeOperator}
+											operators={operators}
+										/>
+									</Tooltip>
 								</Col>
 								<Col flex="1 1 12.5rem">
 									<AggregatorFilter
@@ -520,12 +573,30 @@ export const Query = memo(function Query({
 					)}
 					{panelType !== PANEL_TYPES.LIST && panelType !== PANEL_TYPES.TRACE && (
 						<Row style={{ width: '100%' }}>
-							<Input
-								onChange={handleChangeQueryLegend}
-								size="middle"
-								value={query.legend}
-								addonBefore="Legend Format"
-							/>
+							<Tooltip
+								placement="right"
+								title={
+									<div style={{ textAlign: 'center' }}>
+										Name of legend
+										<Typography.Link
+											style={{ textDecoration: 'underline' }}
+											href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#legend-format"
+											target="_blank"
+										>
+											{' '}
+											<br />
+											Learn more
+										</Typography.Link>
+									</div>
+								}
+							>
+								<Input
+									onChange={handleChangeQueryLegend}
+									size="middle"
+									value={query.legend}
+									addonBefore="Legend Format"
+								/>
+							</Tooltip>
 						</Row>
 					)}
 				</Row>
diff --git a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
index 7dfdd99c9c..017047b507 100644
--- a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
+++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
@@ -1,6 +1,6 @@
 import './QueryFunctions.styles.scss';
 
-import { Button, Tooltip } from 'antd';
+import { Button, Tooltip, Typography } from 'antd';
 import cx from 'classnames';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { cloneDeep, pullAt } from 'lodash-es';
@@ -180,9 +180,22 @@ export default function QueryFunctions({
 
 			<Tooltip
 				title={
-					functions && functions.length >= 3
-						? 'Functions are in early access. You can add a maximum of 3 function as of now.'
-						: ''
+					functions && functions.length >= 3 ? (
+						'Functions are in early access. You can add a maximum of 3 function as of now.'
+					) : (
+						<div style={{ textAlign: 'center' }}>
+							Add new function
+							<Typography.Link
+								style={{ textDecoration: 'underline' }}
+								href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#functions-for-extended-data-analysis"
+								target="_blank"
+							>
+								{' '}
+								<br />
+								Learn more
+							</Typography.Link>
+						</div>
+					)
 				}
 				placement="right"
 			>
diff --git a/frontend/src/pages/SaveView/SaveView.styles.scss b/frontend/src/pages/SaveView/SaveView.styles.scss
index 292a0b8d06..1e4b7bf0f6 100644
--- a/frontend/src/pages/SaveView/SaveView.styles.scss
+++ b/frontend/src/pages/SaveView/SaveView.styles.scss
@@ -25,6 +25,9 @@
 			line-height: 20px; /* 142.857% */
 			letter-spacing: -0.07px;
 		}
+		.learn-more {
+			font-size: 14px;
+		}
 
 		.ant-input-affix-wrapper {
 			margin-top: 16px;
diff --git a/frontend/src/pages/SaveView/index.tsx b/frontend/src/pages/SaveView/index.tsx
index 2ba5535fc4..86a511291e 100644
--- a/frontend/src/pages/SaveView/index.tsx
+++ b/frontend/src/pages/SaveView/index.tsx
@@ -282,7 +282,14 @@ function SaveView(): JSX.Element {
 			<div className="save-view-content">
 				<Typography.Title className="title">Views</Typography.Title>
 				<Typography.Text className="subtitle">
-					Manage your saved views for {ROUTES_VS_SOURCEPAGE[pathname]}.
+					Manage your saved views for {ROUTES_VS_SOURCEPAGE[pathname]}.{' '}
+					<Typography.Link
+						className="learn-more"
+						href="https://signoz.io/docs/product-features/saved-view/?utm_source=product&utm_medium=views-tab"
+						target="_blank"
+					>
+						Learn more
+					</Typography.Link>
 				</Typography.Text>
 				<Input
 					placeholder="Search for views..."