Merge pull request #4615 from jansav/welcome-menu-registry

Replace WelcomeMenuRegistry and WelcomeBannerRegistry with reactive solution

src/extensions/extension-loader/extension-loader.ts

@@ -263,8 +263,6 @@ export class ExtensionLoader {
         registries.EntitySettingRegistry.getInstance().add(extension.entitySettings),
         registries.StatusBarRegistry.getInstance().add(extension.statusBarItems),
         registries.CommandRegistry.getInstance().add(extension.commands),
-        registries.WelcomeMenuRegistry.getInstance().add(extension.welcomeMenus),
-        registries.WelcomeBannerRegistry.getInstance().add(extension.welcomeBanners),
         registries.CatalogEntityDetailRegistry.getInstance().add(extension.catalogEntityDetailItems),
         registries.TopBarRegistry.getInstance().add(extension.topBarItems),
       ];

src/extensions/lens-renderer-extension.ts

@@ -27,6 +27,8 @@ import type { Disposer } from "../common/utils";
 import { catalogEntityRegistry, EntityFilter } from "../renderer/api/catalog-entity-registry";
 import { catalogCategoryRegistry, CategoryFilter } from "../renderer/api/catalog-category-registry";
 import type { KubernetesCluster } from "../common/catalog-entities";
+import type { WelcomeMenuRegistration } from "../renderer/components/+welcome/welcome-menu-items/welcome-menu-registration";
+import type { WelcomeBannerRegistration } from "../renderer/components/+welcome/welcome-banner-items/welcome-banner-registration";
 
 export class LensRendererExtension extends LensExtension {
   globalPages: registries.PageRegistration[] = [];
@@ -40,8 +42,8 @@ export class LensRendererExtension extends LensExtension {
   kubeObjectMenuItems: registries.KubeObjectMenuRegistration[] = [];
   kubeWorkloadsOverviewItems: registries.WorkloadsOverviewDetailRegistration[] = [];
   commands: registries.CommandRegistration[] = [];
-  welcomeMenus: registries.WelcomeMenuRegistration[] = [];
+  welcomeMenus: WelcomeMenuRegistration[] = [];
-  welcomeBanners: registries.WelcomeBannerRegistration[] = [];
+  welcomeBanners: WelcomeBannerRegistration[] = [];
   catalogEntityDetailItems: registries.CatalogEntityDetailRegistration<CatalogEntity>[] = [];
   topBarItems: registries.TopBarRegistration[] = [];
 

src/extensions/registries/index.ts

@@ -30,8 +30,6 @@ export * from "./kube-object-menu-registry";
 export * from "./kube-object-status-registry";
 export * from "./command-registry";
 export * from "./entity-setting-registry";
-export * from "./welcome-menu-registry";
-export * from "./welcome-banner-registry";
 export * from "./catalog-entity-detail-registry";
 export * from "./workloads-overview-detail-registry";
 export * from "./topbar-registry";

src/extensions/renderer-extensions.injectable.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import type { IComputedValue } from "mobx";
+import extensionsInjectable from "./extensions.injectable";
+import type { LensRendererExtension } from "./lens-renderer-extension";
+
+const rendererExtensionsInjectable = getInjectable({
+  lifecycle: lifecycleEnum.singleton,
+
+  instantiate: (di) =>
+    di.inject(extensionsInjectable) as IComputedValue<LensRendererExtension[]>,
+});
+
+export default rendererExtensionsInjectable;

src/renderer/bootstrap.tsx

@@ -114,9 +114,6 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
   logger.info(`${logPrefix} initializing KubeObjectDetailRegistry`);
   initializers.initKubeObjectDetailRegistry();
 
-  logger.info(`${logPrefix} initializing WelcomeMenuRegistry`);
-  initializers.initWelcomeMenuRegistry();
-
   logger.info(`${logPrefix} initializing WorkloadsOverviewDetailRegistry`);
   initializers.initWorkloadsOverviewDetailRegistry();
 

src/renderer/components/+welcome/__test__/welcome.test.tsx

@@ -20,45 +20,62 @@
  */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
-import { Welcome } from "../welcome";
+import { defaultWidth, Welcome } from "../welcome";
-import { TopBarRegistry, WelcomeMenuRegistry, WelcomeBannerRegistry } from "../../../../extensions/registries";
+import { computed } from "mobx";
-import { defaultWidth } from "../welcome";
+import { TopBarRegistry } from "../../../../extensions/registries";
+import { getDiForUnitTesting } from "../../getDiForUnitTesting";
+import type { DiRender } from "../../test-utils/renderFor";
+import { renderFor } from "../../test-utils/renderFor";
+import type { ConfigurableDependencyInjectionContainer } from "@ogre-tools/injectable";
+import rendererExtensionsInjectable from "../../../../extensions/renderer-extensions.injectable";
+import { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
+import type { WelcomeBannerRegistration } from "../welcome-banner-items/welcome-banner-registration";
 
-jest.mock(
+jest.mock("electron", () => ({
-  "electron",
+  ipcRenderer: {
-  () => ({
+    on: jest.fn(),
-    ipcRenderer: {
+  },
-      on: jest.fn(),
+  app: {
-    },
+    getPath: () => "tmp",
-    app: {
+  },
-      getPath: () => "tmp",
+}));
-    },
-  }),
-);
 
 describe("<Welcome/>", () => {
+  let render: DiRender;
+  let di: ConfigurableDependencyInjectionContainer;
+  let welcomeBannersStub: WelcomeBannerRegistration[];
+
   beforeEach(() => {
+    di = getDiForUnitTesting();
+
+    render = renderFor(di);
+
+    welcomeBannersStub = [];
+
+    di.override(rendererExtensionsInjectable, () =>
+      computed(() => [
+        new TestExtension({
+          id: "some-id",
+          welcomeBanners: welcomeBannersStub,
+        }),
+      ]),
+    );
+
     TopBarRegistry.createInstance();
-    WelcomeMenuRegistry.createInstance();
-    WelcomeBannerRegistry.createInstance();
   });
 
   afterEach(() => {
     TopBarRegistry.resetInstance();
-    WelcomeMenuRegistry.resetInstance();
-    WelcomeBannerRegistry.resetInstance();
   });
 
   it("renders <Banner /> registered in WelcomeBannerRegistry and hide logo", async () => {
     const testId = "testId";
 
-    WelcomeBannerRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+    welcomeBannersStub.push({
-      {
+      Banner: () => <div data-testid={testId} />,
-        Banner: () => <div data-testid={testId} />,
+    });
-      },
-    ]);
 
     const { container } = render(<Welcome />);
 
@@ -67,16 +84,15 @@ describe("<Welcome/>", () => {
   });
 
   it("calculates max width from WelcomeBanner.width registered in WelcomeBannerRegistry", async () => {
-    WelcomeBannerRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+    welcomeBannersStub.push({
-      {
+      width: 100,
-        width: 100,
+      Banner: () => <div />,
-        Banner: () => <div />,
+    });
-      },
+
-      {
+    welcomeBannersStub.push({
-        width: 800,
+      width: 800,
-        Banner: () => <div />,
+      Banner: () => <div />,
-      },
+    });
-    ]);
 
     render(<Welcome />);
 
@@ -92,3 +108,25 @@ describe("<Welcome/>", () => {
     });
   });
 });
+
+class TestExtension extends LensRendererExtension {
+  constructor({
+    id,
+    welcomeBanners,
+  }: {
+    id: string;
+    welcomeBanners: WelcomeBannerRegistration[];
+  }) {
+    super({
+      id,
+      absolutePath: "irrelevant",
+      isBundled: false,
+      isCompatible: false,
+      isEnabled: false,
+      manifest: { name: id, version: "some-version" },
+      manifestPath: "irrelevant",
+    });
+
+    this.welcomeBanners = welcomeBanners;
+  }
+}

src/renderer/components/+welcome/welcome-banner-items/welcome-banner-items.injectable.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import rendererExtensionsInjectable from "../../../../extensions/renderer-extensions.injectable";
+import { computed } from "mobx";
+
+const welcomeBannerItemsInjectable = getInjectable({
+  instantiate: (di) => {
+    const extensions = di.inject(rendererExtensionsInjectable);
+
+    return computed(() => [
+      ...extensions.get().flatMap((extension) => extension.welcomeBanners),
+    ]);
+  },
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default welcomeBannerItemsInjectable;

src/renderer/components/+welcome/welcome-banner-items/welcome-banner-registration.d.ts

@@ -19,8 +19,6 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { BaseRegistry } from "./base-registry";
-
 /**
  * WelcomeBannerRegistration is for an extension to register
  * Provide a Banner component to be renderered in the welcome screen.
@@ -35,5 +33,3 @@ export interface WelcomeBannerRegistration {
    */
   width?: number
 }
-
-export class WelcomeBannerRegistry extends BaseRegistry<WelcomeBannerRegistration> { }

src/renderer/components/+welcome/welcome-menu-items/get-welcome-menu-items.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { computed, IComputedValue } from "mobx";
+import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
+import { navigate } from "../../../navigation";
+import { catalogURL } from "../../../../common/routes";
+
+interface Dependencies {
+  extensions: IComputedValue<LensRendererExtension[]>;
+}
+
+export const getWelcomeMenuItems = ({ extensions }: Dependencies) => {
+  const browseClusters = {
+    title: "Browse Clusters in Catalog",
+    icon: "view_list",
+    click: () =>
+      navigate(
+        catalogURL({
+          params: { group: "entity.k8slens.dev", kind: "KubernetesCluster" },
+        }),
+      ),
+  };
+
+  return computed(() => [
+    browseClusters,
+    ...extensions.get().flatMap((extension) => extension.welcomeMenus),
+  ]);
+};

src/renderer/components/+welcome/welcome-menu-items/welcome-menu-items.injectable.ts

@@ -18,18 +18,17 @@
  * 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 { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import rendererExtensionsInjectable from "../../../../extensions/renderer-extensions.injectable";
+import { getWelcomeMenuItems } from "./get-welcome-menu-items";
 
-import { catalogURL } from "../../common/routes";
+const welcomeMenuItemsInjectable = getInjectable({
-import { WelcomeMenuRegistry } from "../../extensions/registries";
+  instantiate: (di) =>
-import { navigate } from "../navigation";
+    getWelcomeMenuItems({
+      extensions: di.inject(rendererExtensionsInjectable),
+    }),
 
-export function initWelcomeMenuRegistry() {
+  lifecycle: lifecycleEnum.singleton,
-  WelcomeMenuRegistry.getInstance()
+});
-    .add([
+
-      {
+export default welcomeMenuItemsInjectable;
-        title: "Browse Clusters in Catalog",
-        icon: "view_list",
-        click: () => navigate(catalogURL({ params: { group: "entity.k8slens.dev", kind: "KubernetesCluster" }} )),
-      },
-    ]);
-}

src/renderer/components/+welcome/welcome-menu-items/welcome-menu-registration.d.ts

@@ -19,12 +19,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { BaseRegistry } from "./base-registry";
-
 export interface WelcomeMenuRegistration {
   title: string | (() => string);
   icon: string;
   click: () => void | Promise<void>;
 }
-
-export class WelcomeMenuRegistry extends BaseRegistry<WelcomeMenuRegistration> {}

src/renderer/components/+welcome/welcome.tsx

@@ -22,78 +22,129 @@
 import "./welcome.scss";
 import React from "react";
 import { observer } from "mobx-react";
+import type { IComputedValue } from "mobx";
 import Carousel from "react-material-ui-carousel";
 import { Icon } from "../icon";
 import { productName, slackUrl } from "../../../common/vars";
-import { WelcomeMenuRegistry } from "../../../extensions/registries";
+import { withInjectables } from "@ogre-tools/injectable-react";
-import { WelcomeBannerRegistry } from "../../../extensions/registries";
+import welcomeMenuItemsInjectable from "./welcome-menu-items/welcome-menu-items.injectable";
+import type { WelcomeMenuRegistration } from "./welcome-menu-items/welcome-menu-registration";
+import welcomeBannerItemsInjectable from "./welcome-banner-items/welcome-banner-items.injectable";
+import type { WelcomeBannerRegistration } from "./welcome-banner-items/welcome-banner-registration";
 
 export const defaultWidth = 320;
 
-@observer
+interface Dependencies {
-export class Welcome extends React.Component {
+  welcomeMenuItems: IComputedValue<WelcomeMenuRegistration[]>
-  render() {
+  welcomeBannerItems: IComputedValue<WelcomeBannerRegistration[]>
-    const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems();
+}
 
-    // if there is banner with specified width, use it to calculate the width of the container
+const NonInjectedWelcome: React.FC<Dependencies> = ({ welcomeMenuItems, welcomeBannerItems }) => {
-    const maxWidth = welcomeBanner.reduce((acc, curr) => {
+  const welcomeBanners = welcomeBannerItems.get();
-      const currWidth = curr.width ?? 0;
 
-      if (acc > currWidth) {
+  // if there is banner with specified width, use it to calculate the width of the container
-        return acc;
+  const maxWidth = welcomeBanners.reduce((acc, curr) => {
-      }
+    const currWidth = curr.width ?? 0;
 
-      return currWidth;
+    if (acc > currWidth) {
-    }, defaultWidth);
+      return acc;
+    }
 
-    return (
+    return currWidth;
-      <div className="flex justify-center Welcome align-center">
+  }, defaultWidth);
-        <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
+
-          {welcomeBanner.length > 0 ? (
+  return (
-            <Carousel
+    <div className="flex justify-center Welcome align-center">
-              stopAutoPlayOnHover={true}
+      <div
-              indicators={welcomeBanner.length > 1}
+        style={{ width: `${maxWidth}px` }}
-              autoPlay={true}
+        data-testid="welcome-banner-container"
-              navButtonsAlwaysInvisible={true}
+      >
-              indicatorIconButtonProps={{
+        {welcomeBanners.length > 0 ? (
-                style: {
+          <Carousel
-                  color: "var(--iconActiveBackground)",
+            stopAutoPlayOnHover={true}
-                },
+            indicators={welcomeBanners.length > 1}
-              }}
+            autoPlay={true}
-              activeIndicatorIconButtonProps={{
+            navButtonsAlwaysInvisible={true}
-                style: {
+            indicatorIconButtonProps={{
-                  color: "var(--iconActiveColor)",
+              style: {
-                },
+                color: "var(--iconActiveBackground)",
-              }}
+              },
-              interval={8000}
+            }}
+            activeIndicatorIconButtonProps={{
+              style: {
+                color: "var(--iconActiveColor)",
+              },
+            }}
+            interval={8000}
+          >
+            {welcomeBanners.map((item, index) => (
+              <item.Banner key={index} />
+            ))}
+          </Carousel>
+        ) : (
+          <Icon svg="logo-lens" className="logo" />
+        )}
+
+        <div className="flex justify-center">
+          <div
+            style={{ width: `${defaultWidth}px` }}
+            data-testid="welcome-text-container"
+          >
+            <h2>Welcome to {productName} 5!</h2>
+
+            <p>
+              To get you started we have auto-detected your clusters in your
+              kubeconfig file and added them to the catalog, your centralized
+              view for managing all your cloud-native resources.
+              <br />
+              <br />
+              If you have any questions or feedback, please join our{" "}
+              <a
+                href={slackUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="link"
+              >
+                Lens Community slack channel
+              </a>
+              .
+            </p>
+
+            <ul
+              className="block"
+              style={{ width: `${defaultWidth}px` }}
+              data-testid="welcome-menu-container"
             >
-              {welcomeBanner.map((item, index) =>
+              {welcomeMenuItems.get().map((item, index) => (
-                <item.Banner key={index} />,
+                <li
-              )}
+                  key={index}
-            </Carousel>
+                  className="flex grid-12"
-          ) : <Icon svg="logo-lens" className="logo" />}
+                  onClick={() => item.click()}
-
+                >
-          <div className="flex justify-center">
+                  <Icon material={item.icon} className="box col-1" />
-            <div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
+                  <a className="box col-10">
-              <h2>Welcome to {productName} 5!</h2>
+                    {typeof item.title === "string"
-
+                      ? item.title
-              <p>
+                      : item.title()}
-            To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources.
+                  </a>
-                <br /><br />
+                  <Icon material="navigate_next" className="box col-1" />
-            If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>.
+                </li>
-              </p>
+              ))}
-
+            </ul>
-              <ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
-                {WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
-                  <li key={index} className="flex grid-12" onClick={() => item.click()}>
-                    <Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
-                  </li>
-                ))}
-              </ul>
-            </div>
           </div>
         </div>
       </div>
-    );
+    </div>
-  }
+  );
-}
+};
+
+export const Welcome = withInjectables<Dependencies>(
+  observer(NonInjectedWelcome),
+
+  {
+    getProps: (di) => ({
+      welcomeMenuItems: di.inject(welcomeMenuItemsInjectable),
+      welcomeBannerItems: di.inject(welcomeBannerItemsInjectable),
+    }),
+  },
+);

src/renderer/initializers/index.ts

@@ -27,7 +27,6 @@ export * from "./ipc";
 export * from "./kube-object-detail-registry";
 export * from "./kube-object-menu-registry";
 export * from "./registries";
-export * from "./welcome-menu-registry";
 export * from "./workloads-overview-detail-registry";
 export * from "./catalog-category-registry";
 export * from "./status-bar-registry";

src/renderer/initializers/registries.ts

@@ -33,8 +33,6 @@ export function initRegistries() {
   registries.KubeObjectMenuRegistry.createInstance();
   registries.KubeObjectStatusRegistry.createInstance();
   registries.StatusBarRegistry.createInstance();
-  registries.WelcomeMenuRegistry.createInstance();
-  registries.WelcomeBannerRegistry.createInstance();
   registries.WorkloadsOverviewDetailRegistry.createInstance();
   registries.TopBarRegistry.createInstance();
 }