portal for time range selector

Author: gurinder39

public/app/core/reducers/fn-slice.ts

@@ -23,7 +23,7 @@ export type SetFnStateAction = PayloadAction<Omit<FnGlobalState, 'hiddenVariable
 
 export type FnPropMappedFromState = Extract<
   keyof FnGlobalState,
-  'FNDashboard' | 'hiddenVariables' | 'mode' | 'uid' | 'queryParams' | 'slug' | 'version'
+  'FNDashboard' | 'hiddenVariables' | 'mode' | 'uid' | 'queryParams' | 'slug' | 'version' | 'controlsContainer'
 >;
 export type FnStateProp = keyof FnGlobalState;
 

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -1,4 +1,5 @@
 import { cx } from '@emotion/css';
+import { Portal } from '@mui/material';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps, MapDispatchToProps, MapStateToProps } from 'react-redux';
 
@@ -71,7 +72,7 @@ export type MapStateToDashboardPageProps = MapStateToProps<
   Pick<DashboardState, 'initPhase' | 'initError'> & {
     dashboard: ReturnType<DashboardState['getModel']>;
     navIndex: StoreState['navIndex'];
-  } & Pick<FnGlobalState, 'FNDashboard'>,
+  } & Pick<FnGlobalState, 'FNDashboard' | 'controlsContainer'>,
   OwnProps,
   StoreState
 >;
@@ -92,6 +93,7 @@ export const mapStateToProps: MapStateToDashboardPageProps = (state) => ({
   dashboard: state.dashboard.getModel(),
   navIndex: state.navIndex,
   FNDashboard: state.fnGlobalState.FNDashboard,
+  controlsContainer: state.fnGlobalState.controlsContainer,
 });
 
 const mapDispatchToProps: MapDispatchToDashboardPageProps = {
@@ -376,7 +378,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   }
 
   render() {
-    const { dashboard, initError, queryParams, FNDashboard } = this.props;
+    const { dashboard, initError, queryParams, FNDashboard, controlsContainer } = this.props;
     const { editPanel, viewPanel, updateScrollTop, pageNav, sectionNav } = this.state;
     const kioskMode = getKioskMode(this.props.queryParams);
 
@@ -402,6 +404,18 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       );
     }
 
