Add variableValue helper and re-render on dashboard refresh (#252)

* Add variableValue helper and re-render on dashboard refresh

* Update CHANGELOG.md

* Update CHANGELOG.md

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>

CHANGELOG.md

@@ -9,6 +9,8 @@
 - Update Introduction video in README (#240)
 - Add data render mode and passing selected data frame (#246)
 - Update to Grafana 10.2.2 and Volkov labs packages (#247)
+- Add variableValue helper (#252)
+- Add re-render on dashboard refresh (#252)
 
 ### Bug fixes
 

src/components/TextPanel/TextPanel.test.tsx

@@ -1,5 +1,6 @@
 import { FieldType, toDataFrame } from '@grafana/data';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { RefreshEvent } from '@grafana/runtime';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { CodeLanguage, Format, TEST_IDS } from '../../constants';
@@ -85,6 +86,23 @@ describe('Panel', () => {
     afterRender: '',
   };
 
+  /**
+   * Event Bus
+   */
+  const unsubscribe = jest.fn();
+  const subscribe = jest.fn(() => ({
+    unsubscribe,
+  }));
+
+  const eventBus: any = {
+    getStream: jest.fn(() => ({
+      subscribe: jest.fn(() => ({
+        unsubscribe: jest.fn(),
+      })),
+    })),
+    subscribe,
+  };
+
   /**
    * Get Component
    * @param props
@@ -98,35 +116,50 @@ describe('Panel', () => {
         }),
       ],
     };
-    return <TextPanel data={data} options={options} {...(restProps as any)} />;
+    return <TextPanel data={data} options={options} eventBus={eventBus} {...(restProps as any)} />;
   };
 
+  beforeEach(() => {
+    subscribe.mockClear();
+    unsubscribe.mockClear();
+  });
+
   afterAll(() => {
     jest.resetAllMocks();
   });
 
   it('Should find component', async () => {
-    render(
-      getComponent({
-        options: { ...defaultOptions, defaultContent: 'hello' },
-        replaceVariables: (str: string) => str,
-        data: { series: [] } as any,
-      })
+    const streamSubscribe = jest.fn(() => ({
+      unsubscribe: jest.fn(),
+    }));
+
+    const eventBus = {
+      getStream: jest.fn(() => ({
+        subscribe: streamSubscribe,
+      })),
+    };
+
+    await act(async () =>
+      render(
+        getComponent({
+          options: { ...defaultOptions, defaultContent: 'hello' },
+          replaceVariables: (str: string) => str,
+          data: { series: [] } as any,
+          eventBus: eventBus as any,
+        })
+      )
     );
 
     expect(screen.getByTestId(TEST_IDS.panel.root)).toBeInTheDocument();
+
+    /**
+     * Should subscribe on dashboard refresh
+     */
+    expect(eventBus.getStream).toHaveBeenCalledWith(RefreshEvent);
+    expect(streamSubscribe).toHaveBeenCalled();
   });
 
   describe('Helpers execution', () => {
-    const unsubscribe = jest.fn();
-    const subscribe = jest.fn(() => ({
-      unsubscribe,
-    }));
-
-    const eventBus: any = {
-      subscribe,
-    };
-
     const helpers = `
       const subscription = eventBus.subscribe('event', () => {});
       
@@ -135,11 +168,6 @@ describe('Panel', () => {
       }
     `;
 
-    beforeEach(() => {
-      subscribe.mockClear();
-      unsubscribe.mockClear();
-    });
-
     it('Should execute code for empty data frame', () => {
       render(
         getComponent({

src/components/TextPanel/TextPanel.tsx

@@ -1,7 +1,8 @@
 import { css, cx } from '@emotion/css';
 import { PanelProps, SelectableValue } from '@grafana/data';
+import { RefreshEvent } from '@grafana/runtime';
 import { Select, useStyles2 } from '@grafana/ui';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { TEST_IDS } from '../../constants';
 import { useExternalResources } from '../../hooks';
@@ -31,6 +32,7 @@ export const TextPanel: React.FC<Props> = ({
    * States
    */
   const [frameIndex, setFrameIndex] = useState(0);
+  const [, setRenderCount] = useState(0);
 
   /**
    * Styles
@@ -81,6 +83,22 @@ export const TextPanel: React.FC<Props> = ({
     type: ResourceType.STYLES,
   });
 
+  /**
+   * Re-render on dashboard refresh
+   */
+  useEffect(() => {
+    /**
+     * On Refresh
+     */
+    const subscriber = eventBus.getStream(RefreshEvent).subscribe(() => {
+      setRenderCount((prev) => prev + 1);
+    });
+
+    return () => {
+      subscriber.unsubscribe();
+    };
+  }, [eventBus]);
+
   /**
    * Return
    */

src/helpers/html.test.tsx

@@ -119,8 +119,15 @@ describe('HTML helpers', () => {
 
   it('Should use variable handler', () => {
     let variableHandler: any;
+    let variableValueHandler: any;
+
     jest.mocked(Handlebars.registerHelper).mockImplementation(((name: any, handler: any) => {
-      variableHandler = handler;
+      if (name === 'variable') {
+        variableHandler = handler;
+      }
+      if (name === 'variableValue') {
+        variableValueHandler = handler;
+      }
     }) as any);
 
     generateHtml({
@@ -130,7 +137,9 @@ describe('HTML helpers', () => {
     } as any);
 
     expect(Handlebars.registerHelper).toHaveBeenCalledWith('variable', expect.any(Function));
+    expect(Handlebars.registerHelper).toHaveBeenCalledWith('variableValue', expect.any(Function));
 
     expect(variableHandler('varName')).toEqual([]);
+    expect(variableValueHandler('varName')).toEqual('varName');
   });
 });

src/helpers/html.ts

@@ -43,7 +43,16 @@ export const generateHtml = ({
   /**
    * Variable
    */
-  Handlebars.registerHelper('variable', (name: string) => replaceVariablesHelper(name, replaceVariables));
+  Handlebars.registerHelper('variable', (name: string) => {
+    return replaceVariablesHelper(name, replaceVariables);
+  });
+
+  /**
+   * Variable value
+   */
+  Handlebars.registerHelper('variableValue', (name: string) => {
+    return replaceVariables(`${name}`);
+  });
 
   /**
    * Unsubscribe