Update flash messages - Packs flash message, styling, timeout on success message (#1315)

* New flash message styling - success (4 seconds) and error
* Packs flash messages

changes/issue-1098-flash-messages

@@ -0,0 +1,3 @@
+* Packs success and error messages render
+* Updates styling of flash messages
+* Success flash message only persists for 4 seconds

frontend/components/flash_messages/FlashMessage/FlashMessage.jsx

@@ -6,7 +6,7 @@ import notificationInterface from "interfaces/notification";
 import FleetIcon from "components/icons/FleetIcon";
 import Button from "components/buttons/Button";
 
-import CloseIcon from "../../../../assets/images/icon-close-fleet-blue-16x16@2x.png";
+import CloseIcon from "../../../../assets/images/icon-close-white-16x16@2x.png";
 
 const baseClass = "flash-message";
 
@@ -28,8 +28,15 @@ const FlashMessage = ({
   const alertIcon =
     alertType === "success" ? "success-check" : "warning-filled";
 
+  // Success alerts will not be visible after 4 seconds
+  if (alertType === "success") {
+    setTimeout(function () {
+      document.getElementById(`${klass}`).style.display = "none";
+    }, 4000);
+  }
+
   return (
-    <div className={klass}>
+    <div className={klass} id={klass}>
       <div className={`${baseClass}__content`}>
         <FleetIcon name={alertIcon} /> <span>{message}</span>
         {undoAction && (

frontend/components/flash_messages/FlashMessage/_styles.scss

@@ -16,10 +16,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $core-fleet-blue;
+  color: $core-white;
   padding: $pad-small $pad-medium;
   z-index: 3;
-  background-color: $core-white;
+  background-color: $core-vibrant-blue;
   margin: auto;
   border: 1px solid $ui-fleet-blue-15;
   box-sizing: border-box;
@@ -27,14 +27,16 @@
   border-radius: 8px;
 
   &--success {
+    background-color: $ui-success;
     .fleeticon {
-      color: $ui-success;
+      color: $core-white;
     }
   }
 
   &--error {
+    background-color: $ui-error;
     .fleeticon {
-      color: $ui-error;
+      color: $core-white;
     }
   }
 
@@ -55,7 +57,7 @@
   }
 
   &__undo {
-    color: $core-vibrant-blue;
+    color: $core-white;
     cursor: pointer;
     font-size: $small;
     text-decoration: underline;
@@ -69,7 +71,7 @@
 
     .fleeticon {
       transition: color 150ms ease-in-out;
-      color: $core-fleet-blue;
+      color: $core-white;
       font-size: $small;
 
       &:hover {

frontend/pages/admin/UserManagementPage/UserManagementPage.jsx

@@ -124,7 +124,7 @@ export class UserManagementPage extends Component {
         });
     }
 
-    let userUpdatedFlashMessage = "User updated";
+    let userUpdatedFlashMessage = `Successfully edited ${formData.name}`;
 
     if (userData.email !== formData.email) {
       userUpdatedFlashMessage += `: A confirmation email was sent from ${config.sender_address} to ${formData.email}`;
@@ -139,7 +139,7 @@ export class UserManagementPage extends Component {
         dispatch(
           renderFlash(
             "error",
-            `Couldn't update ${userEditing?.name}. Please try again.`
+            `Couldn not edit ${userEditing?.name}. Please try again.`
           )
         );
         toggleEditUserModal();
@@ -201,7 +201,9 @@ export class UserManagementPage extends Component {
     } else {
       dispatch(userActions.destroy(userEditing))
         .then(() => {
-          dispatch(renderFlash("success", "User deleted"));
+          dispatch(
+            renderFlash("success", `Successfully deleted ${userEditing?.name}.`)
+          );
         })
         .catch(() => {
           dispatch(

frontend/pages/packs/AllPacksPage/AllPacksPage.jsx

@@ -85,7 +85,15 @@ export class AllPacksPage extends Component {
           return dispatch(destroy(pack));
         }
 
-        return dispatch(update(pack, { disabled }));
+        return dispatch(update(pack, { disabled }))
+          .then(() => {
+            dispatch(renderFlash("success", "Packs successfully updated."));
+          })
+          .catch(() =>
+            dispatch(
+              renderFlash("error", "Could not update packs. Please try again.")
+            )
+          );
       });
 
       return Promise.all(promises)
@@ -102,7 +110,12 @@ export class AllPacksPage extends Component {
 
           return false;
         })
-        .catch(() => dispatch(renderFlash("error", "Something went wrong.")));
+        .catch(() => {
+          dispatch(
+            renderFlash("error", "Could not delete packs. Please try again.")
+          );
+          this.setState({ showModal: false });
+        });
     };
   };
 
@@ -173,7 +186,11 @@ export class AllPacksPage extends Component {
     const { dispatch } = this.props;
     const { update } = packActions;
 
-    return dispatch(update(pack, updatedAttrs));
+    return dispatch(update(pack, updatedAttrs)).catch(() => {
+      dispatch(
+        renderFlash("error", "Could not update pack. Please try again.")
+      );
+    });
   };
 
   getPacks = () => {

frontend/pages/packs/EditPackPage/EditPackPage.jsx

@@ -173,7 +173,9 @@ export class EditPackPage extends Component {
     const { dispatch, isEdit, packID } = this.props;
 
     if (isEdit) {
-      return dispatch(push(PATHS.PACK({ id: packID })));
+      dispatch(push(PATHS.PACK({ id: packID })));
+      dispatch(renderFlash("success", `Pack successfully updated.`));
+      return null;
     }
 
     return dispatch(push(PATHS.EDIT_PACK({ id: packID })));
@@ -202,7 +204,15 @@ export class EditPackPage extends Component {
     const { update } = packActions;
     const updatedPack = deepDifference(formData, pack);
 
-    return dispatch(update(pack, updatedPack)).then(() => this.onToggleEdit());
+    return dispatch(update(pack, updatedPack))
+      .then(() => {
+        this.onToggleEdit();
+      })
+      .catch(() => {
+        dispatch(
+          renderFlash("error", `Could not update pack. Please try again.`)
+        );
+      });
   };
 
   handleRemoveScheduledQueries = (scheduledQueryIDs) => {
@@ -227,9 +237,20 @@ export class EditPackPage extends Component {
       pack_id: packID,
     };
 
-    dispatch(create(scheduledQueryData)).catch(() => {
-      dispatch(renderFlash("error", "Unable to schedule your query."));
-    });
+    dispatch(create(scheduledQueryData))
+      // Will not render query name without declaring scheduledQueryData twice
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      .then((scheduledQueryData) => {
+        dispatch(
+          renderFlash(
+            "success",
+            `${scheduledQueryData.name} successfully scheduled to pack.`
+          )
+        );
+      })
+      .catch(() => {
+        dispatch(renderFlash("error", "Unable to schedule your query."));
+      });
 
     return false;
   };

frontend/pages/packs/PackComposerPage/PackComposerPage.jsx

@@ -4,6 +4,8 @@ import { connect } from "react-redux";
 import { noop } from "lodash";
 import { push } from "react-router-redux";
 
+import { renderFlash } from "redux/nodes/notifications/actions";
+
 import packActions from "redux/nodes/entities/packs/actions";
 import PackForm from "components/forms/packs/PackForm";
 import PackInfoSidePanel from "components/side_panels/PackInfoSidePanel";
@@ -52,11 +54,18 @@ export class PackComposerPage extends Component {
     const { dispatch } = this.props;
     const { visitPackPage } = this;
 
-    return dispatch(create(formData)).then((pack) => {
-      const { id: packID } = pack;
+    return dispatch(create(formData))
+      .then((pack) => {
+        const { id: packID } = pack;
 
-      return visitPackPage(packID);
-    });
+        return visitPackPage(packID);
+      })
+      .then(() => {
+        dispatch(renderFlash("success", `Pack successfully created.`));
+      })
+      .catch(() => {
+        dispatch(renderFlash("error", "Unable to create pack."));
+      });
   };
 
   render() {