Fix top-bar extension render errors (#3049)

* fix top-bar extension render errors

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix tests

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

docs/extensions/capabilities/common-capabilities.md

@@ -219,6 +219,34 @@ export default class ExampleExtension extends Renderer.LensExtension {
 
 ```
 
+### Top Bar Items
+
+This extension can register custom components to a top bar area.
+
+```typescript
+import React from "react";
+import { Renderer } from "@k8slens/extensions";
+
+const {
+  Component: {
+    Icon,
+  }
+} = Renderer;
+
+export default class ExampleExtension extends Renderer.LensExtension {
+  topBarItems = [
+    {
+      components: {
+        Item: (
+          <Icon material="favorite" onClick={() => this.navigate("/example-page" />
+        )
+      }
+    }
+  ]
+}
+
+```
+
 ### Status Bar Items
 
 This extension can register custom icons and text to a status bar area.

src/extensions/registries/topbar-registry.ts

@@ -23,7 +23,7 @@ import type React from "react";
 import { BaseRegistry } from "./base-registry";
 
 interface TopBarComponents {
-  Item?: React.ComponentType;
+  Item: React.ComponentType;
 }
 
 export interface TopBarRegistration {

src/renderer/components/layout/__tests__/topbar.test.tsx

@@ -22,8 +22,8 @@
 import React from "react";
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
-import { TopBar } from "../layout/topbar";
-import { TopBarRegistry } from "../../../extensions/registries";
+import { TopBar } from "../topbar";
+import { TopBarRegistry } from "../../../../extensions/registries";
 
 describe("<TopBar/>", () => {
   beforeEach(() => {
@@ -53,7 +53,7 @@ describe("<TopBar/>", () => {
     TopBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
       {
         components: {
-          Item: <span data-testid={testId}>{text}</span>
+          Item: () => <span data-testid={testId}>{text}</span>
         }
       }
     ]);

src/renderer/components/layout/topbar.tsx

@@ -45,7 +45,7 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
 
           return (
             <div key={index}>
-              {registration.components.Item}
+              <registration.components.Item />
             </div>
           );
         })}