From 71d587296a13d26811df6f2c675819ad674fa169 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marco=20Vidal=20Garc=C3=ADa?= <marco.vidal@cern.ch>
Date: Thu, 1 Oct 2020 12:53:08 +0200
Subject: [PATCH] ui: make notifications more generic

partially addresses #123
---
 reana-ui/src/actions.js                       | 19 ++++++++--
 reana-ui/src/components/Notification.js       | 38 ++++++++++++-------
 .../pages/workflowDetails/WorkflowDetails.js  |  3 ++
 .../components/WorkflowDeleteModal.js         |  2 +-
 reana-ui/src/reducers.js                      | 25 ++++++++----
 reana-ui/src/selectors.js                     |  4 +-
 6 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/reana-ui/src/actions.js b/reana-ui/src/actions.js
index 8075b470..30400761 100644
--- a/reana-ui/src/actions.js
+++ b/reana-ui/src/actions.js
@@ -25,7 +25,8 @@ import {
 } from "./selectors";
 
 export const ERROR = "Error";
-export const CLEAR_ERROR = "Clear error";
+export const NOTIFICATION = "Notification";
+export const CLEAR_NOTIFICATION = "Clear notification";
 
 export const CONFIG_FETCH = "Fetch app config info";
 export const CONFIG_RECEIVED = "App config info received";
@@ -78,10 +79,20 @@ const WORKFLOW_SET_STATUS_URL = (id, status) =>
 function errorActionCreator(error, name) {
   const { status, data } = error?.response;
   const { message } = data;
-  return { type: ERROR, name, status, message };
+  return {
+    type: ERROR,
+    name,
+    status,
+    message,
+    header: "An error has occurred",
+  };
+}
+
+export function triggerNotification(header, message) {
+  return { type: NOTIFICATION, header, message };
 }
 
