Fix e2e (#71594)

e2e/panels-suite/panelEdit_transforms.spec.ts

@@ -10,10 +10,7 @@ e2e.scenario({
     e2e.flows.openDashboard({ uid: '5SdHCadmz', queryParams: { editPanel: 3 } });
 
     e2e.components.Tab.title('Transform').should('be.visible').click();
-
+    e2e.components.TransformTab.newTransform('Reduce').scrollIntoView().should('be.visible').click();
-    // Flacky tests. Error: cy.click() failed because this element is detached from the DOM.
+    e2e.components.Transforms.Reduce.calculationsLabel().should('be.visible');
-    // The element is visible and clickable manually.
-    // e2e.components.TransformTab.newTransform('Reduce').scrollIntoView().should('be.visible').click();
-    // e2e.components.Transforms.Reduce.calculationsLabel().should('be.visible');
   },
 });

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

@@ -346,7 +346,46 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
       );
     }
 
-    const Picker = () => (
+    return (
+      <>
+        {noTransforms && (
+          <Container grow={1}>
+            <LocalStorageValueProvider<boolean> storageKey={LOCAL_STORAGE_KEY} defaultValue={false}>
+              {(isDismissed, onDismiss) => {
+                if (isDismissed) {
+                  return null;
+                }
+
+                return (
+                  <Alert
+                    title="Transformations"
+                    severity="info"
+                    onRemove={() => {
+                      onDismiss(true);
+                    }}
+                  >
+                    <p>
+                      Transformations allow you to join, calculate, re-order, hide, and rename your query results before
+                      they are visualized. <br />
+                      Many transforms are not suitable if you&apos;re using the Graph visualization, as it currently
+                      only supports time series data. <br />
+                      It can help to switch to the Table visualization to understand what a transformation is doing.{' '}
+                    </p>
+                    <a
+                      href={getDocsLink(DocsId.Transformations)}
+                      className="external-link"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Read more
+                    </a>
+                  </Alert>
+                );
+              }}
+            </LocalStorageValueProvider>
+          </Container>
+        )}
+        {showPicker ? (
           <>
             {config.featureToggles.transformationsRedesign && (
               <>
@@ -363,7 +402,12 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
                   </Button>
                 )}
                 <div className={styles.pickerInformationLine}>
-              <a href={getDocsLink(DocsId.Transformations)} className="external-link" target="_blank" rel="noreferrer">
+                  <a
+                    href={getDocsLink(DocsId.Transformations)}
+                    className="external-link"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     <span className={styles.pickerInformationLineHighlight}>Transformations</span>{' '}
                     <Icon name="external-link-alt" />
                   </a>
@@ -445,49 +489,6 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
               )}
             </VerticalGroup>
           </>
-    );
-
-    return (
-      <>
-        {noTransforms && (
-          <Container grow={1}>
-            <LocalStorageValueProvider<boolean> storageKey={LOCAL_STORAGE_KEY} defaultValue={false}>
-              {(isDismissed, onDismiss) => {
-                if (isDismissed) {
-                  return null;
-                }
-
-                return (
-                  <Alert
-                    title="Transformations"
-                    severity="info"
-                    onRemove={() => {
-                      onDismiss(true);
-                    }}
-                  >
-                    <p>
-                      Transformations allow you to join, calculate, re-order, hide, and rename your query results before
-                      they are visualized. <br />
-                      Many transforms are not suitable if you&apos;re using the Graph visualization, as it currently
-                      only supports time series data. <br />
-                      It can help to switch to the Table visualization to understand what a transformation is doing.{' '}
-                    </p>
-                    <a
-                      href={getDocsLink(DocsId.Transformations)}
-                      className="external-link"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Read more
-                    </a>
-                  </Alert>
-                );
-              }}
-            </LocalStorageValueProvider>
-          </Container>
-        )}
-        {showPicker ? (
-          <Picker />
         ) : (
           <Button
             icon="plus"