fix: fixed facing issue btn alignment issue (#4936)

* fix: fixed facing issue btn alignment issue

* fix: fixed facing issue btn alignment issue

* fix: moved intercom help messages to util file

frontend/src/components/facingIssueBtn/util.ts

@@ -0,0 +1,57 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { AlertDef } from 'types/api/alerts/def';
+import { Dashboard, DashboardData } from 'types/api/dashboard/getAll';
+
+export const chartHelpMessage = (
+	selectedDashboard: Dashboard | undefined,
+	graphType: PANEL_TYPES,
+): string => `
+Hi Team,
+
+I need help in creating this chart. Here are my dashboard details
+
+Name: ${selectedDashboard?.data.title || ''}
+Panel type: ${graphType}
+Dashboard Id: ${selectedDashboard?.uuid || ''}
+
+Thanks`;
+
+export const dashboardHelpMessage = (
+	data: DashboardData | undefined,
+	selectedDashboard: Dashboard | undefined,
+): string => `
+Hi Team,
+
+I need help with this dashboard. Here are my dashboard details
+
+Name: ${data?.title || ''}
+Dashboard Id: ${selectedDashboard?.uuid || ''}
+
+Thanks`;
+
+export const dashboardListMessage = `Hi Team,
+
+I need help with dashboards.
+						
+Thanks`;
+
+export const listAlertMessage = `Hi Team,
+
+I need help with managing alerts.
+
+Thanks`;
+
+export const alertHelpMessage = (
+	alertDef: AlertDef,
+	ruleId: number,
+): string => `
+Hi Team,
+
+I need help in configuring this alert. Here are my alert rule details
+
+Name: ${alertDef?.alert || ''}
+Alert Type: ${alertDef?.alertType || ''}
+State: ${(alertDef as any)?.state || ''}
+Alert Id: ${ruleId}
+
+Thanks`;

frontend/src/container/FormAlertRules/index.tsx

@@ -12,6 +12,7 @@ import {
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
 import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { alertHelpMessage } from 'components/facingIssueBtn/util';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -586,16 +587,7 @@ function FormAlertRules({
 						className="facing-issue-btn"
 						eventName="Alert: Facing Issues in alert"
 						buttonText="Need help with this alert?"
-						message={`Hi Team,
+						message={alertHelpMessage(alertDef, ruleId)}
-
-I need help in configuring this alert. Here are my alert rule details
-
-Name: ${alertDef?.alert || ''}
-Alert Type: ${alertDef?.alertType || ''}
-State: ${(alertDef as any)?.state || ''}
-Alert Id: ${ruleId}
-
-Thanks`}
 						// onHover: Click here to get help with this alert
 					/>
 				</Col>

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -5,6 +5,7 @@ import { Flex, Form, Input, Modal, Tooltip, Typography } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import cx from 'classnames';
 import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { dashboardHelpMessage } from 'components/facingIssueBtn/util';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
@@ -493,14 +494,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 					}}
 					eventName="Dashboard: Facing Issues in dashboard"
 					buttonText="Need help with this dashboard?"
-					message={`Hi Team,
+					message={dashboardHelpMessage(data, selectedDashboard)}
-
-I need help with this dashboard. Here are my dashboard details
-
-Name: ${data?.title || ''}
-Dashboard Id: ${selectedDashboard?.uuid || ''}
-
-Thanks`}
 					// onHover: Click here to get help for this dashboard
 				/>
 				<ButtonContainer>

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -4,6 +4,7 @@ import { Input, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import saveAlertApi from 'api/alerts/save';
 import DropDown from 'components/DropDown/DropDown';
+import { listAlertMessage } from 'components/facingIssueBtn/util';
 import {
 	DynamicColumnsKey,
 	TableDataSource,
@@ -364,11 +365,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					},
 					eventName: 'Alert: Facing Issues in alert',
 					buttonText: 'Facing issues with alerts?',
-					message: `Hi Team,
+					message: listAlertMessage,
-
-I need help with managing alerts.
-
-Thanks`,
 				}}
 				// onHover: Click here to get help with alerts
 			/>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -3,6 +3,7 @@ import { Card, Col, Dropdown, Input, Row, TableColumnProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
+import { dashboardListMessage } from 'components/facingIssueBtn/util';
 import {
 	DynamicColumnsKey,
 	TableDataSource,
@@ -391,11 +392,7 @@ function DashboardsList(): JSX.Element {
 						},
 						eventName: 'Dashboard: Facing Issues in dashboard',
 						buttonText: 'Facing issues with dashboards?',
-						message: `Hi Team,
+						message: dashboardListMessage,
-
-I need help with dashboards.
-						
-Thanks`,
 						// onHover: Click here to get help with dashboards
 					}}
 				/>

frontend/src/container/NewWidget/NewWidget.styles.scss

@@ -0,0 +1,4 @@
+.facing-issue-btn-container {
+	display: grid;
+	grid-template-columns: 1fr max-content;
+}

frontend/src/container/NewWidget/index.tsx

@@ -1,7 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+import './NewWidget.styles.scss';
+
 import { LockFilled, WarningOutlined } from '@ant-design/icons';
-import { Button, Flex, Modal, Space, Tooltip, Typography } from 'antd';
+import { Button, Modal, Space, Tooltip, Typography } from 'antd';
 import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { chartHelpMessage } from 'components/facingIssueBtn/util';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
@@ -402,7 +405,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 
 	return (
 		<Container>
-			<Flex justify="space-between" align="center">
+			<div className="facing-issue-btn-container">
 				<FacingIssueBtn
 					attributes={{
 						uuid: selectedDashboard?.uuid,
@@ -414,15 +417,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 					}}
 					eventName="Dashboard: Facing Issues in dashboard"
 					buttonText="Need help with this chart?"
-					message={`Hi Team,
+					message={chartHelpMessage(selectedDashboard, graphType)}
-
-I need help in creating this chart. Here are my dashboard details
-				
-Name: ${selectedDashboard?.data.title || ''}
-Panel type: ${graphType}
-Dashboard Id: ${selectedDashboard?.uuid || ''}
-				
-Thanks`}
 					// onHover: Click here to get help in creating chart
 				/>
 				<ButtonContainer>
@@ -452,7 +447,7 @@ Thanks`}
 					)}
 					<Button onClick={onClickDiscardHandler}>Discard Changes</Button>
 				</ButtonContainer>
-			</Flex>
+			</div>
 
 			<PanelContainer>
 				<LeftContainerWrapper flex={5}>