Remove usages of legacy global secretApi

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/k8s-api/endpoints/legacy-globals.ts

@@ -13,7 +13,6 @@ import persistentVolumeClaimApiInjectable from "./persistent-volume-claim.api.in
 import podApiInjectable from "./pod.api.injectable";
 import resourceQuotaApiInjectable from "./resource-quota.api.injectable";
 import roleApiInjectable from "./role.api.injectable";
-import secretApiInjectable from "./secret.api.injectable";
 
 /**
  * @deprecated use `di.inject(roleApiInjectable)` instead
@@ -59,8 +58,3 @@ export const persistentVolumeClaimApi = asLegacyGlobalForExtensionApi(persistent
  * @deprecated use `di.inject(resourceQuotaApiInjectable)` instead
  */
 export const resourceQuotaApi = asLegacyGlobalForExtensionApi(resourceQuotaApiInjectable);
-
-/**
- * @deprecated use `di.inject(secretApiInjectable)` instead
- */
-export const secretApi = asLegacyGlobalForExtensionApi(secretApiInjectable);

src/renderer/components/+config-secrets/add-dialog/close.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { action } from "mobx";
+import addSecretDialogOpenStateInjectable from "./state.injectable";
+
+const closeAddSecretDialogInjectable = getInjectable({
+  id: "close-add-secret-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addSecretDialogOpenStateInjectable);
+
+    return action(() => state.set(false));
+  },
+});
+
+export default closeAddSecretDialogInjectable;

src/renderer/components/+config-secrets/add-dialog/is-open.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import addSecretDialogOpenStateInjectable from "./state.injectable";
+
+const isAddSecretDialogOpenInjectable = getInjectable({
+  id: "is-add-secret-dialog-open",
+  instantiate: (di) => {
+    const state = di.inject(addSecretDialogOpenStateInjectable);
+
+    return computed(() => state.get());
+  },
+});
+
+export default isAddSecretDialogOpenInjectable;

src/renderer/components/+config-secrets/add-dialog/open.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { action } from "mobx";
+import addSecretDialogOpenStateInjectable from "./state.injectable";
+
+const openAddSecretDialogInjectable = getInjectable({
+  id: "open-add-secret-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addSecretDialogOpenStateInjectable);
+
+    return action(() => state.set(true));
+  },
+});
+
+export default openAddSecretDialogInjectable;

src/renderer/components/+config-secrets/add-dialog/state.injectable.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { observable } from "mobx";
+
+const addSecretDialogOpenStateInjectable = getInjectable({
+  id: "add-secret-dialog-state",
+  instantiate: () => observable.box(false),
+});
+
+export default addSecretDialogOpenStateInjectable;

src/renderer/components/+config-secrets/add-dialog/view.tsx

@@ -3,26 +3,33 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./add-secret-dialog.scss";
+import "./view.scss";
 
 import React from "react";
+import type { IComputedValue } from "mobx";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import type { DialogProps } from "../dialog";
-import { Dialog } from "../dialog";
-import { Wizard, WizardStep } from "../wizard";
-import { Input } from "../input";
-import { systemName } from "../input/input_validators";
-import { reverseSecretTypeMap, secretApi, SecretType } from "../../../common/k8s-api/endpoints";
-import { SubTitle } from "../layout/sub-title";
-import { NamespaceSelect } from "../+namespaces/namespace-select";
-import { Select } from "../select";
-import { Icon } from "../icon";
-import { base64, iter } from "../../utils";
-import { Notifications } from "../notifications";
+import type { DialogProps } from "../../dialog";
+import { Dialog } from "../../dialog";
+import { Wizard, WizardStep } from "../../wizard";
+import { Input } from "../../input";
+import { systemName } from "../../input/input_validators";
+import type { SecretApi } from "../../../../common/k8s-api/endpoints";
+import { reverseSecretTypeMap, SecretType } from "../../../../common/k8s-api/endpoints";
+import { SubTitle } from "../../layout/sub-title";
+import { NamespaceSelect } from "../../+namespaces/namespace-select";
+import { Select } from "../../select";
+import { Icon } from "../../icon";
+import { base64, iter } from "../../../utils";
+import { Notifications } from "../../notifications";
 import upperFirst from "lodash/upperFirst";
