checkpoint

GurinderRawala · GurinderRawala · commit 38e481cb1e47 · 2024-12-04T19:38:28.000-05:00
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -72,6 +72,8 @@ const mapStateToProps = (state: StoreState, ownProps: OwnProps) => {
     uiState: state.panelEditor.ui,
     tableViewEnabled: state.panelEditor.tableViewEnabled,
     variables: getVariablesByKey(ownProps.dashboard.uid, state),
+    isMFEDashboard: state.fnGlobalState.FNDashboard,
+    isMFECustomDashboard: state.fnGlobalState.isCustomDashboard,
   };
 };
 
@@ -431,27 +433,33 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   };
 
   render() {
-    const { initDone, uiState, theme, sectionNav, pageNav, className, updatePanelEditorUIState } = this.props;
+    const { initDone, uiState, theme, sectionNav, pageNav, className, updatePanelEditorUIState, isMFECustomDashboard } = this.props;
     const styles = getStyles(theme, this.props);
 
     if (!initDone) {
       return null;
     }
 
-    return (
-      <Page
-        navModel={sectionNav}
-        pageNav={pageNav}
-        data-testid={selectors.components.PanelEditor.General.content}
-        layout={PageLayoutType.Custom}
-        className={className}
-      >
-        <AppChromeUpdate
+    console.log('PanelEditor.tsx this.props', {
+      isPanelOptionVisible: uiState.isPanelOptionsVisible,
+      isMFECustomDashboard,
+      modelState: this.state.showSaveLibraryPanelModal,
+    });
+
+    const editPanelContent = (
+      <>
+      {
+        !isMFECustomDashboard ? (
+          <AppChromeUpdate
           actions={<ToolbarButtonRow alignment="right">{this.renderEditorActions()}</ToolbarButtonRow>}
-        />
+          />
+        ): (
+          <ToolbarButtonRow alignment="right">{this.renderEditorActions()}</ToolbarButtonRow>
+        )
+      }
         <div className={styles.wrapper}>
           <div className={styles.verticalSplitPanesWrapper}>
-            {!uiState.isPanelOptionsVisible ? (
+            {!uiState.isPanelOptionsVisible || isMFECustomDashboard ? (
               this.renderPanelAndEditor(uiState, styles)
             ) : (
               <SplitPaneWrapper
@@ -480,7 +488,25 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
             />
           )}
         </div>
-      </Page>
+      </>
+    )
+
+    return (
+      <>
+      {
+        !isMFECustomDashboard ? (
+          <Page
+          navModel={sectionNav}
+          pageNav={pageNav}
+          data-testid={selectors.components.PanelEditor.General.content}
+          layout={PageLayoutType.Custom}
+          className={className}
+        >
+        {editPanelContent}
+        </Page>
+        ): <div>{editPanelContent}</div>
+      }
+      </>
     );
   }
 }
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -423,6 +423,8 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       </Portal>
     );
 
+    const isPanelEditorVisible = editPanel && sectionNav && pageNav && isFNDashboardEditable
+
     return (
       <>
         <Page
@@ -431,7 +433,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
           layout={PageLayoutType.Canvas}
           className={pageClassName}
           onSetScrollRef={this.setScrollRef}
-          style={{ minHeight: 600 }}
+          style={{ minHeight: 600, position: 'relative' }}
         >
           {showToolbar && (
             <header data-testid={selectors.pages.Dashboard.DashNav.navV2}>
@@ -497,7 +499,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
 
           {inspectPanel && isFNDashboardEditable && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
         </Page>
-        {editPanel && sectionNav && pageNav && isFNDashboardEditable && (
+        {isPanelEditorVisible && (
           <PanelEditor
             dashboard={dashboard}
             sourcePanel={editPanel}
diff --git a/public/app/fn-app/fn-app-provider.tsx b/public/app/fn-app/fn-app-provider.tsx
@@ -11,7 +11,7 @@ import {
   navigationLogger,
   reportInteraction,
 } from '@grafana/runtime';
-import { ErrorBoundaryAlert, GlobalStyles } from '@grafana/ui';
+import { ErrorBoundaryAlert, GlobalStyles, ModalRoot } from '@grafana/ui';
 import { AngularRoot } from 'app/angular/AngularRoot';
 import { loadAndInitAngularIfEnabled } from 'app/angular/loadAndInitAngularIfEnabled';
 import { AppChrome } from 'app/core/components/AppChrome/AppChrome';
@@ -74,6 +74,7 @@ export const FnAppProvider: FC<PropsWithChildren<FnAppProviderProps>> = (props)
                             {children}
                           </AppChrome>
                         </div>
+                        <ModalRoot />
                       </ModalsContextProvider>
                     </CompatRouter>
                   </LocationServiceProvider>
diff --git a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx b/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx
@@ -54,7 +54,7 @@ export const DashboardPortal: FC<FNDashboardComponentProps> = (p) => {
 
   return (
     <RenderPortal ID="grafana-portal">
-      <div className="page-dashboard">{content}</div>
+      {content}
     </RenderPortal>
   );
 };