-export const clearError = { type: CLEAR_ERROR };
+export const clearNotification = { type: CLEAR_NOTIFICATION };
 
 export function loadConfig() {
   return async (dispatch) => {
@@ -316,7 +327,7 @@ export function deleteWorkflow(id, workspace = false) {
       )
       .then((resp) => {
         dispatch({ type: WORKFLOW_DELETED, ...resp.data });
-        return resp.data;
+        dispatch(triggerNotification("Success!", resp.data.message));
       })
       .catch((err) => {
         dispatch(
diff --git a/reana-ui/src/components/Notification.js b/reana-ui/src/components/Notification.js
index 428bbbb0..2d45a2a4 100644
--- a/reana-ui/src/components/Notification.js
+++ b/reana-ui/src/components/Notification.js
@@ -13,36 +13,44 @@ import { useDispatch, useSelector } from "react-redux";
 import { Container, Message, Transition } from "semantic-ui-react";
 import PropTypes from "prop-types";
 
-import { clearError } from "../actions";
-import { getError } from "../selectors";
+import { clearNotification } from "../actions";
+import { getNotification } from "../selectors";
 
 import styles from "./Notification.module.scss";
 
 const AUTO_CLOSE_TIMEOUT = 16000;
 
-export default function Notification({ icon, header, message, closable }) {
+export default function Notification({
+  icon,
+  header,
+  message,
+  closable,
+  error,
+  success,
+}) {
   const dispatch = useDispatch();
-  const error = useSelector(getError);
+  const notification = useSelector(getNotification);
   const timer = useRef(null);
 
-  const hide = () => dispatch(clearError);
-  const visible = message || error ? true : false;
+  const hide = () => dispatch(clearNotification);
+  const visible = message || notification ? true : false;
+  const actionIcon = notification?.isError ? "warning sign" : "info circle";
 
   if (closable && visible) {
     clearTimeout(timer.current);
     timer.current = setTimeout(() => hide(), AUTO_CLOSE_TIMEOUT);
   }
-
   return (
     <Transition visible={visible} duration={300}>
       <Container text className={styles.container}>
         <Message
-          icon={icon}
-          header={header}
-          content={message || error?.message}
+          icon={icon || actionIcon}
+          header={header || notification?.header}
+          content={message || notification?.message}
           onDismiss={closable ? hide : null}
           size="small"
-          error
+          error={error || (notification && notification.isError)}
+          success={success || (notification && !notification.isError)}
         />
       </Container>
     </Transition>
@@ -54,11 +62,15 @@ Notification.propTypes = {
   header: PropTypes.string,
   message: PropTypes.string,
   closable: PropTypes.bool,
+  error: PropTypes.bool,
+  success: PropTypes.bool,
 };
 
 Notification.defaultProps = {
-  icon: "warning sign",
-  header: "An error has occurred",
+  icon: null,
+  header: null,
   message: null,
   closable: true,
+  error: false,
+  success: false,
 };
diff --git a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
index 1b36dda9..1a508622 100644
--- a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
+++ b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
@@ -59,8 +59,11 @@ function WorkflowDetails() {
   if (!workflow) {
     return (
       <Notification
+        icon="warning sign"
+        header="An error has occurred"
         message="Sorry, this workflow either does not exist or you are not authorised to see it."
         closable={false}
+        error
       />
     );
   }
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowDeleteModal.js b/reana-ui/src/pages/workflowList/components/WorkflowDeleteModal.js
index 08180c26..b0270db6 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowDeleteModal.js
+++ b/reana-ui/src/pages/workflowList/components/WorkflowDeleteModal.js
@@ -54,7 +54,7 @@ export default function WorkflowDeleteModal({
         <Button
           negative
           onClick={() => {
-            dispatch(deleteWorkflow(id, deleteWorkspace)).then((res) => {
+            dispatch(deleteWorkflow(id, deleteWorkspace)).then(() => {
               onCloseModal();
             });
           }}
diff --git a/reana-ui/src/reducers.js b/reana-ui/src/reducers.js
index 9c19e84b..3278b353 100644
--- a/reana-ui/src/reducers.js
+++ b/reana-ui/src/reducers.js
@@ -11,7 +11,8 @@
 import { combineReducers } from "redux";
 import {
   ERROR,
-  CLEAR_ERROR,
+  NOTIFICATION,
+  CLEAR_NOTIFICATION,
   CONFIG_FETCH,
   CONFIG_RECEIVED,
   CONFIG_ERROR,
@@ -35,7 +36,7 @@ import {
 } from "./actions";
 import { USER_ERROR } from "./errors";
 
-const errorInitialState = null;
+const notificationInitialState = null;
 
 const configInitialState = {
   announcement: null,
@@ -74,13 +75,21 @@ const detailsInitialState = {
   loadingDetails: false,
 };
 
-const error = (state = errorInitialState, action) => {
-  const { name, status, message } = action;
+const notification = (state = notificationInitialState, action) => {
+  const { name, status, message, header } = action;
   switch (action.type) {
     case ERROR:
-      return { ...state, name, status, message };
-    case CLEAR_ERROR:
-      return errorInitialState;
+    case NOTIFICATION:
+      return {
+        ...state,
+        name,
+        status,
+        message,
+        header,
+        isError: action.type === ERROR,
+      };
+    case CLEAR_NOTIFICATION:
+      return notificationInitialState;
     default:
       return state;
   }
@@ -236,7 +245,7 @@ const details = (state = detailsInitialState, action) => {
 };
 
 const reanaApp = combineReducers({
-  error,
+  notification,
   config,
   auth,
   workflows,
diff --git a/reana-ui/src/selectors.js b/reana-ui/src/selectors.js
index 8fbbc024..a9270194 100644
--- a/reana-ui/src/selectors.js
+++ b/reana-ui/src/selectors.js
@@ -10,8 +10,8 @@
 
 import { USER_ERROR } from "./errors";
 
-// Error
-export const getError = (state) => state.error;
+// Notification
+export const getNotification = (state) => state.notification;
 
 // Config
 export const getConfig = (state) => state.config;