Remove usages of legacy global jobApi

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

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

@@ -5,7 +5,6 @@
 
 import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
 import cronJobApiInjectable from "./cron-job.api.injectable";
-import jobApiInjectable from "./job.api.injectable";
 import podApiInjectable from "./pod.api.injectable";
 import roleApiInjectable from "./role.api.injectable";
 
@@ -23,8 +22,3 @@ export const podApi = asLegacyGlobalForExtensionApi(podApiInjectable);
  * @deprecated use `di.inject(cronJobApiInjectable)` instead
  */
 export const cronJobApi = asLegacyGlobalForExtensionApi(cronJobApiInjectable);
-
-/**
- * @deprecated use `di.inject(jobApiInjectable)` instead
- */
-export const jobApi = asLegacyGlobalForExtensionApi(jobApiInjectable);

src/renderer/components/+workloads-cronjobs/cron-job-menu.tsx

@@ -7,26 +7,29 @@ import type { KubeObjectMenuProps } from "../kube-object-menu";
 import type { CronJob } from "../../../common/k8s-api/endpoints";
 import { cronJobApi } from "../../../common/k8s-api/endpoints";
 import { MenuItem } from "../menu";
-import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
 import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
+import type { OpenCronJobTriggerDialog } from "./trigger-dialog/open.injectable";
+import openCronJobTriggerDialogInjectable from "./trigger-dialog/open.injectable";
 
 export interface CronJobMenuProps extends KubeObjectMenuProps<CronJob> {}
 
 interface Dependencies {
   openConfirmDialog: OpenConfirmDialog;
+  openCronJobTriggerDialog: OpenCronJobTriggerDialog;
 }
 
 const NonInjectedCronJobMenu = ({
   object,
   toolbar,
   openConfirmDialog,
+  openCronJobTriggerDialog,
 }: Dependencies & CronJobMenuProps) =>  (
   <>
-    <MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
+    <MenuItem onClick={() => openCronJobTriggerDialog(object)}>
       <Icon
         material="play_circle_filled"
         tooltip="Trigger"
@@ -99,5 +102,6 @@ export const CronJobMenu = withInjectables<Dependencies, CronJobMenuProps>(NonIn
   getProps: (di, props) => ({
     ...props,
     openConfirmDialog: di.inject(openConfirmDialogInjectable),
+    openCronJobTriggerDialog: di.inject(openCronJobTriggerDialogInjectable),
   }),
 });

src/renderer/components/+workloads-cronjobs/cron-job-trigger-dialog-cluster-frame-child-component.injectable.ts

