feat: added facing issues btn in new dashboard revamp (#5131)

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>
+					<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 ? (

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,6 +261,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
+			<Flex justify="space-between" align="center">
 				<section className="dashboard-breadcrumbs">
 					<Button
 						type="text"
@@ -274,6 +286,18 @@ 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"
+				/>
+			</Flex>
 			<section className="dashbord-details">
 				<div className="left-section">
 					<img

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" />
+					<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}>