Plugins: do not remount app plugin on nav change (#28105)

* do not remount app plugin on nav change

* test for not mounting app plugin twice

package.json

@@ -269,6 +269,7 @@
     "react-loadable": "5.5.0",
     "react-popper": "1.3.3",
     "react-redux": "7.2.0",
+    "react-reverse-portal": "^2.0.1",
     "react-sizeme": "2.6.12",
     "react-split-pane": "0.1.89",
     "react-transition-group": "4.3.0",

public/app/features/plugins/AppRootPage.test.tsx

+import { render, screen } from '@testing-library/react';
+import React, { Component } from 'react';
+import { StoreState } from 'app/types';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import AppRootPage from './AppRootPage';
+import { getPluginSettings } from './PluginSettingsCache';
+import { importAppPlugin } from './plugin_loader';
+import { getMockPlugin } from './__mocks__/pluginMocks';
+import { AppPlugin, PluginType, AppRootProps, NavModelItem } from '@grafana/data';
+
+jest.mock('./PluginSettingsCache', () => ({
+  getPluginSettings: jest.fn(),
+}));
+jest.mock('./plugin_loader', () => ({
+  importAppPlugin: jest.fn(),
+}));
+
+const importAppPluginMock = importAppPlugin as jest.Mock<
+  ReturnType<typeof importAppPlugin>,
+  Parameters<typeof importAppPlugin>
+>;
+
+const getPluginSettingsMock = getPluginSettings as jest.Mock<
+  ReturnType<typeof getPluginSettings>,
+  Parameters<typeof getPluginSettings>
+>;
+
+const initialState: Partial<StoreState> = {
+  location: {
+    routeParams: {
+      pluginId: 'my-awesome-plugin',
+      slug: 'my-awesome-plugin',
+    },
+    query: {},
+    path: '/a/my-awesome-plugin',
+    url: '',
+    replace: false,
+    lastUpdated: 1,
+  },
+};
+
+function renderWithStore(soreState: Partial<StoreState> = initialState) {
+  const store = configureStore<StoreState>()(soreState as StoreState);
+  render(
+    <Provider store={store}>
+      <AppRootPage />
+    </Provider>
+  );
+  return store;
+}
+
+describe('AppRootPage', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should not mount plugin twice if nav is changed', async () => {
+    // reproduces https://github.com/grafana/grafana/pull/28105
+
+    getPluginSettingsMock.mockResolvedValue(
+      getMockPlugin({
+        type: PluginType.app,
+        enabled: true,
+      })
+    );
+
+    let timesMounted = 0;
+
+    // a very basic component that does what most plugins do:
+    // immediately update nav on mounting
+    class RootComponent extends Component<AppRootProps> {
+      componentDidMount() {
+        timesMounted++;
+        const node: NavModelItem = {
+          text: 'My Great plugin',
+          children: [
+            {
+              text: 'A page',
+              url: '/apage',
+              id: 'a',
+            },
+            {
+              text: 'Another page',
+              url: '/anotherpage',
+              id: 'b',
+            },
+          ],
+        };
+        this.props.onNavChanged({
+          main: node,
+          node,
+        });
+      }
+      render() {
+        return <p>my great plugin</p>;
+      }
+    }
+
+    const plugin = new AppPlugin();
+    plugin.root = RootComponent;
+
+    importAppPluginMock.mockResolvedValue(plugin);
+
+    renderWithStore();
+
+    // check that plugin and nav links were rendered, and plugin is mounted only once
+    await screen.findByText('my great plugin');
+    await screen.findByRole('link', { name: /A page/ });
+    await screen.findByRole('link', { name: /Another page/ });
+    expect(timesMounted).toEqual(1);
+  });
+});

public/app/features/plugins/AppRootPage.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 // Types
 import { StoreState } from 'app/types';
 import { AppEvents, AppPlugin, AppPluginMeta, NavModel, PluginType, UrlQueryMap } from '@grafana/data';
+import { createHtmlPortalNode, InPortal, OutPortal, HtmlPortalNode } from 'react-reverse-portal';
 
 import Page from 'app/core/components/Page/Page';
 import { getPluginSettings } from './PluginSettingsCache';
@@ -22,6 +23,7 @@ interface Props {
 
 interface State {
   loading: boolean;
+  portalNode: HtmlPortalNode;
   plugin?: AppPlugin | null;
   nav?: NavModel;
 }
@@ -44,6 +46,7 @@ class AppRootPage extends Component<Props, State> {
     super(props);
     this.state = {
       loading: true,
+      portalNode: createHtmlPortalNode(),
     };
   }
 
@@ -76,29 +79,33 @@ class AppRootPage extends Component<Props, State> {
 
   render() {
     const { path, query } = this.props;
-    const { loading, plugin, nav } = this.state;
+    const { loading, plugin, nav, portalNode } = this.state;
 
     if (plugin && !plugin.root) {
       // TODO? redirect to plugin page?
       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}>
+      <>
+        <InPortal node={portalNode}>
           {plugin && plugin.root && (
             <plugin.root meta={plugin.meta} query={query} path={path} onNavChanged={this.onNavChanged} />
           )}
-        </Page.Contents>
-      </Page>
+        </InPortal>
+        {nav ? (
+          <Page navModel={nav}>
+            <Page.Contents isLoading={loading}>
+              <OutPortal node={portalNode} />
+            </Page.Contents>
+          </Page>
+        ) : (
+          <>
+            <OutPortal node={portalNode} />
+            {loading && <PageLoader />}
+          </>
+        )}
+      </>
     );
   }
 }

yarn.lock

@@ -22659,6 +22659,11 @@ react-resizable@^1.9.0:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
+react-reverse-portal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-reverse-portal/-/react-reverse-portal-2.0.1.tgz#23b18292c531fb7b343d85a614c15a995838ba31"
+  integrity sha512-sj/D9nSHspqV8i8hWkTSZ5Ohnrqk2A5fkDKw4Xe/zV4OfF1UYwmbzrxLdmNRdKkWgQwnXIxaa2E3FC7QYdZAeA==
+
 react-select@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.0.8.tgz#06ff764e29db843bcec439ef13e196865242e0c1"