Add Handling Data Source Request Errors (#530)

* Add Handling Data Source Request Errors * Move useDatasourceRequest hook to package --------- Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>
VolkovLabs · Oct 25, 2024 · 3e6085d · 3e6085d
1 parent 22fa631
commit 3e6085d
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 226 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "@grafana/scenes": "5.20.0",
     "@grafana/ui": "^11.2.0",
     "@hello-pangea/dnd": "^16.6.0",
-    "@volkovlabs/components": "^3.4.1",
+    "@volkovlabs/components": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "semver": "^7.6.3",

diff --git a/src/__mocks__/@grafana/scenes.ts b/src/__mocks__/@grafana/scenes.ts
@@ -2,8 +2,12 @@
  * Mock @grafana/scenes
  * mostly prevent IntersectionObserver is not defined
  */
-jest.mock('@grafana/scenes', () => ({
+const getVariables = jest.fn();
+const getTimeRange = jest.fn();
+
+module.exports = {
   sceneGraph: {
-    getTimeRange: jest.fn(),
+    getVariables,
+    getTimeRange,
   },
-}));
+};
diff --git a/src/__mocks__/@volkovlabs/components.tsx b/src/__mocks__/@volkovlabs/components.tsx
@@ -80,7 +80,10 @@ const NumberInput: React.FC<Props> = ({ value, onChange, min, max, step, ...rest
   return <Input {...restProps} type="number" value={numberValue} onChange={onSaveValue} />;
 };
 
+const useDatasourceRequest = jest.fn();
+
 module.exports = {
   ...actual,
   NumberInput,
+  useDatasourceRequest,
 };
diff --git a/src/components/FormPanel/FormPanel.styles.ts b/src/components/FormPanel/FormPanel.styles.ts
@@ -50,5 +50,9 @@ export const getStyles = (theme: GrafanaTheme2) => {
     confirmTableTd: css`
       border: 1px solid;
     `,
+    errorMessage: css`
+      white-space: pre-wrap;
+      margin: ${theme.spacing(1, 0, 0)};
+    `,
   };
 };
diff --git a/src/components/FormPanel/FormPanel.test.tsx b/src/components/FormPanel/FormPanel.test.tsx
@@ -3,6 +3,7 @@ import { getAppEvents, RefreshEvent } from '@grafana/runtime';
 import { sceneGraph, SceneObject } from '@grafana/scenes';
 import { PanelContextProvider } from '@grafana/ui';
 import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { useDatasourceRequest } from '@volkovlabs/components';
 import React, { ReactElement } from 'react';
 
 import {
@@ -17,8 +18,7 @@ import {
   ResetActionMode,
   SectionVariant,
   TEST_IDS,
-} from '../../constants';
-import { useDatasourceRequest } from '../../hooks';
+} from '@/constants';
 import {
   ButtonOrientation,
   ButtonVariant,
@@ -28,26 +28,17 @@ import {
   ModalColumnName,
   PanelOptions,
   UpdateEnabledMode,
-} from '../../types';
+} from '@/types';
 import {
   getFormElementsSectionSelectors,
   getFormElementsSelectors,
   getPanelSelectors,
   toLocalFormElement,
-} from '../../utils';
+} from '@/utils';
+
 import { FormElements } from '../FormElements';
 import { FormPanel } from './FormPanel';
 
-/**
- * Mock @grafana/scenes
- * mostly prevent IntersectionObserver is not defined
- */
-jest.mock('@grafana/scenes', () => ({
-  sceneGraph: {
-    getTimeRange: jest.fn(),
-  },
-}));
-
 /**
  * Mock Form Elements
  */
@@ -77,11 +68,6 @@ const datasourceRequestMock = jest.fn(() =>
   })
 );
 
-jest.mock('../../hooks', () => ({
-  ...jest.requireActual('../../hooks'),
-  useDatasourceRequest: jest.fn(() => datasourceRequestMock),
-}));
-
 /**
  * Panel
  */
