From 522e73b48e60bb77b15f4f7f2c77f055441035d1 Mon Sep 17 00:00:00 2001
From: Vishal Sharma <makeavish786@gmail.com>
Date: Fri, 26 Jul 2024 18:51:48 +0530
Subject: [PATCH] chore: move facing issues button in dashboards and disable
 intercom ping (#5571)

* chore: move facing issues button in dashboards and disable intercom ping

* chore: review comment
---
 .../facingIssueBtn/FacingIssueBtn.tsx         |  5 +++-
 .../ListOfDashboard/DashboardsList.tsx        |  3 ++-
 .../DashboardDescription/index.tsx            | 23 ++++++++++---------
 .../LeftContainer/QuerySection/index.tsx      | 16 +++++++++++++
 frontend/src/container/NewWidget/index.tsx    | 16 -------------
 5 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx b/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx
index 2a4b07aa22..093c2b8f02 100644
--- a/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx
+++ b/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx
@@ -16,6 +16,7 @@ export interface FacingIssueBtnProps {
 	buttonText?: string;
 	className?: string;
 	onHoverText?: string;
+	intercomMessageDisabled?: boolean;
 }
 
 function FacingIssueBtn({
@@ -25,11 +26,12 @@ function FacingIssueBtn({
 	buttonText = '',
 	className = '',
 	onHoverText = '',
+	intercomMessageDisabled = false,
 }: FacingIssueBtnProps): JSX.Element | null {
 	const handleFacingIssuesClick = (): void => {
 		logEvent(eventName, attributes);
 
-		if (window.Intercom) {
+		if (window.Intercom && !intercomMessageDisabled) {
 			window.Intercom('showNewMessage', defaultTo(message, ''));
 		}
 	};
@@ -62,6 +64,7 @@ FacingIssueBtn.defaultProps = {
 	buttonText: '',
 	className: '',
 	onHoverText: '',
+	intercomMessageDisabled: false,
 };
 
 export default FacingIssueBtn;
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 05847cebde..17b6fe0863 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -653,8 +653,9 @@ function DashboardsList(): JSX.Element {
 							}}
 							eventName="Dashboard: Facing Issues in dashboard"
 							message={dashboardListMessage}
-							buttonText="Facing issues with dashboards?"
+							buttonText="Need help with dashboards?"
 							onHoverText="Click here to get help with dashboards"
+							intercomMessageDisabled
 						/>
 					</Flex>
 				</div>
diff --git a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
index 60e9e90db8..d3c959ca8b 100644
--- a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
+++ b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
@@ -300,17 +300,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 						{title}
 					</Button>
 				</section>
-				<FacingIssueBtn
-					attributes={{
-						uuid: selectedDashboard?.uuid,
-						title: updatedTitle,
-						screen: 'Dashboard Details',
-					}}
-					eventName="Dashboard: Facing Issues in dashboard"
-					message={dashboardHelpMessage(selectedDashboard?.data, selectedDashboard)}
-					buttonText="Facing issues with dashboards?"
-					onHoverText="Click here to get help with dashboard details"
-				/>
 			</div>
 			<section className="dashbord-details">
 				<div className="left-section">
@@ -323,6 +312,18 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					{isDashboardLocked && <LockKeyhole size={14} />}
 				</div>
 				<div className="right-section">
+					<FacingIssueBtn
+						attributes={{
+							uuid: selectedDashboard?.uuid,
+							title: updatedTitle,
+							screen: 'Dashboard Details',
+						}}
+						eventName="Dashboard: Facing Issues in dashboard"
+						message={dashboardHelpMessage(selectedDashboard?.data, selectedDashboard)}
+						buttonText="Need help with this dashboard?"
+						onHoverText="Click here to get help with dashboard"
+						intercomMessageDisabled
+					/>
 					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
 					<Popover
 						open={isDashboardSettingsOpen}
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
index 2d682b1f06..a02fbc9ef4 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -4,6 +4,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import PromQLIcon from 'assets/Dashboard/PromQl';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import TextToolTip from 'components/TextToolTip';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
@@ -236,6 +237,21 @@ function QuerySection({
 				onChange={handleQueryCategoryChange}
 				tabBarExtraContent={
 					<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+						<FacingIssueBtn
+							attributes={{
+								uuid: selectedDashboard?.uuid,
+								title: selectedDashboard?.data.title,
+								screen: 'Dashboard widget',
+								panelType: selectedGraph,
+								widgetId: query.id,
+								queryType: currentQuery.queryType,
+							}}
+							eventName="Dashboard: Facing Issues in dashboard"
+							buttonText="Need help with this chart?"
+							// message={chartHelpMessage(selectedDashboard, graphType)}
+							onHoverText="Click here to get help with this dashboard widget"
+							intercomMessageDisabled
+						/>
 						<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"
diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx
index 70d667452e..c4a1bee824 100644
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -4,8 +4,6 @@ import './NewWidget.styles.scss';
 import { WarningOutlined } from '@ant-design/icons';
 import { Button, Flex, Modal, Space, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
-import { chartHelpMessage } from 'components/facingIssueBtn/util';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
@@ -608,20 +606,6 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 						<Typography.Text className="configure-panel">
 							Configure panel
 						</Typography.Text>
-						<FacingIssueBtn
-							attributes={{
-								uuid: selectedDashboard?.uuid,
-								title: selectedDashboard?.data.title,
-								screen: 'Dashboard widget',
-								panelType: graphType,
-								widgetId: query.get('widgetId'),
-								queryType: currentQuery.queryType,
-							}}
-							eventName="Dashboard: Facing Issues in dashboard"
-							message={chartHelpMessage(selectedDashboard, graphType)}
-							buttonText="Facing issues with dashboards?"
-							onHoverText="Click here to get help with dashboard widget"
-						/>
 					</Flex>
 				</div>
 				{isSaveDisabled && (