Transformations: Force QueryOperationRow to expand on showHelp click (#73958)

* baldm0mma/help_button/ force QueryOperationRow to expand on showHelp click

* baldm0mma/help_button/ remove comment

* baldm0mma/help_button/ add comment to onClose()

* baldm0mma/help_button/ remove useToggle for showing help

* baldm0mma/help_button/ remove comment

* baldm0mma/help_button/ update comment

* baldm0mma/help_button/ add full toggle control for parent of QueryOperationRow

* baldm0mma/help_button/ update inline comments

* baldm0mma/help_button/ update annos

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { useUpdateEffect } from 'react-use';
 
@@ -52,6 +52,14 @@ export function QueryOperationRow({
     setIsContentVisible(!isContentVisible);
   }, [isContentVisible, setIsContentVisible]);
 
+  // Force QueryOperationRow expansion when `isOpen` prop updates in parent component.
+  // `undefined` can be deliberately passed value here, but we only want booleans to trigger the effect.
+  useEffect(() => {
+    if (typeof isOpen === 'boolean') {
+      setIsContentVisible(isOpen);
+    }
+  }, [isOpen]);
+
   const reportDragMousePosition = useCallback((e: React.MouseEvent) => {
     // When drag detected react-beautiful-dnd will preventDefault the event
     // Ref: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-use-dom-events.md#a-mouse-drag-has-started-and-the-user-is-now-dragging

public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx

@@ -40,8 +40,8 @@ export const TransformationOperationRow = ({
   onChange,
 }: TransformationOperationRowProps) => {
   const [showDeleteModal, setShowDeleteModal] = useToggle(false);
-  const [showDebug, toggleDebug] = useToggle(false);
+  const [showDebug, toggleShowDebug] = useToggle(false);
-  const [showHelp, toggleHelp] = useToggle(false);
+  const [showHelp, toggleShowHelp] = useToggle(false);
   const disabled = !!configs[index].transformation.disabled;
   const filter = configs[index].transformation.filter != null;
   const showFilter = filter || data.length > 1;
@@ -57,6 +57,16 @@ export const TransformationOperationRow = ({
     [onChange, configs]
   );
 
+  const toggleExpand = useCallback(() => {
+    if (showHelp) {
+      return true;
+    }
+
+    // We return `undefined` here since the QueryOperationRow component ignores an `undefined` value for the `isOpen` prop.
+    // If we returned `false` here, the row would be collapsed when the user toggles off `showHelp`, which is not what we want.
+    return undefined;
+  }, [showHelp]);
+
   // Adds or removes the frame filter
   const toggleFilter = useCallback(() => {
     let current = { ...configs[index].transformation };
@@ -98,8 +108,9 @@ export const TransformationOperationRow = ({
         <QueryOperationToggleAction
           title="Show transform help"
           icon="info-circle"
-          onClick={instrumentToggleCallback(toggleHelp, 'help', showHelp)}
+          // `instrumentToggleCallback` expects a function that takes a MouseEvent, is unused in the state setter. Instead, we simply toggle the state.
-          active={showHelp}
+          onClick={instrumentToggleCallback((_e) => toggleShowHelp(!showHelp), 'help', showHelp)}
+          active={!!showHelp}
         />
         {showFilter && (
           <QueryOperationToggleAction
@@ -113,7 +124,7 @@ export const TransformationOperationRow = ({
           title="Debug"
           disabled={!isOpen}
           icon="bug"
-          onClick={instrumentToggleCallback(toggleDebug, 'debug', showDebug)}
+          onClick={instrumentToggleCallback(toggleShowDebug, 'debug', showDebug)}
           active={showDebug}
         />
         <QueryOperationToggleAction
@@ -153,6 +164,9 @@ export const TransformationOperationRow = ({
       draggable
       actions={renderActions}
       disabled={disabled}
+      isOpen={toggleExpand()}
+      // Assure that showHelp is untoggled when the row becomes collapsed.
+      onClose={() => toggleShowHelp(false)}
     >
       {showHelp && <OperationRowHelp markdown={prepMarkdown(uiConfig)} />}
       {filter && (