+    const FNTimeRange = !controlsContainer ? (
+      <ToolbarButtonRow alignment="right" style={{ marginBottom: '16px' }}>
+        <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} key="time-controls" />
+      </ToolbarButtonRow>
+    ) : (
+      <Portal container={document.getElementById(controlsContainer)!}>
+        <ToolbarButtonRow>
+          <DashNavTimeControls dashboard={dashboard} onChangeTimeZone={updateTimeZoneForSession} key="time-controls" />
+        </ToolbarButtonRow>
+      </Portal>
+    );
+
     return (
       <React.Fragment>
         <Page
@@ -416,13 +430,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
           {showToolbar && (
             <header data-testid={selectors.pages.Dashboard.DashNav.navV2}>
               {FNDashboard ? (
-                <ToolbarButtonRow alignment="right" style={{ marginBottom: '16px' }}>
-                  <DashNavTimeControls
-                    dashboard={dashboard}
-                    onChangeTimeZone={updateTimeZoneForSession}
-                    key="time-controls"
-                  />
-                </ToolbarButtonRow>
+                FNTimeRange
               ) : (
                 <DashNav
                   dashboard={dashboard}

public/app/fn-app/create-mfe.ts

@@ -4,7 +4,7 @@ declare let __webpack_public_path__: string;
 window.__grafana_public_path__ =
   __webpack_public_path__.substring(0, __webpack_public_path__.lastIndexOf('build/')) || __webpack_public_path__;
 
-import { isNull, merge, noop, omit, pick } from 'lodash';
+import { isNull, merge, noop, pick } from 'lodash';
 import React, { ComponentType } from 'react';
 import ReactDOM from 'react-dom';
 
@@ -294,6 +294,7 @@ class createMfe {
             slug: other.slug,
             version: other.version,
             queryParams: other.queryParams,
+            controlsContainer: other.controlsContainer,
           })
         );
       }
@@ -308,15 +309,10 @@ class createMfe {
   static renderMfeComponent(props: FNDashboardProps, onSuccess = noop) {
     const container = createMfe.getContainer(props);
 
-    ReactDOM.render(
-      // @ts-ignore
-      React.createElement(createMfe.Component, omit(props, 'hiddenVariables', 'FNDashboard')),
-      container,
-      () => {
-        createMfe.logger('Created mfe component.', { props, container });
-        onSuccess();
-      }
-    );
+    ReactDOM.render(React.createElement(createMfe.Component, props), container, () => {
+      createMfe.logger('Created mfe component.', { props, container });
+      onSuccess();
+    });
   }
 }
 

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

@@ -1,14 +1,8 @@
 import { pick } from 'lodash';
 import React, { FC, useMemo } from 'react';
-import { connect, MapStateToProps } from 'react-redux';
 
-import {
-  FnGlobalState,
-  FN_STATE_KEY,
-  FnPropMappedFromState,
-  fnPropsMappedFromState,
-  FnPropsMappedFromState,
-} from 'app/core/reducers/fn-slice';
+import { FnPropMappedFromState, fnPropsMappedFromState } from 'app/core/reducers/fn-slice';
+import { StoreState, useSelector } from 'app/types';
 
 import { AngularRoot } from '../../angular/AngularRoot';
 import { FnAppProvider } from '../fn-app-provider';
@@ -30,23 +24,29 @@ export const FNDashboard: FC<FNDashboardComponentProps> = (props) => {
   );
 };
 
-function mapStateToProps(): MapStateToProps<
-  FnPropsMappedFromState,
-  Omit<FNDashboardProps, FnPropMappedFromState>,
-  { [K in typeof FN_STATE_KEY]: FnGlobalState }
-> {
-  return ({ fnGlobalState }) => pick(fnGlobalState, ...fnPropsMappedFromState);
+function mapStateToProps() {
+  return ({ fnGlobalState }: StoreState) => pick(fnGlobalState, ...fnPropsMappedFromState);
 }
 
-export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMappedFromState> = (props) => {
+export const DashboardPortal: FC<FNDashboardComponentProps> = (p) => {
+  const globalFnProps = useSelector(mapStateToProps());
+
+  const props = useMemo(
+    () => ({
+      ...p,
+      ...globalFnProps,
+    }),
+    [p, globalFnProps]
+  );
+
   const content = useMemo(() => {
     if (!props.FNDashboard) {
       return null;
     }
 
-    const { uid, slug, queryParams = {} } = props;
+    const { uid, queryParams = {} } = props;
 
-    if (!uid || !slug) {
+    if (!uid) {
       return null;
     }
 
@@ -55,7 +55,6 @@ export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMap
         {...{
           ...props,
           uid,
-          slug,
           queryParams,
         }}
       />
@@ -64,5 +63,3 @@ export const DashboardPortalComponent: FC<FNDashboardComponentProps & FnPropsMap
 
   return <RenderPortal ID="grafana-portal">{content}</RenderPortal>;
 };
-
-export const DashboardPortal = connect(mapStateToProps())(DashboardPortalComponent);

public/app/fn-app/types.ts

@@ -27,7 +27,7 @@ export interface FNDashboardProps {
   queryParams: ParsedQuery<string>;
   fnError?: ReactNode;
   pageTitle?: string;
-  controlsContainer: string;
+  controlsContainer: string | null;
   isLoading: (isLoading: boolean) => void;
   setErrors: (errors?: { [K: number | string]: string }) => void;
   hiddenVariables: readonly string[];

public/app/fn-app/utils.tsx

@@ -1,18 +1,16 @@
-import { FC, PropsWithChildren } from 'react';
-import ReactDOM from 'react-dom';
+import { Portal } from '@mui/material';
+import React, { FC, PropsWithChildren } from 'react';
 
 export interface RenderPortalProps {
   ID: string;
 }
 
-export const getPortalContainer = (ID: string): HTMLElement | null => document.getElementById(ID);
-
 export const RenderPortal: FC<PropsWithChildren<RenderPortalProps>> = ({ ID, children }) => {
-  const portalDiv = getPortalContainer(ID);
+  const container = document.getElementById(ID);
 
-  if (!portalDiv) {
+  if (!container) {
     return null;
   }
 
-  return ReactDOM.createPortal(children, portalDiv);
+  return <Portal container={container}>{children}</Portal>;
 };