refactor: turn JobRunsHeader into a component

invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/search/JobRunsHeader.js

@@ -1,26 +1,69 @@
 import { RunButton } from "./RunButton";
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { Component } from "react";
+import { NotificationContext } from "@js/invenio_administration";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import PropTypes from "prop-types";
+import { http } from "react-invenio-forms";
 
-export async function JobRunsHeader(pidValue) {
-  fetch("/api/jobs/" + pidValue)
-    .then((response) => response.json())
-    .then((data) => {
-      if (data.title) {
-        const titleElem = document.getElementById("title");
-        if (titleElem) {
-          titleElem.innerText = data.title;
-          const descriptionElem = document.getElementById("description");
-          if (descriptionElem && data.description) {
-            descriptionElem.innerText = data.description;
-          }
-        }
-      }
+export class JobRunsHeaderComponent extends Component {
+  constructor(props) {
+    super();
 
-      const actions = document.getElementById("actions");
-      ReactDOM.render(
-        <RunButton jobId={data.id} config={data.default_args ?? {}} />,
-        actions
-      );
+    this.state = {
+      jobId: props.jobId,
+      title: "Job Details",
+      description: "",
+      config: {},
+    };
+  }
+
+  componentDidMount() {
+    const { jobId } = this.state;
+    http
+      .get("/api/jobs/" + jobId)
+      .then((response) => response.data)
+      .then((data) => {
+        this.setState({
+          ...(data.title && { title: data.title }),
+          ...(data.description && { description: data.description }),
+          ...(data.default_args && { config: data.default_args }),
+        });
+      });
+  }
+
+  static contextType = NotificationContext;
+
+  onError = (e) => {
+    const { addNotification } = this.context;
+    addNotification({
+      title: i18next.t("Error"),
+      content: e.message,
+      type: "error",
     });
+    console.error(e);
+  };
+
+  render() {
+    const { jobId } = this.props;
+    const { title, description, config } = this.state;
+    return (
+      <>
+        <div className="column six wide">
+          <h1 className="ui header m-0">{title}</h1>
+          <p className="ui grey header">{description}</p>
+        </div>
+        <div className="column ten wide right aligned">
+          <RunButton
+            jobId={jobId}
+            config={config ?? {}}
+            onError={this.onError}
+          />
+        </div>
+      </>
+    );
+  }
 }
+
+JobRunsHeaderComponent.propTypes = {
+  jobId: PropTypes.string.isRequired,
+};