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>

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);
+			}
 		}
 	}
 

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}

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>

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',
 						}}
 					/>
 

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>

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"

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

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"
 							>

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"
                 >

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>

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -66,6 +66,7 @@ export default function QBEntityOptions({
 				<div className="left-col-items">
 					<div className="options periscope-btn-group">
 						<Button.Group>
+							<Tooltip title={isCollapsed ? 'Uncollapse' : 'Collapse'}>
 								<Button
 									value="search"
 									className="periscope-btn collapse"
@@ -73,6 +74,8 @@ export default function QBEntityOptions({
 								>
 									{isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
 								</Button>
+							</Tooltip>
+							<Tooltip title={entityData.disabled ? 'Show' : 'Hide'}>
 								<Button
 									value="query-builder"
 									className="periscope-btn visibility-toggle"
@@ -81,6 +84,7 @@ export default function QBEntityOptions({
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
+							</Tooltip>
 
 							{entityType === 'query' && (
 								<Tooltip title={`Clone Query ${entityData.queryName}`}>

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">
+												<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">
+													<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">
+									<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%' }}>
+							<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>

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 && functions.length >= 3 ? (
-						? 'Functions are in early access. You can add a maximum of 3 function as of now.'
+						'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"
 			>

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;

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..."