From a711499bb6a60fb792c4fdd9ac3009f7c4e91ac1 Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Fri, 17 Dec 2021 17:28:26 +0200
Subject: [PATCH] Update ogre-tools for improved types of withInjectables
 (#4587)

---
 package.json                                  |  4 +-
 .../components/+extensions/extensions.tsx     | 56 +++++++--------
 .../kube-object-menu/kube-object-menu.tsx     | 70 +++++++++----------
 yarn.lock                                     | 18 ++---
 4 files changed, 68 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index 352ee617a8..52f521edb7 100644
--- a/package.json
+++ b/package.json
@@ -196,8 +196,8 @@
     "@hapi/call": "^8.0.1",
     "@hapi/subtext": "^7.0.3",
     "@kubernetes/client-node": "^0.16.1",
-    "@ogre-tools/injectable": "^1.4.1",
-    "@ogre-tools/injectable-react": "^1.4.1",
+    "@ogre-tools/injectable": "1.5.0",
+    "@ogre-tools/injectable-react": "1.5.2",
     "@sentry/electron": "^2.5.4",
     "@sentry/integrations": "^6.15.0",
     "abort-controller": "^3.0.0",
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index 10438e4aca..0ba9deba65 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -49,34 +49,28 @@ import type { LensExtensionId } from "../../../extensions/lens-extension";
 import installOnDropInjectable from "./install-on-drop/install-on-drop.injectable";
 import { supportedExtensionFormats } from "./supported-extension-formats";
 
-interface Props {
-  dependencies: {
-    userExtensions: IComputedValue<InstalledExtension[]>;
-    enableExtension: (id: LensExtensionId) => void;
-    disableExtension: (id: LensExtensionId) => void;
-    confirmUninstallExtension: (extension: InstalledExtension) => Promise<void>;
-    installFromInput: (input: string) => Promise<void>;
-    installFromSelectFileDialog: () => Promise<void>;
-    installOnDrop: (files: File[]) => Promise<void>;
-  };
+interface Dependencies {
+  userExtensions: IComputedValue<InstalledExtension[]>;
+  enableExtension: (id: LensExtensionId) => void;
+  disableExtension: (id: LensExtensionId) => void;
+  confirmUninstallExtension: (extension: InstalledExtension) => Promise<void>;
+  installFromInput: (input: string) => Promise<void>;
+  installFromSelectFileDialog: () => Promise<void>;
+  installOnDrop: (files: File[]) => Promise<void>;
 }
 
 @observer
-class NonInjectedExtensions extends React.Component<Props> {
+class NonInjectedExtensions extends React.Component<Dependencies> {
   @observable installPath = "";
 
-  constructor(props: Props) {
+  constructor(props: Dependencies) {
     super(props);
     makeObservable(this);
   }
-  
-  get dependencies() {
-    return this.props.dependencies;
-  }
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => this.dependencies.userExtensions.get().length, (curSize, prevSize) => {
+      reaction(() => this.props.userExtensions.get().length, (curSize, prevSize) => {
         if (curSize > prevSize) {
           disposeOnUnmount(this, [
             when(() => !ExtensionInstallationStateStore.anyInstalling, () => this.installPath = ""),
@@ -87,10 +81,10 @@ class NonInjectedExtensions extends React.Component<Props> {
   }
 
   render() {
-    const userExtensions = this.dependencies.userExtensions.get();
+    const userExtensions = this.props.userExtensions.get();
 
     return (
-      <DropFileInput onDropFiles={this.dependencies.installOnDrop}>
+      <DropFileInput onDropFiles={this.props.installOnDrop}>
         <SettingLayout className="Extensions" contentGaps={false}>
           <section>
             <h1>Extensions</h1>
@@ -106,8 +100,8 @@ class NonInjectedExtensions extends React.Component<Props> {
             <Install
               supportedFormats={supportedExtensionFormats}
               onChange={value => (this.installPath = value)}
-              installFromInput={() => this.dependencies.installFromInput(this.installPath)}
-              installFromSelectFileDialog={this.dependencies.installFromSelectFileDialog}
+              installFromInput={() => this.props.installFromInput(this.installPath)}
+              installFromSelectFileDialog={this.props.installFromSelectFileDialog}
               installPath={this.installPath}
             />
 
@@ -115,9 +109,9 @@ class NonInjectedExtensions extends React.Component<Props> {
 
             <InstalledExtensions
               extensions={userExtensions}
-              enable={this.dependencies.enableExtension}
-              disable={this.dependencies.disableExtension}
-              uninstall={this.dependencies.confirmUninstallExtension}
+              enable={this.props.enableExtension}
+              disable={this.props.disableExtension}
+              uninstall={this.props.confirmUninstallExtension}
             />
           </section>
         </SettingLayout>
@@ -126,10 +120,10 @@ class NonInjectedExtensions extends React.Component<Props> {
   }
 }
 
-
-export const Extensions = withInjectables(NonInjectedExtensions, {
-  getProps: di => ({
-    dependencies: {
+export const Extensions = withInjectables<Dependencies>(
+  NonInjectedExtensions,
+  {
+    getProps: (di) => ({
       userExtensions: di.inject(userExtensionsInjectable),
       enableExtension: di.inject(enableExtensionInjectable),
       disableExtension: di.inject(disableExtensionInjectable),
@@ -140,6 +134,6 @@ export const Extensions = withInjectables(NonInjectedExtensions, {
       installFromSelectFileDialog: di.inject(
         installFromSelectFileDialogInjectable,
       ),
-    },
-  }),
-});
+    }),
+  },
+);
diff --git a/src/renderer/components/kube-object-menu/kube-object-menu.tsx b/src/renderer/components/kube-object-menu/kube-object-menu.tsx
index 989094023f..29c822be89 100644
--- a/src/renderer/components/kube-object-menu/kube-object-menu.tsx
+++ b/src/renderer/components/kube-object-menu/kube-object-menu.tsx
@@ -32,38 +32,28 @@ import hideDetailsInjectable from "./dependencies/hide-details.injectable";
 import kubeObjectMenuItemsInjectable from "./dependencies/kube-object-menu-items/kube-object-menu-items.injectable";
 import apiManagerInjectable from "./dependencies/api-manager.injectable";
 
-// TODO: Replace with KubeObjectMenuProps2
-export interface KubeObjectMenuProps<TKubeObject> extends MenuActionsProps {
+export interface KubeObjectMenuProps<TKubeObject extends KubeObject> extends MenuActionsProps {
   object: TKubeObject | null | undefined;
   editable?: boolean;
   removable?: boolean;
 }
 
-interface KubeObjectMenuProps2 extends MenuActionsProps {
-  object: KubeObject | null | undefined;
-  editable?: boolean;
-  removable?: boolean;
-
-  dependencies: {
-    apiManager: ApiManager;
-    kubeObjectMenuItems: React.ElementType[];
-    clusterName: string;
-    hideDetails: () => void;
-    editResourceTab: (kubeObject: KubeObject) => void;
-  };
+interface Dependencies {
+  apiManager: ApiManager;
+  kubeObjectMenuItems: React.ElementType[];
+  clusterName: string;
+  hideDetails: () => void;
+  editResourceTab: (kubeObject: KubeObject) => void;
 }
 
-class NonInjectedKubeObjectMenu extends React.Component<KubeObjectMenuProps2> {
-  get dependencies() {
-    return this.props.dependencies;
-  }
-  
+class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject> extends React.Component<KubeObjectMenuProps<TKubeObject> & Dependencies> {
+
   get store() {
     const { object } = this.props;
 
     if (!object) return null;
 
-    return this.props.dependencies.apiManager.getStore(object.selfLink);
+    return this.props.apiManager.getStore(object.selfLink);
   }
 
   get isEditable() {
@@ -76,13 +66,13 @@ class NonInjectedKubeObjectMenu extends React.Component<KubeObjectMenuProps2> {
 
   @boundMethod
   async update() {
-    this.props.dependencies.hideDetails();
-    this.props.dependencies.editResourceTab(this.props.object);
+    this.props.hideDetails();
+    this.props.editResourceTab(this.props.object);
   }
 
   @boundMethod
   async remove() {
-    this.props.dependencies.hideDetails();
+    this.props.hideDetails();
     const { object, removeAction } = this.props;
 
     if (removeAction) await removeAction();
@@ -103,7 +93,7 @@ class NonInjectedKubeObjectMenu extends React.Component<KubeObjectMenuProps2> {
 
     return (
       <p>
-        Remove {object.kind} <b>{breadcrumb}</b> from <b>{this.dependencies.clusterName}</b>?
+        Remove {object.kind} <b>{breadcrumb}</b> from <b>{this.props.clusterName}</b>?
       </p>
     );
   }
@@ -111,7 +101,7 @@ class NonInjectedKubeObjectMenu extends React.Component<KubeObjectMenuProps2> {
   getMenuItems(): React.ReactChild[] {
     const { object, toolbar } = this.props;
 
-    return this.props.dependencies.kubeObjectMenuItems.map((MenuItem, index) => (
+    return this.props.kubeObjectMenuItems.map((MenuItem, index) => (
       <MenuItem object={object} toolbar={toolbar} key={`menu-item-${index}`} />
     ));
   }
@@ -134,19 +124,23 @@ class NonInjectedKubeObjectMenu extends React.Component<KubeObjectMenuProps2> {
   }
 }
 
-export const KubeObjectMenu = withInjectables(NonInjectedKubeObjectMenu, {
-  getProps: (di, props) => ({
-    dependencies: {
-      clusterName: di.inject(clusterNameInjectable),
-      apiManager: di.inject(apiManagerInjectable),
-      editResourceTab: di.inject(editResourceTabInjectable),
-      hideDetails: di.inject(hideDetailsInjectable),
+export function KubeObjectMenu<T extends KubeObject>(
+  props: KubeObjectMenuProps<T>,
+) {
+  return withInjectables<Dependencies, KubeObjectMenuProps<T>>(
+    NonInjectedKubeObjectMenu,
+    {
+      getProps: (di, props) => ({
+        clusterName: di.inject(clusterNameInjectable),
+        apiManager: di.inject(apiManagerInjectable),
+        editResourceTab: di.inject(editResourceTabInjectable),
+        hideDetails: di.inject(hideDetailsInjectable),
 
-      kubeObjectMenuItems: di.inject(kubeObjectMenuItemsInjectable, {
-        kubeObject: props.object,
+        kubeObjectMenuItems: di.inject(kubeObjectMenuItemsInjectable, {
+          kubeObject: props.object,
+        }),
+        ...props,
       }),
     },
-
-    ...props,
-  }),
-});
+  )(props);
+}
diff --git a/yarn.lock b/yarn.lock
index 5e1c8442aa..952789bf84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -979,19 +979,19 @@
   dependencies:
     lodash "^4.17.21"
 
-"@ogre-tools/injectable-react@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-react/-/injectable-react-1.4.1.tgz#48d8633462189939292596a66631d6717e39e47f"
-  integrity sha512-SRk3QXvFCEQk4MeVG8TAomGcOt0Pf06hZ5kBh+iNIug3FLYeyWagH6OSVylZRu4u2Izd89J0taS1GmSfYDoHaA==
+"@ogre-tools/injectable-react@1.5.2":
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-react/-/injectable-react-1.5.2.tgz#7df925ca5abda86210f527333774ddbf027f0693"
+  integrity sha512-n26NyGLYjwyIbfwsLj1tg0uNPK6SI/H0vGisMNpNfrcdci2QiLQBSKemnLMMRn7LF/+JhA/NQClTetiMkcSCuw==
   dependencies:
     "@ogre-tools/fp" "^1.4.0"
-    "@ogre-tools/injectable" "^1.4.1"
+    "@ogre-tools/injectable" "^1.5.0"
     lodash "^4.17.21"
 
-"@ogre-tools/injectable@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@ogre-tools/injectable/-/injectable-1.4.1.tgz#45414c6e13c870d7d84f4fa8e0dd67b33f6cc23e"
-  integrity sha512-vX4QXS/2d3g7oUenOKcv3mZRnJ5XewUMPsSsELjCyhL2caJlD0eB9J7y3y0eeFu/I18L8GC3DRs9o3QNshwN5Q==
+"@ogre-tools/injectable@1.5.0", "@ogre-tools/injectable@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@ogre-tools/injectable/-/injectable-1.5.0.tgz#edf911f360e73bb5f10ac669f147108d1465fc45"
+  integrity sha512-k0Wgc8QqB+p/gHcWPVWJV8N8xX5cMpagEjZ1C5bPVeRyB+73od/yHgb1HOgL2pPzlE6qOtTdkiUrWuTAoqnqUw==
   dependencies:
     "@ogre-tools/fp" "^1.4.0"
     lodash "^4.17.21"