Stop using global shared state for ExtensionDiscovery and it's relatives

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

src/renderer/bootstrap.tsx

@@ -33,16 +33,13 @@ import { delay } from "../common/utils";
 import { isMac, isDevelopment } from "../common/vars";
 import { ClusterStore } from "../common/cluster-store";
 import { UserStore } from "../common/user-store";
-import { ExtensionDiscovery } from "../extensions/extension-discovery";
 import { HelmRepoManager } from "../main/helm/helm-repo-manager";
-import { ExtensionInstallationStateStore } from "./components/+extensions/extension-install.store";
 import { DefaultProps } from "./mui-base-theme";
 import configurePackages from "../common/configure-packages";
 import * as initializers from "./initializers";
 import logger from "../common/logger";
 import { HotbarStore } from "../common/hotbar-store";
 import { WeblinkStore } from "../common/weblink-store";
-import { ExtensionsStore } from "../extensions/extensions-store";
 import { FilesystemProvisionerStore } from "../main/extension-filesystem";
 import { ThemeStore } from "./theme.store";
 import { SentryInit } from "../common/sentry";
@@ -59,6 +56,10 @@ import bindProtocolAddRouteHandlersInjectable
 import type { LensProtocolRouterRenderer } from "./protocol-handler";
 import lensProtocolRouterRendererInjectable
   from "./protocol-handler/lens-protocol-router-renderer/lens-protocol-router-renderer.injectable";
