Switch to using "container" instead of Inject-component for following reasons:

- Conservation of Extension API, as now injection mechanism travels where ever component is used with unchanged interface in place
- Minimize impact on existing code by replacing duplicated Inject-components with usages of single container

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

package.json

@@ -199,7 +199,7 @@
     "@sentry/electron": "^2.5.4",
     "@sentry/integrations": "^6.15.0",
     "@ogre-tools/injectable": "^1.3.0",
-    "@ogre-tools/injectable-react": "^1.3.0",
+    "@ogre-tools/injectable-react": "^1.3.1",
     "abort-controller": "^3.0.0",
     "auto-bind": "^4.0.0",
     "autobind-decorator": "^2.4.0",

src/renderer/components/+workloads-deployments/deployment-replicasets.tsx

@@ -32,8 +32,7 @@ import { Table, TableCell, TableHead, TableRow } from "../table";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
 import { showDetails } from "../kube-detail-params";
-import { Inject } from "@ogre-tools/injectable-react";
+import { KubeObjectMenu } from "../kube-object-menu";
-import KubeObjectMenuInjectable from "../kube-object-menu/kube-object-menu.injectable";
 
 enum sortBy {
   name = "name",
@@ -115,6 +114,6 @@ export class DeploymentReplicaSets extends React.Component<Props> {
 }
 
 export function ReplicaSetMenu(props: KubeObjectMenuProps<ReplicaSet>) {
-  return <Inject injectableKey={KubeObjectMenuInjectable} {...props} />;
+  return <KubeObjectMenu {...props} />;
 }
 

src/renderer/components/kube-object-details/kube-object-details.tsx

@@ -34,8 +34,7 @@ import logger from "../../../main/logger";
 import { CrdResourceDetails } from "../+custom-resources";
 import { KubeObjectMeta } from "../kube-object-meta";
 import { hideDetails, kubeDetailsUrlParam } from "../kube-detail-params";
-import { Inject } from "@ogre-tools/injectable-react";
+import { KubeObjectMenu } from "../kube-object-menu";
-import KubeObjectMenuInjectable from "../kube-object-menu/kube-object-menu.injectable";
 
 export interface KubeObjectDetailsProps<T extends KubeObject = KubeObject> {
   className?: string;
@@ -104,7 +103,7 @@ export class KubeObjectDetails extends React.Component {
           className="KubeObjectDetails flex column"
           open={isOpen}
           title=""
-          toolbar={<Inject injectableKey={KubeObjectMenuInjectable} object={object} toolbar={true} />}
+          toolbar={<KubeObjectMenu object={object} toolbar={true} />}
           onClose={hideDetails}
         >
           {isLoading && <Spinner center />}
@@ -144,7 +143,7 @@ export class KubeObjectDetails extends React.Component {
         className="KubeObjectDetails flex column"
         open={isOpen}
         title={title}
-        toolbar={<Inject injectableKey={KubeObjectMenuInjectable} object={object} toolbar={true}/>}
+        toolbar={<KubeObjectMenu object={object} toolbar={true}/>}
         onClose={hideDetails}
       >
         {isLoading && <Spinner center/>}

src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx

@@ -35,8 +35,7 @@ import { kubeSelectedUrlParam, toggleDetails } from "../kube-detail-params";
 import { Icon } from "../icon";
 import { TooltipPosition } from "../tooltip";
 import type { ClusterContext } from "../../../common/k8s-api/cluster-context";
-import { Inject } from "@ogre-tools/injectable-react";
+import { KubeObjectMenu } from "../kube-object-menu";
-import KubeObjectMenuInjectable from "../kube-object-menu/kube-object-menu.injectable";
 
 export interface KubeObjectListLayoutProps<K extends KubeObject> extends ItemListLayoutProps<K> {
   store: KubeObjectStore<K>;
@@ -141,7 +140,7 @@ export class KubeObjectListLayout<K extends KubeObject> extends React.Component<
           }),
           ...[customizeHeader].flat(),
         ]}
-        renderItemMenu={item => <Inject injectableKey={KubeObjectMenuInjectable} object={item} />}
+        renderItemMenu={item => <KubeObjectMenu object={item} />}
       />
     );
   }