@@ -4,7 +4,7 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { computed } from "mobx";
-import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
+import { CronJobTriggerDialog } from "./trigger-dialog/view";
 import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
 
 const cronJobTriggerDialogClusterFrameChildComponentInjectable = getInjectable({

src/renderer/components/+workloads-cronjobs/trigger-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 cronJobTriggerDialogStateInjectable from "./state.injectable";
+
+const closeCronJobTriggerDialogInjectable = getInjectable({
+  id: "close-cron-job-trigger-dialog",
+  instantiate: (di) => {
+    const state = di.inject(cronJobTriggerDialogStateInjectable);
+
+    return action(() => state.set(undefined));
+  },
+});
+
+export default closeCronJobTriggerDialogInjectable;

src/renderer/components/+workloads-cronjobs/trigger-dialog/open.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 type { CronJob } from "../../../../common/k8s-api/endpoints";
+import cronJobTriggerDialogStateInjectable from "./state.injectable";
+
+export type OpenCronJobTriggerDialog = (cronJob: CronJob) => void;
+
+const openCronJobTriggerDialogInjectable = getInjectable({
+  id: "open-cron-job-trigger-dialog",
+  instantiate: (di): OpenCronJobTriggerDialog => {
+    const state = di.inject(cronJobTriggerDialogStateInjectable);
+
+    return action((cronJob) => state.set(cronJob));
+  },
+});
+
+export default openCronJobTriggerDialogInjectable;

src/renderer/components/+workloads-cronjobs/trigger-dialog/state.injectable.ts

@@ -0,0 +1,14 @@
+/**
+ * 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";
+import type { CronJob } from "../../../../common/k8s-api/endpoints";
+
+const cronJobTriggerDialogStateInjectable = getInjectable({
+  id: "cron-job-trigger-dialog-state",
+  instantiate: () => observable.box<CronJob>(),
+});
+
+export default cronJobTriggerDialogStateInjectable;

src/renderer/components/+workloads-cronjobs/trigger-dialog/view.tsx

@@ -3,45 +3,45 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./cronjob-trigger-dialog.scss";
+import "./view.scss";
 
 import React, { Component } from "react";
+import type { IObservableValue } from "mobx";
 import { 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 type { CronJob } from "../../../common/k8s-api/endpoints";
+import type { CronJob, JobApi } from "../../../../common/k8s-api/endpoints";
-import { jobApi } from "../../../common/k8s-api/endpoints";
+import { Notifications } from "../../notifications";
-import { Notifications } from "../notifications";
+import { cssNames } from "../../../utils";
-import { cssNames } from "../../utils";
+import { Input } from "../../input";
-import { Input } from "../input";
+import { systemName, maxLength } from "../../input/input_validators";
-import { systemName, maxLength } from "../input/input_validators";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import closeCronJobTriggerDialogInjectable from "./close.injectable";
+import jobApiInjectable from "../../../../common/k8s-api/endpoints/job.api.injectable";
+import cronJobTriggerDialogStateInjectable from "./state.injectable";
 
 export interface CronJobTriggerDialogProps extends Partial<DialogProps> {
 }
 
-const dialogState = observable.box<CronJob | undefined>();
+interface Dependencies {
+  state: IObservableValue<CronJob | undefined>;
+  jobApi: JobApi;
+  closeCronJobTriggerDialog: () => void;
+}
 
 @observer
-export class CronJobTriggerDialog extends Component<CronJobTriggerDialogProps> {
+class NonInjectedCronJobTriggerDialog extends Component<CronJobTriggerDialogProps & Dependencies> {
   @observable jobName = "";
 
-  constructor(props: CronJobTriggerDialogProps) {
+  constructor(props: CronJobTriggerDialogProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
 
-  static open(cronjob: CronJob) {
-    dialogState.set(cronjob);
-  }
-
-  static close() {
-    dialogState.set(undefined);
-  }
-
   onOpen = () => {
-    const cronJob = dialogState.get();
+    const cronJob = this.props.state.get();
 
     this.jobName = cronJob ? `${cronJob.getName()}-manual-${Math.random().toString(36).slice(2, 7)}` : "";
     this.jobName = this.jobName.slice(0, 63);
@@ -53,7 +53,7 @@ export class CronJobTriggerDialog extends Component<CronJobTriggerDialogProps> {
     }
 
     try {
-      await jobApi.create({
+      await this.props.jobApi.create({
         name: this.jobName,
         namespace: cronJob.getNs(),
       }, {
@@ -71,7 +71,7 @@ export class CronJobTriggerDialog extends Component<CronJobTriggerDialogProps> {
         },
       });
 
-      CronJobTriggerDialog.close();
+      this.props.closeCronJobTriggerDialog();
     } catch (err) {
       Notifications.checkedError(err, "Unknown error occurred while creating job");
     }
@@ -86,7 +86,7 @@ export class CronJobTriggerDialog extends Component<CronJobTriggerDialogProps> {
             <span>{cronJob.getName()}</span>
           </h5>
         )}
-        done={CronJobTriggerDialog.close}
+        done={this.props.closeCronJobTriggerDialog}
       >
         <WizardStep
           contentClass="flex gaps column"
@@ -115,8 +115,8 @@ export class CronJobTriggerDialog extends Component<CronJobTriggerDialogProps> {
   }
 
   render() {
-    const { className, ...dialogProps } = this.props;
+    const { className, state, closeCronJobTriggerDialog, jobApi, ...dialogProps } = this.props;
-    const cronJob = dialogState.get();
+    const cronJob = state.get();
 
     return (
       <Dialog
@@ -124,10 +124,19 @@ export class CronJobTriggerDialog extends Component<CronJobTriggerDialogProps> {
         isOpen={Boolean(cronJob)}
         className={cssNames("CronJobTriggerDialog", className)}
         onOpen={this.onOpen}
-        close={CronJobTriggerDialog.close}
+        close={closeCronJobTriggerDialog}
       >
         {cronJob && this.renderContents(cronJob)}
       </Dialog>
     );
   }
 }
+
+export const CronJobTriggerDialog = withInjectables<Dependencies, CronJobTriggerDialogProps>(NonInjectedCronJobTriggerDialog, {
+  getProps: (di, props) => ({
+    ...props,
+    closeCronJobTriggerDialog: di.inject(closeCronJobTriggerDialogInjectable),
+    jobApi: di.inject(jobApiInjectable),
+    state: di.inject(cronJobTriggerDialogStateInjectable),
+  }),
+});