From 5ec9cd017be2f9997757c85719e3e1dc4bf1adf9 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Tue, 18 Jun 2024 10:58:26 +0300
Subject: [PATCH] [v11.1.x] Plugin extensions: Return react components from
 `usePluginComponents()` (#89328)

Plugin extensions: Return react components from `usePluginComponents()` (#89237)

feat: return with react components from `usePluginComponents()`
(cherry picked from commit 1d6c9d4690b7443c55a77960ece6d8dd41fb0ed8)

Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>
---
 .../src/services/pluginExtensions/usePluginExtensions.ts    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-runtime/src/services/pluginExtensions/usePluginExtensions.ts b/packages/grafana-runtime/src/services/pluginExtensions/usePluginExtensions.ts
index 801c1dcec0d..ff6bac57621 100644
--- a/packages/grafana-runtime/src/services/pluginExtensions/usePluginExtensions.ts
+++ b/packages/grafana-runtime/src/services/pluginExtensions/usePluginExtensions.ts
@@ -41,12 +41,14 @@ export function usePluginLinks(options: GetPluginExtensionsOptions): {
 
 export function usePluginComponents<Props = {}>(
   options: GetPluginExtensionsOptions
-): { components: Array<PluginExtensionComponent<Props>>; isLoading: boolean } {
+): { components: Array<React.ComponentType<Props>>; isLoading: boolean } {
   const { extensions, isLoading } = usePluginExtensions(options);
 
   return useMemo(
     () => ({
-      components: extensions.filter(isPluginExtensionComponent) as Array<PluginExtensionComponent<Props>>,
+      components: extensions
+        .filter(isPluginExtensionComponent)
+        .map(({ component }) => component as React.ComponentType<Props>),
       isLoading,
     }),
     [extensions, isLoading]