feat: added tooltips for facing issue btn

SigNoz · May 1, 2024 · 5f75293 · 5f75293
1 parent 241edcb
commit 5f75293
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 13 deletions.
diff --git a/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx b/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx
@@ -1,6 +1,6 @@
 import './FacingIssueBtn.style.scss';
 
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
@@ -15,6 +15,7 @@ export interface FacingIssueBtnProps {
 	message?: string;
 	buttonText?: string;
 	className?: string;
+	onHoverText?: string;
 }
 
 function FacingIssueBtn({
@@ -23,6 +24,7 @@ function FacingIssueBtn({
 	message = '',
 	buttonText = '',
 	className = '',
+	onHoverText = '',
 }: FacingIssueBtnProps): JSX.Element | null {
 	const handleFacingIssuesClick = (): void => {
 		logEvent(eventName, attributes);
@@ -37,13 +39,15 @@ function FacingIssueBtn({
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
 		<div className="facing-issue-button">
-			<Button
-				className={cx('periscope-btn', 'facing-issue-button', className)}
-				onClick={handleFacingIssuesClick}
-				icon={<HelpCircle size={14} />}
-			>
-				{buttonText || 'Facing issues?'}
-			</Button>
+			<Tooltip title={onHoverText} autoAdjustOverflow>
+				<Button
+					className={cx('periscope-btn', 'facing-issue-button', className)}
+					onClick={handleFacingIssuesClick}
+					icon={<HelpCircle size={14} />}
+				>
+					{buttonText || 'Facing issues?'}
+				</Button>
+			</Tooltip>
 		</div>
 	) : null;
 }
@@ -52,6 +56,7 @@ FacingIssueBtn.defaultProps = {
 	message: '',
 	buttonText: '',
 	className: '',
+	onHoverText: '',
 };
 
 export default FacingIssueBtn;
diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx
@@ -588,7 +588,7 @@ function FormAlertRules({
 						eventName="Alert: Facing Issues in alert"
 						buttonText="Need help with this alert?"
 						message={alertHelpMessage(alertDef, ruleId)}
-						// onHover: Click here to get help with this alert
+						onHoverText="Click here to get help with this alert"
 					/>
 				</Col>
 			</PanelContainer>

diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -495,7 +495,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 					eventName="Dashboard: Facing Issues in dashboard"
 					buttonText="Need help with this dashboard?"
 					message={dashboardHelpMessage(data, selectedDashboard)}
-					// onHover: Click here to get help for this dashboard
+					onHoverText="Click here to get help for this dashboard"
 				/>
 				<ButtonContainer>
 					<Tooltip title="Open in Full Screen">

diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx
@@ -366,8 +366,8 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					eventName: 'Alert: Facing Issues in alert',
 					buttonText: 'Facing issues with alerts?',
 					message: listAlertMessage,
+					onHoverText: 'Click here to get help with alerts',
 				}}
-				// onHover: Click here to get help with alerts
 			/>
 		</>
 	);

diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -393,7 +393,7 @@ function DashboardsList(): JSX.Element {
 						eventName: 'Dashboard: Facing Issues in dashboard',
 						buttonText: 'Facing issues with dashboards?',
 						message: dashboardListMessage,
-						// onHover: Click here to get help with dashboards
+						onHoverText: 'Click here to get help with dashboards',
 					}}
 				/>
 			</TableContainer>

diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx
@@ -418,7 +418,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 					eventName="Dashboard: Facing Issues in dashboard"
 					buttonText="Need help with this chart?"
 					message={chartHelpMessage(selectedDashboard, graphType)}
-					// onHover: Click here to get help in creating chart
+					onHoverText="Click here to get help in creating chart"
 				/>
 				<ButtonContainer>
 					{isSaveDisabled && (