refactor: turn JobRunsHeader into a component

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

@@ -4,12 +4,16 @@
 // Invenio RDM is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import { initDefaultSearchComponents } from "@js/invenio_administration";
+import {
+  NotificationController,
+  initDefaultSearchComponents,
+} from "@js/invenio_administration";
 import { createSearchAppInit } from "@js/invenio_search_ui";
-import { NotificationController } from "@js/invenio_administration";
-import { SearchResultItemLayout } from "./RunsSearchResultItemLayout";
+import React from "react";
+import ReactDOM from "react-dom";
+import { JobRunsHeaderComponent } from "./JobRunsHeader";
 import { JobSearchLayout } from "./JobSearchLayout";
-import { JobRunsHeader } from "./JobRunsHeader";
+import { SearchResultItemLayout } from "./RunsSearchResultItemLayout";
 
 const domContainer = document.getElementById("invenio-search-config");
 
@@ -30,5 +34,6 @@ createSearchAppInit(
 );
 
 const pidValue = domContainer.dataset.pidValue;
+const header = document.getElementById("header");
 
-JobRunsHeader(pidValue);
+header && ReactDOM.render(<JobRunsHeaderComponent jobId={pidValue} />, header);

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

@@ -1,26 +1,75 @@
+// This file is part of Invenio
+// Copyright (C) 2024 CERN.
+//
+// Invenio RDM is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
 import { RunButton } from "./RunButton";
-import React from "react";
-import ReactDOM from "react-dom";
-
-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;
-          }
-        }
-      }
-
-      const actions = document.getElementById("actions");
-      ReactDOM.render(
-        <RunButton jobId={data.id} config={data.default_args ?? {}} />,
-        actions
-      );
+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 class JobRunsHeaderComponent extends Component {
+  constructor(props) {
+    super();
+
+    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,
+};