mirror of https://github.com/grafana/grafana
TableNG: Data links and actions tooltip (#101015)
Adela Almasan
2 months ago
committed by
GitHub
parent
b16f34fb93
commit
cab652c4d1
@ -0,0 +1,95 @@ |
|||||||
|
import { render, screen } from '@testing-library/react'; |
||||||
|
import userEvent from '@testing-library/user-event'; |
||||||
|
|
||||||
|
import { LinkModel, ActionModel } from '@grafana/data'; |
||||||
|
import { selectors } from '@grafana/e2e-selectors'; |
||||||
|
|
||||||
|
import { DataLinksActionsTooltip } from './DataLinksActionsTooltip'; |
||||||
|
|
||||||
|
describe('DataLinksActionsTooltip', () => { |
||||||
|
const mockCoords = { clientX: 100, clientY: 100 }; |
||||||
|
const mockLink: LinkModel = { |
||||||
|
href: 'http://link1.com', |
||||||
|
title: 'Data Link1', |
||||||
|
target: '_blank', |
||||||
|
onClick: jest.fn(), |
||||||
|
origin: { ref: { uid: 'test' } }, |
||||||
|
}; |
||||||
|
|
||||||
|
const mockAction: ActionModel = { |
||||||
|
title: 'Action1', |
||||||
|
onClick: jest.fn(), |
||||||
|
style: { backgroundColor: '#ff0000' }, |
||||||
|
}; |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
jest.clearAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not render when there is only one link', () => { |
||||||
|
const { container } = render(<DataLinksActionsTooltip links={[mockLink]} actions={[]} coords={mockCoords} />); |
||||||
|
expect(container).toBeEmptyDOMElement(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render tooltip with multiple links', async () => { |
||||||
|
const multipleLinks = [mockLink, { ...mockLink, title: 'Data Link2', href: 'http://link2.com' }]; |
||||||
|
render(<DataLinksActionsTooltip links={multipleLinks} coords={mockCoords} />); |
||||||
|
|
||||||
|
expect(screen.getByTestId(selectors.components.DataLinksActionsTooltip.tooltipWrapper)).toBeInTheDocument(); |
||||||
|
expect(await screen.findByText('Data Link1')).toBeInTheDocument(); |
||||||
|
|
||||||
|
const link = screen.getByText('Data Link1'); |
||||||
|
await userEvent.click(link); |
||||||
|
expect(mockLink.onClick).toHaveBeenCalledTimes(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should handle links click events', async () => { |
||||||
|
const mockLinks = [mockLink, { ...mockLink, title: 'Data Link2', href: 'http://link2.com' }]; |
||||||
|
|
||||||
|
render(<DataLinksActionsTooltip links={mockLinks} coords={mockCoords} />); |
||||||
|
|
||||||
|
const link = screen.getByText('Data Link1'); |
||||||
|
await userEvent.click(link); |
||||||
|
expect(mockLink.onClick).toHaveBeenCalledTimes(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render when there is only one action', () => { |
||||||
|
const { container } = render(<DataLinksActionsTooltip links={[]} actions={[mockAction]} coords={mockCoords} />); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render tooltip with actions', () => { |
||||||
|
const mockActions = [mockAction, { ...mockAction, title: 'Action2' }]; |
||||||
|
|
||||||
|
render(<DataLinksActionsTooltip links={[]} actions={mockActions} coords={mockCoords} />); |
||||||
|
|
||||||
|
expect(screen.getByTestId(selectors.components.DataLinksActionsTooltip.tooltipWrapper)).toBeInTheDocument(); |
||||||
|
|
||||||
|
// Action button should be rendered
|
||||||
|
const actionButton = screen.getByText('Action1'); |
||||||
|
expect(actionButton).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should call onTooltipClose when tooltip is dismissed', async () => { |
||||||
|
const onTooltipClose = jest.fn(); |
||||||
|
render( |
||||||
|
<DataLinksActionsTooltip |
||||||
|
links={[mockLink, { ...mockLink, title: 'Data Link2', href: 'http://link2.com' }]} |
||||||
|
coords={mockCoords} |
||||||
|
onTooltipClose={onTooltipClose} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
// click outside the tooltip
|
||||||
|
await userEvent.click(document.body); |
||||||
|
|
||||||
|
expect(onTooltipClose).toHaveBeenCalledTimes(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render custom value', () => { |
||||||
|
const customValue = <div data-testid="custom-value">Custom Value</div>; |
||||||
|
render(<DataLinksActionsTooltip links={[mockLink]} coords={mockCoords} value={customValue} />); |
||||||
|
|
||||||
|
expect(screen.getByTestId('custom-value')).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,140 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import { flip, shift, useDismiss, useFloating, useInteractions } from '@floating-ui/react'; |
||||||
|
import { ReactElement, useMemo } from 'react'; |
||||||
|
import * as React from 'react'; |
||||||
|
|
||||||
|
import { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data'; |
||||||
|
import { selectors } from '@grafana/e2e-selectors'; |
||||||
|
|
||||||
|
import { useStyles2 } from '../../themes'; |
||||||
|
import { Portal } from '../Portal/Portal'; |
||||||
|
import { VizTooltipFooter } from '../VizTooltip/VizTooltipFooter'; |
||||||
|
import { VizTooltipWrapper } from '../VizTooltip/VizTooltipWrapper'; |
||||||
|
|
||||||
|
import { DataLinksActionsTooltipCoords } from './utils'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
links: LinkModel[]; |
||||||
|
actions?: ActionModel[]; |
||||||
|
value?: string | ReactElement; |
||||||
|
coords: DataLinksActionsTooltipCoords; |
||||||
|
onTooltipClose?: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
* @internal |
||||||
|
*/ |
||||||
|
export const DataLinksActionsTooltip = ({ links, actions, value, coords, onTooltipClose }: Props) => { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
// the order of middleware is important!
|
||||||
|
const middleware = [ |
||||||
|
flip({ |
||||||
|
fallbackAxisSideDirection: 'end', |
||||||
|
// see https://floating-ui.com/docs/flip#combining-with-shift
|
||||||
|
crossAxis: false, |
||||||
|
boundary: document.body, |
||||||
|
}), |
||||||
|
shift(), |
||||||
|
]; |
||||||
|
|
||||||
|
const virtual = useMemo(() => { |
||||||
|
const { clientX, clientY } = coords; |
||||||
|
|
||||||
|
// https://floating-ui.com/docs/virtual-elements
|
||||||
|
return { |
||||||
|
getBoundingClientRect() { |
||||||
|
return { |
||||||
|
width: 0, |
||||||
|
height: 0, |
||||||
|
x: clientX, |
||||||
|
y: clientY, |
||||||
|
top: clientY, |
||||||
|
left: clientX, |
||||||
|
right: clientX, |
||||||
|
bottom: clientY, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, [coords]); |
||||||
|
|
||||||
|
const refCallback = (el: HTMLDivElement) => { |
||||||
|
refs.setFloating(el); |
||||||
|
refs.setReference(virtual); |
||||||
|
}; |
||||||
|
|
||||||
|
const { context, refs, floatingStyles } = useFloating({ |
||||||
|
open: true, |
||||||
|
placement: 'right-start', |
||||||
|
onOpenChange: onTooltipClose, |
||||||
|
middleware, |
||||||
|
// whileElementsMounted: autoUpdate,
|
||||||
|
}); |
||||||
|
|
||||||
|
const dismiss = useDismiss(context); |
||||||
|
|
||||||
|
const hasMultipleLinksOrActions = links.length > 1 || Boolean(actions?.length); |
||||||
|
|
||||||
|
const { getFloatingProps, getReferenceProps } = useInteractions([dismiss]); |
||||||
|
|
||||||
|
if (links.length === 0 && !Boolean(actions?.length)) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{value} |
||||||
|
{hasMultipleLinksOrActions && ( |
||||||
|
<Portal> |
||||||
|
<div |
||||||
|
ref={refCallback} |
||||||
|
{...getReferenceProps({ onClick: (e) => e.stopPropagation() })} |
||||||
|
{...getFloatingProps()} |
||||||
|
style={floatingStyles} |
||||||
|
className={styles.tooltipWrapper} |
||||||
|
data-testid={selectors.components.DataLinksActionsTooltip.tooltipWrapper} |
||||||
|
> |
||||||
|
<VizTooltipWrapper> |
||||||
|
<VizTooltipFooter dataLinks={links} actions={actions} /> |
||||||
|
</VizTooltipWrapper> |
||||||
|
</div> |
||||||
|
</Portal> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export const renderSingleLink = ( |
||||||
|
link: LinkModel, |
||||||
|
children: string | React.JSX.Element, |
||||||
|
className?: string |
||||||
|
): React.JSX.Element => { |
||||||
|
return ( |
||||||
|
<a |
||||||
|
href={link.href} |
||||||
|
onClick={link.onClick} |
||||||
|
target={link.target} |
||||||
|
title={link.title} |
||||||
|
data-testid={selectors.components.DataLinksContextMenu.singleLink} |
||||||
|
className={className} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</a> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => { |
||||||
|
return { |
||||||
|
tooltipWrapper: css({ |
||||||
|
zIndex: theme.zIndex.portal, |
||||||
|
whiteSpace: 'pre', |
||||||
|
borderRadius: theme.shape.radius.default, |
||||||
|
background: theme.colors.background.primary, |
||||||
|
border: `1px solid ${theme.colors.border.weak}`, |
||||||
|
boxShadow: theme.shadows.z3, |
||||||
|
userSelect: 'text', |
||||||
|
fontSize: theme.typography.bodySmall.fontSize, |
||||||
|
}), |
||||||
|
}; |
||||||
|
}; |
||||||
Loading…
Reference in new issue