Add draft how to render a react component in contract of injection token

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>

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/>

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,
 });
 

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>({