From c331af93b925d6837d704b6ca155e9d3217c8bc2 Mon Sep 17 00:00:00 2001
From: Levente Balogh <balogh.levente.hu@gmail.com>
Date: Fri, 4 Mar 2022 09:52:59 +0100
Subject: [PATCH] Plugins: allow using both Function and Class components for
 app plugins (#46148)

* 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`
---
 packages/grafana-data/src/types/app.ts    | 6 +++---
 packages/grafana-data/src/types/plugin.ts | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-data/src/types/app.ts b/packages/grafana-data/src/types/app.ts
index d2cee306a28..fe23e8fc6f1 100644
--- a/packages/grafana-data/src/types/app.ts
+++ b/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;
diff --git a/packages/grafana-data/src/types/plugin.ts b/packages/grafana-data/src/types/plugin.ts
index e663be6a0d8..d2f027a1f92 100644
--- a/packages/grafana-data/src/types/plugin.ts
+++ b/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> {