UX: add error message for actions

inveniosoftware · May 30, 2024 · fedd282 · fedd282
1 parent eb19ac6
commit fedd282
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 37 deletions.
diff --git a/...obs/assets/semantic-ui/js/invenio_jobs/administration/search/JobSearchResultItemLayout.js b/...obs/assets/semantic-ui/js/invenio_jobs/administration/search/JobSearchResultItemLayout.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 { BoolFormatter } from "@js/invenio_administration";
 import { i18next } from "@translations/invenio_app_rdm/i18next";
 import PropTypes from "prop-types";
@@ -18,6 +19,18 @@ import { http } from "react-invenio-forms";
 import { StatusFormatter } from "./StatusFormatter";
 
 class SearchResultItemComponent extends Component {
+  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;
 
@@ -105,7 +118,7 @@ class SearchResultItemComponent extends Component {
             <Icon name="play" />
             Run now
           </Button>
-          {/* <RunButton jobId={result.id} config={result.default_args ?? {}} /> */}
+          {/* <RunButton jobId={result.id} config={result.default_args ?? {}} onError={this.onError} /> */}
         </Table.Cell>
       </Table.Row>
     );

diff --git a/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/search/RunButton.js b/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/search/RunButton.js
@@ -6,20 +6,33 @@
 
 import { i18next } from "@translations/invenio_app_rdm/i18next";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useState } from "react";
+import { http } from "react-invenio-forms";
 import {
   Button,
   Dropdown,
   DropdownMenu,
   Form,
   FormInput,
 } from "semantic-ui-react";
-import { http } from "react-invenio-forms";
 
-export const RunButton = ({ jobId, config }) => {
+export const RunButton = ({ jobId, config, onError }) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+    try {
+      await http.post("/api/jobs/" + jobId + "/runs");
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+      onError(error);
+    }
+  };
+
   return (
     <Dropdown
-      text={i18next.t("Run")}
+      text={i18next.t("Run now")}
       icon="play"
       floating
       labeled
@@ -42,9 +55,8 @@ export const RunButton = ({ jobId, config }) => {
           <Button
             type="submit"
             content="Run"
-            onClick={() => {
-              http.post("/api/jobs/" + jobId + "/runs");
-            }}
+            onClick={handleClick}
+            loading={loading}
           />
         </Form>
       </DropdownMenu>
@@ -55,6 +67,7 @@ export const RunButton = ({ jobId, config }) => {
 RunButton.propTypes = {
   jobId: PropTypes.string.isRequired,
   config: PropTypes.object,
+  onError: PropTypes.func.isRequired,
 };
 
 RunButton.defaultProps = {

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("Status ") + e.status,
+      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
@@ -4,24 +4,25 @@
 // Invenio RDM Records 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 React, { useState } from "react";
-import { Icon, Button } from "semantic-ui-react";
 import { i18next } from "@translations/invenio_app_rdm/i18next";
-import { http } from "react-invenio-forms";
 import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { http } from "react-invenio-forms";
+import { Button, Icon } from "semantic-ui-react";
 
-export const StopButton = ({ stopURL }) => {
+export const StopButton = ({ stopURL, onError }) => {
   const [loading, setLoading] = useState(false);
 
   const handleClick = async () => {
     setLoading(true);
-    try {
-      await http.post(stopURL);
-      setLoading(false);
-    } catch (error) {
-      setLoading(false);
-      // onError(error.response.data.message);
-    }
+    await http.post(stopURL).catch((error) => {
+      if (error.response) {
+        onError(error.response.data);
+      } else {
+        onError(error);
+      }
+    });
+    setLoading(false);
   };
 
   return (
@@ -42,4 +43,5 @@ export const StopButton = ({ stopURL }) => {
 
 StopButton.propTypes = {
   stopURL: PropTypes.string.isRequired,
+  onError: PropTypes.func.isRequired,
 };
diff --git a/invenio_jobs/templates/semantic-ui/invenio_jobs/system/jobs/jobs-details.html b/invenio_jobs/templates/semantic-ui/invenio_jobs/system/jobs/jobs-details.html
@@ -15,12 +15,12 @@
 
     <div class="ui container fluid pl-10 pr-10 pt-10 pb-10">
       {{ go_back() }}
-    <div class="ui grid">
+    <div id='header' class="ui grid">
       <div class="column six wide">
-        <h1 id='title' class="ui header m-0">{{ title or name }}</h1>
-        <p id="description" class="ui grey header"></p>
+        <h1 class="ui header m-0">{{ title or name }}</h1>
+        <p class="ui grey header"></p>
       </div>
-      <div id="actions" class="column ten wide right aligned"></div>
+      <div class="column ten wide right aligned"></div>
     </div>
       {% block admin_page_content %}
         <div class="ui divider" aria-hidden="true"></div>