Panel: Show multiple errors info in the inspector (#64340)

public/app/features/dashboard/dashgrid/PanelStateWrapper.test.tsx

@@ -1,10 +1,11 @@
-import { act, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import React, { FC } from 'react';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import { ReplaySubject } from 'rxjs';
 
 import { EventBusSrv, getDefaultTimeRange, LoadingState, PanelData, PanelPlugin, PanelProps } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
 import { setTimeSrv, TimeSrv } from '../services/TimeSrv';
@@ -98,6 +99,46 @@ describe('PanelStateWrapper', () => {
       expect(screen.getByText(/plugin panel to render/i)).toBeInTheDocument();
     });
   });
+
+  describe('when there are error(s)', () => {
+    [
+      { errors: [{ message: 'boom!' }], expectedMessage: 'boom!' },
+      {
+        errors: [{ message: 'boom!' }, { message: 'boom2!' }],
+        expectedMessage: 'Multiple errors found. Click for more details',
+      },
+    ].forEach((scenario) => {
+      it(`then it should show the error message: ${scenario.expectedMessage}`, async () => {
+        const { rerender, props, subject, store } = setupTestContext({});
+
+        act(() => {
+          subject.next({ state: LoadingState.Loading, series: [], timeRange: getDefaultTimeRange() });
+          subject.next({
+            state: LoadingState.Error,
+            series: [],
+            errors: scenario.errors,
+            timeRange: getDefaultTimeRange(),
+          });
+        });
+
+        const newProps = { ...props, isInView: true };
+        rerender(
+          <Provider store={store}>
+            <PanelStateWrapper {...newProps} />
+          </Provider>
+        );
+
+        const button = screen.getByRole('button', {
+          name: selectors.components.Panels.Panel.headerCornerInfo('error'),
+        });
+        expect(button).toBeInTheDocument();
+        await act(async () => {
+          fireEvent.focus(button);
+        });
+        expect(await screen.findByText(scenario.expectedMessage)).toBeInTheDocument();
+      });
+    });
+  });
 });
 
 const TestPanelComponent: FC<PanelProps> = () => <div>Plugin Panel to Render</div>;

public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx

@@ -300,8 +300,14 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
         }
         break;
       case LoadingState.Error:
-        const { error } = data;
-        if (error) {
+        const { error, errors } = data;
+        if (errors?.length) {
+          if (errors.length === 1) {
+            errorMessage = errors[0].message;
+          } else {
+            errorMessage = 'Multiple errors found. Click for more details';
+          }
+        } else if (error) {
           if (errorMessage !== error.message) {
             errorMessage = error.message;
           }