From 0e0f1183e6d534a3a2ae449daaeee67559312c2b Mon Sep 17 00:00:00 2001
From: Kyle Cunningham <codeincarnate@users.noreply.github.com>
Date: Fri, 6 Oct 2023 09:32:52 -0500
Subject: [PATCH] Transformations: Update row title (#75988)

* Update row title in transformations

* Prettier fixes
---
 .../QueryOperationRow/QueryOperationRow.tsx      |  6 +++++-
 .../QueryOperationRowHeader.tsx                  | 16 +++++++++++++++-
 .../TransformationOperationRow.tsx               |  4 ++++
 3 files changed, 24 insertions(+), 2 deletions(-)

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}
                   />
                 </div>
                 {isContentVisible && <div className={styles.content}>{children}</div>}
@@ -147,6 +150,7 @@ export function QueryOperationRow({
         onRowToggle={onRowToggle}
         reportDragMousePosition={reportDragMousePosition}
         title={title}
+        expanderMessages={expanderMessages}
       />
       {isContentVisible && <div className={styles.content}>{children}</div>}
     </div>
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<HTMLButtonElement>;
   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 (
     <div className={styles.header}>
       <div className={styles.column}>
         {collapsable && (
           <IconButton
             name={isContentVisible ? 'angle-down' : 'angle-right'}
-            tooltip={isContentVisible ? 'Collapse query row' : 'Expand query row'}
+            tooltip={tooltipMessage}
             className={styles.collapseIcon}
             onClick={onRowToggle}
             aria-expanded={isContentVisible}
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
index 8ab46b7a3cd..3d9070acd4d 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
@@ -167,6 +167,10 @@ export const TransformationOperationRow = ({
       isOpen={toggleExpand()}
       // Assure that showHelp is untoggled when the row becomes collapsed.
       onClose={() => toggleShowHelp(false)}
+      expanderMessages={{
+        close: 'Collapse transformation row',
+        open: 'Expand transformation row',
+      }}
     >
       {showHelp && <OperationRowHelp markdown={prepMarkdown(uiConfig)} />}
       {filter && (