UX: add error message for actions

inveniosoftware · May 30, 2024 · 05b0c1d · 05b0c1d
1 parent f5fefa7
commit 05b0c1d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/...bs/assets/semantic-ui/js/invenio_jobs/administration/search/RunsSearchResultItemLayout.js b/...bs/assets/semantic-ui/js/invenio_jobs/administration/search/RunsSearchResultItemLayout.js
@@ -6,6 +6,7 @@
  * under the terms of the MIT License; see LICENSE file for more details.
  */
 
+import { NotificationContext } from "@js/invenio_administration";
 import { i18next } from "@translations/invenio_app_rdm/i18next";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
@@ -16,21 +17,21 @@ import { StatusFormatter } from "./StatusFormatter";
 import { StopButton } from "./StopButton";
 
 class SearchResultItemComponent extends Component {
-  // constructor(props) {
-  //   super(props);
-  //   this.state = {
-  //     error: "",
-  //   };
-  // }
+  static contextType = NotificationContext;
+
+  onError = (e) => {
+    const { addNotification } = this.context;
+    addNotification({
+      title: i18next.t("Error"),
+      content: e.message,
+      type: "error",
+    });
+    console.error(e);
+  };
 
   render() {
     const { result } = this.props;
 
-    // const handleError = (errorMessage) => {
-    //   console.error(errorMessage);
-    //   this.setState({ error: errorMessage });
-    // };
-
     return (
       <Table.Row>
         <Table.Cell
@@ -58,7 +59,7 @@ class SearchResultItemComponent extends Component {
           collapsing
           className=""
         >
-          {result.title}
+          {result.message}
         </Table.Cell>
         {result.started_by ? (
           <Table.Cell
@@ -84,7 +85,7 @@ class SearchResultItemComponent extends Component {
         )}
         <Table.Cell collapsing>
           {result.status === "RUNNING" || result.status === "QUEUED" ? (
-            <StopButton stopURL={result.links.stop} />
+            <StopButton stopURL={result.links.stop} onError={this.onError} />
           ) : (
             ""
           )}

diff --git a/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/search/StatusFormatter.js b/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/search/StatusFormatter.js
@@ -45,7 +45,7 @@ export const StatusFormatter = ({ status }) => {
       <BoolFormatter
         tooltip={i18next.t("Cancelling")}
         icon="ban"
-        color="yellow"
+        color="red"
         value={status === "CANCELLED"}
       />
     </span>

diff --git a/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/search/StopButton.js b/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/search/StopButton.js
@@ -10,7 +10,7 @@ import { i18next } from "@translations/invenio_app_rdm/i18next";
 import { http } from "react-invenio-forms";
 import PropTypes from "prop-types";
 
-export const StopButton = ({ stopURL }) => {
+export const StopButton = ({ stopURL, onError }) => {
   const [loading, setLoading] = useState(false);
 
   const handleClick = async () => {
@@ -20,7 +20,7 @@ export const StopButton = ({ stopURL }) => {
       setLoading(false);
     } catch (error) {
       setLoading(false);
-      // onError(error.response.data.message);
+      onError(error);
     }
   };
 
@@ -42,4 +42,5 @@ export const StopButton = ({ stopURL }) => {
 
 StopButton.propTypes = {
   stopURL: PropTypes.string.isRequired,
+  onError: PropTypes.func.isRequired,
 };