IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table Panel: Fix images not showing on hover with multiple data links (#86732)

Browse Source 
* 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>
This commit is contained in:
Kyle Cunningham 2024-04-23 11:03:24 -05:00 committed by GitHub
parent ca7f41be11
commit 37d086d49c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/grafana-ui/src/components/Table/ImageCell.tsx
View File

@ -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;