Update Partials loading (#358)

* partials updated

* Update CHANGELOG.md

* Remove Loading Bar

* Add link color

* Update CHANGELOG.md

---------

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

CHANGELOG.md

@@ -1,11 +1,13 @@
 # Changelog
 
-## 5.4.0 (IN PROGRESS)
+## 5.4.0 (2024-09-12)
 
 ### Features / Enhancements
 
 - Updated panel render if first data source does not have data (#353)
 - Added wrap button in the code editor (#359)
+- Updated Partials loading (#358)
+- Updated hyperlinks style (#358)
 
 ## 5.3.0 (2024-08-22)
 

src/components/Text/Text.styles.ts

@@ -28,6 +28,10 @@ export const getStyles = (theme: GrafanaTheme2) => {
       margin-left: ${theme.spacing(2)};
     }
 
+    a {
+      color: blue;
+    }
+
     table {
       border-collapse: collapse;
 
@@ -60,6 +64,16 @@ export const getStyles = (theme: GrafanaTheme2) => {
     }
   `;
 
+  /**
+   * Loading Bar
+   */
+  const loadingBar = css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+  `;
   /**
    * Highlight
    */
@@ -68,5 +82,6 @@ export const getStyles = (theme: GrafanaTheme2) => {
   return {
     frame,
     highlight,
+    loadingBar,
   };
 };

src/components/Text/Text.test.tsx

@@ -48,7 +48,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables: (str: string) => str,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -78,7 +77,6 @@ describe('Text', () => {
         timeZone: '',
         replaceVariables,
         eventBus: eventBus as any,
-        htmlContents: [],
       };
 
       await act(async () => render(<Text {...props} />));
@@ -113,7 +111,6 @@ describe('Text', () => {
         timeZone: '',
         replaceVariables,
         eventBus: eventBus as any,
-        htmlContents: [],
       };
 
       await act(async () => render(<Text {...props} />));
@@ -149,7 +146,6 @@ describe('Text', () => {
         timeZone: '',
         replaceVariables,
         eventBus: eventBus as any,
-        htmlContents: [],
       };
 
       const { rerender } = await act(async () => render(<Text {...props} />));
@@ -191,7 +187,6 @@ describe('Text', () => {
         timeZone: '',
         replaceVariables,
         eventBus: eventBus as any,
-        htmlContents: [],
       };
 
       await act(async () => render(<Text {...props} />));
@@ -235,7 +230,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -284,7 +278,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -344,7 +337,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -383,7 +375,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -425,7 +416,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables: (str: string) => str,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -456,7 +446,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables: (str: string) => str,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -496,7 +485,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables: (str: string) => str,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -547,7 +535,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables: (str: string) => str,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));
@@ -610,7 +597,6 @@ describe('Text', () => {
       timeZone: '',
       replaceVariables: (str: string) => str,
       eventBus: {} as any,
-      htmlContents: [],
     };
 
     await act(async () => render(<Text {...props} />));

src/components/Text/Text.tsx

@@ -12,11 +12,11 @@ import {
 } from '@grafana/data';
 import { getAppEvents } from '@grafana/runtime';
 import { TimeZone } from '@grafana/schema';
-import { Alert, useStyles2, useTheme2 } from '@grafana/ui';
+import { Alert, LoadingBar, useStyles2, useTheme2 } from '@grafana/ui';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { TEST_IDS } from '../../constants';
-import { PanelOptions, PartialItem, RenderMode, RowItem } from '../../types';
+import { PanelOptions, RenderMode, RowItem } from '../../types';
 import { generateHtml } from '../../utils';
 import { Row } from '../Row';
 import { getStyles } from './Text.styles';
@@ -73,13 +73,6 @@ interface Props {
    * @type {PanelData}
    */
   data: PanelData;
-
-  /**
-   * HTML contents
-   *
-   * @type {PartialItem[]}
-   */
-  htmlContents: PartialItem[];
 }
 
 /**
@@ -93,13 +86,17 @@ export const Text: React.FC<Props> = ({
   replaceVariables,
   eventBus,
   data: panelData,
-  htmlContents,
 }) => {
   /**
    * Generated rows
    */
   const [rows, setRows] = useState<RowItem[]>([]);
 
+  /**
+   * Loading state
+   */
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   /**
    * Generate html error
    */
@@ -136,7 +133,8 @@ export const Text: React.FC<Props> = ({
    */
   const getHtml = useCallback(
     async (htmlData: Record<string, unknown>, content: string) => {
-      return {
+      setIsLoading(true);
+      const result = {
         ...(await generateHtml({
           data: htmlData,
           content,
@@ -151,24 +149,14 @@ export const Text: React.FC<Props> = ({
           notifySuccess,
           notifyError,
           theme,
-          htmlContents,
+          partials: options?.contentPartials,
         })),
         data: htmlData,
       };
+      setIsLoading(false);
+      return result;
     },
-    [
-      options,
-      timeRange,
-      timeZone,
-      replaceVariables,
-      eventBus,
-      panelData,
-      frame,
-      notifySuccess,
-      notifyError,
-      theme,
-      htmlContents,
-    ]
+    [options, timeRange, timeZone, replaceVariables, eventBus, panelData, frame, notifySuccess, notifyError, theme]
   );
 
   useEffect(() => {
@@ -306,6 +294,11 @@ export const Text: React.FC<Props> = ({
 
   return (
     <>
+      {isLoading && (
+        <div className={styles.loadingBar}>
+          <LoadingBar width={250} />
+        </div>
+      )}
       {rows.map((row, index) => (
         <Row
           key={index}

src/components/TextPanel/TextPanel.tsx

@@ -5,7 +5,7 @@ import { Select, useStyles2, useTheme2 } from '@grafana/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { TEST_IDS } from '../../constants';
-import { useContentPartials, useExternalResources } from '../../hooks';
+import { useExternalResources } from '../../hooks';
 import { PanelOptions, RenderMode, ResourceType } from '../../types';
 import { getFrame } from '../../utils';
 import { Text } from '../Text';
@@ -93,8 +93,6 @@ export const TextPanel: React.FC<Props> = ({
     type: ResourceType.STYLES,
   });
 
-  const htmlContents = useContentPartials(options?.contentPartials);
-
   /**
    * Re-render on dashboard refresh
    */
@@ -145,7 +143,6 @@ export const TextPanel: React.FC<Props> = ({
           replaceVariables={replaceVariables}
           eventBus={eventBus}
           data={data}
-          htmlContents={htmlContents}
         />
       </div>
 

src/hooks/index.ts

@@ -1,2 +1 @@
-export * from './useContentPartials';
 export * from './useExternalResources';