Adding Topbar extension registries (#2997)

* Move topbars to cluster manager

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding topBar extension registries

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* topbar test clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing unused class

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Expanding CSS Module typings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing welcomeURL path

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove unused import

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix TopBarRegistry references

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing topbar test

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Init missing registry

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/layout/main-layout.module.css

@@ -28,7 +28,7 @@
   grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr;
   width: 100%;
   z-index: 1;
-  height: calc(100% - var(--main-layout-header));
+  height: 100%;
 }
 
 .sidebar {

src/renderer/components/layout/topbar.module.css

@@ -27,6 +27,7 @@
   background-color: var(--layoutBackground);
   z-index: 1;
   width: 100%;
+  grid-area: topbar;
 }
 
 .title {
@@ -42,4 +43,4 @@
   align-items: center;
   display: flex;
   height: 100%;
-}
+}

src/renderer/components/layout/topbar.tsx

@@ -22,16 +22,44 @@
 import styles from "./topbar.module.css";
 import React from "react";
 import { observer } from "mobx-react";
+import { TopBarRegistry } from "../../../extensions/registries";
 
 interface Props extends React.HTMLAttributes<any> {
   label: React.ReactNode;
 }
 
 export const TopBar = observer(({ label, children, ...rest }: Props) => {
+  const renderRegisteredItems = () => {
+    const items = TopBarRegistry.getInstance().getItems();
+
+    if (!Array.isArray(items)) {
+      return null;
+    }
+
+    return (
+      <div className="px-6">
+        {items.map((registration, index) => {
+          if (!registration?.components?.Item) {
+            return null;
+          }
+
+          return (
+            <div key={index}>
+              {registration.components.Item}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
   return (
     <div className={styles.topBar} {...rest}>
-      <div className={styles.title}>{label}</div>
-      <div className={styles.controls}>{children}</div>
+      <div className={styles.title} data-testid="topbarLabel">{label}</div>
+      <div className={styles.controls}>
+        {renderRegisteredItems()}
+        {children}
+      </div>
     </div>
   );
 });