From 867162b64a382d452f7c425c3f3914d4c816ad09 Mon Sep 17 00:00:00 2001
From: Ludovic Viaud <ludovic.viaud@gmail.com>
Date: Mon, 7 Aug 2023 14:20:12 +0200
Subject: [PATCH] Transformation: keep collapsed states (#72601)

* Transformation: keep collapsed states

* Update
---
 .../TransformationsEditor.tsx                 | 49 ++++++++++---------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 8a904936d86..8ac1b776bc7 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { cx, css } from '@emotion/css';
 import React, { ChangeEvent } from 'react';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { Unsubscribable } from 'rxjs';
@@ -270,26 +270,30 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
   };
 
   renderTransformationEditors = () => {
-    const { data, transformations } = this.state;
+    const styles = getStyles(config.theme2);
+    const { data, transformations, showPicker } = this.state;
+    const hide = config.featureToggles.transformationsRedesign && showPicker;
 
     return (
-      <DragDropContext onDragEnd={this.onDragEnd}>
-        <Droppable droppableId="transformations-list" direction="vertical">
-          {(provided) => {
-            return (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
-                <TransformationOperationRows
-                  configs={transformations}
-                  data={data}
-                  onRemove={this.onTransformationRemove}
-                  onChange={this.onTransformationChange}
-                />
-                {provided.placeholder}
-              </div>
-            );
-          }}
-        </Droppable>
-      </DragDropContext>
+      <div className={cx({ [styles.hide]: hide })}>
+        <DragDropContext onDragEnd={this.onDragEnd}>
+          <Droppable droppableId="transformations-list" direction="vertical">
+            {(provided) => {
+              return (
+                <div ref={provided.innerRef} {...provided.droppableProps}>
+                  <TransformationOperationRows
+                    configs={transformations}
+                    data={data}
+                    onRemove={this.onTransformationRemove}
+                    onChange={this.onTransformationChange}
+                  />
+                  {provided.placeholder}
+                </div>
+              );
+            }}
+          </Droppable>
+        </DragDropContext>
+      </div>
     );
   };
 
@@ -550,9 +554,7 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
                 />
               </div>
             )}
-            {hasTransforms &&
-              (!config.featureToggles.transformationsRedesign || !this.state.showPicker) &&
-              this.renderTransformationEditors()}
+            {hasTransforms && this.renderTransformationEditors()}
             {this.renderTransformsPicker()}
           </div>
         </Container>
@@ -587,6 +589,9 @@ function TransformationCard({ transform, onClick }: TransformationCardProps) {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
+    hide: css`
+      display: none;
+    `,
     card: css`
       margin: 0;
       padding: ${theme.spacing(1)};