diff --git a/packages/grafana-ui/src/types/app.ts b/packages/grafana-ui/src/types/app.ts index 79d6fce5066..81bf0be1d14 100644 --- a/packages/grafana-ui/src/types/app.ts +++ b/packages/grafana-ui/src/types/app.ts @@ -48,20 +48,21 @@ export class AppPlugin extends GrafanaPlugin> { 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; } } } diff --git a/public/app/features/plugins/plugin_loader.test.ts b/public/app/features/plugins/plugin_loader.test.ts index 845a5dde62a..b147e2b2801 100644 --- a/public/app/features/plugins/plugin_loader.test.ts +++ b/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); + }); +}); diff --git a/public/app/features/plugins/plugin_loader.ts b/public/app/features/plugins/plugin_loader.ts index 74986466a49..7f669f27865 100644 --- a/public/app/features/plugins/plugin_loader.ts +++ b/public/app/features/plugins/plugin_loader.ts @@ -183,9 +183,9 @@ export function importDataSourcePlugin(meta: DataSourcePluginMeta): Promise { 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; }); }