Remove WelcomeMenuRegistry in favor of reactive solution

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

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

@@ -263,7 +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,7 @@ 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";
 
 export class LensRendererExtension extends LensExtension {
   globalPages: registries.PageRegistration[] = [];
@@ -40,7 +41,7 @@ export class LensRendererExtension extends LensExtension {
   kubeObjectMenuItems: registries.KubeObjectMenuRegistration[] = [];
   kubeWorkloadsOverviewItems: registries.WorkloadsOverviewDetailRegistration[] = [];
   commands: registries.CommandRegistration[] = [];
-  welcomeMenus: registries.WelcomeMenuRegistration[] = [];
+  welcomeMenus: WelcomeMenuRegistration[] = [];
   welcomeBanners: registries.WelcomeBannerRegistration[] = [];
   catalogEntityDetailItems: registries.CatalogEntityDetailRegistration<CatalogEntity>[] = [];
   topBarItems: registries.TopBarRegistration[] = [];

src/extensions/registries/index.ts

@@ -30,7 +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";

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,11 +20,14 @@
  */
 
 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 { TopBarRegistry, WelcomeMenuRegistry, WelcomeBannerRegistry } from "../../../../extensions/registries";
+import { TopBarRegistry, WelcomeBannerRegistry } from "../../../../extensions/registries";
 import { defaultWidth } from "../welcome";
+import { getDiForUnitTesting } from "../../getDiForUnitTesting";
+import type { DiRender } from "../../test-utils/renderFor";
+import { renderFor } from "../../test-utils/renderFor";
 
 jest.mock(
   "electron",
@@ -39,15 +42,19 @@ jest.mock(
 );
 
 describe("<Welcome/>", () => {
+  let render: DiRender;
+
   beforeEach(() => {
+    const di = getDiForUnitTesting();
+
+    render = renderFor(di);
+
     TopBarRegistry.createInstance();
-    WelcomeMenuRegistry.createInstance();
     WelcomeBannerRegistry.createInstance();
   });
 
   afterEach(() => {
     TopBarRegistry.resetInstance();
-    WelcomeMenuRegistry.resetInstance();
     WelcomeBannerRegistry.resetInstance();
   });
 

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,15 +22,22 @@
 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 { WelcomeBannerRegistry } from "../../../extensions/registries";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import welcomeMenuItemsInjectable from "./welcome-menu-items/welcome-menu-items.injectable";
+import type { WelcomeMenuRegistration } from "./welcome-menu-items/welcome-menu-registration";
 
 export const defaultWidth = 320;
 
-export const Welcome: React.FC = observer(() => {
+interface Dependencies {
+  welcomeMenuItems: IComputedValue<WelcomeMenuRegistration[]>
+}
+
+const NonInjectedWelcome: React.FC<Dependencies> = ({ welcomeMenuItems }) => {
   const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems();
 
   // if there is banner with specified width, use it to calculate the width of the container
@@ -106,27 +113,35 @@ export const Welcome: React.FC = observer(() => {
               style={{ width: `${defaultWidth}px` }}
               data-testid="welcome-menu-container"
             >
-              {WelcomeMenuRegistry.getInstance()
+              {welcomeMenuItems.get().map((item, index) => (
-                .getItems()
+                <li
-                .map((item, index) => (
+                  key={index}
-                  <li
+                  className="flex grid-12"
-                    key={index}
+                  onClick={() => item.click()}
-                    className="flex grid-12"
+                >
-                    onClick={() => item.click()}
+                  <Icon material={item.icon} className="box col-1" />
-                  >
+                  <a className="box col-10">
-                    <Icon material={item.icon} className="box col-1" />
+                    {typeof item.title === "string"
-                    <a className="box col-10">
+                      ? item.title
-                      {typeof item.title === "string"
+                      : item.title()}
-                        ? item.title
+                  </a>
-                        : item.title()}
+                  <Icon material="navigate_next" className="box col-1" />
-                    </a>
+                </li>
-                    <Icon material="navigate_next" className="box col-1" />
+              ))}
-                  </li>
-                ))}
             </ul>
           </div>
         </div>
       </div>
     </div>
   );
-});
+};
+
+export const Welcome = withInjectables<Dependencies>(
+  observer(NonInjectedWelcome),
+
+  {
+    getProps: (di) => ({
+      welcomeMenuItems: di.inject(welcomeMenuItemsInjectable),
+    }),
+  },
+);

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,7 +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();