Add useDashboardVariables and useDashboardRefresh hooks

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.4.1 (2024-10-22)
+
+### Features / Enhancements
+
+- Add useDashboardVariables and useDashboardRefresh hooks (#68)
+
 ## 3.3.0 (2024-10-02)
 
 ### Features / Enhancements

packages/components/README.md

@@ -13,6 +13,8 @@
 - `createUseDataHook` allows to create `useData` hook to get data through data source api.
 - `useDashboardTimeRange` allows to use actual dashboard time range.
 - `useFormBuilder` allows to create declarative forms.
+- `useDashboardVariables` allows to use dashboard variables.
+- `useDashboardRefresh` allows to refresh dashboard.
 
 ### Utils
 

packages/components/package.json

@@ -4,6 +4,7 @@
     "@emotion/css": "^11.11.2",
     "@grafana/data": "^11.1.0",
     "@grafana/runtime": "^11.1.0",
+    "@grafana/scenes": "^5.20.2",
     "@grafana/ui": "^11.1.0",
     "@volkovlabs/jest-selectors": "^1.5.0",
     "classnames": "^2.5.1",
@@ -88,5 +89,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "3.3.0"
+  "version": "3.4.1"
 }

packages/components/rollup.config.mjs

@@ -25,6 +25,7 @@ export default [
       'rc-tooltip',
       '@grafana/data',
       '@grafana/runtime',
+      '@grafana/scenes',
       'lodash',
       'rc-slider/assets/index.css',
       '@volkovlabs/jest-selectors',
@@ -46,6 +47,7 @@ export default [
       'rc-tooltip',
       '@grafana/data',
       '@grafana/runtime',
+      '@grafana/scenes',
       'lodash',
       'rc-slider/assets/index.css',
       '@volkovlabs/jest-selectors',

packages/components/src/@types/global.d.ts

@@ -0,0 +1,11 @@
+import { SceneObject } from '@grafana/scenes';
+
+/**
+ * __grafanaSceneContext contains Dashboard Scene Object if scene enabled
+ */
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __grafanaSceneContext?: SceneObject;
+  }
+}

packages/components/src/__mocks__/@grafana/scenes.ts

@@ -0,0 +1,9 @@
+/**
+ * Mock @grafana/scenes
+ * mostly prevent IntersectionObserver is not defined
+ */
+jest.mock('@grafana/scenes', () => ({
+  sceneGraph: {
+    getVariables: jest.fn(),
+  },
+}));

packages/components/src/hooks/index.ts

@@ -1,3 +1,5 @@
+export * from './useDashboardRefresh';
 export * from './useDashboardTimeRange';
+export * from './useDashboardVariables';
 export * from './useData';
 export * from './useFormBuilder';

packages/components/src/hooks/useDashboardRefresh.test.ts

@@ -0,0 +1,80 @@
+import { EventBusSrv } from '@grafana/data';
+import { getAppEvents } from '@grafana/runtime';
+import { sceneGraph } from '@grafana/scenes';
+import { renderHook } from '@testing-library/react';
+
+import { useDashboardRefresh } from './useDashboardRefresh';
+
+/**
+ * Mock @grafana/scenes
+ */
+jest.mock('@grafana/scenes', () => ({
+  sceneGraph: {
+    getTimeRange: jest.fn(),
+  },
+}));
+
+/**
+ * Mock @grafana/runtime
+ */
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getAppEvents: jest.fn(),
+}));
+
+describe('useDashboardRefresh', () => {
+  /**
+   * App Events
+   */
+  const appEvents = new EventBusSrv();
+
+  /**
+   * Enable Scene
+   */
+  const enableScene = () => {
+    Object.defineProperty(global, '__grafanaSceneContext', {
+      writable: true,
+      value: {},
+    });
+  };
+
+  beforeEach(() => {
+    jest.mocked(getAppEvents).mockReturnValue(appEvents);
+  });
+
+  afterEach(() => {
+    appEvents.removeAllListeners();
+    Object.defineProperty(global, '__grafanaSceneContext', {
+      writable: true,
+      value: undefined,
+    });
+  });
+
+  it('Should refresh non scene dashboard', () => {
+    const { result } = renderHook(() => useDashboardRefresh());
+
+    let refreshEvent;
+
+    appEvents.getStream({ type: 'variables-changed' } as never).subscribe((event) => (refreshEvent = event));
+
+    result.current();
+
+    expect(refreshEvent).toEqual({
+      type: 'variables-changed',
+      payload: { refreshAll: true },
+    });
+  });
+
+  it('Should refresh scene dashboard', () => {
+    enableScene();
+
+    const onRefresh = jest.fn();
+    jest.mocked(sceneGraph.getTimeRange).mockReturnValue({ onRefresh } as never);
+
+    const { result } = renderHook(() => useDashboardRefresh());
+
+    result.current();
+
+    expect(onRefresh).toHaveBeenCalled();
+  });
+});

packages/components/src/hooks/useDashboardRefresh.ts

@@ -0,0 +1,22 @@
+import { getAppEvents } from '@grafana/runtime';
+import { sceneGraph } from '@grafana/scenes';
+import { useCallback } from 'react';
+
+/**
+ * Use Dashboard Refresh
+ */
+export const useDashboardRefresh = () => {
+  return useCallback(() => {
+    /**
+     * Refresh on scene dashboard
+     */
+    if (window.__grafanaSceneContext) {
+      return sceneGraph.getTimeRange(window.__grafanaSceneContext)?.onRefresh();
+    }
+
+    /**
+     * Refresh dashboard
+     */
+    return getAppEvents().publish({ type: 'variables-changed', payload: { refreshAll: true } });
+  }, []);
+};