Transformations: Update row title (#75988)

* Update row title in transformations

* Prettier fixes

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>

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}

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 && (