src/renderer/components/kube-object-menu/dependencies/hide-details.injectable.ts

@@ -20,10 +20,12 @@
  */
 import { hideDetails } from "../../kube-detail-params";
 import type { Injectable } from "@ogre-tools/injectable";
+import { lifecycleEnum } from "@ogre-tools/injectable";
 
 export const hideDetailsInjectable: Injectable<typeof hideDetails> = {
   getDependencies: () => ({}),
   instantiate: () => hideDetails,
+  lifecycle: lifecycleEnum.singleton,
 };
 
 export default hideDetailsInjectable;

src/renderer/components/kube-object-menu/dependencies/kube-object-menu-items/kube-object-menu-registry.injectable.ts

@@ -20,10 +20,12 @@
  */
 import { KubeObjectMenuRegistry } from "../../../../../extensions/registries";
 import type { Injectable } from "@ogre-tools/injectable";
+import { lifecycleEnum } from "@ogre-tools/injectable";
 
 const kubeObjectMenuRegistryInjectable: Injectable<KubeObjectMenuRegistry> = {
   getDependencies: () => ({}),
   instantiate: () => KubeObjectMenuRegistry.getInstance(),
+  lifecycle: lifecycleEnum.singleton,
 };
 
 export default kubeObjectMenuRegistryInjectable;

src/renderer/components/kube-object-menu/dependencies/remove-action/api-manager-store/api-manager.injectable.ts

@@ -18,13 +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 { apiManager } from "../../../../../../common/k8s-api/api-manager";
 import type { ApiManager } from "../../../../../../common/k8s-api/api-manager";
+import { apiManager } from "../../../../../../common/k8s-api/api-manager";
 import type { Injectable } from "@ogre-tools/injectable";
+import { lifecycleEnum } from "@ogre-tools/injectable";
 
 const apiManagerInjectable: Injectable<ApiManager> = {
   getDependencies: () => ({}),
   instantiate: () => apiManager,
+  lifecycle: lifecycleEnum.singleton,
 };
 
 export default apiManagerInjectable;

src/renderer/components/kube-object-menu/dependencies/remove-action/remove-action.ts

