Refactor app-preferences-registry to use di (#4671)

* converting app-preferences to use di

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* address review comments and fix lint

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* use compact license header

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

.eslintrc.js

@@ -16,6 +16,12 @@ module.exports = {
     react: {
       version: packageJson.devDependencies.react || "detect",
     },
+    // the package eslint-import-resolver-typescript is required for this line which fixes errors when using .d.ts files
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+      },
+    },
   },
   overrides: [
     {

package.json

@@ -340,6 +340,7 @@
     "esbuild": "^0.13.15",
     "esbuild-loader": "^2.16.0",
     "eslint": "^7.32.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-react": "^7.27.1",

src/extensions/common-api/registrations.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export type { AppPreferenceRegistration, AppPreferenceComponents } from "../registries/app-preference-registry";
+export type { AppPreferenceRegistration, AppPreferenceComponents } from "../../renderer/components/+preferences/app-preferences/app-preference-registration";
 export type { KubeObjectDetailRegistration, KubeObjectDetailComponents } from "../registries/kube-object-detail-registry";
 export type { KubeObjectMenuRegistration, KubeObjectMenuComponents } from "../registries/kube-object-menu-registry";
 export type { KubeObjectStatusRegistration } from "../registries/kube-object-status-registry";

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

@@ -252,7 +252,6 @@ export class ExtensionLoader {
     return this.autoInitExtensions(async (extension: LensRendererExtension) => {
       const removeItems = [
         registries.GlobalPageRegistry.getInstance().add(extension.globalPages, extension),
-        registries.AppPreferenceRegistry.getInstance().add(extension.appPreferences),
         registries.EntitySettingRegistry.getInstance().add(extension.entitySettings),
         registries.StatusBarRegistry.getInstance().add(extension.statusBarItems),
         registries.CatalogEntityDetailRegistry.getInstance().add(extension.catalogEntityDetailItems),

src/extensions/lens-renderer-extension.ts

@@ -15,13 +15,14 @@ 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";
 import type { CommandRegistration } from "../renderer/components/command-palette/registered-commands/commands";
+import type { AppPreferenceRegistration } from "../renderer/components/+preferences/app-preferences/app-preference-registration";
 
 export class LensRendererExtension extends LensExtension {
   globalPages: registries.PageRegistration[] = [];
   clusterPages: registries.PageRegistration[] = [];
   clusterPageMenus: registries.ClusterPageMenuRegistration[] = [];
   kubeObjectStatusTexts: registries.KubeObjectStatusRegistration[] = [];
-  appPreferences: registries.AppPreferenceRegistration[] = [];
+  appPreferences: AppPreferenceRegistration[] = [];
   entitySettings: registries.EntitySettingRegistration[] = [];
   statusBarItems: registries.StatusBarRegistration[] = [];
   kubeObjectDetailItems: registries.KubeObjectDetailRegistration[] = [];

src/extensions/registries/index.ts

@@ -7,7 +7,6 @@
 
 export * from "./page-registry";
 export * from "./page-menu-registry";
-export * from "./app-preference-registry";
 export * from "./status-bar-registry";
 export * from "./kube-object-detail-registry";
 export * from "./kube-object-menu-registry";

src/renderer/components/+preferences/app-preferences/app-preference-registration.d.ts

@@ -4,7 +4,6 @@
  */
 
 import type React from "react";
-import { BaseRegistry } from "./base-registry";
 
 export interface AppPreferenceComponents {
   Hint: React.ComponentType<any>;
@@ -22,11 +21,3 @@ export interface RegisteredAppPreference extends AppPreferenceRegistration {
   id: string;
 }
 
-export class AppPreferenceRegistry extends BaseRegistry<AppPreferenceRegistration, RegisteredAppPreference> {
-  getRegisteredItem(item: AppPreferenceRegistration): RegisteredAppPreference {
-    return {
-      id: item.id || item.title.toLowerCase().replace(/[^0-9a-zA-Z]+/g, "-"),
-      ...item,
-    };
-  }
-}

src/renderer/components/+preferences/app-preferences/app-preferences.injectable.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import rendererExtensionsInjectable from "../../../../extensions/renderer-extensions.injectable";
+import { getAppPreferences } from "./get-app-preferences";
+
+const appPreferencesInjectable = getInjectable({
+  instantiate: (di) =>
+    getAppPreferences({
+      extensions: di.inject(rendererExtensionsInjectable),
+    }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default appPreferencesInjectable;

src/renderer/components/+preferences/app-preferences/get-app-preferences.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { computed, IComputedValue } from "mobx";
+import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
+import type { AppPreferenceRegistration, RegisteredAppPreference } from "./app-preference-registration";
+
+interface Dependencies {
+  extensions: IComputedValue<LensRendererExtension[]>;
+}
+
+function getRegisteredItem(item: AppPreferenceRegistration): RegisteredAppPreference {
+  return {
+    id: item.id || item.title.toLowerCase().replace(/[^0-9a-zA-Z]+/g, "-"),
+    ...item,
+  };
+}
+
+
+export const getAppPreferences = ({ extensions }: Dependencies) => {
+  return computed(() => (
+    extensions.get()
+      .flatMap((extension) => extension.appPreferences)
+      .map(getRegisteredItem)
+  ));
+};

src/renderer/components/+preferences/application.tsx

@@ -14,10 +14,12 @@ import { isWindows } from "../../../common/vars";
 import { Switch } from "../switch";
 import moment from "moment-timezone";
 import { CONSTANTS, defaultExtensionRegistryUrl, ExtensionRegistryLocation } from "../../../common/user-store/preferences-helpers";
-import { action } from "mobx";
+import { action, IComputedValue } from "mobx";
 import { isUrl } from "../input/input_validators";
-import { AppPreferenceRegistry } from "../../../extensions/registries";
 import { ExtensionSettings } from "./extension-settings";
+import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import appPreferencesInjectable from "./app-preferences/app-preferences.injectable";
 
 const timezoneOptions: SelectOption<string>[] = moment.tz.names().map(zone => ({
   label: zone,
@@ -28,7 +30,11 @@ const updateChannelOptions: SelectOption<string>[] = Array.from(
   ([value, { label }]) => ({ value, label }),
 );
 
-export const Application = observer(() => {
+interface Dependencies {
+  appPreferenceItems: IComputedValue<RegisteredAppPreference[]>
+}
+
+const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems }) => {
   const userStore = UserStore.getInstance();
   const defaultShell = process.env.SHELL
     || process.env.PTYSHELL
@@ -40,7 +46,7 @@ export const Application = observer(() => {
 
   const [customUrl, setCustomUrl] = React.useState(userStore.extensionRegistryUrl.customUrl || "");
   const [shell, setShell] = React.useState(userStore.shell || "");
-  const extensionSettings = AppPreferenceRegistry.getInstance().getItems().filter((preference) => preference.showInPreferencesTab === "application");
+  const extensionSettings = appPreferenceItems.get().filter((preference) => preference.showInPreferencesTab === "application");
   const themeStore = ThemeStore.getInstance();
 
   return (
@@ -125,10 +131,10 @@ export const Application = observer(() => {
         />
       </section>
 
-      <hr/>
+      <hr />
 
       <section id="other">
-        <SubTitle title="Start-up"/>
+        <SubTitle title="Start-up" />
         <Switch checked={userStore.openAtLogin} onChange={() => userStore.openAtLogin = !userStore.openAtLogin}>
           Automatically start Lens on login
         </Switch>
@@ -141,7 +147,7 @@ export const Application = observer(() => {
       ))}
 
       <section id="update-channel">
-        <SubTitle title="Update Channel"/>
+        <SubTitle title="Update Channel" />
         <Select
           options={updateChannelOptions}
           value={userStore.updateChannel}
@@ -163,4 +169,14 @@ export const Application = observer(() => {
       </section>
     </section>
   );
-});
+};
+
+export const Application = withInjectables<Dependencies>(
+  observer(NonInjectedApplication),
+
+  {
+    getProps: (di) => ({
+      appPreferenceItems: di.inject(appPreferencesInjectable),
+    }),
+  },
+);

src/renderer/components/+preferences/extension-settings.tsx

@@ -3,12 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { SubTitle } from "../layout/sub-title";
-import type { RegisteredAppPreference } from "../../../extensions/registries/app-preference-registry";
+import type { AppPreferenceRegistration } from "./app-preferences/app-preference-registration";
 import React from "react";
 import { cssNames } from "../../../renderer/utils";
 
 interface ExtensionSettingsProps {
-  setting: RegisteredAppPreference;
+  setting: AppPreferenceRegistration;
   size: "small" | "normal"
 }
 

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

@@ -3,13 +3,21 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { IComputedValue } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
-import { AppPreferenceRegistry } from "../../../extensions/registries";
+import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
+import appPreferencesInjectable from "./app-preferences/app-preferences.injectable";
 import { ExtensionSettings } from "./extension-settings";
 
-export const Extensions = observer(() => {
+interface Dependencies {
-  const settings = AppPreferenceRegistry.getInstance().getItems();
+  appPreferenceItems: IComputedValue<RegisteredAppPreference[]>
+}
+
+const NonInjectedExtensions: React.FC<Dependencies> = ({ appPreferenceItems }) => {
+
+  const settings = appPreferenceItems.get();
 
   return (
     <section id="extensions">
@@ -19,4 +27,14 @@ export const Extensions = observer(() => {
       )}
     </section>
   );
-});
+};
+
+export const Extensions = withInjectables<Dependencies>(
+  observer(NonInjectedExtensions),
+
+  {
+    getProps: (di) => ({
+      appPreferenceItems: di.inject(appPreferencesInjectable),
+    }),
+  },
+);

src/renderer/components/+preferences/preferences.tsx

@@ -4,7 +4,7 @@
  */
 import "./preferences.scss";
 
-import { makeObservable, observable } from "mobx";
+import type { IComputedValue } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { matchPath, Redirect, Route, RouteProps, Switch } from "react-router";
@@ -23,7 +23,6 @@ import {
   telemetryRoute,
   telemetryURL,
 } from "../../../common/routes";
-import { AppPreferenceRegistry } from "../../../extensions/registries/app-preference-registry";
 import { navigateWithoutHistoryChange, navigation } from "../../navigation";
 import { SettingLayout } from "../layout/setting-layout";
 import { Tab, Tabs } from "../tabs";
@@ -34,18 +33,18 @@ import { LensProxy } from "./proxy";
 import { Telemetry } from "./telemetry";
 import { Extensions } from "./extensions";
 import { sentryDsn } from "../../../common/vars";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
+import appPreferencesInjectable from "./app-preferences/app-preferences.injectable";
 
-@observer
+interface Dependencies {
-export class Preferences extends React.Component {
+  appPreferenceItems: IComputedValue<RegisteredAppPreference[]>
-  @observable historyLength: number | undefined;
+}
 
-  constructor(props: {}) {
+const NonInjectedPreferences: React.FC<Dependencies> = ({ appPreferenceItems }) => {
-    super(props);
-    makeObservable(this);
-  }
 
-  renderNavigation() {
+  function renderNavigation() {
-    const extensions = AppPreferenceRegistry.getInstance().getItems();
+    const extensions = appPreferenceItems.get();
     const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == "telemetry");
     const currentLocation = navigation.location.pathname;
     const isActive = (route: RouteProps) => !!matchPath(currentLocation, { path: route.path, exact: route.exact });
@@ -67,23 +66,31 @@ export class Preferences extends React.Component {
     );
   }
 
-  render() {
+  return (
-    return (
+    <SettingLayout
-      <SettingLayout
+      navigation={renderNavigation()}
-        navigation={this.renderNavigation()}
+      className="Preferences"
-        className="Preferences"
+      contentGaps={false}
-        contentGaps={false}
+    >
-      >
+      <Switch>
-        <Switch>
+        <Route path={appURL()} component={Application}/>
-          <Route path={appURL()} component={Application}/>
+        <Route path={proxyURL()} component={LensProxy}/>
-          <Route path={proxyURL()} component={LensProxy}/>
+        <Route path={kubernetesURL()} component={Kubernetes}/>
-          <Route path={kubernetesURL()} component={Kubernetes}/>
+        <Route path={editorURL()} component={Editor}/>
-          <Route path={editorURL()} component={Editor}/>
+        <Route path={telemetryURL()} component={Telemetry}/>
-          <Route path={telemetryURL()} component={Telemetry}/>
+        <Route path={extensionURL()} component={Extensions}/>
-          <Route path={extensionURL()} component={Extensions}/>
+        <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>
-          <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>
+      </Switch>
-        </Switch>
+    </SettingLayout>
-      </SettingLayout>
+  );
-    );
+};
-  }
+
-}
+export const Preferences = withInjectables<Dependencies>(
+  observer(NonInjectedPreferences),
+
+  {
+    getProps: (di) => ({
+      appPreferenceItems: di.inject(appPreferencesInjectable),
+    }),
+  },
+);

src/renderer/components/+preferences/telemetry.tsx

@@ -6,13 +6,20 @@ import { observer } from "mobx-react";
 import React from "react";
 import { UserStore } from "../../../common/user-store";
 import { sentryDsn } from "../../../common/vars";
-import { AppPreferenceRegistry } from "../../../extensions/registries";
 import { Checkbox } from "../checkbox";
 import { SubTitle } from "../layout/sub-title";
 import { ExtensionSettings } from "./extension-settings";
+import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration";
+import appPreferencesInjectable from "./app-preferences/app-preferences.injectable";
+import type { IComputedValue } from "mobx";
+import { withInjectables } from "@ogre-tools/injectable-react";
 
-export const Telemetry = observer(() => {
+interface Dependencies {
-  const extensions = AppPreferenceRegistry.getInstance().getItems();
+  appPreferenceItems: IComputedValue<RegisteredAppPreference[]>
+}
+
+const NonInjectedTelemetry: React.FC<Dependencies> = ({ appPreferenceItems }) => {
+  const extensions = appPreferenceItems.get();
   const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == "telemetry");
 
   return (
@@ -44,4 +51,14 @@ export const Telemetry = observer(() => {
       }
     </section>
   );
-});
+};
+
+export const Telemetry = withInjectables<Dependencies>(
+  observer(NonInjectedTelemetry),
+
+  {
+    getProps: (di) => ({
+      appPreferenceItems: di.inject(appPreferencesInjectable),
+    }),
+  },
+);

src/renderer/initializers/registries.ts

@@ -6,7 +6,6 @@
 import * as registries from "../../extensions/registries";
 
 export function initRegistries() {
-  registries.AppPreferenceRegistry.createInstance();
   registries.CatalogEntityDetailRegistry.createInstance();
   registries.ClusterPageMenuRegistry.createInstance();
   registries.ClusterPageRegistry.createInstance();

yarn.lock

@@ -5460,6 +5460,17 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
+eslint-import-resolver-typescript@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.5.0.tgz#07661966b272d14ba97f597b51e1a588f9722f0a"
+  integrity sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==
+  dependencies:
+    debug "^4.3.1"
+    glob "^7.1.7"
+    is-glob "^4.0.1"
+    resolve "^1.20.0"
+    tsconfig-paths "^3.9.0"
+
 eslint-module-utils@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.1.tgz#b435001c9f8dd4ab7f6d0efcae4b9696d4c24b7c"
@@ -6516,7 +6527,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7, glob@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
   integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==