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>
-					<Typography.Text className="subtitle">
+					<Flex align="center" justify="space-between">
-						Create and manage dashboards for your workspace.
+						<Typography.Text className="subtitle">
-					</Typography.Text>
+							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,30 +261,43 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<section className="dashboard-breadcrumbs">
+			<Flex justify="space-between" align="center">
-				<Button
+				<section className="dashboard-breadcrumbs">
-					type="text"
+					<Button
-					icon={<LayoutGrid size={14} />}
+						type="text"
-					className="dashboard-btn"
+						icon={<LayoutGrid size={14} />}
-					onClick={(): void => history.push(ROUTES.ALL_DASHBOARD)}
+						className="dashboard-btn"
-				>
+						onClick={(): void => history.push(ROUTES.ALL_DASHBOARD)}
-					Dashboard /
+					>
-				</Button>
+						Dashboard /
-				<Button
+					</Button>
-					type="text"
+					<Button
-					className="id-btn"
+						type="text"
-					icon={
+						className="id-btn"
-						// eslint-disable-next-line jsx-a11y/img-redundant-alt
+						icon={
-						<img
+							// eslint-disable-next-line jsx-a11y/img-redundant-alt
-							src={image}
+							<img
-							alt="dashboard-image"
+								src={image}
-							style={{ height: '14px', width: '14px' }}
+								alt="dashboard-image"
-						/>
+								style={{ height: '14px', width: '14px' }}
-					}
+							/>
-				>
+						}
-					{title}
+					>
-				</Button>
+						{title}
-			</section>
+					</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" />
-					<Typography.Text className="configure-panel">
+					<Flex align="center" gap={24}>
-						Configure panel
+						<Typography.Text className="configure-panel">
-					</Typography.Text>
+							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}>