Transformation: keep collapsed states (#72601)

* Transformation: keep collapsed states

* Update

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,9 +270,12 @@ 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 (
+      <div className={cx({ [styles.hide]: hide })}>
         <DragDropContext onDragEnd={this.onDragEnd}>
           <Droppable droppableId="transformations-list" direction="vertical">
             {(provided) => {
@@ -290,6 +293,7 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
             }}
           </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)};