AppPlugin: add types for jsonData (#17177)

* add types for App jsonData

* add types for App jsonData

* add value as possible type

* make it extend {}

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

 import { ComponentClass } from 'react';
 import { NavModel } from './navModel';
-import { PluginMeta, PluginIncludeType, GrafanaPlugin } from './plugin';
+import { PluginMeta, PluginIncludeType, GrafanaPlugin, KeyValue } from './plugin';
 
-export interface AppRootProps {
-  meta: AppPluginMeta;
+export interface AppRootProps<T = KeyValue> {
+  meta: AppPluginMeta<T>;
 
   path: string; // The URL path to this page
-  query: { [s: string]: any }; // The URL query parameters
+  query: KeyValue; // The URL query parameters
 
   /**
    * Pass the nav model to the container... is there a better way?
@@ -14,13 +14,13 @@ export interface AppRootProps {
   onNavChanged: (nav: NavModel) => void;
 }
 
-export interface AppPluginMeta extends PluginMeta {
+export interface AppPluginMeta<T = KeyValue> extends PluginMeta<T> {
   // TODO anything specific to apps?
 }
 
-export class AppPlugin extends GrafanaPlugin<AppPluginMeta> {
+export class AppPlugin<T = KeyValue> extends GrafanaPlugin<AppPluginMeta<T>> {
   // Content under: /a/${plugin-id}/*
-  root?: ComponentClass<AppRootProps>;
+  root?: ComponentClass<AppRootProps<T>>;
   rootNav?: NavModel; // Initial navigation model
 
   // Old style pages
@@ -37,7 +37,7 @@ export class AppPlugin extends GrafanaPlugin<AppPluginMeta> {
    * Set the component displayed under:
    *   /a/${plugin-id}/*
    */
-  setRootPage(root: ComponentClass<AppRootProps>, rootNav?: NavModel) {
+  setRootPage(root: ComponentClass<AppRootProps<T>>, rootNav?: NavModel) {
     this.root = root;
     this.rootNav = rootNav;
     return this;

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

@@ -11,7 +11,9 @@ export enum PluginType {
   app = 'app',
 }
 
-export interface PluginMeta {
+export type KeyValue<T = any> = { [s: string]: T };
+
+export interface PluginMeta<T extends {} = KeyValue> {
   id: string;
   name: string;
   type: PluginType;
@@ -27,8 +29,8 @@ export interface PluginMeta {
   dependencies?: PluginDependencies;
 
   // Filled in by the backend
-  jsonData?: { [str: string]: any };
-  secureJsonData?: { [str: string]: any };
+  jsonData?: T;
+  secureJsonData?: KeyValue;
   enabled?: boolean;
   defaultNavUrl?: string;
   hasUpdate?: boolean;
@@ -93,7 +95,7 @@ export interface PluginMetaInfo {
 
 export interface PluginConfigPageProps<T extends GrafanaPlugin> {
   plugin: T;
-  query: { [s: string]: any }; // The URL query parameters
+  query: KeyValue; // The URL query parameters
 }
 
 export interface PluginConfigPage<T extends GrafanaPlugin> {

public/app/plugins/app/example-app/ExampleRootPage.tsx

@@ -10,7 +10,7 @@ const TAB_ID_A = 'A';
 const TAB_ID_B = 'B';
 const TAB_ID_C = 'C';
 
-export class ExampleRootPage extends PureComponent<Props> {
+export class ExampleRootPage<ExampleAppSettings> extends PureComponent<Props> {
   constructor(props: Props) {
     super(props);
   }
@@ -79,7 +79,7 @@ export class ExampleRootPage extends PureComponent<Props> {
   }
 
   render() {
-    const { path, query } = this.props;
+    const { path, query, meta } = this.props;
 
     return (
       <div>
@@ -96,6 +96,7 @@ export class ExampleRootPage extends PureComponent<Props> {
             <a href={path + '?x=1&y=2&y=3'}>ZZZ</a>
           </li>
         </ul>
+        <pre>{JSON.stringify(meta.jsonData)}</pre>
       </div>
     );
   }

public/app/plugins/app/example-app/module.ts

@@ -5,6 +5,7 @@ import { AppPlugin } from '@grafana/ui';
 import { ExamplePage1 } from './config/ExamplePage1';
 import { ExamplePage2 } from './config/ExamplePage2';
 import { ExampleRootPage } from './ExampleRootPage';
+import { ExampleAppSettings } from './types';
 
 // Legacy exports just for testing
 export {
@@ -12,7 +13,7 @@ export {
   AngularExamplePageCtrl, // Must match `pages.component` in plugin.json
 };
 
-export const plugin = new AppPlugin()
+export const plugin = new AppPlugin<ExampleAppSettings>()
   .setRootPage(ExampleRootPage)
   .addConfigPage({
     title: 'Page 1',

public/app/plugins/app/example-app/types.ts

+export interface ExampleAppSettings {
+  customText?: string;
+  customCheckbox?: boolean;
+}