Add fnLoader in grafana instead of prop from parent mfe (#83)

Spikatrix · GurinderRawala · commit 0c2d5d4ad40c · 2024-08-27T15:30:47.000-04:00
diff --git a/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx b/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx
@@ -0,0 +1,42 @@
+import { Box, Typography, type BoxProps } from '@mui/material';
+import Lottie, { type LottieComponentProps } from 'lottie-react';
+import React, { type ReactNode, type FC, type HTMLAttributes } from 'react';
+
+import logoUrl from './fn-logo.svg';
+import logoLoader from './fn-lottie-loader.json';
+
+export type FnLoaderProps = {
+  outerContainerProps?: Omit<BoxProps, 'children'>;
+  innerContainerProps?: Omit<BoxProps, 'children'>;
+  lottieProps?: LottieComponentProps;
+  imageProps?: HTMLAttributes<HTMLImageElement>;
+  text?: ReactNode;
+};
+
+export const FnLoader: FC<FnLoaderProps> = ({
+  outerContainerProps,
+  innerContainerProps,
+  lottieProps,
+  imageProps,
+  text,
+}) => (
+  <Box
+    display="flex"
+    justifyContent="center"
+    alignItems="center"
+    flexDirection="column"
+    paddingTop="150px"
+    {...outerContainerProps}
+  >
+    <img src={logoUrl} alt={'FluxNinja logo'} style={{ transform: 'scale(4)' }} {...imageProps} />
+    <Box marginTop="100px" {...innerContainerProps}>
+      <Lottie
+        animationData={logoLoader}
+        aria-label="Loading..."
+        style={{ maxWidth: '150px', margin: '0 auto' }}
+        {...lottieProps}
+      />
+    </Box>
+    {typeof text === 'string' ? <Typography>{text}</Typography> : text || null}
+  </Box>
+);
diff --git a/public/app/features/dashboard/components/DashboardLoading/fn-logo.svg b/public/app/features/dashboard/components/DashboardLoading/fn-logo.svg
@@ -0,0 +1,9 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M62.42 41.45C61.61 40.33 61.74 38.76 62.74 37.8C63.44 37.12 64.25 36.51 65.13 35.98C66.01 35.45 66.54 34.54 66.54 33.52V30.23C66.54 21.22 57.8 20.37 53.11 19.92C46.65 19.29 44.97 18.54 44.2 16.14C44.06 15.7 43.83 15.29 43.5 14.97C40.63 12.23 36.79 13.58 35.71 16.44C34.89 18.6 33.08 19.32 26.9 19.92C22.21 20.38 13.47 21.22 13.47 30.23V33.53C13.47 34.54 14.02 35.47 14.88 35.99C15.74 36.51 16.56 37.12 17.26 37.81C18.25 38.77 18.39 40.34 17.58 41.46C16.94 42.35 16.08 43.05 15.1 43.49C14.12 43.93 13.47 44.96 13.47 46.06V49.79C13.47 58.8 22.21 59.65 26.9 60.1C33.36 60.73 35.04 61.48 35.81 63.88C35.95 64.32 36.18 64.73 36.51 65.05C39.38 67.79 43.22 66.44 44.3 63.57C45.12 61.41 46.93 60.69 53.11 60.09C57.8 59.63 66.54 58.79 66.54 49.78V46.06C66.54 44.96 65.91 43.94 64.91 43.49C63.91 43.04 63.07 42.35 62.42 41.46V41.45Z" fill="#EFEEED"/>
+    <path d="M73.46 35.39C70.06 35.23 66.12 36.96 63.95 39.59C64.83 41.77 67.13 43 69.43 42.49C68.77 40.84 67.3 39.75 65.63 39.52C68.58 39.17 71.64 37.59 73.46 35.39Z" fill="#F8773D"/>
+    <path d="M28.97 37.2C28.56 37.2 28.16 37.29 27.81 37.45C28.06 37.68 28.19 38.06 28.08 38.44C27.98 38.8 27.65 39.09 27.28 39.13C26.93 39.17 26.63 39.05 26.42 38.82C26.18 39.35 26.09 39.96 26.23 40.61C26.49 41.77 27.49 42.66 28.67 42.78C30.35 42.95 31.76 41.63 31.76 39.99C31.76 38.44 30.51 37.19 28.96 37.19M30.22 42.1C29.85 42.1 29.56 41.81 29.56 41.44C29.56 41.07 29.85 40.78 30.22 40.78C30.59 40.78 30.88 41.08 30.88 41.44C30.88 41.8 30.58 42.1 30.22 42.1Z" fill="#56AE89"/>
+    <path d="M48.52 38.83C48.27 39.37 48.19 39.99 48.34 40.65C48.58 41.68 49.41 42.52 50.45 42.74C52.41 43.16 54.13 41.51 53.84 39.57C53.66 38.34 52.63 37.36 51.39 37.22C50.86 37.16 50.35 37.25 49.91 37.45C50.16 37.68 50.29 38.04 50.19 38.43C50.1 38.78 49.81 39.05 49.46 39.13C49.11 39.21 48.75 39.08 48.53 38.84M51.67 41.46C51.67 41.1 51.97 40.8 52.33 40.8C52.69 40.8 53 41.1 53 41.46C53 41.82 52.7 42.12 52.33 42.12C51.96 42.12 51.67 41.83 51.67 41.46Z" fill="#56AE89"/>
+    <path d="M51.43 32.89C46.28 32.89 48.01 36.56 39.99 37.48C33.01 36.68 33.42 33.79 30.24 33.06C26 32.09 21.75 35.17 21.47 39.52C21.19 43.87 24.48 47.11 28.56 47.11C33.7 47.11 31.98 43.44 39.99 42.52C46.97 43.32 46.56 46.2 49.74 46.94C53.98 47.92 58.23 44.83 58.52 40.48C58.81 36.13 55.51 32.89 51.43 32.89ZM28.96 44.17C26.62 44.17 24.72 42.24 24.79 39.88C24.85 37.7 26.66 35.89 28.84 35.83C31.2 35.76 33.13 37.66 33.13 40C33.13 42.34 31.26 44.17 28.96 44.17ZM51.03 44.17C48.69 44.17 46.79 42.23 46.86 39.87C46.92 37.69 48.74 35.88 50.92 35.82C53.28 35.76 55.2 37.65 55.2 39.99C55.2 42.33 53.34 44.16 51.03 44.16" fill="#56AE89"/>
+    <path d="M61.94 34.51C60.97 34.51 60.19 33.72 60.19 32.76V30.23C60.19 27.41 58.46 26.82 52.5 26.24C48.21 25.82 43.05 25.32 40.01 21.58C36.97 25.32 31.81 25.82 27.52 26.24C21.56 26.82 19.83 27.41 19.83 30.23V32.76C19.83 33.73 19.04 34.51 18.08 34.51C17.12 34.51 16.33 33.72 16.33 32.76V30.23C16.33 23.8 22.35 23.22 27.19 22.75C32.95 22.19 36.84 21.52 38.38 17.45C38.64 16.77 39.29 16.32 40.02 16.32C40.75 16.32 41.4 16.77 41.66 17.45C43.2 21.52 47.09 22.19 52.85 22.75C57.69 23.22 63.71 23.8 63.71 30.23V32.76C63.71 33.73 62.92 34.51 61.96 34.51H61.94Z" fill="#F8773D"/>
+    <path d="M40 63.69C39.27 63.69 38.62 63.24 38.36 62.56C36.82 58.49 32.93 57.82 27.17 57.26C22.33 56.79 16.31 56.21 16.31 49.78V47.25C16.31 46.28 17.1 45.5 18.06 45.5C19.02 45.5 19.81 46.29 19.81 47.25V49.78C19.81 52.6 21.54 53.19 27.5 53.77C31.79 54.19 36.95 54.69 39.99 58.43C43.03 54.69 48.19 54.19 52.48 53.77C58.44 53.19 60.17 52.6 60.17 49.78V47.25C60.17 46.28 60.96 45.5 61.92 45.5C62.88 45.5 63.67 46.29 63.67 47.25V49.78C63.67 56.21 57.65 56.79 52.81 57.26C47.05 57.82 43.16 58.49 41.62 62.56C41.36 63.24 40.71 63.69 39.98 63.69H40Z" fill="#F8773D"/>
+</svg>
diff --git a/public/app/features/dashboard/components/DashboardLoading/fn-lottie-loader.json b/public/app/features/dashboard/components/DashboardLoading/fn-lottie-loader.json
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -33,7 +33,7 @@ import { findTemplateVarChanges } from '../../variables/utils';
 import { AddWidgetModal } from '../components/AddWidgetModal/AddWidgetModal';
 import { DashNav } from '../components/DashNav';
 import { DashboardFailed } from '../components/DashboardLoading/DashboardFailed';
-import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
+import { FnLoader } from '../components/DashboardLoading/FnLoader';
 import { DashboardPrompt } from '../components/DashboardPrompt/DashboardPrompt';
 import { DashboardSettings } from '../components/DashboardSettings';
 import { PanelInspector } from '../components/Inspector/PanelInspector';
@@ -93,8 +93,7 @@ type OwnProps = {
   isPublic?: boolean;
   controlsContainer?: string | null;
   version?: FNDashboardProps['version'];
-  fnLoader?: FNDashboardProps['fnLoader'];
-  isLoading?: FNDashboardProps['isLoading']
+  isLoading?: FNDashboardProps['isLoading'];
 };
 
 export type DashboardPageProps = OwnProps &
@@ -402,17 +401,18 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   };
 
   render() {
-    const { dashboard, initError, queryParams, isPublic, FNDashboard, fnLoader, isLoading = noop } = this.props;
+    const { dashboard, initError, queryParams, isPublic, FNDashboard, isLoading = noop } = this.props;
     const { editPanel, viewPanel, updateScrollTop, pageNav, sectionNav } = this.state;
     const kioskMode = FNDashboard ? KioskMode.FN : !isPublic ? getKioskMode(this.props.queryParams) : KioskMode.Full;
 
     if (!dashboard || isEmpty(queryParams)) {
-      isLoading(true)
+      isLoading(true);
 
-      return isUndefined(fnLoader) ? <DashboardLoading initPhase={this.props.initPhase} />: <>{fnLoader}</>;
+      // return isUndefined(fnLoader) ? <DashboardLoading initPhase={this.props.initPhase} />: <>{fnLoader}</>;
+      return <FnLoader />;
     }
 
-    isLoading(false)
+    isLoading(false);
 
     const inspectPanel = this.getInspectPanel();
     const showSubMenu = !editPanel && !this.props.queryParams.editview;
diff --git a/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx b/public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx
@@ -27,7 +27,7 @@ const DEFAULT_DASHBOARD_PAGE_PROPS: Pick<DashboardPageProps, 'history' | 'route'
 };
 
 export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
-  const { queryParams, controlsContainer, setErrors, fnLoader, hiddenVariables, isLoading } = props;
+  const { queryParams, controlsContainer, setErrors, hiddenVariables, isLoading } = props;
 
   const firstError = useSelector((state: StoreState) => {
     const { appNotifications } = state;
@@ -66,10 +66,9 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
         queryParams,
         hiddenVariables,
         controlsContainer,
-        fnLoader,
         isLoading
       }),
-    [controlsContainer, fnLoader, hiddenVariables, isLoading, props, queryParams]
+    [controlsContainer, hiddenVariables, isLoading, props, queryParams]
   );
 
   return <DashboardPage {...dashboardPageProps} />;
diff --git a/public/app/fn-app/types.ts b/public/app/fn-app/types.ts
@@ -26,7 +26,6 @@ export interface FNDashboardProps {
   mode: GrafanaThemeType.Dark | GrafanaThemeType.Light;
   queryParams: ParsedQuery<string>;
   fnError?: ReactNode;
-  fnLoader?: ReactNode;
   pageTitle?: string;
   controlsContainer: string;
   isLoading: (isLoading: boolean) => void;
