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

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;

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>

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}

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"

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 && (