Public Dashboards: add icon buttons with links to useful information for the user (#51722)

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<HTMLButtonElement>;
@@ -79,6 +84,8 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       onBlur,
       onFocus,
       disabled,
+      tooltip,
+      tooltipPlacement,
       ...otherProps
     },
     ref
@@ -103,12 +110,22 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       className
     );
 
-    return (
+    const button = (
       <a className={linkButtonStyles} {...otherProps} tabIndex={disabled ? -1 : 0} ref={ref}>
         {icon && <Icon name={icon} size={size} className={styles.icon} />}
         {children && <span className={styles.content}>{children}</span>}
       </a>
     );
+
+    if (tooltip) {
+      return (
+        <Tooltip content={tooltip} placement={tooltipPlacement}>
+          {button}
+        </Tooltip>
+      );
+    }
+
+    return button;
   }
 );
 

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) => {
                   <Checkbox
                     label="Publishing currently only works with a subset of datasources"
                     value={acknowledgements.datasources}
-                    description="Learn more about public datasources"
                     onChange={(e) => onAcknowledge('datasources', e.currentTarget.checked)}
                   />
+                  <LinkButton
+                    variant="primary"
+                    href="https://grafana.com/docs/grafana/latest/datasources/"
+                    target="_blank"
+                    fill="text"
+                    icon="info-circle"
+                    rel="noopener noreferrer"
+                    tooltip="Learn more about public datasources"
+                  />
                 </div>
                 <br />
                 <Checkbox
                   label="Making your dashboard public will cause queries to run each time the dashboard is viewed which may increase costs"
                   value={acknowledgements.usage}
-                  description="Learn more about query caching"
                   onChange={(e) => onAcknowledge('usage', e.currentTarget.checked)}
                 />
+                <LinkButton
+                  variant="primary"
+                  href="https://grafana.com/docs/grafana/latest/enterprise/query-caching/"
+                  target="_blank"
+                  fill="text"
+                  icon="info-circle"
+                  rel="noopener noreferrer"
+                  tooltip="Learn more about query caching"
+                />
                 <br />
                 <br />
               </FieldSet>