From 1ce36c8344541bbc453c5e063f949b9d6453e903 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Tue, 4 Jun 2024 12:40:20 +0530
Subject: [PATCH] feat: added facing issues btn in new dashboard revamp (#5131)

---
 .../ListOfDashboard/DashboardsList.tsx        | 20 ++++-
 .../DashboardDescription/index.tsx            | 74 ++++++++++++-------
 frontend/src/container/NewWidget/index.tsx    | 26 ++++++-
 3 files changed, 88 insertions(+), 32 deletions(-)

diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index d1b859696a..f44b71e2bd 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -8,6 +8,7 @@ import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
 	Dropdown,
+	Flex,
 	Input,
 	MenuProps,
 	Modal,
@@ -23,6 +24,8 @@ import { TableProps } from 'antd/lib';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
 import cx from 'classnames';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { dashboardListMessage } from 'components/facingIssueBtn/util';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import ROUTES from 'constants/routes';
 import { Base64Icons } from 'container/NewDashboard/DashboardSettings/General/utils';
@@ -599,9 +602,20 @@ function DashboardsList(): JSX.Element {
 			<div className="dashboards-list-view-content">
 				<div className="dashboards-list-title-container">
 					<Typography.Title className="title">Dashboards</Typography.Title>
-					<Typography.Text className="subtitle">
-						Create and manage dashboards for your workspace.
-					</Typography.Text>
+					<Flex align="center" justify="space-between">
+						<Typography.Text className="subtitle">
+							Create and manage dashboards for your workspace.
+						</Typography.Text>
+						<FacingIssueBtn
+							attributes={{
+								screen: 'Dashboard list page',
+							}}
+							eventName="Dashboard: Facing Issues in dashboard"
+							message={dashboardListMessage}
+							buttonText="Facing issues with dashboards?"
+							onHoverText="Click here to get help with dashboards"
+						/>
+					</Flex>
 				</div>
 
 				{isDashboardListLoading || isFilteringDashboards ? (
diff --git a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
index ef074a175a..50831b02d7 100644
--- a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
+++ b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
@@ -1,7 +1,18 @@
 import './Description.styles.scss';
 
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Typography } from 'antd';
+import {
+	Button,
+	Card,
+	Flex,
+	Input,
+	Modal,
+	Popover,
+	Tag,
+	Typography,
+} from 'antd';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { dashboardHelpMessage } from 'components/facingIssueBtn/util';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -250,30 +261,43 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<section className="dashboard-breadcrumbs">
-				<Button
-					type="text"
-					icon={<LayoutGrid size={14} />}
-					className="dashboard-btn"
-					onClick={(): void => history.push(ROUTES.ALL_DASHBOARD)}
-				>
-					Dashboard /
-				</Button>
-				<Button
-					type="text"
-					className="id-btn"
-					icon={
-						// eslint-disable-next-line jsx-a11y/img-redundant-alt
-						<img
-							src={image}
-							alt="dashboard-image"
-							style={{ height: '14px', width: '14px' }}
-						/>
-					}
-				>
-					{title}
-				</Button>
-			</section>
+			<Flex justify="space-between" align="center">
+				<section className="dashboard-breadcrumbs">
+					<Button
+						type="text"
+						icon={<LayoutGrid size={14} />}
+						className="dashboard-btn"
+						onClick={(): void => history.push(ROUTES.ALL_DASHBOARD)}
+					>
+						Dashboard /
+					</Button>
+					<Button
+						type="text"
+						className="id-btn"
+						icon={
+							// eslint-disable-next-line jsx-a11y/img-redundant-alt
+							<img
+								src={image}
+								alt="dashboard-image"
+								style={{ height: '14px', width: '14px' }}
+							/>
+						}
+					>
+						{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"
+				/>
+			</Flex>
 			<section className="dashbord-details">
 				<div className="left-section">
 					<img
diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx
index 0140c6c5a6..7ffa2c969f 100644
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -2,7 +2,9 @@
 import './NewWidget.styles.scss';
 
 import { WarningOutlined } from '@ant-design/icons';
-import { Button, Modal, Space, Tooltip, Typography } from 'antd';
+import { Button, Flex, Modal, Space, Tooltip, Typography } from 'antd';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { chartHelpMessage } from 'components/facingIssueBtn/util';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -432,9 +434,25 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 			<div className="edit-header">
 				<div className="left-header">
 					<X size={14} onClick={onClickDiscardHandler} className="discard-icon" />
-					<Typography.Text className="configure-panel">
-						Configure panel
-					</Typography.Text>
+					<Flex align="center" gap={24}>
+						<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 && (
 					<Tooltip title={MESSAGE.PANEL}>