Grafana firefox (#77)

* vscode fix

* fixed firefox bugs

---------

Co-authored-by: Gurinder Singh <gurnder.rawala@fluxninja.com>

Author: gurinder39

.yarn/sdks/prettier/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "2.8.1-sdk",
+  "version": "2.8.4-sdk",
   "main": "./index.js",
   "type": "commonjs"
 }

.yarn/sdks/typescript/lib/tsserver.js

@@ -109,6 +109,8 @@ const moduleWrapper = tsserver => {
             str = `zip:${str}`;
           } break;
         }
+      } else {
+        str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
       }
     }
 

.yarn/sdks/typescript/lib/tsserverlibrary.js

@@ -109,6 +109,8 @@ const moduleWrapper = tsserver => {
             str = `zip:${str}`;
           } break;
         }
+      } else {
+        str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
       }
     }
 

public/app/features/dashboard/dashgrid/LazyLoader.tsx

@@ -1,3 +1,4 @@
+import { isFunction } from 'lodash';
 import React, { useRef, useState } from 'react';
 import { useEffectOnce } from 'react-use';
 
@@ -55,7 +56,7 @@ LazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void)
 LazyLoader.observer = new IntersectionObserver(
   (entries) => {
     for (const entry of entries) {
-      LazyLoader.callbacks[entry.target.id](entry);
+      isFunction(LazyLoader.callbacks[entry.target.id]) && LazyLoader.callbacks[entry.target.id](entry);
     }
   },
   { rootMargin: '100px' }

public/app/fn-app/fn-app-provider.tsx

@@ -49,12 +49,12 @@ export const FnAppProvider: FC<FnAppProviderProps> = (props) => {
       <BrowserRouter>
         <ErrorBoundaryAlert style="page">
           <GrafanaContext.Provider value={app.context}>
-            <ThemeProvider value={config.theme2} children={
+            <ThemeProvider value={config.theme2}>
               <>
                 <GlobalStyles />
-                {children || null}
-              </>}
-            />
+                {children}
+              </>
+            </ThemeProvider>
           </GrafanaContext.Provider>
         </ErrorBoundaryAlert>
       </BrowserRouter>

public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx

@@ -1,6 +1,5 @@
 import { pick } from 'lodash';
-import React, { FC, Suspense, useMemo } from 'react';
-import { lazily } from 'react-lazily';
+import React, { FC, useMemo } from 'react';
 import { connect, MapStateToProps } from 'react-redux';
 
 import {
@@ -11,25 +10,23 @@ import {
   FnPropsMappedFromState,
 } from 'app/core/reducers/fn-slice';
 
+import { AngularRoot } from '../../angular/AngularRoot';
+import { FnAppProvider } from '../fn-app-provider';
 import { FNDashboardProps } from '../types';
 import { RenderPortal } from '../utils';
 
-const { RenderFNDashboard } = lazily(() => import('./render-fn-dashboard'));
-const { FnAppProvider } = lazily(() => import('../fn-app-provider'));
-const { AngularRoot } = lazily(() => import('../../angular/AngularRoot'));
+import { RenderFNDashboard } from './render-fn-dashboard';
 
 type FNDashboardComponentProps = Omit<FNDashboardProps, FnPropMappedFromState>;
 
 export const FNDashboard: FC<FNDashboardComponentProps> = (props) => {
   return (
-    <Suspense fallback={<>{props.fnLoader}</>}>
-      <FnAppProvider fnError={props.fnError}>
-        <div className="page-dashboard">
-          <AngularRoot />
-          <DashboardPortal {...props} />
-        </div>
-      </FnAppProvider>
-    </Suspense>
+    <FnAppProvider fnError={props.fnError}>
+      <div className="page-dashboard">
+        <AngularRoot />
+        <DashboardPortal {...props} />
+      </div>
+    </FnAppProvider>
   );
 };
 
@@ -42,7 +39,6 @@ function mapStateToProps(): MapStateToProps<
 }
 
 export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMappedFromState> = (props) => {
-
   const content = useMemo(() => {
     if (!props.FNDashboard) {
       // TODO Use no data

public/app/fn-app/utils.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import ReactDOM from 'react-dom';
 
 export interface RenderPortalProps {
@@ -7,14 +7,12 @@ export interface RenderPortalProps {
 
 export const getPortalContainer = (ID: string): HTMLElement | null => document.getElementById(ID);
 
-export const RenderPortal: FC<RenderPortalProps> = ({ ID, children }) => {
-  const portalDiv = getPortalContainer(ID)
-  
-  if(!portalDiv){
+export const RenderPortal: FC<PropsWithChildren<RenderPortalProps>> = ({ ID, children }) => {
+  const portalDiv = getPortalContainer(ID);
+
+  if (!portalDiv) {
     return null;
   }
 
   return ReactDOM.createPortal(children, portalDiv);
 };
-
-