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/common/utils/makeCss.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/**
+ * Function expands generic CSS Modules literal types and adds dictionary with arbitrary
+ * indexes.
+ * @param styles Styles imported from CSS Module having only literal types
+ * @returns Passed style list with expanded typescript types
+ */
+export function makeCss<T>(styles: T) {
+  return styles as typeof styles & { [key: string]: string };
+}

src/extensions/extension-loader.ts

@@ -253,6 +253,7 @@ export class ExtensionLoader extends Singleton {
         registries.CommandRegistry.getInstance().add(extension.commands),
         registries.WelcomeMenuRegistry.getInstance().add(extension.welcomeMenus),
         registries.CatalogEntityDetailRegistry.getInstance().add(extension.catalogEntityDetailItems),
+        registries.TopBarRegistry.getInstance().add(extension.topBarItems),
       ];
 
       this.events.on("remove", (removedExtension: LensRendererExtension) => {

src/extensions/lens-renderer-extension.ts

@@ -28,6 +28,7 @@ import { LensExtension } from "./lens-extension";
 import { getExtensionPageUrl } from "./registries/page-registry";
 import type { CommandRegistration } from "./registries/command-registry";
 import type { EntitySettingRegistration } from "./registries/entity-setting-registry";
+import type { TopBarRegistration } from "./registries/topbar-registry";
 
 export class LensRendererExtension extends LensExtension {
   globalPages: PageRegistration[] = [];
@@ -44,6 +45,7 @@ export class LensRendererExtension extends LensExtension {
   commands: CommandRegistration[] = [];
   welcomeMenus: WelcomeMenuRegistration[] = [];
   catalogEntityDetailItems: CatalogEntityDetailRegistration[] = [];
+  topBarItems: TopBarRegistration[] = [];
 
   async navigate<P extends object>(pageId?: string, params?: P) {
     const { navigate } = await import("../renderer/navigation");

src/extensions/registries/index.ts

@@ -34,4 +34,5 @@ export * from "./entity-setting-registry";
 export * from "./welcome-menu-registry";
 export * from "./catalog-entity-detail-registry";
 export * from "./workloads-overview-detail-registry";
+export * from "./topbar-registry";
 export * from "./protocol-handler";

src/extensions/registries/topbar-registry.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type React from "react";
+import { BaseRegistry } from "./base-registry";
+
+interface TopBarComponents {
+  Item?: React.ComponentType;
+}
+
+export interface TopBarRegistration {
+  components: TopBarComponents;
+}
+
+export class TopBarRegistry extends BaseRegistry<TopBarRegistration> {
+}

src/renderer/components/+catalog/catalog.tsx

@@ -27,7 +27,6 @@ import { ItemListLayout } from "../item-object-list";
 import { action, makeObservable, observable, reaction, when } from "mobx";
 import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
 import { navigate } from "../../navigation";
-import { kebabCase } from "lodash";
 import { MenuItem, MenuActions } from "../menu";
 import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
 import { Badge } from "../badge";
@@ -41,11 +40,9 @@ import { Notifications } from "../notifications";
 import { Avatar } from "../avatar/avatar";
 import { MainLayout } from "../layout/main-layout";
 import { cssNames } from "../../utils";
-import { TopBar } from "../layout/topbar";
+import { makeCss } from "../../../common/utils/makeCss";
-import { Icon } from "../icon";
-import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 import { CatalogEntityDetails } from "./catalog-entity-details";
-import { CatalogViewRouteParam, welcomeURL } from "../../../common/routes";
+import type { CatalogViewRouteParam } from "../../../common/routes";
 
 enum sortBy {
   name = "name",
@@ -54,6 +51,8 @@ enum sortBy {
   status = "status"
 }
 
+const css = makeCss(styles);
+
 interface Props extends RouteComponentProps<CatalogViewRouteParam> {}
 @observer
 export class Catalog extends React.Component<Props> {
@@ -143,14 +142,14 @@ export class Catalog extends React.Component<Props> {
 
   renderNavigation() {
     return (
-      <Tabs className={cssNames(styles.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
+      <Tabs className={cssNames(css.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
         <div>
           <Tab
             value={undefined}
             key="*"
             label="Browse"
             data-testid="*-tab"
-            className={cssNames(styles.tab, { [styles.activeTab]: this.activeTab == null })}
+            className={cssNames(css.tab, { [css.activeTab]: this.activeTab == null })}
           />
           {
             this.categories.map(category => (
@@ -159,7 +158,7 @@ export class Catalog extends React.Component<Props> {
                 key={category.getId()}
                 label={category.metadata.name}
                 data-testid={`${category.getId()}-tab`}
-                className={cssNames(styles.tab, { [styles.activeTab]: this.activeTab == category.getId() })}
+                className={cssNames(css.tab, { [css.activeTab]: this.activeTab == category.getId() })}
               />
             ))
           }
@@ -198,7 +197,7 @@ export class Catalog extends React.Component<Props> {
         colorHash={`${item.name}-${item.source}`}
         width={24}
         height={24}
-        className={styles.catalogIcon}
+        className={css.catalogIcon}
       />
     );
   }
@@ -220,18 +219,18 @@ export class Catalog extends React.Component<Props> {
           (entity: CatalogEntityItem) => entity.searchFields,
         ]}
         renderTableHeader={[
-          { title: "", className: styles.iconCell },
+          { title: "", className: css.iconCell },
-          { title: "Name", className: styles.nameCell, sortBy: sortBy.name },
+          { title: "Name", className: css.nameCell, sortBy: sortBy.name },
-          { title: "Source", className: styles.sourceCell, sortBy: sortBy.source },
+          { title: "Source", className: css.sourceCell, sortBy: sortBy.source },
-          { title: "Labels", className: styles.labelsCell },
+          { title: "Labels", className: css.labelsCell },
-          { title: "Status", className: styles.statusCell, sortBy: sortBy.status },
+          { title: "Status", className: css.statusCell, sortBy: sortBy.status },
         ]}
         renderTableContents={(item: CatalogEntityItem) => [
           this.renderIcon(item),
           item.name,
           item.source,
           item.labels.map((label) => <Badge key={label} label={label} title={label} />),
-          { title: item.phase, className: kebabCase(item.phase) }
+          { title: item.phase, className: cssNames(css[item.phase]) }
         ]}
         onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
         renderItemMenu={this.renderItemMenu}
@@ -257,12 +256,12 @@ export class Catalog extends React.Component<Props> {
           (entity: CatalogEntityItem) => entity.searchFields,
         ]}
         renderTableHeader={[
-          { title: "", className: styles.iconCell },
+          { title: "", className: css.iconCell },
-          { title: "Name", className: styles.nameCell, sortBy: sortBy.name },
+          { title: "Name", className: css.nameCell, sortBy: sortBy.name },
-          { title: "Kind", className: styles.kindCell, sortBy: sortBy.kind },
+          { title: "Kind", className: css.kindCell, sortBy: sortBy.kind },
-          { title: "Source", className: styles.sourceCell, sortBy: sortBy.source },
+          { title: "Source", className: css.sourceCell, sortBy: sortBy.source },
-          { title: "Labels", className: styles.labelsCell },
+          { title: "Labels", className: css.labelsCell },
-          { title: "Status", className: styles.statusCell, sortBy: sortBy.status },
+          { title: "Status", className: css.statusCell, sortBy: sortBy.status },
         ]}
         renderTableContents={(item: CatalogEntityItem) => [
           this.renderIcon(item),
@@ -270,7 +269,7 @@ export class Catalog extends React.Component<Props> {
           item.kind,
           item.source,
           item.labels.map((label) => <Badge key={label} label={label} title={label} />),
-          { title: item.phase, className: kebabCase(item.phase) }
+          { title: item.phase, className: cssNames(css[item.phase]) }
         ]}
         detailsItem={this.selectedItem}
         onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
@@ -285,29 +284,20 @@ export class Catalog extends React.Component<Props> {
     }
 
     return (
-      <>
+      <MainLayout sidebar={this.renderNavigation()}>
-        <TopBar label="Catalog">
+        <div className="p-6 h-full">
-          <div>
+          { this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() }
-            <MaterialTooltip title="Close Catalog" placement="left">
+        </div>
-              <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(welcomeURL())}/>
+        { !this.selectedItem && (
-            </MaterialTooltip>
+          <CatalogAddButton category={this.catalogEntityStore.activeCategory} />
-          </div>
+        )}
-        </TopBar>
+        { this.selectedItem && (
-        <MainLayout sidebar={this.renderNavigation()}>
+          <CatalogEntityDetails
-          <div className="p-6 h-full">
+            entity={this.selectedItem.entity}
-            { this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() }
+            hideDetails={() => this.selectedItem = null}
-          </div>
+          />
-          { !this.selectedItem && (
+        )}
-            <CatalogAddButton category={this.catalogEntityStore.activeCategory} />
+      </MainLayout>
-          )}
-          { this.selectedItem && (
-            <CatalogEntityDetails
-              entity={this.selectedItem.entity}
-              hideDetails={() => this.selectedItem = null}
-            />
-          )}
-        </MainLayout>
-      </>
     );
   }
 }

src/renderer/components/cluster-manager/catalog-topbar.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import { welcomeURL } from "../../../common/routes";
+import { navigate } from "../../navigation";
+import { Icon } from "../icon";
+import { TopBar } from "../layout/topbar";
+import { MaterialTooltip } from "../material-tooltip/material-tooltip";
+
+export function CatalogTopbar() {
+  return (
+    <TopBar label="Catalog">
+      <div>
+        <MaterialTooltip title="Close Catalog" placement="left">
+          <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(welcomeURL())}/>
+        </MaterialTooltip>
+      </div>
+    </TopBar>
+  );
+}

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -23,10 +23,12 @@
   --bottom-bar-height: 22px;
 
   display: grid;
-  grid-template-areas: "menu main" "menu main" "bottom-bar bottom-bar";
+  grid-template-areas:
+    "menu topbar"
+    "menu main"
+    "bottom-bar bottom-bar";
   grid-template-rows: auto 1fr min-content;
   grid-template-columns: min-content 1fr;
-  height: 100%;
 
   main {
     grid-area: main;
@@ -46,7 +48,7 @@
   #lens-views {
     position: absolute;
     left: 0;
-    top: var(--main-layout-header); // Move below the TopBar
+    top: 0;
     right: 0;
     bottom: 0;
     display: flex;

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -34,6 +34,8 @@ import { Extensions } from "../+extensions";
 import { HotbarMenu } from "../hotbar/hotbar-menu";
 import { EntitySettings } from "../+entity-settings";
 import { Welcome } from "../+welcome";
+import { ClusterTopbar } from "./cluster-topbar";
+import { CatalogTopbar } from "./catalog-topbar";
 import * as routes from "../../../common/routes";
 
 @observer
@@ -41,6 +43,8 @@ export class ClusterManager extends React.Component {
   render() {
     return (
       <div className="ClusterManager">
+        <Route component={CatalogTopbar} {...routes.catalogRoute} />
+        <Route component={ClusterTopbar} {...routes.clusterViewRoute} />
         <main>
           <div id="lens-views"/>
           <Switch>

src/renderer/components/cluster-manager/cluster-topbar.tsx

@@ -19,21 +19,28 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { observer } from "mobx-react";
 import React from "react";
+import type { RouteComponentProps } from "react-router";
 import { catalogURL } from "../../../common/routes";
-import type { Cluster } from "../../../main/cluster";
 import { navigate } from "../../navigation";
 import { Icon } from "../icon";
 import { TopBar } from "../layout/topbar";
 import { MaterialTooltip } from "../material-tooltip/material-tooltip";
+import type { Cluster } from "../../../main/cluster";
+import { ClusterStore } from "../../../common/cluster-store";
+import type { ClusterViewRouteParams } from "../../../common/routes";
 
-interface Props {
+interface Props extends RouteComponentProps<ClusterViewRouteParams> {
-  cluster: Cluster
 }
 
-export function ClusterTopbar({ cluster }: Props) {
+export const ClusterTopbar = observer((props: Props) => {
+  const getCluster = (): Cluster | undefined => {
+    return ClusterStore.getInstance().getById(props.match.params.clusterId);
+  };
+
   return (
-    <TopBar label={cluster.name}>
+    <TopBar label={getCluster()?.name}>
       <div>
         <MaterialTooltip title="Back to Catalog" placement="left">
           <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(catalogURL())}/>
@@ -41,4 +48,4 @@ export function ClusterTopbar({ cluster }: Props) {
       </div>
     </TopBar>
   );
-}
+});

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -32,7 +32,6 @@ import { requestMain } from "../../../common/ipc";
 import { clusterActivateHandler } from "../../../common/cluster-ipc";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
-import { ClusterTopbar } from "./cluster-topbar";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
@@ -104,7 +103,6 @@ export class ClusterView extends React.Component<Props> {
   render() {
     return (
       <div className="ClusterView flex column align-center">
-        {this.cluster && <ClusterTopbar cluster={this.cluster}/>}
         {this.renderStatus()}
       </div>
     );

src/renderer/components/cluster-manager/topbar.test.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+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";
+
+describe("<TopBar/>", () => {
+  beforeEach(() => {
+    TopBarRegistry.createInstance();
+  });
+
+  afterEach(() => {
+    TopBarRegistry.resetInstance();
+  });
+
+  it("renders w/o errors", () => {
+    const { container } = render(<TopBar label="test bar" />);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it("renders title", async () => {
+    const { getByTestId } = render(<TopBar label="topbar" />);
+
+    expect(await getByTestId("topbarLabel")).toHaveTextContent("topbar");
+  });
+
+  it("renders items", async () => {
+    const testId = "testId";
+    const text = "an item";
+
+    TopBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+      {
+        components: {
+          Item: <span data-testid={testId}>{text}</span>
+        }
+      }
+    ]);
+
+    const { getByTestId } = render(<TopBar label="topbar" />);
+
+    expect(await getByTestId(testId)).toHaveTextContent(text);
+  });
+});

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.title} data-testid="topbarLabel">{label}</div>
-      <div className={styles.controls}>{children}</div>
+      <div className={styles.controls}>
+        {renderRegisteredItems()}
+        {children}
+      </div>
     </div>
   );
 });

src/renderer/initializers/registries.ts

@@ -36,4 +36,5 @@ export function initRegistries() {
   registries.StatusBarRegistry.createInstance();
   registries.WelcomeMenuRegistry.createInstance();
   registries.WorkloadsOverviewDetailRegistry.createInstance();
+  registries.TopBarRegistry.createInstance();
 }