diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index 2479687518a..bce87b5a739 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -9,6 +9,7 @@ import { IconName } from '../../types/icon'; import { ComponentSize } from '../../types/size'; import { getPropertiesForButtonSize } from '../Forms/commonStyles'; import { Icon } from '../Icon/Icon'; +import { PopoverContent, Tooltip, TooltipPlacement } from '../Tooltip'; export type ButtonVariant = 'primary' | 'secondary' | 'destructive'; export const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive']; @@ -24,6 +25,10 @@ type CommonProps = { children?: React.ReactNode; fullWidth?: boolean; type?: string; + /** Tooltip content to display on hover */ + tooltip?: PopoverContent; + /** Position of the tooltip */ + tooltipPlacement?: TooltipPlacement; }; export type ButtonProps = CommonProps & ButtonHTMLAttributes; @@ -79,6 +84,8 @@ export const LinkButton = React.forwardRef( onBlur, onFocus, disabled, + tooltip, + tooltipPlacement, ...otherProps }, ref @@ -103,12 +110,22 @@ export const LinkButton = React.forwardRef( className ); - return ( + const button = ( {icon && } {children && {children}} ); + + if (tooltip) { + return ( + + {button} + + ); + } + + return button; } ); diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard.tsx index c8f8d62588a..e9c962b91f4 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard.tsx @@ -2,7 +2,18 @@ import React, { useCallback, useEffect, useState } from 'react'; import { AppEvents } from '@grafana/data'; import { reportInteraction } from '@grafana/runtime/src'; -import { Alert, Button, Checkbox, ClipboardButton, Field, FieldSet, Icon, Input, Switch } from '@grafana/ui'; +import { + Alert, + Button, + Checkbox, + ClipboardButton, + Field, + FieldSet, + Icon, + Input, + LinkButton, + Switch, +} from '@grafana/ui'; import { notifyApp } from 'app/core/actions'; import { createErrorNotification } from 'app/core/copy/appNotification'; import { appEvents } from 'app/core/core'; @@ -114,17 +125,33 @@ export const SharePublicDashboard = (props: Props) => { onAcknowledge('datasources', e.currentTarget.checked)} /> +
onAcknowledge('usage', e.currentTarget.checked)} /> +