AppPlugin: Fix load legacy plugin app (#17574)

* first init meta befor set legacy components

* add load legacy app test

* AppPlugin: minor refactor

packages/grafana-ui/src/types/app.ts

@@ -48,20 +48,21 @@ export class AppPlugin<T = KeyValue> extends GrafanaPlugin<AppPluginMeta<T>> {
       this.angularConfigCtrl = pluginExports.ConfigCtrl;
     }
 
-    const { meta } = this;
-    if (meta && meta.includes) {
-      for (const include of meta.includes) {
-        const { type, component } = include;
-        if (type === PluginIncludeType.page && component) {
-          const exp = pluginExports[component];
+    if (this.meta && this.meta.includes) {
+      for (const include of this.meta.includes) {
+        if (include.type === PluginIncludeType.page && include.component) {
+          const exp = pluginExports[include.component];
+
           if (!exp) {
-            console.warn('App Page uses unknown component: ', component, meta);
+            console.warn('App Page uses unknown component: ', include.component, this.meta);
             continue;
           }
+
           if (!this.angularPages) {
             this.angularPages = {};
           }
-          this.angularPages[component] = exp;
+
+          this.angularPages[include.component] = exp;
         }
       }
     }

public/app/features/plugins/plugin_loader.test.ts

@@ -16,7 +16,7 @@ jest.mock('app/core/core', () => {
 /* tslint:disable:import-blacklist */
 import System from 'systemjs/dist/system.js';
 
-import { AppPluginMeta, PluginMetaInfo, PluginType, AppPlugin } from '@grafana/ui';
+import { AppPluginMeta, PluginMetaInfo, PluginType, PluginIncludeType, AppPlugin } from '@grafana/ui';
 import { importAppPlugin } from './plugin_loader';
 
 class MyCustomApp extends AppPlugin {
@@ -66,3 +66,47 @@ describe('Load App', () => {
     expect(app.calledTwice).toBeTruthy();
   });
 });
+
+import { ExampleConfigCtrl as ConfigCtrl } from 'app/plugins/app/example-app/legacy/config';
+import { AngularExamplePageCtrl } from 'app/plugins/app/example-app/legacy/angular_example_page';
+
+describe('Load Legacy App', () => {
+  const app = {
+    ConfigCtrl,
+    AngularExamplePageCtrl, // Must match `pages.component` in plugin.json
+  };
+
+  const modulePath = 'my/custom/legacy/plugin/module';
+
+  beforeAll(() => {
+    System.set(modulePath, System.newModule(app));
+  });
+
+  afterAll(() => {
+    System.delete(modulePath);
+  });
+
+  it('should call init and set meta for legacy app', async () => {
+    const meta: AppPluginMeta = {
+      id: 'test-app',
+      module: modulePath,
+      baseUrl: 'xxx',
+      info: {} as PluginMetaInfo,
+      type: PluginType.app,
+      name: 'test',
+      includes: [
+        {
+          type: PluginIncludeType.page,
+          name: 'Example Page',
+          component: 'AngularExamplePageCtrl',
+          role: 'Viewer',
+          addToNav: false,
+        },
+      ],
+    };
+
+    const loaded = await importAppPlugin(meta);
+    expect(loaded).toHaveProperty('angularPages');
+    expect(loaded.angularPages).toHaveProperty('AngularExamplePageCtrl', AngularExamplePageCtrl);
+  });
+});

public/app/features/plugins/plugin_loader.ts

@@ -183,9 +183,9 @@ export function importDataSourcePlugin(meta: DataSourcePluginMeta): Promise<Data
 export function importAppPlugin(meta: PluginMeta): Promise<AppPlugin> {
   return importPluginModule(meta.module).then(pluginExports => {
     const plugin = pluginExports.plugin ? (pluginExports.plugin as AppPlugin) : new AppPlugin();
-    plugin.setComponentsFromLegacyExports(pluginExports);
     plugin.init(meta);
     plugin.meta = meta;
+    plugin.setComponentsFromLegacyExports(pluginExports);
     return plugin;
   });
 }