diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
index e78ea3fce6c..5535d214861 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
@@ -7,7 +7,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import { ReactUtils, useStyles2 } from '@grafana/ui';
-import { QueryOperationRowHeader } from './QueryOperationRowHeader';
+import { QueryOperationRowHeader, ExpanderMessages } from './QueryOperationRowHeader';
export interface QueryOperationRowProps {
index: number;
@@ -22,6 +22,7 @@ export interface QueryOperationRowProps {
draggable?: boolean;
collapsable?: boolean;
disabled?: boolean;
+ expanderMessages?: ExpanderMessages;
}
export type QueryOperationRowRenderProp = ((props: QueryOperationRowRenderProps) => React.ReactNode) | React.ReactNode;
@@ -45,6 +46,7 @@ export function QueryOperationRow({
collapsable,
index,
id,
+ expanderMessages,
}: QueryOperationRowProps) {
const [isContentVisible, setIsContentVisible] = useState(isOpen !== undefined ? isOpen : true);
const styles = useStyles2(getQueryOperationRowStyles);
@@ -123,6 +125,7 @@ export function QueryOperationRow({
onRowToggle={onRowToggle}
reportDragMousePosition={reportDragMousePosition}
title={title}
+ expanderMessages={expanderMessages}
/>
{isContentVisible &&
{children}
}
@@ -147,6 +150,7 @@ export function QueryOperationRow({
onRowToggle={onRowToggle}
reportDragMousePosition={reportDragMousePosition}
title={title}
+ expanderMessages={expanderMessages}
/>
{isContentVisible && {children}
}
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
index f171b20899d..bcdfb7cf42b 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
@@ -18,6 +18,12 @@ export interface QueryOperationRowHeaderProps {
reportDragMousePosition: MouseEventHandler;
title?: string;
id: string;
+ expanderMessages?: ExpanderMessages;
+}
+
+export interface ExpanderMessages {
+ open: string;
+ close: string;
}
export const QueryOperationRowHeader = ({
@@ -32,16 +38,24 @@ export const QueryOperationRowHeader = ({
reportDragMousePosition,
title,
id,
+ expanderMessages,
}: QueryOperationRowHeaderProps) => {
const styles = useStyles2(getStyles);
+ let tooltipMessage = isContentVisible ? 'Collapse query row' : 'Expand query row';
+ if (expanderMessages !== undefined && isContentVisible) {
+ tooltipMessage = expanderMessages.close;
+ } else if (expanderMessages !== undefined) {
+ tooltipMessage = expanderMessages?.open;
+ }
+
return (
{collapsable && (
toggleShowHelp(false)}
+ expanderMessages={{
+ close: 'Collapse transformation row',
+ open: 'Expand transformation row',
+ }}
>
{showHelp && }
{filter && (