feat: added tooltips for facing issue btn (#4948)

This commit is contained in:
SagarRajput-7 2024-05-01 18:36:56 +05:30 committed by GitHub
parent 241edcb88a
commit 1aec7f3ca6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 18 additions and 13 deletions

View File

@ -1,6 +1,6 @@
import './FacingIssueBtn.style.scss';
import { Button } from 'antd';
import { Button, Tooltip } from 'antd';
import logEvent from 'api/common/logEvent';
import cx from 'classnames';
import { FeatureKeys } from 'constants/features';
@ -15,6 +15,7 @@ export interface FacingIssueBtnProps {
message?: string;
buttonText?: string;
className?: string;
onHoverText?: string;
}
function FacingIssueBtn({
@ -23,6 +24,7 @@ function FacingIssueBtn({
message = '',
buttonText = '',
className = '',
onHoverText = '',
}: FacingIssueBtnProps): JSX.Element | null {
const handleFacingIssuesClick = (): void => {
logEvent(eventName, attributes);
@ -37,13 +39,15 @@ function FacingIssueBtn({
return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
<div className="facing-issue-button">
<Button
className={cx('periscope-btn', 'facing-issue-button', className)}
onClick={handleFacingIssuesClick}
icon={<HelpCircle size={14} />}
>
{buttonText || 'Facing issues?'}
</Button>
<Tooltip title={onHoverText} autoAdjustOverflow>
<Button
className={cx('periscope-btn', 'facing-issue-button', className)}
onClick={handleFacingIssuesClick}
icon={<HelpCircle size={14} />}
>
{buttonText || 'Facing issues?'}
</Button>
</Tooltip>
</div>
) : null;
}
@ -52,6 +56,7 @@ FacingIssueBtn.defaultProps = {
message: '',
buttonText: '',
className: '',
onHoverText: '',
};
export default FacingIssueBtn;

View File

@ -588,7 +588,7 @@ function FormAlertRules({
eventName="Alert: Facing Issues in alert"
buttonText="Need help with this alert?"
message={alertHelpMessage(alertDef, ruleId)}
// onHover: Click here to get help with this alert
onHoverText="Click here to get help with this alert"
/>
</Col>
</PanelContainer>

View File

@ -495,7 +495,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
eventName="Dashboard: Facing Issues in dashboard"
buttonText="Need help with this dashboard?"
message={dashboardHelpMessage(data, selectedDashboard)}
// onHover: Click here to get help for this dashboard
onHoverText="Click here to get help for this dashboard"
/>
<ButtonContainer>
<Tooltip title="Open in Full Screen">

View File

@ -366,8 +366,8 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
eventName: 'Alert: Facing Issues in alert',
buttonText: 'Facing issues with alerts?',
message: listAlertMessage,
onHoverText: 'Click here to get help with alerts',
}}
// onHover: Click here to get help with alerts
/>
</>
);

View File

@ -393,7 +393,7 @@ function DashboardsList(): JSX.Element {
eventName: 'Dashboard: Facing Issues in dashboard',
buttonText: 'Facing issues with dashboards?',
message: dashboardListMessage,
// onHover: Click here to get help with dashboards
onHoverText: 'Click here to get help with dashboards',
}}
/>
</TableContainer>

View File

@ -418,7 +418,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
eventName="Dashboard: Facing Issues in dashboard"
buttonText="Need help with this chart?"
message={chartHelpMessage(selectedDashboard, graphType)}
// onHover: Click here to get help in creating chart
onHoverText="Click here to get help in creating chart"
/>
<ButtonContainer>
{isSaveDisabled && (