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>

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