grafana/data: Update plugin config page typings (BREAKING) (#21503)

* Change typyings of plugins config pages

* Update plugin config page types of core plugins

packages/grafana-data/src/types/datasource.ts

@@ -34,7 +34,7 @@ export class DataSourcePlugin<
   DSType extends DataSourceApi<TQuery, TOptions>,
   TQuery extends DataQuery = DataSourceQueryType<DSType>,
   TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>
-> extends GrafanaPlugin<DataSourcePluginMeta> {
+> extends GrafanaPlugin<DataSourcePluginMeta<TOptions>> {
   components: DataSourcePluginComponents<DSType, TQuery, TOptions> = {};
 
   constructor(public DataSourceClass: DataSourceConstructor<DSType, TQuery, TOptions>) {
@@ -108,7 +108,7 @@ export class DataSourcePlugin<
   }
 }
 
-export interface DataSourcePluginMeta extends PluginMeta {
+export interface DataSourcePluginMeta<T extends KeyValue = {}> extends PluginMeta<T> {
   builtIn?: boolean; // Is this for all
   metrics?: boolean;
   logs?: boolean;

packages/grafana-data/src/types/plugin.ts

@@ -13,7 +13,7 @@ export enum PluginType {
   renderer = 'renderer',
 }
 
-export interface PluginMeta<T extends {} = KeyValue> {
+export interface PluginMeta<T extends KeyValue = {}> {
   id: string;
   name: string;
   type: PluginType;
@@ -108,12 +108,12 @@ export interface PluginMetaInfo {
   version: string;
 }
 
-export interface PluginConfigPageProps<T extends GrafanaPlugin> {
-  plugin: T;
+export interface PluginConfigPageProps<T extends PluginMeta> {
+  plugin: GrafanaPlugin<T>;
   query: KeyValue; // The URL query parameters
 }
 
-export interface PluginConfigPage<T extends GrafanaPlugin> {
+export interface PluginConfigPage<T extends PluginMeta> {
   title: string; // Display
   icon?: string;
   id: string; // Unique, in URL
@@ -132,10 +132,10 @@ export class GrafanaPlugin<T extends PluginMeta = PluginMeta> {
   angularConfigCtrl?: any;
 
   // Show configuration tabs on the plugin page
-  configPages?: Array<PluginConfigPage<GrafanaPlugin>>;
+  configPages?: Array<PluginConfigPage<T>>;
 
   // Tabs on the plugin page
-  addConfigPage(tab: PluginConfigPage<GrafanaPlugin>) {
+  addConfigPage(tab: PluginConfigPage<T>) {
     if (!this.configPages) {
       this.configPages = [];
     }

public/app/plugins/app/example-app/config/ExamplePage1.tsx

@@ -2,9 +2,10 @@
 import React, { PureComponent } from 'react';
 
 // Types
-import { PluginConfigPageProps, AppPlugin } from '@grafana/data';
+import { PluginConfigPageProps, AppPluginMeta } from '@grafana/data';
+import { ExampleAppSettings } from '../types';
 
-interface Props extends PluginConfigPageProps<AppPlugin> {}
+interface Props extends PluginConfigPageProps<AppPluginMeta<ExampleAppSettings>> {}
 
 export class ExamplePage1 extends PureComponent<Props> {
   constructor(props: Props) {

public/app/plugins/app/example-app/config/ExamplePage2.tsx

@@ -2,9 +2,10 @@
 import React, { PureComponent } from 'react';
 
 // Types
-import { PluginConfigPageProps, AppPlugin } from '@grafana/data';
+import { PluginConfigPageProps, AppPluginMeta } from '@grafana/data';
+import { ExampleAppSettings } from '../types';
 
-interface Props extends PluginConfigPageProps<AppPlugin> {}
+interface Props extends PluginConfigPageProps<AppPluginMeta<ExampleAppSettings>> {}
 
 export class ExamplePage2 extends PureComponent<Props> {
   constructor(props: Props) {

public/app/plugins/datasource/testdata/TestInfoTab.tsx

@@ -2,10 +2,9 @@
 import React, { PureComponent } from 'react';
 
 // Types
-import { PluginConfigPageProps, DataSourcePlugin } from '@grafana/data';
-import { TestDataDataSource } from './datasource';
+import { PluginConfigPageProps, DataSourcePluginMeta, DataSourceJsonData } from '@grafana/data';
 
-interface Props extends PluginConfigPageProps<DataSourcePlugin<TestDataDataSource>> {}
+interface Props extends PluginConfigPageProps<DataSourcePluginMeta<DataSourceJsonData>> {}
 
 export class TestInfoTab extends PureComponent<Props> {
   constructor(props: Props) {