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

Explore: A tooltip for reorder icon in query operation (#75978)

Browse Source 
* tooltip in draggabledots icon

* making it a IconButton
This commit is contained in:
Krishna Dhakal 2023-10-05 20:16:16 +05:45 committed by GitHub
parent 81b366e2c8
commit 76e102d1a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -4,7 +4,7 @@ import { DraggableProvided } from 'react-beautiful-dnd';
import { GrafanaTheme2 } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { Icon, IconButton, useStyles2 } from '@grafana/ui';
import { IconButton, useStyles2 } from '@grafana/ui';
export interface QueryOperationRowHeaderProps {
actionsElement?: React.ReactNode;
@ -15,7 +15,7 @@ export interface QueryOperationRowHeaderProps {
headerElement?: React.ReactNode;
isContentVisible: boolean;
onRowToggle: () => void;
reportDragMousePosition: MouseEventHandler<HTMLDivElement>;
reportDragMousePosition: MouseEventHandler<HTMLButtonElement>;
title?: string;
id: string;
}
@ -62,9 +62,11 @@ export const QueryOperationRowHeader = ({
<Stack gap={1} alignItems="center" wrap={false}>
{actionsElement}
{draggable && (
<Icon
<IconButton
title="Drag and drop to reorder"
name="draggabledots"
tooltip="Drag and drop to reorder"
tooltipPlacement="bottom"
size="lg"
className={styles.dragIcon}
onMouseMove={reportDragMousePosition}