-import { showDetails } from "../kube-detail-params";
-import { fromEntries } from "../../../common/utils/objects";
+import { fromEntries } from "../../../../common/utils/objects";
+import type { ShowDetails } from "../../kube-detail-params/show-details.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import closeAddSecretDialogInjectable from "./close.injectable";
+import secretApiInjectable from "../../../../common/k8s-api/endpoints/secret.api.injectable";
+import showDetailsInjectable from "../../kube-detail-params/show-details.injectable";
+import isAddSecretDialogOpenInjectable from "./is-open.injectable";
 
 export interface AddSecretDialogProps extends Partial<DialogProps> {
 }
@@ -42,25 +49,20 @@ interface SecretTemplate {
 
 type ISecretField = keyof SecretTemplate;
 
-const dialogState = observable.object({
-  isOpen: false,
-});
+interface Dependencies {
+  secretApi: SecretApi;
+  isAddSecretDialogOpen: IComputedValue<boolean>;
+  closeAddSecretDialog: () => void;
+  showDetails: ShowDetails;
+}
 
 @observer
-export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
-  constructor(props: AddSecretDialogProps) {
+class NonInjectedAddSecretDialog extends React.Component<AddSecretDialogProps & Dependencies> {
+  constructor(props: AddSecretDialogProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
 
-  static open() {
-    dialogState.isOpen = true;
-  }
-
-  static close() {
-    dialogState.isOpen = false;
-  }
-
   private secretTemplate: Partial<Record<SecretType, SecretTemplate>> = {
     [SecretType.Opaque]: {},
     [SecretType.ServiceAccountToken]: {
@@ -82,7 +84,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
   };
 
   close = () => {
-    AddSecretDialog.close();
+    this.props.closeAddSecretDialog();
   };
 
   private getDataFromFields = (fields: SecretTemplateField[] = [], processValue: (val: string) => string = (val => val)) => {
@@ -100,7 +102,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
     const { data = [], labels = [], annotations = [] } = this.secret[type] ?? {};
 
     try {
-      const newSecret = await secretApi.create({ namespace, name }, {
+      const newSecret = await this.props.secretApi.create({ namespace, name }, {
         type,
         data: this.getDataFromFields(data, val => val ? base64.encode(val) : ""),
         metadata: {
@@ -111,7 +113,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
         },
       });
 
-      showDetails(newSecret?.selfLink);
+      this.props.showDetails(newSecret?.selfLink);
       this.close();
     } catch (err) {
       Notifications.checkedError(err, "Unknown error occured while creating a Secret");
@@ -183,7 +185,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
   }
 
   render() {
-    const { ...dialogProps } = this.props;
+    const { closeAddSecretDialog, isAddSecretDialogOpen, secretApi, showDetails, ...dialogProps } = this.props;
     const { namespace, name, type } = this;
     const header = <h5>Create Secret</h5>;
 
@@ -191,7 +193,7 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
       <Dialog
         {...dialogProps}
         className="AddSecretDialog"
-        isOpen={dialogState.isOpen}
+        isOpen={isAddSecretDialogOpen.get()}
         onOpen={this.reset}
         close={this.close}
       >
@@ -244,3 +246,13 @@ export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
     );
   }
 }
+
+export const AddSecretDialog = withInjectables<Dependencies, AddSecretDialogProps>(NonInjectedAddSecretDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    closeAddSecretDialog: di.inject(closeAddSecretDialogInjectable),
+    secretApi: di.inject(secretApiInjectable),
+    showDetails: di.inject(showDetailsInjectable),
+    isAddSecretDialogOpen: di.inject(isAddSecretDialogOpenInjectable),
+  }),
+});

src/renderer/components/+config-secrets/secrets.tsx

@@ -7,7 +7,7 @@ import "./secrets.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { AddSecretDialog } from "./add-secret-dialog";
+import { AddSecretDialog } from "./add-dialog/view";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { Badge } from "../badge";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
@@ -19,6 +19,7 @@ import type { SecretStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import secretStoreInjectable from "./store.injectable";
+import openAddSecretDialogInjectable from "./add-dialog/open.injectable";
 
 enum columnId {
   name = "name",
@@ -32,6 +33,7 @@ enum columnId {
 interface Dependencies {
   filterByNamespace: FilterByNamespace;
   secretStore: SecretStore;
+  openAddSecretDialog: () => void;
 }
 
 @observer
@@ -89,7 +91,7 @@ class NonInjectedSecrets extends React.Component<Dependencies> {
             <KubeObjectAge key="age" object={secret} />,
           ]}
           addRemoveButtons={{
-            onAdd: () => AddSecretDialog.open(),
+            onAdd: this.props.openAddSecretDialog,
             addTooltip: "Create new Secret",
           }}
         />
@@ -104,5 +106,6 @@ export const Secrets = withInjectables<Dependencies>(NonInjectedSecrets, {
     ...props,
     filterByNamespace: di.inject(filterByNamespaceInjectable),
     secretStore: di.inject(secretStoreInjectable),
+    openAddSecretDialog: di.inject(openAddSecretDialogInjectable),
   }),
 });

src/renderer/components/+workloads-pods/details/volumes/variants/ceph-fs.tsx

@@ -3,14 +3,33 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { secretApi } from "../../../../../../common/k8s-api/endpoints";
+import type { SecretApi } from "../../../../../../common/k8s-api/endpoints";
+import secretApiInjectable from "../../../../../../common/k8s-api/endpoints/secret.api.injectable";
 import { DrawerItem } from "../../../../drawer";
-import type { VolumeVariantComponent } from "../variant-helpers";
+import type { PodVolumeVariantSpecificProps } from "../variant-helpers";
 import { LocalRef } from "../variant-helpers";
 
-export const CephFs: VolumeVariantComponent<"cephfs"> = (
-  ({ pod, variant: { monitors, path = "/", user = "admin", secretFile = "/etc/ceph/user.secret", secretRef, readOnly = false }}) => (
+interface Dependencies {
+  secretApi: SecretApi;
+}
+
+const NonInjectedCephFs = (props: PodVolumeVariantSpecificProps<"cephfs"> & Dependencies) => {
+  const {
+    pod,
+    variant: {
+      monitors,
+      path = "/",
+      user = "admin",
+      secretFile = "/etc/ceph/user.secret",
+      secretRef,
+      readOnly = false,
+    },
+    secretApi,
+  } = props;
+
+  return (
     <>
       <DrawerItem name="Monitors">
         <ul>
@@ -43,5 +62,12 @@ export const CephFs: VolumeVariantComponent<"cephfs"> = (
         {readOnly.toString()}
       </DrawerItem>
     </>
-  )
-);
+  );
+};
+
+export const CephFs = withInjectables<Dependencies, PodVolumeVariantSpecificProps<"cephfs">>(NonInjectedCephFs, {
+  getProps: (di, props) => ({
+    ...props,
+    secretApi: di.inject(secretApiInjectable),
+  }),
+});

src/renderer/components/+workloads-pods/details/volumes/variants/container-storage-interface.tsx

@@ -3,66 +3,78 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { secretApi } from "../../../../../../common/k8s-api/endpoints";
+import type { SecretApi } from "../../../../../../common/k8s-api/endpoints";
+import secretApiInjectable from "../../../../../../common/k8s-api/endpoints/secret.api.injectable";
 import { DrawerItem } from "../../../../drawer";
-import type { VolumeVariantComponent } from "../variant-helpers";
+import type { PodVolumeVariantSpecificProps } from "../variant-helpers";
 import { LocalRef } from "../variant-helpers";
 
-export const ContainerStorageInterface: VolumeVariantComponent<"csi"> = ({
-  pod,
-  variant: {
-    driver,
-    readOnly = false,
-    fsType = "ext4",
-    volumeAttributes = {},
-    nodePublishSecretRef,
-    controllerPublishSecretRef,
-    nodeStageSecretRef,
-    controllerExpandSecretRef,
-  },
-}) => (
-  <>
-    <DrawerItem name="Driver">
-      {driver}
-    </DrawerItem>
-    <DrawerItem name="ReadOnly">
-      {readOnly.toString()}
-    </DrawerItem>
-    <DrawerItem name="Filesystem Type">
-      {fsType}
-    </DrawerItem>
-    <LocalRef
-      pod={pod}
-      title="Controller Publish Secret"
-      kubeRef={controllerPublishSecretRef}
-      api={secretApi}
-    />
-    <LocalRef
-      pod={pod}
-      title="Controller Expand Secret"
-      kubeRef={controllerExpandSecretRef}
-      api={secretApi}
-    />
-    <LocalRef
-      pod={pod}
-      title="Node Publish Secret"
-      kubeRef={nodePublishSecretRef}
-      api={secretApi}
-    />
-    <LocalRef
-      pod={pod}
-      title="Node Stage Secret"
-      kubeRef={nodeStageSecretRef}
-      api={secretApi}
-    />
-    {
-      Object.entries(volumeAttributes)
+interface Dependencies {
+  secretApi: SecretApi;
+}
+
+const NonInjectedContainerStorageInterface = (props: PodVolumeVariantSpecificProps<"csi"> & Dependencies) => {
+  const {
+    pod,
+    variant: {
+      driver,
+      readOnly = false,
+      fsType = "ext4",
+      volumeAttributes = {},
+      nodePublishSecretRef,
+      controllerPublishSecretRef,
+      nodeStageSecretRef,
+      controllerExpandSecretRef,
+    },
+    secretApi,
+  } = props;
+
+  return (
+    <>
+      <DrawerItem name="Driver">
+        {driver}
+      </DrawerItem>
+      <DrawerItem name="ReadOnly">
+        {readOnly.toString()}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+      <LocalRef
+        pod={pod}
+        title="Controller Publish Secret"
+        kubeRef={controllerPublishSecretRef}
+        api={secretApi} />
+      <LocalRef
+        pod={pod}
+        title="Controller Expand Secret"
+        kubeRef={controllerExpandSecretRef}
+        api={secretApi} />
+      <LocalRef
+        pod={pod}
+        title="Node Publish Secret"
+        kubeRef={nodePublishSecretRef}
+        api={secretApi} />
+      <LocalRef
+        pod={pod}
+        title="Node Stage Secret"
+        kubeRef={nodeStageSecretRef}
+        api={secretApi} />
+      {Object.entries(volumeAttributes)
         .map(([key, value]) => (
           <DrawerItem key={key} name={key}>
             {value}
           </DrawerItem>
-        ))
-    }
-  </>
-);
+        ))}
+    </>
+  );
+};
+
+export const ContainerStorageInterface = withInjectables<Dependencies, PodVolumeVariantSpecificProps<"csi">>(NonInjectedContainerStorageInterface, {
+  getProps: (di, props) => ({
+    ...props,
+    secretApi: di.inject(secretApiInjectable),
+  }),
+});

src/renderer/components/+workloads-pods/details/volumes/variants/flex-volume.tsx

@@ -3,14 +3,32 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { secretApi } from "../../../../../../common/k8s-api/endpoints";
+import type { SecretApi } from "../../../../../../common/k8s-api/endpoints";
+import secretApiInjectable from "../../../../../../common/k8s-api/endpoints/secret.api.injectable";
 import { DrawerItem } from "../../../../drawer";
-import type { VolumeVariantComponent } from "../variant-helpers";
+import type { PodVolumeVariantSpecificProps } from "../variant-helpers";
 import { LocalRef } from "../variant-helpers";
 
-export const FlexVolume: VolumeVariantComponent<"flexVolume"> = (
-  ({ pod, variant: { driver, fsType, secretRef, readOnly = false, options = {}}}) => (
+interface Dependencies {
+  secretApi: SecretApi;
+}
+
+const NonInjectedFlexVolume = (props: PodVolumeVariantSpecificProps<"flexVolume"> & Dependencies) => {
+  const {
+    pod,
+    variant: {
+      driver,
+      fsType,
+      secretRef,
+      readOnly = false,
+      options = {},
+    },
+    secretApi,
+  } = props;
+
+  return (
     <>
       <DrawerItem name="Driver">
         {driver}
@@ -36,5 +54,12 @@ export const FlexVolume: VolumeVariantComponent<"flexVolume"> = (
           ))
       }
     </>
-  )
-);
+  );
+};
+
+export const FlexVolume = withInjectables<Dependencies, PodVolumeVariantSpecificProps<"flexVolume">>(NonInjectedFlexVolume, {
+  getProps: (di, props) => ({
+    ...props,
+    secretApi: di.inject(secretApiInjectable),
+  }),
+});

