From a3a9ce7f246b690298b35b3d7abb02cbf20bf7a4 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Fri, 10 Jul 2020 11:57:09 -0700
Subject: [PATCH] AppPlugin: give full control to page layout when navigation
 is missing (#26247)

(cherry picked from commit 5f8eb93db1f952c0575437a96c95983bc1ee5eff)
---
 packages/grafana-data/src/types/app.ts      |  4 ++++
 public/app/features/plugins/AppRootPage.tsx | 13 ++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-data/src/types/app.ts b/packages/grafana-data/src/types/app.ts
index a400b53dbbe..ed76f8be9e6 100644
--- a/packages/grafana-data/src/types/app.ts
+++ b/packages/grafana-data/src/types/app.ts
@@ -42,6 +42,10 @@ export class AppPlugin<T = KeyValue> extends GrafanaPlugin<AppPluginMeta<T>> {
   /**
    * Set the component displayed under:
    *   /a/${plugin-id}/*
+   *
+   * If the NavModel is configured, the page will have a managed frame, otheriwse it has full control.
+   *
+   * NOTE: this structure will change in 7.2+ so that it is managed with a normal react router
    */
   setRootPage(root: ComponentClass<AppRootProps<T>>, rootNav?: NavModel) {
     this.root = root;
diff --git a/public/app/features/plugins/AppRootPage.tsx b/public/app/features/plugins/AppRootPage.tsx
index 9858827313e..82558405768 100644
--- a/public/app/features/plugins/AppRootPage.tsx
+++ b/public/app/features/plugins/AppRootPage.tsx
@@ -9,9 +9,9 @@ import { AppEvents, AppPlugin, AppPluginMeta, NavModel, PluginType, UrlQueryMap
 import Page from 'app/core/components/Page/Page';
 import { getPluginSettings } from './PluginSettingsCache';
 import { importAppPlugin } from './plugin_loader';
-import { getLoadingNav } from './PluginPage';
 import { getNotFoundNav, getWarningNav } from 'app/core/nav_model_srv';
 import { appEvents } from 'app/core/core';
+import PageLoader from 'app/core/components/PageLoader/PageLoader';
 
 interface Props {
   pluginId: string; // From the angular router
@@ -23,7 +23,7 @@ interface Props {
 interface State {
   loading: boolean;
   plugin?: AppPlugin;
-  nav: NavModel;
+  nav?: NavModel;
 }
 
 export function getAppPluginPageError(meta: AppPluginMeta) {
@@ -44,7 +44,6 @@ class AppRootPage extends Component<Props, State> {
     super(props);
     this.state = {
       loading: true,
-      nav: getLoadingNav(),
     };
   }
 
@@ -80,6 +79,14 @@ class AppRootPage extends Component<Props, State> {
       return <div>No Root App</div>;
     }
 
+    // When no naviagion is set, give full control to the app plugin
+    if (!nav) {
+      if (plugin && plugin.root) {
+        return <plugin.root meta={plugin.meta} query={query} path={path} onNavChanged={this.onNavChanged} />;
+      }
+      return <PageLoader />;
+    }
+
     return (
       <Page navModel={nav}>
         <Page.Contents isLoading={loading}>