@@ -499,7 +485,7 @@ describe('Panel', () => {
        * Check if http error message shown
        */
       expect(selectors.errorMessage()).toBeInTheDocument();
-      expect(within(selectors.errorMessage()).getByText('Initial error: message')).toBeInTheDocument();
+      expect(selectors.errorMessage()).toHaveTextContent('Initial Error: message');
     });
 
     it('Should show error if error while execution', async () => {

diff --git a/src/components/FormPanel/FormPanel.tsx b/src/components/FormPanel/FormPanel.tsx
@@ -21,7 +21,7 @@ import {
   toDataQueryResponse,
 } from '@grafana/runtime';
 import { Alert, Button, ConfirmModal, LoadingBar, usePanelContext, useStyles2, useTheme2 } from '@grafana/ui';
-import { useDashboardRefresh } from '@volkovlabs/components';
+import { useDashboardRefresh, useDatasourceRequest } from '@volkovlabs/components';
 import { CustomButtonsRow } from 'components/CustomButtonsRow';
 import { isEqual } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -37,7 +37,7 @@ import {
   ResetActionMode,
   TEST_IDS,
 } from '@/constants';
-import { useDatasourceRequest, useFormElements, useMutableState } from '@/hooks';
+import { useFormElements, useMutableState } from '@/hooks';
 import {
   ButtonVariant,
   FormElement,
@@ -410,7 +410,7 @@ export const FormPanel: React.FC<Props> = ({
         replaceVariables,
         payload,
       }).catch((error: DataQueryError) => {
-        const errorMessage = `Initial datasource error: ${error.message ? error.message : JSON.stringify(error)}`;
+        const errorMessage = `Initial Datasource Error: ${error.message ? error.message : JSON.stringify(error)}`;
         setError(errorMessage);
         return null;
       });
@@ -477,7 +477,7 @@ export const FormPanel: React.FC<Props> = ({
         method: options.initial.method,
         headers,
       }).catch((error: Error) => {
-        const errorMessage = `Initial error: ${error.message ? error.message : error.toString()}`;
+        const errorMessage = `Initial Error: ${error.message ? error.message : error.toString()}`;
         setError(errorMessage);
         return null;
       });
@@ -618,7 +618,7 @@ export const FormPanel: React.FC<Props> = ({
       replaceVariables,
       payload,
     }).catch((error: DataQueryError) => {
-      const errorMessage = `Reset datasource error: ${error.message ? error.message : JSON.stringify(error)}`;
+      const errorMessage = `Reset Datasource Error: ${error.message ? error.message : JSON.stringify(error)}`;
       setError(errorMessage);
       return null;
     });
@@ -709,7 +709,7 @@ export const FormPanel: React.FC<Props> = ({
         replaceVariables,
         payload,
       }).catch((error: DataQueryError) => {
-        const errorMessage = `Update datasource error: ${error.message ? error.message : JSON.stringify(error)}`;
+        const errorMessage = `Update Datasource Error: ${error.message ? error.message : JSON.stringify(error)}`;
         setError(errorMessage);
         return null;
       });
@@ -1066,7 +1066,12 @@ export const FormPanel: React.FC<Props> = ({
       </div>
 
       {error && (
-        <Alert data-testid={TEST_IDS.panel.errorMessage} severity="error" title="Request">
+        <Alert
+          data-testid={TEST_IDS.panel.errorMessage}
+          severity="error"
+          title="Request"
+          className={styles.errorMessage}
+        >
           {error}
         </Alert>
       )}

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,5 +1,4 @@
 export * from './useAutoSave';
-export * from './useDatasourceRequest';
 export * from './useDatasources';
 export * from './useFormElements';
 export * from './useMutableState';

diff --git a/src/hooks/useDatasourceRequest.test.ts b/src/hooks/useDatasourceRequest.test.ts