Remove usages of legacy global resourceQuotaApi

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

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

@@ -11,7 +11,6 @@ import networkPolicyApiInjectable from "./network-policy.api.injectable";
 import nodeApiInjectable from "./node.api.injectable";
 import persistentVolumeClaimApiInjectable from "./persistent-volume-claim.api.injectable";
 import podApiInjectable from "./pod.api.injectable";
-import resourceQuotaApiInjectable from "./resource-quota.api.injectable";
 import roleApiInjectable from "./role.api.injectable";
 
 /**
@@ -53,8 +52,3 @@ export const nodeApi = asLegacyGlobalForExtensionApi(nodeApiInjectable);
  * @deprecated use `di.inject(persistentVolumeClaimApiInjectable)` instead
  */
 export const persistentVolumeClaimApi = asLegacyGlobalForExtensionApi(persistentVolumeClaimApiInjectable);
-
-/**
- * @deprecated use `di.inject(resourceQuotaApiInjectable)` instead
- */
-export const resourceQuotaApi = asLegacyGlobalForExtensionApi(resourceQuotaApiInjectable);

src/renderer/components/+config-resource-quotas/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 addQuotaDialogOpenStateInjectable from "./open-state.injectable";
+
+const closeAddQuotaDialogInjectable = getInjectable({
+  id: "close-add-quota-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addQuotaDialogOpenStateInjectable);
+
+    return action(() => state.set(false));
+  },
+});
+
+export default closeAddQuotaDialogInjectable;

src/renderer/components/+config-resource-quotas/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 addQuotaDialogOpenStateInjectable from "./open-state.injectable";
+
+const isAddQuotaDialogOpenInjectable = getInjectable({
+  id: "is-add-quota-dialog-open",
+  instantiate: (di) => {
+    const state = di.inject(addQuotaDialogOpenStateInjectable);
+
+    return computed(() => state.get());
+  },
+});
+
+export default isAddQuotaDialogOpenInjectable;

src/renderer/components/+config-resource-quotas/add-dialog/open-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 addQuotaDialogOpenStateInjectable = getInjectable({
+  id: "add-quota-dialog-open-state",
+  instantiate: () => observable.box(false),
+});
+
+export default addQuotaDialogOpenStateInjectable;

src/renderer/components/+config-resource-quotas/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 addQuotaDialogOpenStateInjectable from "./open-state.injectable";
+
+const openAddQuotaDialogInjectable = getInjectable({
+  id: "open-add-quota-dialog",
+  instantiate: (di) => {
+    const state = di.inject(addQuotaDialogOpenStateInjectable);
+
+    return action(() => state.set(true));
+  },
+});
+
+export default openAddQuotaDialogInjectable;

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

@@ -3,35 +3,39 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./add-quota-dialog.scss";
+import "./view.scss";
 
 import React from "react";
+import type { IComputedValue } from "mobx";
 import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import type { DialogProps } from "../dialog";
+import type { DialogProps } from "../../dialog";
-import { Dialog } from "../dialog";
+import { Dialog } from "../../dialog";
-import { Wizard, WizardStep } from "../wizard";
+import { Wizard, WizardStep } from "../../wizard";
-import { Input } from "../input";
+import { Input } from "../../input";
-import { systemName } from "../input/input_validators";
+import { systemName } from "../../input/input_validators";
-import type { IResourceQuotaValues } from "../../../common/k8s-api/endpoints";
+import type { IResourceQuotaValues, ResourceQuotaApi } from "../../../../common/k8s-api/endpoints";
-import { resourceQuotaApi } from "../../../common/k8s-api/endpoints";
+import { Select } from "../../select";
-import { Select } from "../select";
+import { Icon } from "../../icon";
-import { Icon } from "../icon";
+import { Button } from "../../button";
-import { Button } from "../button";
+import { Notifications } from "../../notifications";
-import { Notifications } from "../notifications";
+import { NamespaceSelect } from "../../+namespaces/namespace-select";
-import { NamespaceSelect } from "../+namespaces/namespace-select";
+import { SubTitle } from "../../layout/sub-title";
-import { SubTitle } from "../layout/sub-title";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import closeAddQuotaDialogInjectable from "./close.injectable";
+import isAddQuotaDialogOpenInjectable from "./is-open.injectable";
+import resourceQuotaApiInjectable from "../../../../common/k8s-api/endpoints/resource-quota.api.injectable";
 
 export interface AddQuotaDialogProps extends DialogProps {
 }
 
-const dialogState = observable.object({
+interface Dependencies {
-  isOpen: false,
+  resourceQuotaApi: ResourceQuotaApi;
-});
+  isAddQuotaDialogOpen: IComputedValue<boolean>;
+  closeAddQuotaDialog: () => void;
+}
 
