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

View File

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

View File

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

View File

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