Plugins: allow using both Function and Class components for app plugins (#46148) (#46228)

* fix: make it possible to use both class and functional components for plugins

* fix: accept both class and functional components as plugin root pages

* refactor: import types by name

* refactor: use `ComponentType`

(cherry picked from commit c331af93b9)

Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>

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

@@ -1,4 +1,4 @@
-import { ComponentClass } from 'react';
+import { ComponentType } from 'react';
 import { KeyValue } from './data';
 import { NavModel } from './navModel';
 import { PluginMeta, GrafanaPlugin, PluginIncludeType } from './plugin';
@@ -48,7 +48,7 @@ export interface AppPluginMeta<T = KeyValue> extends PluginMeta<T> {
 
 export class AppPlugin<T = KeyValue> extends GrafanaPlugin<AppPluginMeta<T>> {
   // Content under: /a/${plugin-id}/*
-  root?: ComponentClass<AppRootProps<T>>;
+  root?: ComponentType<AppRootProps<T>>;
   rootNav?: NavModel; // Initial navigation model
 
   /**
@@ -66,7 +66,7 @@ export class AppPlugin<T = KeyValue> extends GrafanaPlugin<AppPluginMeta<T>> {
    *
    * NOTE: this structure will change in 7.2+ so that it is managed with a normal react router
    */
-  setRootPage(root: ComponentClass<AppRootProps<T>>, rootNav?: NavModel) {
+  setRootPage(root: ComponentType<AppRootProps<T>>, rootNav?: NavModel) {
     this.root = root;
     this.rootNav = rootNav;
     return this;

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

@@ -1,4 +1,4 @@
-import { ComponentClass } from 'react';
+import { ComponentType } from 'react';
 import { KeyValue } from './data';
 
 /** Describes plugins life cycle status */
@@ -159,7 +159,7 @@ export interface PluginConfigPage<T extends PluginMeta> {
   icon?: string;
   id: string; // Unique, in URL
 
-  body: ComponentClass<PluginConfigPageProps<T>>;
+  body: ComponentType<PluginConfigPageProps<T>>;
 }
 
 export class GrafanaPlugin<T extends PluginMeta = PluginMeta> {