PanelEditor: Prevents adding transformations in panels with alerts (#27706)

public/app/features/alerting/AlertTab.tsx

 import React, { PureComponent } from 'react';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
-import { css } from 'emotion';
-import { Alert, Button, IconName, CustomScrollbar, Container, HorizontalGroup, ConfirmModal, Modal } from '@grafana/ui';
+import { Alert, Button, ConfirmModal, Container, CustomScrollbar, HorizontalGroup, IconName, Modal } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
 import { getAlertingValidationMessage } from './getAlertingValidationMessage';
@@ -14,8 +13,7 @@ import { DashboardModel } from '../dashboard/state/DashboardModel';
 import { PanelModel } from '../dashboard/state/PanelModel';
 import { TestRuleResult } from './TestRuleResult';
 import { AppNotificationSeverity, StoreState } from 'app/types';
-import { updateLocation } from 'app/core/actions';
-import { PanelEditorTabId } from '../dashboard/components/PanelEditor/types';
+import { PanelNotSupported } from '../dashboard/components/PanelEditor/PanelNotSupported';
 
 interface OwnProps {
   dashboard: DashboardModel;
@@ -26,14 +24,12 @@ interface ConnectedProps {
   angularPanelComponent?: AngularComponent | null;
 }
 
-interface DispatchProps {
-  updateLocation: typeof updateLocation;
-}
+interface DispatchProps {}
 
 export type Props = OwnProps & ConnectedProps & DispatchProps;
 
 interface State {
-  validatonMessage: string;
+  validationMessage: string;
   showStateHistory: boolean;
   showDeleteConfirmation: boolean;
   showTestRule: boolean;
@@ -45,7 +41,7 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
   panelCtrl: any;
 
   state: State = {
-    validatonMessage: '',
+    validationMessage: '',
     showStateHistory: false,
     showDeleteConfirmation: false,
     showTestRule: false,
@@ -94,15 +90,15 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
 
     this.component = loader.load(this.element, scopeProps, template);
 
-    const validatonMessage = await getAlertingValidationMessage(
+    const validationMessage = await getAlertingValidationMessage(
       panel.transformations,
       panel.targets,
       getDataSourceSrv(),
       panel.datasource
     );
 
-    if (validatonMessage) {
-      this.setState({ validatonMessage });
+    if (validationMessage) {
+      this.setState({ validationMessage });
     }
   }
 
@@ -112,37 +108,11 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
     this.forceUpdate();
   };
 
-  switchToQueryTab = () => {
-    const { updateLocation } = this.props;
-    updateLocation({ query: { tab: PanelEditorTabId.Query }, partial: true });
-  };
-
-  onToggleModal = (prop: keyof Omit<State, 'validatonMessage'>) => {
+  onToggleModal = (prop: keyof Omit<State, 'validationMessage'>) => {
     const value = this.state[prop];
     this.setState({ ...this.state, [prop]: !value });
   };
 
-  renderValidationMessage = () => {
-    const { validatonMessage } = this.state;
-
-    return (
-      <div
-        className={css`
-          width: 508px;
-          margin: 128px auto;
-        `}
-      >
-        <h2>{validatonMessage}</h2>
-        <br />
-        <div className="gf-form-group">
-          <Button size={'md'} variant={'secondary'} icon="arrow-left" onClick={this.switchToQueryTab}>
-            Go back to Queries
-          </Button>
-        </div>
-      </div>
-    );
-  };
-
   renderTestRule = () => {
     if (!this.state.showTestRule) {
       return null;
@@ -213,11 +183,11 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
 
   render() {
     const { alert, transformations } = this.props.panel;
-    const { validatonMessage } = this.state;
+    const { validationMessage } = this.state;
     const hasTransformations = transformations && transformations.length > 0;
 
-    if (!alert && validatonMessage) {
-      return this.renderValidationMessage();
+    if (!alert && validationMessage) {
+      return <PanelNotSupported message={validationMessage} />;
     }
 
     const model = {
@@ -253,7 +223,7 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
                   </Button>
                 </HorizontalGroup>
               )}
-              {!alert && !validatonMessage && <EmptyListCTA {...model} />}
+              {!alert && !validationMessage && <EmptyListCTA {...model} />}
             </div>
           </Container>
         </CustomScrollbar>
@@ -272,6 +242,6 @@ const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (
   };
 };
 
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { updateLocation };
+const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {};
 
 export const AlertTab = connect(mapStateToProps, mapDispatchToProps)(UnConnectedAlertTab);

public/app/features/dashboard/components/PanelEditor/PanelNotSupported.test.tsx

+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { PanelNotSupported, Props } from './PanelNotSupported';
+import { updateLocation } from '../../../../core/actions';
+import { PanelEditorTabId } from './types';
+
+const setupTestContext = (options: Partial<Props>) => {
+  const defaults: Props = {
+    message: '',
+    dispatch: jest.fn(),
+  };
+
+  const props = { ...defaults, ...options };
+  render(<PanelNotSupported {...props} />);
+
+  return { props };
+};
+
+describe('PanelNotSupported', () => {
+  describe('when component is mounted', () => {
+    it('then the supplied message should be shown', () => {
+      setupTestContext({ message: 'Expected message' });
+
+      expect(screen.getByRole('heading', { name: /expected message/i })).toBeInTheDocument();
+    });
+
+    it('then the back to queries button should exist', () => {
+      setupTestContext({ message: 'Expected message' });
+
+      expect(screen.getByRole('button', { name: /go back to queries/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('when the back to queries button is clicked', () => {
+    it('then correct action should be dispatched', () => {
+      const {
+        props: { dispatch },
+      } = setupTestContext({});
+
+      userEvent.click(screen.getByRole('button', { name: /go back to queries/i }));
+
+      expect(dispatch).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledWith(updateLocation({ query: { tab: PanelEditorTabId.Query }, partial: true }));
+    });
+  });
+});

public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx

+import React, { FC, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { Dispatch } from 'redux';
+import { Button, VerticalGroup } from '@grafana/ui';
+
+import { Layout } from '@grafana/ui/src/components/Layout/Layout';
+import { PanelEditorTabId } from './types';
+import { updateLocation } from '../../../../core/actions';
+
+export interface Props {
+  message: string;
+  dispatch?: Dispatch;
+}
+
+export const PanelNotSupported: FC<Props> = ({ message, dispatch: propsDispatch }) => {
+  const dispatch = propsDispatch ? propsDispatch : useDispatch();
+  const onBackToQueries = useCallback(() => {
+    dispatch(updateLocation({ query: { tab: PanelEditorTabId.Query }, partial: true }));
+  }, [dispatch]);
+
+  return (
+    <Layout justify="center" style={{ marginTop: '100px' }}>
+      <VerticalGroup spacing="md">
+        <h2>{message}</h2>
+        <div>
+          <Button size="md" variant="secondary" icon="arrow-left" onClick={onBackToQueries}>
+            Go back to Queries
+          </Button>
+        </div>
+      </VerticalGroup>
+    </Layout>
+  );
+};

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

 import React from 'react';
 import {
+  Alert,
   Button,
   Container,
   CustomScrollbar,
@@ -10,14 +11,14 @@ import {
   VerticalGroup,
 } from '@grafana/ui';
 import {
+  DataFrame,
   DataTransformerConfig,
+  DocsId,
   GrafanaTheme,
+  PanelData,
   SelectableValue,
   standardTransformersRegistry,
   transformDataFrame,
-  DataFrame,
-  PanelData,
-  DocsId,
 } from '@grafana/data';
 import { TransformationOperationRow } from './TransformationOperationRow';
 import { Card, CardProps } from '../../../../core/components/Card/Card';
@@ -27,6 +28,8 @@ import { Unsubscribable } from 'rxjs';
 import { PanelModel } from '../../state';
 import { getDocsLink } from 'app/core/utils/docsLinks';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { PanelNotSupported } from '../PanelEditor/PanelNotSupported';
+import { AppNotificationSeverity } from '../../../../types';
 
 interface TransformationsEditorProps {
   panel: PanelModel;
@@ -285,14 +288,27 @@ export class TransformationsEditor extends React.PureComponent<TransformationsEd
   }
 
   render() {
+    const {
+      panel: { alert },
+    } = this.props;
     const { transformations } = this.state;
 
     const hasTransforms = transformations.length > 0;
 
+    if (!hasTransforms && alert) {
+      return <PanelNotSupported message="Transformations can't be used on a panel with existing alerts" />;
+    }
+
     return (
       <CustomScrollbar autoHeightMin="100%">
         <Container padding="md">
           <div aria-label={selectors.components.TransformTab.content}>
+            {hasTransforms && alert ? (
+              <Alert
+                severity={AppNotificationSeverity.Error}
+                title="Transformations can't be used on a panel with alerts"
+              />
+            ) : null}
             {!hasTransforms && this.renderNoAddedTransformsState()}
             {hasTransforms && this.renderTransformationEditors()}
             {hasTransforms && this.renderTransformationSelector()}