AppPlugin: give full control to page layout when navigation is missing (#26247)

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:
    * Set the component displayed under:
    *   /a/${plugin-id}/*
    *   /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) {
   setRootPage(root: ComponentClass<AppRootProps<T>>, rootNav?: NavModel) {
     this.root = root;
     this.root = root;

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 Page from 'app/core/components/Page/Page';
 import { getPluginSettings } from './PluginSettingsCache';
 import { getPluginSettings } from './PluginSettingsCache';
 import { importAppPlugin } from './plugin_loader';
 import { importAppPlugin } from './plugin_loader';
-import { getLoadingNav } from './PluginPage';
 import { getNotFoundNav, getWarningNav } from 'app/core/nav_model_srv';
 import { getNotFoundNav, getWarningNav } from 'app/core/nav_model_srv';
 import { appEvents } from 'app/core/core';
 import { appEvents } from 'app/core/core';
+import PageLoader from 'app/core/components/PageLoader/PageLoader';
 
 
 interface Props {
 interface Props {
   pluginId: string; // From the angular router
   pluginId: string; // From the angular router
@@ -23,7 +23,7 @@ interface Props {
 interface State {
 interface State {
   loading: boolean;
   loading: boolean;
   plugin?: AppPlugin | null;
   plugin?: AppPlugin | null;
-  nav: NavModel;
+  nav?: NavModel;
 }
 }
 
 
 export function getAppPluginPageError(meta: AppPluginMeta) {
 export function getAppPluginPageError(meta: AppPluginMeta) {
@@ -44,7 +44,6 @@ class AppRootPage extends Component<Props, State> {
     super(props);
     super(props);
     this.state = {
     this.state = {
       loading: true,
       loading: true,
-      nav: getLoadingNav(),
     };
     };
   }
   }
 
 
@@ -80,6 +79,14 @@ class AppRootPage extends Component<Props, State> {
       return <div>No Root App</div>;
       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 (
     return (
       <Page navModel={nav}>
       <Page navModel={nav}>
         <Page.Contents isLoading={loading}>
         <Page.Contents isLoading={loading}>