+import extensionDiscoveryInjectable
+  from "../extensions/extension-discovery/extension-discovery.injectable";
+import extensionInstallationStateStoreInjectable
+  from "../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 
 if (process.isMainFrame) {
   SentryInit();
@@ -139,7 +140,9 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
 
   extensionLoader.init();
 
-  ExtensionDiscovery.createInstance(extensionLoader).init();
+  const extensionDiscovery = di.inject(extensionDiscoveryInjectable);
+
+  extensionDiscovery.init();
 
   // ClusterStore depends on: UserStore
   const clusterStore = ClusterStore.createInstance();
@@ -148,7 +151,6 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
 
   // HotbarStore depends on: ClusterStore
   HotbarStore.createInstance();
-  ExtensionsStore.createInstance();
   FilesystemProvisionerStore.createInstance();
 
   // ThemeStore depends on: UserStore
@@ -158,7 +160,10 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
   TerminalStore.createInstance();
   WeblinkStore.createInstance();
 
-  ExtensionInstallationStateStore.bindIpcListeners();
+  const extensionInstallationStateStore = di.inject(extensionInstallationStateStoreInjectable);
+
+  extensionInstallationStateStore.bindIpcListeners();
+
   HelmRepoManager.createInstance(); // initialize the manager
 
   // Register additional store listeners

src/renderer/components/+extensions/__tests__/extensions.test.tsx

@@ -24,10 +24,9 @@ import { fireEvent, waitFor } from "@testing-library/react";
 import fse from "fs-extra";
 import React from "react";
 import { UserStore } from "../../../../common/user-store";
-import { ExtensionDiscovery } from "../../../../extensions/extension-discovery";
+import type { ExtensionDiscovery } from "../../../../extensions/extension-discovery/extension-discovery";
 import type { ExtensionLoader } from "../../../../extensions/extension-loader";
 import { ConfirmDialog } from "../../confirm-dialog";
-import { ExtensionInstallationStateStore } from "../extension-install.store";
 import { Extensions } from "../extensions";
 import mockFs from "mock-fs";
 import { mockWindow } from "../../../../../__mocks__/windowMock";
@@ -36,6 +35,8 @@ import extensionLoaderInjectable
   from "../../../../extensions/extension-loader/extension-loader.injectable";
 import { getDiForUnitTesting } from "../../getDiForUnitTesting";
 import { DiRender, renderFor } from "../../test-utils/renderFor";
+import extensionDiscoveryInjectable
+  from "../../../../extensions/extension-discovery/extension-discovery.injectable";
 
 mockWindow();
 
@@ -78,6 +79,7 @@ AppPaths.init();
 
 describe("Extensions", () => {
   let extensionLoader: ExtensionLoader;
+  let extensionDiscovery: ExtensionDiscovery;
   let render: DiRender;
 
   beforeEach(async () => {
@@ -87,12 +89,12 @@ describe("Extensions", () => {
 
     extensionLoader = di.inject(extensionLoaderInjectable);
 
+    extensionDiscovery = di.inject(extensionDiscoveryInjectable);
+
     mockFs({
       "tmp": {},
     });
 
-    ExtensionInstallationStateStore.reset();
-
     extensionLoader.addExtension({
       id: "extensionId",
       manifest: {
@@ -106,8 +108,6 @@ describe("Extensions", () => {
       isCompatible: true,
     });
 
-    const extensionDiscovery = ExtensionDiscovery.createInstance(extensionLoader);
-
     extensionDiscovery.uninstallExtension = jest.fn(() => Promise.resolve());
 
     UserStore.createInstance();
@@ -116,11 +116,10 @@ describe("Extensions", () => {
   afterEach(() => {
     mockFs.restore();
     UserStore.resetInstance();
-    ExtensionDiscovery.resetInstance();
   });
 
   it("disables uninstall and disable buttons while uninstalling", async () => {
-    ExtensionDiscovery.getInstance().isLoaded = true;
+    extensionDiscovery.isLoaded = true;
 
     const res = render(<><Extensions /><ConfirmDialog /></>);
     const table = res.getByTestId("extensions-table");
@@ -137,7 +136,7 @@ describe("Extensions", () => {
     fireEvent.click(res.getByText("Yes"));
 
     await waitFor(() => {
-      expect(ExtensionDiscovery.getInstance().uninstallExtension).toHaveBeenCalled();
+      expect(extensionDiscovery.uninstallExtension).toHaveBeenCalled();
       fireEvent.click(menuTrigger);
       expect(res.getByText("Disable")).toHaveAttribute("aria-disabled", "true");
       expect(res.getByText("Uninstall")).toHaveAttribute("aria-disabled", "true");
@@ -164,14 +163,14 @@ describe("Extensions", () => {
   });
 
   it("displays spinner while extensions are loading", () => {
-    ExtensionDiscovery.getInstance().isLoaded = false;
+    extensionDiscovery.isLoaded = false;
     const { container } = render(<Extensions />);
 
     expect(container.querySelector(".Spinner")).toBeInTheDocument();
   });
 
   it("does not display the spinner while extensions are not loading", async () => {
-    ExtensionDiscovery.getInstance().isLoaded = true;
+    extensionDiscovery.isLoaded = true;
     const { container } = render(<Extensions />);
 
     expect(container.querySelector(".Spinner")).not.toBeInTheDocument();

src/renderer/components/+extensions/attempt-install-by-info/attempt-install-by-info.injectable.ts

@@ -22,12 +22,15 @@ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import { attemptInstallByInfo } from "./attempt-install-by-info";
 import attemptInstallInjectable from "../attempt-install/attempt-install.injectable";
 import getBaseRegistryUrlInjectable from "../get-base-registry-url/get-base-registry-url.injectable";
+import extensionInstallationStateStoreInjectable
+  from "../../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 
 const attemptInstallByInfoInjectable = getInjectable({
   instantiate: (di) =>
     attemptInstallByInfo({
       attemptInstall: di.inject(attemptInstallInjectable),
       getBaseRegistryUrl: di.inject(getBaseRegistryUrlInjectable),
+      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
     }),
 
   lifecycle: lifecycleEnum.singleton,

src/renderer/components/+extensions/attempt-install-by-info/attempt-install-by-info.tsx

@@ -18,7 +18,6 @@
  * 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 { ExtensionInstallationStateStore } from "../extension-install.store";
 import { downloadFile, downloadJson, ExtendableDisposer } from "../../../../common/utils";
 import { Notifications } from "../../notifications";
 import { ConfirmDialog } from "../../confirm-dialog";
@@ -28,6 +27,7 @@ import { SemVer } from "semver";
 import URLParse from "url-parse";
 import type { InstallRequest } from "../attempt-install/install-request";
 import lodash from "lodash";
+import type { ExtensionInstallationStateStore } from "../../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
 export interface ExtensionInfo {
   name: string;
@@ -38,14 +38,15 @@ export interface ExtensionInfo {
 interface Dependencies {
   attemptInstall: (request: InstallRequest, d: ExtendableDisposer) => Promise<void>;
   getBaseRegistryUrl: () => Promise<string>;
+  extensionInstallationStateStore: ExtensionInstallationStateStore
 }
 
-export const attemptInstallByInfo = ({ attemptInstall, getBaseRegistryUrl }: Dependencies) => async ({
+export const attemptInstallByInfo = ({ attemptInstall, getBaseRegistryUrl, extensionInstallationStateStore }: Dependencies) => async ({
   name,
   version,
   requireConfirmation = false,
 }: ExtensionInfo) => {
-  const disposer = ExtensionInstallationStateStore.startPreInstall();
+  const disposer = extensionInstallationStateStore.startPreInstall();
   const baseUrl = await getBaseRegistryUrl();
   const registryUrl = new URLParse(baseUrl).set("pathname", name).toString();
   let json: any;

src/renderer/components/+extensions/attempt-install/attempt-install.injectable.ts

@@ -23,6 +23,11 @@ import extensionLoaderInjectable from "../../../../extensions/extension-loader/e
 import uninstallExtensionInjectable from "../uninstall-extension/uninstall-extension.injectable";
 import { attemptInstall } from "./attempt-install";
 import unpackExtensionInjectable from "./unpack-extension/unpack-extension.injectable";
+import getExtensionDestFolderInjectable
+  from "./get-extension-dest-folder/get-extension-dest-folder.injectable";
+import createTempFilesAndValidateInjectable from "./create-temp-files-and-validate/create-temp-files-and-validate.injectable";
+import extensionInstallationStateStoreInjectable
+  from "../../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 
 const attemptInstallInjectable = getInjectable({
   instantiate: (di) =>
@@ -30,6 +35,9 @@ const attemptInstallInjectable = getInjectable({
       extensionLoader: di.inject(extensionLoaderInjectable),
       uninstallExtension: di.inject(uninstallExtensionInjectable),
       unpackExtension: di.inject(unpackExtensionInjectable),
+      createTempFilesAndValidate: di.inject(createTempFilesAndValidateInjectable),
+      getExtensionDestFolder: di.inject(getExtensionDestFolderInjectable),
+      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
     }),
 
   lifecycle: lifecycleEnum.singleton,

src/renderer/components/+extensions/attempt-install/attempt-install.tsx

@@ -23,10 +23,6 @@ import {
   disposer,
   ExtendableDisposer,
 } from "../../../../common/utils";
-import {
-  ExtensionInstallationState,
-  ExtensionInstallationStateStore,
-} from "../extension-install.store";
 import { Notifications } from "../../notifications";
 import { Button } from "../../button";
 import type { ExtensionLoader } from "../../../../extensions/extension-loader";
@@ -34,27 +30,43 @@ import type { LensExtensionId } from "../../../../extensions/lens-extension";
 import React from "react";
 import fse from "fs-extra";
 import { shell } from "electron";
-import {
-  createTempFilesAndValidate,
-  InstallRequestValidated,
-} from "./create-temp-files-and-validate/create-temp-files-and-validate";
-import { getExtensionDestFolder } from "./get-extension-dest-folder/get-extension-dest-folder";
+import type { InstallRequestValidated } from "./create-temp-files-and-validate/create-temp-files-and-validate";
 import type { InstallRequest } from "./install-request";
+import {
+  ExtensionInstallationState,
+  ExtensionInstallationStateStore,
+} from "../../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
 interface Dependencies {
   extensionLoader: ExtensionLoader;
   uninstallExtension: (id: LensExtensionId) => Promise<boolean>;
+  
   unpackExtension: (
     request: InstallRequestValidated,
     disposeDownloading: Disposer,
   ) => Promise<void>;
+  
+  createTempFilesAndValidate: (
+    installRequest: InstallRequest,
+  ) => Promise<InstallRequestValidated | null>;
+
+  getExtensionDestFolder: (name: string) => string
+
+  extensionInstallationStateStore: ExtensionInstallationStateStore
 }
 
 export const attemptInstall =
-  ({ extensionLoader, uninstallExtension, unpackExtension }: Dependencies) =>
+  ({
+    extensionLoader,
+    uninstallExtension,
+    unpackExtension,
+    createTempFilesAndValidate,
+    getExtensionDestFolder,
+    extensionInstallationStateStore,
+  }: Dependencies) =>
     async (request: InstallRequest, d?: ExtendableDisposer): Promise<void> => {
       const dispose = disposer(
-        ExtensionInstallationStateStore.startPreInstall(),
+        extensionInstallationStateStore.startPreInstall(),
         d,
       );
 
@@ -65,7 +77,7 @@ export const attemptInstall =
       }
 
       const { name, version, description } = validatedRequest.manifest;
-      const curState = ExtensionInstallationStateStore.getInstallationState(
+      const curState = extensionInstallationStateStore.getInstallationState(
         validatedRequest.id,
       );
 

src/renderer/components/+extensions/attempt-install/create-temp-files-and-validate/create-temp-files-and-validate.injectable.tsx

@@ -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 { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { createTempFilesAndValidate } from "./create-temp-files-and-validate";
+import extensionDiscoveryInjectable from "../../../../../extensions/extension-discovery/extension-discovery.injectable";
+
+const createTempFilesAndValidateInjectable = getInjectable({
+  instantiate: (di) =>
+    createTempFilesAndValidate({
+      extensionDiscovery: di.inject(extensionDiscoveryInjectable),
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default createTempFilesAndValidateInjectable;

src/renderer/components/+extensions/attempt-install/create-temp-files-and-validate/create-temp-files-and-validate.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import { validatePackage } from "../validate-package/validate-package";
-import { ExtensionDiscovery } from "../../../../../extensions/extension-discovery";
+import type { ExtensionDiscovery } from "../../../../../extensions/extension-discovery/extension-discovery";
 import { getMessageFromError } from "../../get-message-from-error/get-message-from-error";
 import logger from "../../../../../main/logger";
 import { Notifications } from "../../../notifications";
@@ -41,60 +41,66 @@ export interface InstallRequestValidated {
   tempFile: string; // temp system path to packed extension for unpacking
 }
 
-export async function createTempFilesAndValidate({
-  fileName,
-  dataP,
-}: InstallRequest): Promise<InstallRequestValidated | null> {
-  // copy files to temp
-  await fse.ensureDir(getExtensionPackageTemp());
-
-  // validate packages
-  const tempFile = getExtensionPackageTemp(fileName);
-
-  try {
-    const data = await dataP;
-
-    if (!data) {
-      return null;
-    }
-
-    await fse.writeFile(tempFile, data);
-    const manifest = await validatePackage(tempFile);
-    const id = path.join(
-      ExtensionDiscovery.getInstance().nodeModulesPath,
-      manifest.name,
-      "package.json",
-    );
-
-    return {
-      fileName,
-      data,
-      manifest,
-      tempFile,
-      id,
-    };
-  } catch (error) {
-    const message = getMessageFromError(error);
-
-    logger.info(
-      `[EXTENSION-INSTALLATION]: installing ${fileName} has failed: ${message}`,
-      { error },
-    );
-    Notifications.error(
-      <div className="flex column gaps">
-        <p>
-          Installing <em>{fileName}</em> has failed, skipping.
-        </p>
-        <p>
-          Reason: <em>{message}</em>
-        </p>
-      </div>,
-    );
-  }
-
-  return null;
+interface Dependencies {
+  extensionDiscovery: ExtensionDiscovery
 }
 
+export const createTempFilesAndValidate =
+  ({ extensionDiscovery }: Dependencies) =>
+    async ({
+      fileName,
+      dataP,
+    }: InstallRequest): Promise<InstallRequestValidated | null> => {
+      // copy files to temp
+      await fse.ensureDir(getExtensionPackageTemp());
+
+      // validate packages
+      const tempFile = getExtensionPackageTemp(fileName);
+
+      try {
+        const data = await dataP;
+
+        if (!data) {
+          return null;
+        }
+
+        await fse.writeFile(tempFile, data);
+        const manifest = await validatePackage(tempFile);
+        const id = path.join(
+          extensionDiscovery.nodeModulesPath,
+          manifest.name,
+          "package.json",
+        );
+
+        return {
+          fileName,
+          data,
+          manifest,
+          tempFile,
+          id,
+        };
+      } catch (error) {
+        const message = getMessageFromError(error);
+
+        logger.info(
+          `[EXTENSION-INSTALLATION]: installing ${fileName} has failed: ${message}`,
+          { error },
+        );
+        Notifications.error(
+          <div className="flex column gaps">
+            <p>
+            Installing <em>{fileName}</em> has failed, skipping.
+            </p>
+            <p>
+            Reason: <em>{message}</em>
+            </p>
+          </div>,
+        );
+      }
+
+      return null;
+    };
+
 
 function getExtensionPackageTemp(fileName = "") {
   return path.join(os.tmpdir(), "lens-extensions", fileName);

src/renderer/components/+extensions/attempt-install/get-extension-dest-folder/get-extension-dest-folder.injectable.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 extensionDiscoveryInjectable from "../../../../../extensions/extension-discovery/extension-discovery.injectable";
+
+import { getExtensionDestFolder } from "./get-extension-dest-folder";
+
+const getExtensionDestFolderInjectable = getInjectable({
+  instantiate: (di) =>
+    getExtensionDestFolder({
+      extensionDiscovery: di.inject(extensionDiscoveryInjectable),
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default getExtensionDestFolderInjectable;

src/renderer/components/+extensions/attempt-install/get-extension-dest-folder/get-extension-dest-folder.ts

@@ -18,11 +18,15 @@
  * 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 { ExtensionDiscovery } from "../../../../../extensions/extension-discovery";
+import type { ExtensionDiscovery } from "../../../../../extensions/extension-discovery/extension-discovery";
 import { sanitizeExtensionName } from "../../../../../extensions/lens-extension";
 import path from "path";
 
-export const getExtensionDestFolder = (name: string) => path.join(
-  ExtensionDiscovery.getInstance().localFolderPath,
-  sanitizeExtensionName(name),
-);
+interface Dependencies {
+  extensionDiscovery: ExtensionDiscovery;
+}
+
+export const getExtensionDestFolder =
+  ({ extensionDiscovery }: Dependencies) =>
+    (name: string) =>
+      path.join(extensionDiscovery.localFolderPath, sanitizeExtensionName(name));

src/renderer/components/+extensions/attempt-install/unpack-extension/unpack-extension.injectable.tsx

@@ -22,11 +22,17 @@ import { getInjectable } from "@ogre-tools/injectable";
 import { lifecycleEnum } from "@ogre-tools/injectable";
 import { unpackExtension } from "./unpack-extension";
 import extensionLoaderInjectable from "../../../../../extensions/extension-loader/extension-loader.injectable";
+import getExtensionDestFolderInjectable
+  from "../get-extension-dest-folder/get-extension-dest-folder.injectable";
+import extensionInstallationStateStoreInjectable
+  from "../../../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 
 const unpackExtensionInjectable = getInjectable({
   instantiate: (di) =>
     unpackExtension({
       extensionLoader: di.inject(extensionLoaderInjectable),
+      getExtensionDestFolder: di.inject(getExtensionDestFolderInjectable),
+      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
     }),
 
   lifecycle: lifecycleEnum.singleton,

src/renderer/components/+extensions/attempt-install/unpack-extension/unpack-extension.tsx

@@ -20,93 +20,98 @@
  */
 import type { InstallRequestValidated } from "../create-temp-files-and-validate/create-temp-files-and-validate";
 import { Disposer, extractTar, noop } from "../../../../../common/utils";
-import { ExtensionInstallationStateStore } from "../../extension-install.store";
 import { extensionDisplayName } from "../../../../../extensions/lens-extension";
 import logger from "../../../../../main/logger";
 import type { ExtensionLoader } from "../../../../../extensions/extension-loader";
 import { Notifications } from "../../../notifications";
 import { getMessageFromError } from "../../get-message-from-error/get-message-from-error";
-import { getExtensionDestFolder } from "../get-extension-dest-folder/get-extension-dest-folder";
 import path from "path";
 import fse from "fs-extra";
 import { when } from "mobx";
 import React from "react";
+import type { ExtensionInstallationStateStore } from "../../../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
 interface Dependencies {
   extensionLoader: ExtensionLoader
+  getExtensionDestFolder: (name: string) => string
+  extensionInstallationStateStore: ExtensionInstallationStateStore
 }
 
-export const unpackExtension = ({ extensionLoader }: Dependencies) => async (
-  request: InstallRequestValidated,
-  disposeDownloading?: Disposer,
-) => {
-  const {
-    id,
-    fileName,
-    tempFile,
-    manifest: { name, version },
-  } = request;
+export const unpackExtension =
+  ({
+    extensionLoader,
+    getExtensionDestFolder,
+    extensionInstallationStateStore,
+  }: Dependencies) =>
+    async (request: InstallRequestValidated, disposeDownloading?: Disposer) => {
+      const {
+        id,
+        fileName,
+        tempFile,
+        manifest: { name, version },
+      } = request;
 
-  ExtensionInstallationStateStore.setInstalling(id);
-  disposeDownloading?.();
+      extensionInstallationStateStore.setInstalling(id);
+      disposeDownloading?.();
 
-  const displayName = extensionDisplayName(name, version);
-  const extensionFolder = getExtensionDestFolder(name);
-  const unpackingTempFolder = path.join(
-    path.dirname(tempFile),
-    `${path.basename(tempFile)}-unpacked`,
-  );
+      const displayName = extensionDisplayName(name, version);
+      const extensionFolder = getExtensionDestFolder(name);
+      const unpackingTempFolder = path.join(
+        path.dirname(tempFile),
+        `${path.basename(tempFile)}-unpacked`,
+      );
 
-  logger.info(`Unpacking extension ${displayName}`, { fileName, tempFile });
+      logger.info(`Unpacking extension ${displayName}`, { fileName, tempFile });
 
-  try {
-    // extract to temp folder first
-    await fse.remove(unpackingTempFolder).catch(noop);
-    await fse.ensureDir(unpackingTempFolder);
-    await extractTar(tempFile, { cwd: unpackingTempFolder });
+      try {
+      // extract to temp folder first
+        await fse.remove(unpackingTempFolder).catch(noop);
+        await fse.ensureDir(unpackingTempFolder);
+        await extractTar(tempFile, { cwd: unpackingTempFolder });
 
-    // move contents to extensions folder
-    const unpackedFiles = await fse.readdir(unpackingTempFolder);
-    let unpackedRootFolder = unpackingTempFolder;
+        // move contents to extensions folder
+        const unpackedFiles = await fse.readdir(unpackingTempFolder);
+        let unpackedRootFolder = unpackingTempFolder;
 
-    if (unpackedFiles.length === 1) {
-      // check if %extension.tgz was packed with single top folder,
-      // e.g. "npm pack %ext_name" downloads file with "package" root folder within tarball
-      unpackedRootFolder = path.join(unpackingTempFolder, unpackedFiles[0]);
-    }
+        if (unpackedFiles.length === 1) {
+        // check if %extension.tgz was packed with single top folder,
+        // e.g. "npm pack %ext_name" downloads file with "package" root folder within tarball
+          unpackedRootFolder = path.join(unpackingTempFolder, unpackedFiles[0]);
+        }
 
-    await fse.ensureDir(extensionFolder);
-    await fse.move(unpackedRootFolder, extensionFolder, { overwrite: true });
+        await fse.ensureDir(extensionFolder);
+        await fse.move(unpackedRootFolder, extensionFolder, { overwrite: true });
 
-    // wait for the loader has actually install it
-    await when(() => extensionLoader.userExtensions.has(id));
+        // wait for the loader has actually install it
+        await when(() => extensionLoader.userExtensions.has(id));
 
-    // Enable installed extensions by default.
-    extensionLoader.setIsEnabled(id, true);
+        // Enable installed extensions by default.
+        extensionLoader.setIsEnabled(id, true);
 
-    Notifications.ok(
-      <p>
-        Extension <b>{displayName}</b> successfully installed!
-      </p>,
-    );
-  } catch (error) {
-    const message = getMessageFromError(error);
+        Notifications.ok(
+          <p>
+          Extension <b>{displayName}</b> successfully installed!
+          </p>,
+        );
+      } catch (error) {
+        const message = getMessageFromError(error);
 
-    logger.info(
-      `[EXTENSION-INSTALLATION]: installing ${request.fileName} has failed: ${message}`,
-      { error },
-    );
-    Notifications.error(
-      <p>
-        Installing extension <b>{displayName}</b> has failed: <em>{message}</em>
-      </p>,
-    );
-  } finally {
-    // Remove install state once finished
-    ExtensionInstallationStateStore.clearInstalling(id);
+        logger.info(
+          `[EXTENSION-INSTALLATION]: installing ${request.fileName} has failed: ${message}`,
+          { error },
+        );
+        Notifications.error(
+          <p>
+          Installing extension <b>{displayName}</b> has failed:{" "}
+            <em>{message}</em>
+          </p>,
+        );
+      } finally {
+      // Remove install state once finished
+        extensionInstallationStateStore.clearInstalling(id);
 
-    // clean up
-    fse.remove(unpackingTempFolder).catch(noop);
-    fse.unlink(tempFile).catch(noop);
-  }
-};
+        // clean up
+        fse.remove(unpackingTempFolder).catch(noop);
+        fse.unlink(tempFile).catch(noop);
+      }
+    };

src/renderer/components/+extensions/attempt-install/validate-package/validate-package.tsx

@@ -20,7 +20,7 @@
  */
 import type { LensExtensionManifest } from "../../../../../extensions/lens-extension";
 import { listTarEntries, readFileFromTar } from "../../../../../common/utils";
-import { manifestFilename } from "../../../../../extensions/extension-discovery";
+import { manifestFilename } from "../../../../../extensions/extension-discovery/extension-discovery";
 import path from "path";
 
 export const validatePackage = async (

src/renderer/components/+extensions/confirm-uninstall-extension/confirm-uninstall-extension.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import React from "react";
-import type { InstalledExtension } from "../../../../extensions/extension-discovery";
+import type { InstalledExtension } from "../../../../extensions/extension-discovery/extension-discovery";
 import type { LensExtensionId } from "../../../../extensions/lens-extension";
 import { extensionDisplayName } from "../../../../extensions/lens-extension";
 import { ConfirmDialog } from "../../confirm-dialog";

src/renderer/components/+extensions/extension-install.store.ts

@@ -1,254 +0,0 @@
-/**
- * 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 { action, computed, observable } from "mobx";
-import logger from "../../../main/logger";
-import { disposer } from "../../utils";
-import type { ExtendableDisposer } from "../../utils";
-import * as uuid from "uuid";
-import { broadcastMessage } from "../../../common/ipc";
-import { ipcRenderer } from "electron";
-
-export enum ExtensionInstallationState {
-  INSTALLING = "installing",
-  UNINSTALLING = "uninstalling",
-  IDLE = "idle",
-}
-
-const Prefix = "[ExtensionInstallationStore]";
-
-export class ExtensionInstallationStateStore {
-  private static InstallingFromMainChannel = "extension-installation-state-store:install";
-  private static ClearInstallingFromMainChannel = "extension-installation-state-store:clear-install";
-  private static PreInstallIds = observable.set<string>();
-  private static UninstallingExtensions = observable.set<string>();
-  private static InstallingExtensions = observable.set<string>();
-
-  static bindIpcListeners() {
-    ipcRenderer
-      .on(ExtensionInstallationStateStore.InstallingFromMainChannel, (event, extId) => {
-        ExtensionInstallationStateStore.setInstalling(extId);
-      })
-      .on(ExtensionInstallationStateStore.ClearInstallingFromMainChannel, (event, extId) => {
-        ExtensionInstallationStateStore.clearInstalling(extId);
-      });
-  }
-
-  @action static reset() {
-    logger.warn(`${Prefix}: resetting, may throw errors`);
-    ExtensionInstallationStateStore.InstallingExtensions.clear();
-    ExtensionInstallationStateStore.UninstallingExtensions.clear();
-    ExtensionInstallationStateStore.PreInstallIds.clear();
-  }
-
-  /**
-   * Strictly transitions an extension from not installing to installing
-   * @param extId the ID of the extension
-   * @throws if state is not IDLE
-   */
-  @action static setInstalling(extId: string): void {
-    logger.debug(`${Prefix}: trying to set ${extId} as installing`);
-
-    const curState = ExtensionInstallationStateStore.getInstallationState(extId);
-
-    if (curState !== ExtensionInstallationState.IDLE) {
-      throw new Error(`${Prefix}: cannot set ${extId} as installing. Is currently ${curState}.`);
-    }
-
-    ExtensionInstallationStateStore.InstallingExtensions.add(extId);
-  }
-
-  /**
-   * Broadcasts that an extension is being installed by the main process
-   * @param extId the ID of the extension
-   */
-  static setInstallingFromMain(extId: string): void {
-    broadcastMessage(ExtensionInstallationStateStore.InstallingFromMainChannel, extId);
-  }
-
-  /**
-   * Broadcasts that an extension is no longer being installed by the main process
-   * @param extId the ID of the extension
-   */
-  static clearInstallingFromMain(extId: string): void {
-    broadcastMessage(ExtensionInstallationStateStore.ClearInstallingFromMainChannel, extId);
-  }
-
-  /**
-   * Marks the start of a pre-install phase of an extension installation. The
-   * part of the installation before the tarball has been unpacked and the ID
-   * determined.
-   * @returns a disposer which should be called to mark the end of the install phase
-   */
-  @action static startPreInstall(): ExtendableDisposer {
-    const preInstallStepId = uuid.v4();
-
-    logger.debug(`${Prefix}: starting a new preinstall phase: ${preInstallStepId}`);
-    ExtensionInstallationStateStore.PreInstallIds.add(preInstallStepId);
-
-    return disposer(() => {
-      ExtensionInstallationStateStore.PreInstallIds.delete(preInstallStepId);
-      logger.debug(`${Prefix}: ending a preinstall phase: ${preInstallStepId}`);
-    });
-  }
-
-  /**
-   * Strictly transitions an extension from not uninstalling to uninstalling
-   * @param extId the ID of the extension
-   * @throws if state is not IDLE
-   */
-  @action static setUninstalling(extId: string): void {
-    logger.debug(`${Prefix}: trying to set ${extId} as uninstalling`);
-
-    const curState = ExtensionInstallationStateStore.getInstallationState(extId);
-
-    if (curState !== ExtensionInstallationState.IDLE) {
-      throw new Error(`${Prefix}: cannot set ${extId} as uninstalling. Is currently ${curState}.`);
-    }
-
-    ExtensionInstallationStateStore.UninstallingExtensions.add(extId);
-  }
-
-  /**
-   * Strictly clears the INSTALLING state of an extension
-   * @param extId The ID of the extension
-   * @throws if state is not INSTALLING
-   */
-  @action static clearInstalling(extId: string): void {
-    logger.debug(`${Prefix}: trying to clear ${extId} as installing`);
-
-    const curState = ExtensionInstallationStateStore.getInstallationState(extId);
-
-    switch (curState) {
-      case ExtensionInstallationState.INSTALLING:
-        return void ExtensionInstallationStateStore.InstallingExtensions.delete(extId);
-      default:
-        throw new Error(`${Prefix}: cannot clear INSTALLING state for ${extId}, it is currently ${curState}`);
-    }
-  }
-
-  /**
-   * Strictly clears the UNINSTALLING state of an extension
-   * @param extId The ID of the extension
-   * @throws if state is not UNINSTALLING
-   */
-  @action static clearUninstalling(extId: string): void {
-    logger.debug(`${Prefix}: trying to clear ${extId} as uninstalling`);
-
-    const curState = ExtensionInstallationStateStore.getInstallationState(extId);
-
-    switch (curState) {
-      case ExtensionInstallationState.UNINSTALLING:
-        return void ExtensionInstallationStateStore.UninstallingExtensions.delete(extId);
-      default:
-        throw new Error(`${Prefix}: cannot clear UNINSTALLING state for ${extId}, it is currently ${curState}`);
-    }
-  }
-
-  /**
-   * Returns the current state of the extension. IDLE is default value.
-   * @param extId The ID of the extension
-   */
-  static getInstallationState(extId: string): ExtensionInstallationState {
-    if (ExtensionInstallationStateStore.InstallingExtensions.has(extId)) {
-      return ExtensionInstallationState.INSTALLING;
-    }
-
-    if (ExtensionInstallationStateStore.UninstallingExtensions.has(extId)) {
-      return ExtensionInstallationState.UNINSTALLING;
-    }
-
-    return ExtensionInstallationState.IDLE;
-  }
-
-  /**
-   * Returns true if the extension is currently INSTALLING
-   * @param extId The ID of the extension
-   */
-  static isExtensionInstalling(extId: string): boolean {
-    return ExtensionInstallationStateStore.getInstallationState(extId) === ExtensionInstallationState.INSTALLING;
-  }
-
-  /**
-   * Returns true if the extension is currently UNINSTALLING
-   * @param extId The ID of the extension
-   */
-  static isExtensionUninstalling(extId: string): boolean {
-    return ExtensionInstallationStateStore.getInstallationState(extId) === ExtensionInstallationState.UNINSTALLING;
-  }
-
-  /**
-   * Returns true if the extension is currently IDLE
-   * @param extId The ID of the extension
-   */
-  static isExtensionIdle(extId: string): boolean {
-    return ExtensionInstallationStateStore.getInstallationState(extId) === ExtensionInstallationState.IDLE;
-  }
-
-  /**
-   * The current number of extensions installing
-   */
-  @computed static get installing(): number {
-    return ExtensionInstallationStateStore.InstallingExtensions.size;
-  }
-
-  /**
-   * The current number of extensions uninstalling
-   */
-  static get uninstalling(): number {
-    return ExtensionInstallationStateStore.UninstallingExtensions.size;
-  }
-
-  /**
-   * If there is at least one extension currently installing
-   */
-  static get anyInstalling(): boolean {
-    return ExtensionInstallationStateStore.installing > 0;
-  }
-
-  /**
-   * If there is at least one extension currently uninstalling
-   */
-  static get anyUninstalling(): boolean {
-    return ExtensionInstallationStateStore.uninstalling > 0;
-  }
-
-  /**
-   * The current number of extensions preinstalling
-   */
-  static get preinstalling(): number {
-    return ExtensionInstallationStateStore.PreInstallIds.size;
-  }
-
-  /**
-   * If there is at least one extension currently downloading
-   */
-  static get anyPreinstalling(): boolean {
-    return ExtensionInstallationStateStore.preinstalling > 0;
-  }
-
-  /**
-    * If there is at least one installing or preinstalling step taking place
-    */
-  static get anyPreInstallingOrInstalling(): boolean {
-    return ExtensionInstallationStateStore.anyInstalling || ExtensionInstallationStateStore.anyPreinstalling;
-  }
-}

src/renderer/components/+extensions/extensions.tsx

@@ -29,9 +29,8 @@ import {
 } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
-import type { InstalledExtension } from "../../../extensions/extension-discovery";
+import type { InstalledExtension } from "../../../extensions/extension-discovery/extension-discovery";
 import { DropFileInput } from "../input";
-import { ExtensionInstallationStateStore } from "./extension-install.store";
 import { Install } from "./install";
 import { InstalledExtensions } from "./installed-extensions";
 import { Notice } from "./notice";
@@ -48,6 +47,9 @@ import installFromSelectFileDialogInjectable from "./install-from-select-file-di
 import type { LensExtensionId } from "../../../extensions/lens-extension";
 import installOnDropInjectable from "./install-on-drop/install-on-drop.injectable";
 import { supportedExtensionFormats } from "./supported-extension-formats";
+import extensionInstallationStateStoreInjectable
+  from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
+import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
 interface Dependencies {
   userExtensions: IComputedValue<InstalledExtension[]>;
@@ -57,6 +59,7 @@ interface Dependencies {
   installFromInput: (input: string) => Promise<void>;
   installFromSelectFileDialog: () => Promise<void>;
   installOnDrop: (files: File[]) => Promise<void>;
+  extensionInstallationStateStore: ExtensionInstallationStateStore
 }
 
 @observer
@@ -73,7 +76,7 @@ class NonInjectedExtensions extends React.Component<Dependencies> {
       reaction(() => this.props.userExtensions.get().length, (curSize, prevSize) => {
         if (curSize > prevSize) {
           disposeOnUnmount(this, [
-            when(() => !ExtensionInstallationStateStore.anyInstalling, () => this.installPath = ""),
+            when(() => !this.props.extensionInstallationStateStore.anyInstalling, () => this.installPath = ""),
           ]);
         }
       }),
@@ -134,6 +137,8 @@ export const Extensions = withInjectables<Dependencies>(
       installFromSelectFileDialog: di.inject(
         installFromSelectFileDialogInjectable,
       ),
+
+      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
     }),
   },
 );

src/renderer/components/+extensions/install-from-input/install-from-input.injectable.ts

@@ -22,12 +22,15 @@ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import attemptInstallInjectable from "../attempt-install/attempt-install.injectable";
 import { installFromInput } from "./install-from-input";
 import attemptInstallByInfoInjectable from "../attempt-install-by-info/attempt-install-by-info.injectable";
+import extensionInstallationStateStoreInjectable
+  from "../../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 
 const installFromInputInjectable = getInjectable({
   instantiate: (di) =>
     installFromInput({
       attemptInstall: di.inject(attemptInstallInjectable),
       attemptInstallByInfo: di.inject(attemptInstallByInfoInjectable),
+      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
     }),
 
   lifecycle: lifecycleEnum.singleton,

src/renderer/components/+extensions/install-from-input/install-from-input.tsx

@@ -20,7 +20,6 @@
  */
 import { downloadFile, ExtendableDisposer } from "../../../../common/utils";
 import { InputValidators } from "../../input";
-import { ExtensionInstallationStateStore } from "../extension-install.store";
 import { getMessageFromError } from "../get-message-from-error/get-message-from-error";
 import logger from "../../../../main/logger";
 import { Notifications } from "../../notifications";
@@ -29,20 +28,22 @@ import React from "react";
 import { readFileNotify } from "../read-file-notify/read-file-notify";
 import type { InstallRequest } from "../attempt-install/install-request";
 import type { ExtensionInfo } from "../attempt-install-by-info/attempt-install-by-info";
+import type { ExtensionInstallationStateStore } from "../../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
 interface Dependencies {
   attemptInstall: (request: InstallRequest, disposer?: ExtendableDisposer) => Promise<void>,
-  attemptInstallByInfo: (extensionInfo: ExtensionInfo) => Promise<void>
+  attemptInstallByInfo: (extensionInfo: ExtensionInfo) => Promise<void>,
+  extensionInstallationStateStore: ExtensionInstallationStateStore
 }
 
-export const installFromInput = ({ attemptInstall, attemptInstallByInfo }: Dependencies) => async (input: string) => {
+export const installFromInput = ({ attemptInstall, attemptInstallByInfo, extensionInstallationStateStore }: Dependencies) => async (input: string) => {
   let disposer: ExtendableDisposer | undefined = undefined;
 
   try {
     // fixme: improve error messages for non-tar-file URLs
     if (InputValidators.isUrl.validate(input)) {
       // install via url
-      disposer = ExtensionInstallationStateStore.startPreInstall();
+      disposer = extensionInstallationStateStore.startPreInstall();
       const { promise } = downloadFile({ url: input, timeout: 10 * 60 * 1000 });
       const fileName = path.basename(input);
 

src/renderer/components/+extensions/install.tsx

@@ -24,11 +24,14 @@ import React from "react";
 import { prevDefault } from "../../utils";
 import { Button } from "../button";
 import { Icon } from "../icon";
+import { observer } from "mobx-react";
 import { Input, InputValidator, InputValidators } from "../input";
 import { SubTitle } from "../layout/sub-title";
 import { TooltipPosition } from "../tooltip";
-import { ExtensionInstallationStateStore } from "./extension-install.store";
-import { observer } from "mobx-react";
+import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
+import extensionInstallationStateStoreInjectable
+  from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
 
 interface Props {
   installPath: string;
@@ -38,6 +41,10 @@ interface Props {
   installFromSelectFileDialog: () => void;
 }
 
+interface Dependencies {
+  extensionInstallationStateStore: ExtensionInstallationStateStore;
+}
+
 const installInputValidators = [
   InputValidators.isUrl,
   InputValidators.isPath,
@@ -51,49 +58,72 @@ const installInputValidator: InputValidator = {
   ),
 };
 
-export const Install = observer((props: Props) => {
-  const { installPath, supportedFormats, onChange, installFromInput, installFromSelectFileDialog } = props;
-
-  return (
-    <section className="mt-2">
-      <SubTitle title={`Name or file path or URL to an extension package (${supportedFormats.join(", ")})`}/>
-      <div className="flex">
-        <div className="flex-1">
-          <Input
-            className="box grow mr-6"
-            theme="round-black"
-            disabled={ExtensionInstallationStateStore.anyPreInstallingOrInstalling}
-            placeholder={"Name or file path or URL"}
-            showErrorsAsTooltip={{ preferredPositions: TooltipPosition.BOTTOM }}
-            validators={installPath ? installInputValidator : undefined}
-            value={installPath}
-            onChange={onChange}
-            onSubmit={installFromInput}
-            iconRight={
-              <Icon
-                className={styles.icon}
-                material="folder_open"
-                onClick={prevDefault(installFromSelectFileDialog)}
-                tooltip="Browse"
-              />
-            }
-          />
-        </div>
-        <div className="flex-initial">
-          <Button
-            primary
-            label="Install"
-            className="w-80 h-full"
-            disabled={ExtensionInstallationStateStore.anyPreInstallingOrInstalling}
-            waiting={ExtensionInstallationStateStore.anyPreInstallingOrInstalling}
-            onClick={installFromInput}
-          />
-        </div>
+const NonInjectedInstall: React.FC<Dependencies & Props> = ({
+  installPath,
+  supportedFormats,
+  onChange,
+  installFromInput,
+  installFromSelectFileDialog,
+  extensionInstallationStateStore,
+}) => (
+  <section className="mt-2">
+    <SubTitle
+      title={`Name or file path or URL to an extension package (${supportedFormats.join(
+        ", ",
+      )})`}
+    />
+    <div className="flex">
+      <div className="flex-1">
+        <Input
+          className="box grow mr-6"
+          theme="round-black"
+          disabled={
+            extensionInstallationStateStore.anyPreInstallingOrInstalling
+          }
+          placeholder={"Name or file path or URL"}
+          showErrorsAsTooltip={{ preferredPositions: TooltipPosition.BOTTOM }}
+          validators={installPath ? installInputValidator : undefined}
+          value={installPath}
+          onChange={onChange}
+          onSubmit={installFromInput}
+          iconRight={
+            <Icon
+              className={styles.icon}
+              material="folder_open"
+              onClick={prevDefault(installFromSelectFileDialog)}
+              tooltip="Browse"
+            />
+          }
+        />
       </div>
-      <small className="mt-3">
-        <b>Pro-Tip</b>: you can drag-n-drop tarball-file to this area
-      </small>
-    </section>
-  );
-});
+      <div className="flex-initial">
+        <Button
+          primary
+          label="Install"
+          className="w-80 h-full"
+          disabled={
+            extensionInstallationStateStore.anyPreInstallingOrInstalling
+          }
+          waiting={extensionInstallationStateStore.anyPreInstallingOrInstalling}
+          onClick={installFromInput}
+        />
+      </div>
+    </div>
+    <small className="mt-3">
+      <b>Pro-Tip</b>: you can drag-n-drop tarball-file to this area
+    </small>
+  </section>
+);
 
+export const Install = withInjectables<Dependencies, Props>(
+  observer(NonInjectedInstall),
+  {
+    getProps: (di, props) => ({
+      extensionInstallationStateStore: di.inject(
+        extensionInstallationStateStoreInjectable,
+      ),
+
+      ...props,
+    }),
+  },
+);

src/renderer/components/+extensions/installed-extensions.tsx

@@ -21,16 +21,25 @@
 
 import styles from "./installed-extensions.module.scss";
 import React, { useMemo } from "react";
-import { ExtensionDiscovery, InstalledExtension } from "../../../extensions/extension-discovery";
+import type {
+  ExtensionDiscovery,
+  InstalledExtension,
+} from "../../../extensions/extension-discovery/extension-discovery";
 import { Icon } from "../icon";
 import { List } from "../list/list";
 import { MenuActions, MenuItem } from "../menu";
 import { Spinner } from "../spinner";
-import { ExtensionInstallationStateStore } from "./extension-install.store";
 import { cssNames } from "../../utils";
 import { observer } from "mobx-react";
 import type { Row } from "react-table";
 import type { LensExtensionId } from "../../../extensions/lens-extension";
+import extensionDiscoveryInjectable
+  from "../../../extensions/extension-discovery/extension-discovery.injectable";
+
+import { withInjectables } from "@ogre-tools/injectable-react";
+import extensionInstallationStateStoreInjectable
+  from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
+import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
 interface Props {
   extensions: InstalledExtension[];
@@ -39,6 +48,11 @@ interface Props {
   uninstall: (extension: InstalledExtension) => void;
 }
 
+interface Dependencies {
+  extensionDiscovery: ExtensionDiscovery;
+  extensionInstallationStateStore: ExtensionInstallationStateStore;
+}
+
 function getStatus(extension: InstalledExtension) {
   if (!extension.isCompatible) {
     return "Incompatible";
@@ -47,7 +61,7 @@ function getStatus(extension: InstalledExtension) {
   return extension.isEnabled ? "Enabled" : "Disabled";
 }
 
-export const InstalledExtensions = observer(({ extensions, uninstall, enable, disable }: Props) => {
+const NonInjectedInstalledExtensions : React.FC<Dependencies & Props> = (({ extensionDiscovery, extensionInstallationStateStore, extensions, uninstall, enable, disable }) => {
   const filters = [
     (extension: InstalledExtension) => extension.manifest.name,
     (extension: InstalledExtension) => getStatus(extension),
@@ -93,7 +107,7 @@ export const InstalledExtensions = observer(({ extensions, uninstall, enable, di
       return extensions.map(extension => {
         const { id, isEnabled, isCompatible, manifest } = extension;
         const { name, description, version } = manifest;
-        const isUninstalling = ExtensionInstallationStateStore.isExtensionUninstalling(id);
+        const isUninstalling = extensionInstallationStateStore.isExtensionUninstalling(id);
 
         return {
           extension: (
@@ -145,10 +159,10 @@ export const InstalledExtensions = observer(({ extensions, uninstall, enable, di
           ),
         };
       });
-    }, [extensions, ExtensionInstallationStateStore.anyUninstalling],
+    }, [extensions, extensionInstallationStateStore.anyUninstalling],
   );
 
-  if (!ExtensionDiscovery.getInstance().isLoaded) {
+  if (!extensionDiscovery.isLoaded) {
     return <div><Spinner center /></div>;
   }
 
@@ -176,3 +190,16 @@ export const InstalledExtensions = observer(({ extensions, uninstall, enable, di
     </section>
   );
 });
+
+export const InstalledExtensions = withInjectables<Dependencies, Props>(
+  observer(NonInjectedInstalledExtensions),
+
+  {
+    getProps: (di, props) => ({
+      extensionDiscovery: di.inject(extensionDiscoveryInjectable),
+      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
+
+      ...props,
+    }),
+  },
+);

src/renderer/components/+extensions/uninstall-extension/uninstall-extension.injectable.ts

@@ -21,11 +21,17 @@
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import extensionLoaderInjectable from "../../../../extensions/extension-loader/extension-loader.injectable";
 import { uninstallExtension } from "./uninstall-extension";
+import extensionInstallationStateStoreInjectable
+  from "../../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
+import extensionDiscoveryInjectable
+  from "../../../../extensions/extension-discovery/extension-discovery.injectable";
 
 const uninstallExtensionInjectable = getInjectable({
   instantiate: (di) =>
     uninstallExtension({
       extensionLoader: di.inject(extensionLoaderInjectable),
+      extensionDiscovery: di.inject(extensionDiscoveryInjectable),
+      extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
     }),
 
   lifecycle: lifecycleEnum.singleton,

src/renderer/components/+extensions/uninstall-extension/uninstall-extension.tsx

@@ -21,28 +21,30 @@
 import type { ExtensionLoader } from "../../../../extensions/extension-loader";
 import { extensionDisplayName, LensExtensionId } from "../../../../extensions/lens-extension";
 import logger from "../../../../main/logger";
-import { ExtensionInstallationStateStore } from "../extension-install.store";
-import { ExtensionDiscovery } from "../../../../extensions/extension-discovery";
+import type { ExtensionDiscovery } from "../../../../extensions/extension-discovery/extension-discovery";
 import { Notifications } from "../../notifications";
 import React from "react";
 import { when } from "mobx";
 import { getMessageFromError } from "../get-message-from-error/get-message-from-error";
+import type { ExtensionInstallationStateStore } from "../../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
 interface Dependencies {
   extensionLoader: ExtensionLoader
+  extensionDiscovery: ExtensionDiscovery
+  extensionInstallationStateStore: ExtensionInstallationStateStore
 }
 
 export const uninstallExtension =
-  ({ extensionLoader }: Dependencies) =>
+  ({ extensionLoader, extensionDiscovery, extensionInstallationStateStore }: Dependencies) =>
     async (extensionId: LensExtensionId): Promise<boolean> => {
       const { manifest } = extensionLoader.getExtension(extensionId);
       const displayName = extensionDisplayName(manifest.name, manifest.version);
 
       try {
         logger.debug(`[EXTENSIONS]: trying to uninstall ${extensionId}`);
-        ExtensionInstallationStateStore.setUninstalling(extensionId);
+        extensionInstallationStateStore.setUninstalling(extensionId);
 
-        await ExtensionDiscovery.getInstance().uninstallExtension(extensionId);
+        await extensionDiscovery.uninstallExtension(extensionId);
 
         // wait for the ExtensionLoader to actually uninstall the extension
         await when(() => !extensionLoader.userExtensions.has(extensionId));
@@ -71,6 +73,6 @@ export const uninstallExtension =
         return false;
       } finally {
       // Remove uninstall state on uninstall failure
-        ExtensionInstallationStateStore.clearUninstalling(extensionId);
+        extensionInstallationStateStore.clearUninstalling(extensionId);
       }
     };

src/renderer/components/getDi.tsx

@@ -20,13 +20,19 @@
  */
 
 import { createContainer } from "@ogre-tools/injectable";
+import { setLegacyGlobalDiForExtensionApi } from "../../extensions/as-legacy-global-function-for-extension-api/legacy-global-di-for-extension-api";
 
-export const getDi = () =>
-  createContainer(
+export const getDi = () => {
+  const di = createContainer(
     getRequireContextForRendererCode,
     getRequireContextForCommonExtensionCode,
   );
 
+  setLegacyGlobalDiForExtensionApi(di);
+
+  return di;
+};
+
 const getRequireContextForRendererCode = () =>
   require.context("../", true, /\.injectable\.(ts|tsx)$/);
 

src/renderer/components/getDiForUnitTesting.tsx

@@ -26,10 +26,13 @@ import {
   createContainer,
   ConfigurableDependencyInjectionContainer,
 } from "@ogre-tools/injectable";
+import { setLegacyGlobalDiForExtensionApi } from "../../extensions/as-legacy-global-function-for-extension-api/legacy-global-di-for-extension-api";
 
 export const getDiForUnitTesting = () => {
   const di: ConfigurableDependencyInjectionContainer = createContainer();
 
+  setLegacyGlobalDiForExtensionApi(di);
+
   getInjectableFilePaths()
     .map(key => {
       const injectable = require(key).default;

src/renderer/protocol-handler/lens-protocol-router-renderer/lens-protocol-router-renderer.injectable.ts

@@ -21,11 +21,14 @@
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import extensionLoaderInjectable from "../../../extensions/extension-loader/extension-loader.injectable";
 import { LensProtocolRouterRenderer } from "./lens-protocol-router-renderer";
+import extensionsStoreInjectable
+  from "../../../extensions/extensions-store/extensions-store.injectable";
 
 const lensProtocolRouterRendererInjectable = getInjectable({
   instantiate: (di) =>
     new LensProtocolRouterRenderer({
       extensionLoader: di.inject(extensionLoaderInjectable),
+      extensionsStore: di.inject(extensionsStoreInjectable),
     }),
 
   lifecycle: lifecycleEnum.singleton,

src/renderer/protocol-handler/lens-protocol-router-renderer/lens-protocol-router-renderer.tsx

@@ -27,6 +27,7 @@ import { onCorrect } from "../../../common/ipc";
 import { foldAttemptResults, ProtocolHandlerInvalid, RouteAttempt } from "../../../common/protocol-handler";
 import { Notifications } from "../../components/notifications";
 import type { ExtensionLoader } from "../../../extensions/extension-loader";
+import type { ExtensionsStore } from "../../../extensions/extensions-store/extensions-store";
 
 function verifyIpcArgs(args: unknown[]): args is [string, RouteAttempt] {
   if (args.length !== 2) {
@@ -49,6 +50,7 @@ function verifyIpcArgs(args: unknown[]): args is [string, RouteAttempt] {
 
 interface Dependencies {
   extensionLoader: ExtensionLoader
+  extensionsStore: ExtensionsStore
 }