From 1196808f3198bb213a84b8536bc06db4012e276b Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Thu, 8 Jul 2021 13:55:26 -0400 Subject: [PATCH] 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 | 3 ++ .../FlashMessage/FlashMessage.jsx | 11 +++++-- .../flash_messages/FlashMessage/_styles.scss | 14 +++++---- .../UserManagementPage/UserManagementPage.jsx | 8 +++-- .../pages/packs/AllPacksPage/AllPacksPage.jsx | 23 ++++++++++++-- .../pages/packs/EditPackPage/EditPackPage.jsx | 31 ++++++++++++++++--- .../PackComposerPage/PackComposerPage.jsx | 17 +++++++--- 7 files changed, 84 insertions(+), 23 deletions(-) create mode 100644 changes/issue-1098-flash-messages diff --git a/changes/issue-1098-flash-messages b/changes/issue-1098-flash-messages new file mode 100644 index 0000000000..3fbb724a3c --- /dev/null +++ b/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 \ No newline at end of file diff --git a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx index 310e9bf946..5c1f31170b 100644 --- a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx +++ b/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 ( -
+
{message} {undoAction && ( diff --git a/frontend/components/flash_messages/FlashMessage/_styles.scss b/frontend/components/flash_messages/FlashMessage/_styles.scss index e501b4bd09..5636f5e834 100644 --- a/frontend/components/flash_messages/FlashMessage/_styles.scss +++ b/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 { diff --git a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx b/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx index cff67d860f..6546f1045d 100644 --- a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx +++ b/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( diff --git a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx b/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx index b43d53bfe8..a5e8690af2 100644 --- a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx +++ b/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 = () => { diff --git a/frontend/pages/packs/EditPackPage/EditPackPage.jsx b/frontend/pages/packs/EditPackPage/EditPackPage.jsx index 7cfb7dc6a5..05cb1fc340 100644 --- a/frontend/pages/packs/EditPackPage/EditPackPage.jsx +++ b/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; }; diff --git a/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx b/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx index f6ca290414..159a0cc7a4 100644 --- a/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx +++ b/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() {