From 138079bbd80be5188e039463f7e5377507ac698b Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Fri, 26 Jan 2024 10:14:59 -0700
Subject: [PATCH] Transformations: Fix regression where disabling single
 transformation would display "No data" (#81320)

---
 e2e/panels-suite/panelEdit_transforms.spec.ts       | 13 ++++++++++++-
 .../src/selectors/components.ts                     |  2 ++
 .../QueryOperationRow/QueryOperationAction.tsx      |  2 ++
 .../TransformationOperationRow.tsx                  |  2 ++
 .../panel/components/PanelDataErrorView.tsx         |  5 ++++-
 public/app/features/query/state/PanelQueryRunner.ts |  3 ++-
 6 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/e2e/panels-suite/panelEdit_transforms.spec.ts b/e2e/panels-suite/panelEdit_transforms.spec.ts
index c71f649791c..eb3029b8d98 100644
--- a/e2e/panels-suite/panelEdit_transforms.spec.ts
+++ b/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');
+  });
 });
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 5a772cab53a..c9dde2bacaa 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/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',
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
index fe69509ac4a..0dc58eff83c 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
+++ b/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>
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
index 59fb8ad76e2..aa5f6df86f5 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
+++ b/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"
diff --git a/public/app/features/panel/components/PanelDataErrorView.tsx b/public/app/features/panel/components/PanelDataErrorView.tsx
index 93c7344d184..b9cc3ef21b9 100644
--- a/public/app/features/panel/components/PanelDataErrorView.tsx
+++ b/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 && (
diff --git a/public/app/features/query/state/PanelQueryRunner.ts b/public/app/features/query/state/PanelQueryRunner.ts
index ed1f6fcb1e3..6ff46053ef8 100644
--- a/public/app/features/query/state/PanelQueryRunner.ts
+++ b/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);
     }