DashList: Add tooltip for star dashboard icon (#73490)

public/app/plugins/panel/dashlist/DashList.tsx

@@ -1,19 +1,8 @@
-import { css, cx } from '@emotion/css';
 import { take } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
-import {
-  DateTime,
-  GrafanaTheme2,
-  InterpolateFunction,
-  PanelProps,
-  textUtil,
-  UrlQueryValue,
-  urlUtil,
-} from '@grafana/data';
-import { CustomScrollbar, stylesFactory, useStyles2 } from '@grafana/ui';
-import { Icon, IconProps } from '@grafana/ui/src/components/Icon/Icon';
-import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { DateTime, InterpolateFunction, PanelProps, textUtil, UrlQueryValue, urlUtil } from '@grafana/data';
+import { CustomScrollbar, useStyles2, IconButton } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { setStarred } from 'app/core/reducers/navBarTree';
 import { getBackendSrv } from 'app/core/services/backend_srv';
@@ -182,12 +171,10 @@ export function DashList(props: PanelProps<Options>) {
                 </a>
                 {dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
               </div>
-              <IconToggle
-                aria-label={`Star dashboard "${dash.title}".`}
-                className={css.dashlistStar}
-                enabled={{ name: 'favorite', type: 'mono' }}
-                disabled={{ name: 'star', type: 'default' }}
-                checked={dash.isStarred}
+              <IconButton
+                tooltip={dash.isStarred ? `Unmark "${dash.title}" as favorite` : `Mark "${dash.title}" as favorite`}
+                name={dash.isStarred ? 'favorite' : 'star'}
+                iconType={dash.isStarred ? 'mono' : 'default'}
                 onClick={(e) => toggleDashboardStar(e, dash)}
               />
             </div>
@@ -211,68 +198,3 @@ export function DashList(props: PanelProps<Options>) {
     </CustomScrollbar>
   );
 }
-
-interface IconToggleProps extends Partial<IconProps> {
-  enabled: IconProps;
-  disabled: IconProps;
-  checked: boolean;
-}
-
-function IconToggle({
-  enabled,
-  disabled,
-  checked,
-  onClick,
-  className,
-  'aria-label': ariaLabel,
-  ...otherProps
-}: IconToggleProps) {
-  const toggleCheckbox = useCallback(
-    (e: React.MouseEvent<HTMLInputElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      onClick?.(e);
-    },
-    [onClick]
-  );
-
-  const iconPropsOverride = checked ? enabled : disabled;
-  const iconProps = { ...otherProps, ...iconPropsOverride };
-  const styles = useStyles2(getCheckboxStyles);
-  return (
-    <label className={styles.wrapper}>
-      <input
-        type="checkbox"
-        defaultChecked={checked}
-        onClick={toggleCheckbox}
-        className={styles.checkBox}
-        aria-label={ariaLabel}
-      />
-      <Icon className={cx(styles.icon, className)} {...iconProps} />
-    </label>
-  );
-}
-
-export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    wrapper: css({
-      display: 'flex',
-      alignSelf: 'center',
-      cursor: 'pointer',
-      zIndex: 1,
-    }),
-    checkBox: css({
-      appearance: 'none',
-      '&:focus-visible + *': {
-        ...getFocusStyles(theme),
-        borderRadius: theme.shape.radius.default,
-      },
-    }),
-    icon: css({
-      marginBottom: 0,
-      verticalAlign: 'baseline',
-      display: 'flex',
-    }),
-  };
-});

public/app/plugins/panel/dashlist/styles.ts

@@ -17,6 +17,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     border-bottom: 1px solid ${theme.colors.border.weak};
     margin-right: ${theme.spacing(1)};
     padding: ${theme.spacing(1)};
+    align-items: center;
 
     &:hover {
       a {
@@ -25,12 +26,6 @@ export const getStyles = (theme: GrafanaTheme2) => ({
       }
     }
   `,
-  dashlistStar: css`
-    align-self: center;
-    margin-right: 0px;
-    color: ${theme.colors.secondary.text};
-    z-index: 1;
-  `,
   dashlistFolder: css`
     color: ${theme.colors.text.secondary};
     font-size: ${theme.typography.bodySmall.fontSize};
@@ -55,11 +50,4 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     position: relative;
     list-style: none;
   `,
-  gridContainer: css`
-    display: grid;
-    gap: ${theme.spacing(1)};
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    list-style: none;
-    margin-bottom: ${theme.spacing(1)};
-  `,
 });