-@observer
+const defaultQuotas = JSON.stringify({
-export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
-  static defaultQuotas: IResourceQuotaValues = {
   "limits.cpu": "",
   "limits.memory": "",
   "requests.cpu": "",
@@ -50,7 +54,10 @@ export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
   "count/jobs.batch": "",
   "count/cronjobs.batch": "",
   "count/deployments.extensions": "",
-  };
+} as IResourceQuotaValues);
+
+@observer
+class NonInjectedAddQuotaDialog extends React.Component<AddQuotaDialogProps & Dependencies> {
 
   public defaultNamespace = "default";
 
@@ -58,21 +65,13 @@ export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
   @observable quotaSelectValue: string | null = null;
   @observable quotaInputValue = "";
   @observable namespace: string | null = this.defaultNamespace;
-  @observable quotas = AddQuotaDialog.defaultQuotas;
+  @observable quotas: IResourceQuotaValues = JSON.parse(defaultQuotas);
 
-  constructor(props: AddQuotaDialogProps) {
+  constructor(props: AddQuotaDialogProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
 
-  static open() {
-    dialogState.isOpen = true;
-  }
-
-  static close() {
-    dialogState.isOpen = false;
-  }
-
   @computed get quotaEntries() {
     return Object.entries(this.quotas)
       .filter(([, value]) => !!value?.trim());
@@ -101,7 +100,7 @@ export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
   };
 
   close = () => {
-    AddQuotaDialog.close();
+    this.props.closeAddQuotaDialog();
   };
 
   reset = () => {
@@ -109,7 +108,7 @@ export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
     this.quotaSelectValue = "";
     this.quotaInputValue = "";
     this.namespace = this.defaultNamespace;
-    this.quotas = AddQuotaDialog.defaultQuotas;
+    this.quotas = JSON.parse(defaultQuotas);
   };
 
   addQuota = async () => {
@@ -122,7 +121,7 @@ export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
     try {
       const quotas = Object.fromEntries(this.quotaEntries);
 
-      await resourceQuotaApi.create({ namespace, name: quotaName }, {
+      await this.props.resourceQuotaApi.create({ namespace, name: quotaName }, {
         spec: {
           hard: quotas,
         },
@@ -143,14 +142,14 @@ export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
   };
 
   render() {
-    const { ...dialogProps } = this.props;
+    const { closeAddQuotaDialog, isAddQuotaDialogOpen, resourceQuotaApi, ...dialogProps } = this.props;
     const header = <h5>Create ResourceQuota</h5>;
 
     return (
       <Dialog
         {...dialogProps}
         className="AddQuotaDialog"
-        isOpen={dialogState.isOpen}
+        isOpen={isAddQuotaDialogOpen.get()}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>
@@ -244,3 +243,12 @@ export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
     );
   }
 }
+
+export const AddQuotaDialog = withInjectables<Dependencies, AddQuotaDialogProps>(NonInjectedAddQuotaDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    closeAddQuotaDialog: di.inject(closeAddQuotaDialogInjectable),
+    isAddQuotaDialogOpen: di.inject(isAddQuotaDialogOpenInjectable),
+    resourceQuotaApi: di.inject(resourceQuotaApiInjectable),
+  }),
+});

src/renderer/components/+config-resource-quotas/resource-quotas.tsx

@@ -8,7 +8,7 @@ import "./resource-quotas.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
-import { AddQuotaDialog } from "./add-quota-dialog";
+import { AddQuotaDialog } from "./add-dialog/view";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
@@ -18,6 +18,7 @@ import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-m
 import { withInjectables } from "@ogre-tools/injectable-react";
 import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import resourceQuotaStoreInjectable from "./store.injectable";
+import openAddQuotaDialogInjectable from "./add-dialog/open.injectable";
 
 enum columnId {
   name = "name",
@@ -28,6 +29,7 @@ enum columnId {
 interface Dependencies {
   resourceQuotaStore: ResourceQuotaStore;
   filterByNamespace: FilterByNamespace;
+  openAddQuotaDialog: () => void;
 }
 
 @observer
@@ -69,7 +71,7 @@ class NonInjectedResourceQuotas extends React.Component<Dependencies> {
             <KubeObjectAge key="age" object={resourceQuota} />,
           ]}
           addRemoveButtons={{
-            onAdd: () => AddQuotaDialog.open(),
+            onAdd: this.props.openAddQuotaDialog,
             addTooltip: "Create new ResourceQuota",
           }}
         />
@@ -84,5 +86,6 @@ export const ResourceQuotas = withInjectables<Dependencies>(NonInjectedResourceQ
     ...props,
     filterByNamespace: di.inject(filterByNamespaceInjectable),
     resourceQuotaStore: di.inject(resourceQuotaStoreInjectable),
+    openAddQuotaDialog: di.inject(openAddQuotaDialogInjectable),
   }),
 });