From aab72a9bf8186b748b8507cb648c8b10434cc5b6 Mon Sep 17 00:00:00 2001
From: Iku-turso <mikko.aspiala@gmail.com>
Date: Thu, 16 Mar 2023 14:47:47 +0200
Subject: [PATCH] Add draft how to render a react component in contract of
 injection token

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
---
 .../components/+cluster/cluster-overview.tsx       |  2 +-
 .../components/+cluster/ui-block.injectable.tsx    | 14 ++++++++------
 .../cluster-overview/cluster-overview-ui-block.ts  |  1 +
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/renderer/components/+cluster/cluster-overview.tsx b/packages/core/src/renderer/components/+cluster/cluster-overview.tsx
index 03155d1a1f..7e88bcfb8c 100644
--- a/packages/core/src/renderer/components/+cluster/cluster-overview.tsx
+++ b/packages/core/src/renderer/components/+cluster/cluster-overview.tsx
@@ -81,7 +81,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
       <>
         <ClusterMetrics/>
         {this.props.uiBlocks.map((block) => (
-          <div key={block.id}>{block.text}</div>
+          <div key={block.id}>{<block.Component />}</div>
         ))}
         lol
         <ClusterPieCharts/>
diff --git a/packages/core/src/renderer/components/+cluster/ui-block.injectable.tsx b/packages/core/src/renderer/components/+cluster/ui-block.injectable.tsx
index af7f5c7114..b8469b58fc 100644
--- a/packages/core/src/renderer/components/+cluster/ui-block.injectable.tsx
+++ b/packages/core/src/renderer/components/+cluster/ui-block.injectable.tsx
@@ -2,17 +2,19 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
+import React from 'react';
 import { getInjectable } from "@ogre-tools/injectable";
 import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics";
 
 const uiBlock = getInjectable({
   id: "lol",
-  instantiate: () => {
-    return {
-      id: "lol-id",
-      text: "lol",
-    };
-  },
+
+  instantiate: () => ({
+    id: "lol-id",
+    text: "lol-1",
+    Component: () => <div>Trollollol</div>,
+  }),
+
   injectionToken: clusterOverviewUIBlockInjectionToken,
 });
 
diff --git a/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-block.ts b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-block.ts
index e724504d8b..65056459b5 100644
--- a/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-block.ts
+++ b/packages/technical-features/metrics/src/cluster-overview/cluster-overview-ui-block.ts
@@ -7,6 +7,7 @@ import { getInjectionToken } from "@ogre-tools/injectable";
 export type ClusterOverviewUIBlock = {
   id: string;
   text: string;
+  Component: React.ElementType
 };
 
 export const clusterOverviewUIBlockInjectionToken = getInjectionToken<ClusterOverviewUIBlock>({