Query Editor: Display error even if error field is empty (#79943)

public/app/features/query/components/QueryEditorRow.test.tsx

@@ -1,8 +1,31 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import React, { PropsWithChildren } from 'react';
 
 import { DataQueryRequest, dateTime, LoadingState, PanelData, toDataFrame } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
+import { mockDataSource } from 'app/features/alerting/unified/mocks';
 
-import { filterPanelDataToQuery, QueryEditorRow } from './QueryEditorRow';
+import { DataSourceType } from '../../alerting/unified/utils/datasource';
+
+import { filterPanelDataToQuery, Props, QueryEditorRow } from './QueryEditorRow';
+
+const mockDS = mockDataSource({
+  name: 'test',
+  type: DataSourceType.Alertmanager,
+});
+jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => {
+  return {
+    getDataSourceSrv: () => ({
+      get: () => Promise.resolve(mockDS),
+      getList: () => {},
+      getInstanceSettings: () => mockDS,
+    }),
+  };
+});
+// Draggable fails to render in tests, so we mock it out
+jest.mock('app/core/components/QueryOperationRow/QueryOperationRow', () => ({
+  QueryOperationRow: (props: PropsWithChildren) => <div>{props.children}</div>,
+}));
 
 function makePretendRequest(requestId: string, subRequests?: DataQueryRequest[]): DataQueryRequest {
   return {
@@ -219,3 +242,50 @@ describe('frame results with warnings', () => {
     expect(warningsComponent).toBe(null);
   });
 });
+describe('QueryEditorRow', () => {
+  const props = (data: PanelData): Props<DataQuery> => ({
+    dataSource: mockDS,
+    query: { refId: 'B' },
+    data,
+    queries: [{ refId: 'B' }],
+    id: 'test',
+    onAddQuery: jest.fn(),
+    onRunQuery: jest.fn(),
+    onChange: jest.fn(),
+    onRemoveQuery: jest.fn(),
+    index: 0,
+  });
+  it('should display error message in corresponding panel', async () => {
+    const data = {
+      state: LoadingState.Error,
+      series: [],
+      errors: [{ message: 'Error!!', refId: 'B' }],
+      timeRange: { from: dateTime(), to: dateTime(), raw: { from: 'now-1d', to: 'now' } },
+    };
+    render(<QueryEditorRow {...props(data)} />);
+    expect(await screen.findByText('Error!!')).toBeInTheDocument();
+  });
+  it('should display error message in corresponding panel if only error field is provided', async () => {
+    const data = {
+      state: LoadingState.Error,
+      series: [],
+      error: { message: 'Error!!', refId: 'B' },
+      errors: [],
+      timeRange: { from: dateTime(), to: dateTime(), raw: { from: 'now-1d', to: 'now' } },
+    };
+    render(<QueryEditorRow {...props(data)} />);
+    expect(await screen.findByText('Error!!')).toBeInTheDocument();
+  });
+  it('should not display error message if error.refId doesnt match', async () => {
+    const data = {
+      state: LoadingState.Error,
+      series: [],
+      errors: [{ message: 'Error!!', refId: 'A' }],
+      timeRange: { from: dateTime(), to: dateTime(), raw: { from: 'now-1d', to: 'now' } },
+    };
+    render(<QueryEditorRow {...props(data)} />);
+    await waitFor(() => {
+      expect(screen.queryByText('Error!!')).not.toBeInTheDocument();
+    });
+  });
+});

public/app/features/query/components/QueryEditorRow.tsx

@@ -42,7 +42,7 @@ import { RowActionComponents } from './QueryActionComponent';
 import { QueryEditorRowHeader } from './QueryEditorRowHeader';
 import { QueryErrorAlert } from './QueryErrorAlert';
 
-interface Props<TQuery extends DataQuery> {
+export interface Props<TQuery extends DataQuery> {
   data: PanelData;
   query: TQuery;
   queries: TQuery[];
@@ -510,7 +510,8 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     const { query, index, visualization, collapsable } = this.props;
     const { datasource, showingHelp, data } = this.state;
     const isDisabled = query.hide;
-
+    const error =
+      data?.error && data.error.refId === query.refId ? data.error : data?.errors?.find((e) => e.refId === query.refId);
     const rowClasses = classNames('query-editor-row', {
       'query-editor-row--disabled': isDisabled,
       'gf-form-disabled': isDisabled,
@@ -547,7 +548,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
               )}
               {editor}
             </ErrorBoundaryAlert>
-            {data?.error && data.error.refId === query.refId && <QueryErrorAlert error={data.error} />}
+            {error && <QueryErrorAlert error={error} />}
             {visualization}
           </div>
         </QueryOperationRow>