Transformations: Fix regression where disabling single transformation would display "No data" (#81320)

e2e/panels-suite/panelEdit_transforms.spec.ts

@@ -6,7 +6,7 @@ describe('Panel edit tests - transformations', () => {
   });
 
   it('Tests transformations editor', () => {
-    e2e.flows.openDashboard({ uid: '5SdHCadmz', queryParams: { editPanel: 3 } });
+    e2e.flows.openDashboard({ uid: 'TkZXxlNG3', queryParams: { editPanel: 47 } });
 
     e2e.components.Tab.title('Transform data').should('be.visible').click();
     e2e.components.Transforms.addTransformationButton().scrollIntoView().should('be.visible').click();
@@ -14,4 +14,15 @@ describe('Panel edit tests - transformations', () => {
     e2e.components.Transforms.Reduce.calculationsLabel().scrollIntoView().should('be.visible');
     e2e.components.Transforms.Reduce.modeLabel().should('be.visible');
   });
+
+  it('Tests case where transformations can be disabled and not clear out panel data', () => {
+    e2e.flows.openDashboard({ uid: 'TkZXxlNG3', queryParams: { editPanel: 47 } });
+
+    e2e.components.Tab.title('Transform data').should('be.visible').click();
+    e2e.components.Transforms.addTransformationButton().scrollIntoView().should('be.visible').click();
+    e2e.components.TransformTab.newTransform('Reduce').scrollIntoView().should('be.visible').click();
+    e2e.components.Transforms.disableTransformationButton().should('be.visible').click();
+
+    e2e.components.Panels.Panel.PanelDataErrorMessage().should('not.exist');
+  });
 });

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -164,6 +164,7 @@ export const Components = {
         container: 'data-testid hover-header-container',
         dragIcon: 'data-testid drag-icon',
       },
+      PanelDataErrorMessage: 'data-testid Panel data error message',
     },
     Visualization: {
       Graph: {
@@ -306,6 +307,7 @@ export const Components = {
   },
   Transforms: {
     card: (name: string) => `data-testid New transform ${name}`,
+    disableTransformationButton: 'data-testid Disable transformation button',
     Reduce: {
       modeLabel: 'data-testid Transform mode label',
       calculationsLabel: 'data-testid Transform calculations label',

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

@@ -10,6 +10,7 @@ interface BaseQueryOperationActionProps {
   title: string;
   onClick: (e: React.MouseEvent) => void;
   disabled?: boolean;
+  dataTestId?: string;
 }
 
 function BaseQueryOperationAction(props: QueryOperationActionProps | QueryOperationToggleActionProps) {
@@ -25,6 +26,7 @@ function BaseQueryOperationAction(props: QueryOperationActionProps | QueryOperat
         onClick={props.onClick}
         type="button"
         aria-label={selectors.components.QueryEditorRow.actionButton(props.title)}
+        data-testid={props.dataTestId}
         {...('active' in props && { 'aria-pressed': props.active })}
       />
     </div>

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

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useToggle } from 'react-use';
 
 import { DataTransformerConfig, TransformerRegistryItem, FrameMatcherID, DataTopic } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
 import { ConfirmModal } from '@grafana/ui';
 import {
@@ -120,6 +121,7 @@ export const TransformationOperationRow = ({
           icon={disabled ? 'eye-slash' : 'eye'}
           onClick={instrumentToggleCallback(() => onDisableToggle(index), 'disabled', disabled)}
           active={disabled}
+          dataTestId={selectors.components.Transforms.disableTransformationButton}
         />
         <QueryOperationAction
           title="Remove"

public/app/features/panel/components/PanelDataErrorView.tsx

@@ -8,6 +8,7 @@ import {
   VisualizationSuggestionsBuilder,
   VisualizationSuggestion,
 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { PanelDataErrorViewProps, locationService } from '@grafana/runtime';
 import { usePanelContext, useStyles2 } from '@grafana/ui';
 import { CardButton } from 'app/core/components/CardButton';
@@ -66,7 +67,9 @@ export function PanelDataErrorView(props: PanelDataErrorViewProps) {
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.message}>{message}</div>
+      <div className={styles.message} data-testid={selectors.components.Panels.Panel.PanelDataErrorMessage}>
+        {message}
+      </div>
       {context.app === CoreApp.PanelEditor && dataSummary.hasData && panel && (
         <div className={styles.actions}>
           {props.suggestions && (

public/app/features/query/state/PanelQueryRunner.ts

@@ -219,7 +219,8 @@ export class PanelQueryRunner {
   private applyTransformations(data: PanelData): Observable<PanelData> {
     const transformations = this.dataConfigSource.getTransformations();
 
-    if (!transformations || transformations.length === 0) {
+    const allTransformationsDisabled = transformations && transformations.every((t) => t.disabled);
+    if (allTransformationsDisabled || !transformations || transformations.length === 0) {
       return of(data);
     }