src/renderer/components/+workloads-pods/details/volumes/variants/rados-block-device.tsx

@@ -3,14 +3,35 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { secretApi } from "../../../../../../common/k8s-api/endpoints";
+import type { SecretApi } from "../../../../../../common/k8s-api/endpoints";
+import secretApiInjectable from "../../../../../../common/k8s-api/endpoints/secret.api.injectable";
 import { DrawerItem } from "../../../../drawer";
-import type { VolumeVariantComponent } from "../variant-helpers";
+import type { PodVolumeVariantSpecificProps } from "../variant-helpers";
 import { LocalRef } from "../variant-helpers";
 
-export const RadosBlockDevice: VolumeVariantComponent<"rbd"> = (
-  ({ pod, variant: { monitors, image, fsType = "ext4", pool = "rbd", user = "admin", keyring = "/etc/ceph/keyright", secretRef, readOnly = false }}) => (
+interface Dependencies {
+  secretApi: SecretApi;
+}
+
+const NonInjectedRadosBlockDevice = (props: PodVolumeVariantSpecificProps<"rbd"> & Dependencies) => {
+  const {
+    pod,
+    variant: {
+      monitors,
+      image,
+      fsType = "ext4",
+      pool = "rbd",
+      user = "admin",
+      keyring = "/etc/ceph/keyright",
+      secretRef,
+      readOnly = false,
+    },
+    secretApi,
+  } = props;
+
+  return (
     <>
       <DrawerItem name="Ceph Monitors">
         <ul>
@@ -49,5 +70,12 @@ export const RadosBlockDevice: VolumeVariantComponent<"rbd"> = (
         {readOnly.toString()}
       </DrawerItem>
     </>
-  )
-);
+  );
+};
+
+export const RadosBlockDevice = withInjectables<Dependencies, PodVolumeVariantSpecificProps<"rbd">>(NonInjectedRadosBlockDevice, {
+  getProps: (di, props) => ({
+    ...props,
+    secretApi: di.inject(secretApiInjectable),
+  }),
+});

src/renderer/components/+workloads-pods/details/volumes/variants/scale-io.tsx

@@ -3,14 +3,37 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { secretApi } from "../../../../../../common/k8s-api/endpoints";
+import type { SecretApi } from "../../../../../../common/k8s-api/endpoints";
+import secretApiInjectable from "../../../../../../common/k8s-api/endpoints/secret.api.injectable";
 import { DrawerItem } from "../../../../drawer";
-import type { VolumeVariantComponent } from "../variant-helpers";
+import type { PodVolumeVariantSpecificProps } from "../variant-helpers";
 import { LocalRef } from "../variant-helpers";
 
-export const ScaleIo: VolumeVariantComponent<"scaleIO"> = (
-  ({ pod, variant: { gateway, system, secretRef, sslEnabled = false, protectionDomain, storagePool, storageMode = "ThinProvisioned", volumeName, fsType = "xfs", readOnly = false }}) => (
+interface Dependencies {
+  secretApi: SecretApi;
+}
+
+const NonInjectedScaleIo = (props: PodVolumeVariantSpecificProps<"scaleIO"> & Dependencies) => {
+  const {
+    pod,
+    variant: {
+      gateway,
+      system,
+      secretRef,
+      sslEnabled = false,
+      protectionDomain,
+      storagePool,
+      storageMode = "ThinProvisioned",
+      volumeName,
+      fsType = "xfs",
+      readOnly = false,
+    },
+    secretApi,
+  } = props;
+
+  return (
     <>
       <DrawerItem name="Gateway">
         {gateway}
@@ -46,5 +69,12 @@ export const ScaleIo: VolumeVariantComponent<"scaleIO"> = (
         {readOnly.toString()}
       </DrawerItem>
     </>
-  )
-);
+  );
+};
+
+export const ScaleIo = withInjectables<Dependencies, PodVolumeVariantSpecificProps<"scaleIO">>(NonInjectedScaleIo, {
+  getProps: (di, props) => ({
+    ...props,
+    secretApi: di.inject(secretApiInjectable),
+  }),
+});

src/renderer/components/+workloads-pods/details/volumes/variants/secret.tsx

@@ -3,14 +3,26 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { secretApi } from "../../../../../../common/k8s-api/endpoints";
+import type { SecretApi } from "../../../../../../common/k8s-api/endpoints";
+import secretApiInjectable from "../../../../../../common/k8s-api/endpoints/secret.api.injectable";
 import { DrawerItem } from "../../../../drawer";
-import type { VolumeVariantComponent } from "../variant-helpers";
+import type { PodVolumeVariantSpecificProps } from "../variant-helpers";
 import { LocalRef } from "../variant-helpers";
 
-export const Secret: VolumeVariantComponent<"secret"> = (
-  ({ pod, variant: { secretName, items = [], defaultMode = 0o644, optional = false }}) => (
+interface Dependencies {
+  secretApi: SecretApi;
+}
+
+const NonInjectedSecret = (props: PodVolumeVariantSpecificProps<"secret"> & Dependencies) => {
+  const {
+    pod,
+    variant: { secretName, items = [], defaultMode = 0o644, optional = false },
+    secretApi,
+  } = props;
+
+  return (
     <>
       <LocalRef
         pod={pod}
@@ -30,5 +42,12 @@ export const Secret: VolumeVariantComponent<"secret"> = (
         {optional.toString()}
       </DrawerItem>
     </>
-  )
-);
+  );
+};
+
+export const Secret = withInjectables<Dependencies, PodVolumeVariantSpecificProps<"secret">>(NonInjectedSecret, {
+  getProps: (di, props) => ({
+    ...props,
+    secretApi: di.inject(secretApiInjectable),
+  }),
+});

src/renderer/components/+workloads-pods/details/volumes/variants/storage-os.tsx

@@ -3,14 +3,26 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { secretApi } from "../../../../../../common/k8s-api/endpoints";
+import type { SecretApi } from "../../../../../../common/k8s-api/endpoints";
+import secretApiInjectable from "../../../../../../common/k8s-api/endpoints/secret.api.injectable";
 import { DrawerItem } from "../../../../drawer";
-import type { VolumeVariantComponent } from "../variant-helpers";
+import type { PodVolumeVariantSpecificProps } from "../variant-helpers";
 import { LocalRef } from "../variant-helpers";
 
-export const StorageOs: VolumeVariantComponent<"storageos"> = (
-  ({ pod, variant: { volumeName, volumeNamespace, fsType = "ext4", readOnly = false, secretRef }}) => (
+interface Dependencies {
+  secretApi: SecretApi;
+}
+
+const NonInjectedStorageOs = (props: PodVolumeVariantSpecificProps<"storageos"> & Dependencies) => {
+  const {
+    pod,
+    variant: { volumeName, volumeNamespace, fsType = "ext4", readOnly = false, secretRef },
+    secretApi,
+  } = props;
+
+  return (
     <>
       <DrawerItem name="Volume Name">
         {volumeName}
@@ -35,5 +47,12 @@ export const StorageOs: VolumeVariantComponent<"storageos"> = (
         api={secretApi}
       />
     </>
-  )
-);
+  );
+};
+
+export const StorageOs = withInjectables<Dependencies, PodVolumeVariantSpecificProps<"storageos">>(NonInjectedStorageOs, {
+  getProps: (di, props) => ({
+    ...props,
+    secretApi: di.inject(secretApiInjectable),
+  }),
+});

src/renderer/components/+workloads-pods/pod-details-secrets.tsx

@@ -9,15 +9,27 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { reaction } from "mobx";
 import { observer } from "mobx-react";
-import type { Pod, Secret } from "../../../common/k8s-api/endpoints";
-import { secretApi } from "../../../common/k8s-api/endpoints";
-import { getDetailsUrl } from "../kube-detail-params";
+import type { Pod, Secret, SecretApi } from "../../../common/k8s-api/endpoints";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import secretApiInjectable from "../../../common/k8s-api/endpoints/secret.api.injectable";
+import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
+import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
 
 export interface PodDetailsSecretsProps {
   pod: Pod;
 }
 
-export const PodDetailsSecrets = observer(({ pod }: PodDetailsSecretsProps) => {
+interface Dependencies {
+  secretApi: SecretApi;
+  getDetailsUrl: GetDetailsUrl;
+}
+
+const NonInjectedPodDetailsSecrets = observer((props: PodDetailsSecretsProps & Dependencies) => {
+  const {
+    pod,
+    secretApi,
+    getDetailsUrl,
+  } = props;
   const [secrets, setSecrets] = useState(new Map<string, Secret>());
 
   useEffect(() => (
@@ -68,3 +80,10 @@ export const PodDetailsSecrets = observer(({ pod }: PodDetailsSecretsProps) => {
   );
 });
 
+export const PodDetailsSecrets = withInjectables<Dependencies, PodDetailsSecretsProps>(NonInjectedPodDetailsSecrets, {
+  getProps: (di, props) => ({
+    ...props,
+    secretApi: di.inject(secretApiInjectable),
+    getDetailsUrl: di.inject(getDetailsUrlInjectable),
+  }),
+});