@@ -29,7 +29,7 @@ export interface Dependencies {
 
 export interface InstantiationParameter {
   kubeObject?: KubeObject;
-  customAction?: (kubeObject: KubeObject) => Promise<void>;
+  customAction?: (kubeObject: KubeObject) => void;
 }
 
 export const removeAction =

src/renderer/components/kube-object-menu/dependencies/update-action/edit-resource-tab.injectable.ts

@@ -20,10 +20,12 @@
  */
 import { editResourceTab } from "../../../dock/edit-resource.store";
 import type { Injectable } from "@ogre-tools/injectable";
+import { lifecycleEnum } from "@ogre-tools/injectable";
 
 const editResourceTabInjectable: Injectable<typeof editResourceTab> = {
   getDependencies: () => ({}),
   instantiate: () => editResourceTab,
+  lifecycle: lifecycleEnum.singleton,
 };
 
 export default editResourceTabInjectable;

src/renderer/components/kube-object-menu/index.ts

@@ -19,4 +19,5 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-export * from "./kube-object-menu";
+export type { KubeObjectMenuProps } from "./kube-object-menu";
+export * from "./kube-object-menu-container";

src/renderer/components/kube-object-menu/kube-object-menu-container.tsx

@@ -0,0 +1,24 @@
+/**
+ * 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 { getInjectedComponent } from "@ogre-tools/injectable-react";
+import KubeObjectMenuInjectable from "./kube-object-menu.injectable";
+
+export const KubeObjectMenu = getInjectedComponent(KubeObjectMenuInjectable);

src/renderer/components/kube-object-menu/kube-object-menu.test.tsx

@@ -31,17 +31,16 @@ import { ConfirmDialog } from "../confirm-dialog";
 import asyncFn, { AsyncFnMock } from "@async-fn/jest";
 import { getDiForUnitTesting } from "../getDiForUnitTesting";
 
-import { Inject } from "@ogre-tools/injectable-react";
 import clusterInjectable from "./dependencies/cluster.injectable";
 import hideDetailsInjectable from "./dependencies/hide-details.injectable";
 import editResourceTabInjectable from "./dependencies/update-action/edit-resource-tab.injectable";
 import { TabKind } from "../dock/dock.store";
-import KubeObjectMenuInjectable from "./kube-object-menu.injectable";
 import kubeObjectMenuRegistryInjectable from "./dependencies/kube-object-menu-items/kube-object-menu-registry.injectable";
 import { renderFor, DiRender } from "../test-utils/renderFor";
 import type { Cluster } from "../../../main/cluster";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import apiManagerInjectable from "./dependencies/remove-action/api-manager-store/api-manager.injectable";
+import { KubeObjectMenu } from "./index";
 
 describe("kube-object-menu", () => {
   let objectStub: KubeObject | null;
@@ -101,8 +100,7 @@ describe("kube-object-menu", () => {
 
     expect(() => {
       render(
-        <Inject
+        <KubeObjectMenu
-          injectableKey={KubeObjectMenuInjectable}
           object={objectStub}
           toolbar={true}
         />,
@@ -115,13 +113,11 @@ describe("kube-object-menu", () => {
 
     const { baseElement } = render(
       <>
-        <Inject
+        <KubeObjectMenu
-          injectableKey={KubeObjectMenuInjectable}
           toolbar={true}
           object={null} />
 
-        <Inject
+        <KubeObjectMenu
-          injectableKey={KubeObjectMenuInjectable}
           toolbar={true}
           object={KubeObject.create({
             apiVersion: "some-api-version",
@@ -144,8 +140,7 @@ describe("kube-object-menu", () => {
     objectStub = null;
 
     const { baseElement } = render(
-      <Inject
+      <KubeObjectMenu
-        injectableKey={KubeObjectMenuInjectable}
         object={objectStub}
         toolbar={true}
       />,
@@ -176,8 +171,7 @@ describe("kube-object-menu", () => {
         <div>
           <ConfirmDialog />
 
-          <Inject
+          <KubeObjectMenu
-            injectableKey={KubeObjectMenuInjectable}
             object={objectStub}
             toolbar={true}
             removeAction={removeActionMock}
@@ -252,8 +246,7 @@ describe("kube-object-menu", () => {
         <div>
           <ConfirmDialog />
 
-          <Inject
+          <KubeObjectMenu
-            injectableKey={KubeObjectMenuInjectable}
             object={objectStub}
             toolbar={true}
             removeAction={() => {}}
@@ -290,8 +283,7 @@ describe("kube-object-menu", () => {
         <div>
           <ConfirmDialog />
 
-          <Inject
+          <KubeObjectMenu
-            injectableKey={KubeObjectMenuInjectable}
             object={objectStub}
             toolbar={true}
             removeAction={() => {}}

yarn.lock

@@ -979,10 +979,10 @@
   dependencies:
     lodash "^4.17.21"
 
-"@ogre-tools/injectable-react@^1.3.0":
+"@ogre-tools/injectable-react@^1.3.1":
-  version "1.3.0"
+  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-react/-/injectable-react-1.3.0.tgz#357e697ed0b227e78d63c05523333216a3091d91"
+  resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-react/-/injectable-react-1.3.1.tgz#dec3829ac8cf295c32cfe636ca2cd39a495d56ce"
-  integrity sha512-+hOl+zyMt53n77Mxbcgk2n2pLOoPStT2FY6+sq+UWdonR7HxgBeYh33tHpFTtGXOIUn/Yly3TPN/j0RODEcO8g==
+  integrity sha512-5jHL9Zcb3QkrttdzqJpN6iCXaV2+fEuDNigwH6NJ3uyV1iQWuRIctnlXxfa9qtZESwaAz7o0hAwkyqEl7YSA4g==
   dependencies:
     "@ogre-tools/fp" "^1.0.2"
     "@ogre-tools/injectable" "^1.3.0"