Update ogre-tools for improved types of withInjectables (#4587)

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

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);
+}