[Panel] Extract styling duplication in new TitleItem component (#61625)

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx

@@ -2,8 +2,7 @@ import { css, cx } from '@emotion/css';
 import React from 'react';
 
 import { PanelData, GrafanaTheme2, PanelModel, LinkModel, AlertState, DataLink } from '@grafana/data';
-import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
-import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { Icon, PanelChrome, Tooltip, useStyles2, TimePickerTooltip } from '@grafana/ui';
 
 import { PanelLinks } from '../PanelLinks';
 
@@ -24,28 +23,28 @@ export function PanelHeaderTitleItems(props: Props) {
   // panel health
   const alertStateItem = (
     <Tooltip content={`alerting is ${alertState}`}>
-      <span
-        className={cx(styles.item, {
+      <PanelChrome.TitleItem
+        className={cx({
           [styles.ok]: alertState === AlertState.OK,
           [styles.pending]: alertState === AlertState.Pending,
           [styles.alerting]: alertState === AlertState.Alerting,
         })}
       >
         <Icon name={alertState === 'alerting' ? 'heart-break' : 'heart'} className="panel-alert-icon" />
-      </span>
+      </PanelChrome.TitleItem>
     </Tooltip>
   );
 
   const timeshift = (
     <>
-      <Tooltip
-        content={data.request?.range ? `Time Range: ${data.request.range.from} to ${data.request.range.to}` : ''}
-      >
-        <span className={cx(styles.item, styles.timeshift)}>
-          <Icon name="clock-nine" />
-          {data.request?.timeInfo}
-        </span>
-      </Tooltip>
+      {data.request && data.request.timeInfo && (
+        <Tooltip content={<TimePickerTooltip timeRange={data.request?.range} timeZone={data.request?.timezone} />}>
+          <PanelChrome.TitleItem className={styles.timeshift}>
+            <Icon name="clock-nine" />
+            {data.request?.timeInfo}
+          </PanelChrome.TitleItem>
+        </Tooltip>
+      )}
     </>
   );
 
@@ -56,7 +55,7 @@ export function PanelHeaderTitleItems(props: Props) {
       )}
 
       {<PanelHeaderNotices panelId={panelId} frames={data.series} />}
-      {data.request && data.request.timeInfo && timeshift}
+      {timeshift}
       {alertState && alertStateItem}
     </>
   );
@@ -64,29 +63,6 @@ export function PanelHeaderTitleItems(props: Props) {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    item: css({
-      label: 'panel-header-item',
-      backgroundColor: `${theme.colors.background.primary}`,
-      cursor: 'auto',
-      border: 'none',
-      borderRadius: `${theme.shape.borderRadius()}`,
-      padding: `${theme.spacing(0, 1)}`,
-      height: `${theme.spacing(theme.components.height.md)}`,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-
-      '&:focus, &:focus-visible': {
-        ...getFocusStyles(theme),
-        zIndex: 1,
-      },
-      '&: focus:not(:focus-visible)': getMouseFocusStyles(theme),
-
-      '&:hover ': {
-        boxShadow: `${theme.shadows.z1}`,
-        background: `${theme.colors.background.secondary}`,
-      },
-    }),
     ok: css({
       color: theme.colors.success.text,
     }),

public/app/features/dashboard/dashgrid/PanelLinks.tsx

@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { DataLink, GrafanaTheme2, LinkModel } from '@grafana/data';
-import { Dropdown, Icon, Menu, ToolbarButton, useStyles2 } from '@grafana/ui';
-import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { Dropdown, Icon, Menu, ToolbarButton, useStyles2, PanelChrome } from '@grafana/ui';
 
 interface Props {
   panelLinks: DataLink[];
@@ -27,15 +26,14 @@ export function PanelLinks({ panelLinks, onShowPanelLinks }: Props) {
   if (panelLinks.length === 1) {
     const linkModel = onShowPanelLinks()[0];
     return (
-      <a
+      <PanelChrome.TitleItem
         href={linkModel.href}
         onClick={linkModel.onClick}
         target={linkModel.target}
         title={linkModel.title}
-        className={styles.singleLink}
       >
         <Icon name="external-link-alt" size="lg" />
-      </a>
+      </PanelChrome.TitleItem>
     );
   } else {
     return (
@@ -53,25 +51,5 @@ const getStyles = (theme: GrafanaTheme2) => {
       borderRadius: `${theme.shape.borderRadius()}`,
       cursor: 'context-menu',
     }),
-    singleLink: css({
-      color: theme.colors.text.secondary,
-      padding: `${theme.spacing(0, 1)}`,
-      height: ` ${theme.spacing(theme.components.height.md)}`,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-
-      '&:focus, &:focus-visible': {
-        ...getFocusStyles(theme),
-        zIndex: 1,
-      },
-      '&: focus:not(:focus-visible)': getMouseFocusStyles(theme),
-
-      '&:hover ': {
-        boxShadow: `${theme.shadows.z1}`,
-        color: `${theme.colors.text.primary}`,
-        background: `${theme.colors.background.secondary}`,
-      },
-    }),
   };
 };