From 37d086d49cf4ead0a76ca5863ae652c7460b0cdf Mon Sep 17 00:00:00 2001
From: Kyle Cunningham <codeincarnate@users.noreply.github.com>
Date: Tue, 23 Apr 2024 11:03:24 -0500
Subject: [PATCH] Table Panel: Fix images not showing on hover with multiple
 data links (#86732)

* Fix issue

* Prettier

* codeincarnate/image-table-fix/ lint

* Make linter happy by using div with role of button + improve a11y

---------

Co-authored-by: jev forsberg <jev.forsberg@grafana.com>
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
---
 .../src/components/Table/ImageCell.tsx        | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/ImageCell.tsx b/packages/grafana-ui/src/components/Table/ImageCell.tsx
index d4a164cebce..6732bb6c54f 100644
--- a/packages/grafana-ui/src/components/Table/ImageCell.tsx
+++ b/packages/grafana-ui/src/components/Table/ImageCell.tsx
@@ -1,9 +1,6 @@
-import { cx } from '@emotion/css';
 import React from 'react';
 
-import { useStyles2 } from '../../themes';
 import { getCellLinks } from '../../utils';
-import { Button, clearLinkButtonStyles } from '../Button';
 import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
 
 import { TableCellProps } from './types';
@@ -16,7 +13,6 @@ export const ImageCell = (props: TableCellProps) => {
   const displayValue = field.display!(cell.value);
 
   const hasLinks = Boolean(getCellLinks(field, row)?.length);
-  const clearButtonStyle = useStyles2(clearLinkButtonStyles);
 
   return (
     <div {...cellProps} className={tableStyles.cellContainer}>
@@ -27,12 +23,29 @@ export const ImageCell = (props: TableCellProps) => {
           links={() => getCellLinks(field, row) || []}
         >
           {(api) => {
-            const img = <img src={displayValue.text} className={tableStyles.imageCell} alt="" />;
+            const img = (
+              <img
+                style={{ height: tableStyles.cellHeight - DATALINKS_HEIGHT_OFFSET, width: 'auto' }}
+                src={displayValue.text}
+                className={tableStyles.imageCell}
+                alt=""
+              />
+            );
             if (api.openMenu) {
               return (
-                <Button className={cx(clearButtonStyle)} onClick={api.openMenu}>
+                <div
+                  onClick={api.openMenu}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e: React.KeyboardEvent) => {
+                    if (e.key === 'Enter' && api.openMenu) {
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+                      api.openMenu(e as any);
+                    }
+                  }}
+                >
                   {img}
-                </Button>
+                </div>
               );
             } else {
               return img;