Update notification message for inviting users and update notification styles (#1204)

- Add "An invitation email was sent from `sender_address` to `email`." to notification after a new user is successfully invited in the Fleet UI.
- Update notification styles

frontend/components/flash_messages/FlashMessage/FlashMessage.jsx

@@ -6,6 +6,8 @@ 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";
+
 const baseClass = "flash-message";
 
 const FlashMessage = ({
@@ -42,11 +44,12 @@ const FlashMessage = ({
       </div>
       <div className={`${baseClass}__action`}>
         <div className={`${baseClass}__ex`}>
-          <Button
-            className={`${baseClass}__remove ${baseClass}__remove--${alertType}`}
-            variant="unstyled"
+          <button
+            className={`${baseClass}__remove ${baseClass}__remove--${alertType} button--unstyled`}
             onClick={onRemoveFlash}
-          />
+          >
+            <img src={CloseIcon} alt="close icon" />
+          </button>
         </div>
       </div>
     </div>

frontend/components/flash_messages/FlashMessage/_styles.scss

@@ -17,7 +17,7 @@
   align-items: center;
   justify-content: center;
   color: $core-fleet-blue;
-  padding: 0 $pad-small 0 $pad-medium;
+  padding: $pad-small $pad-medium;
   z-index: 3;
   background-color: $core-white;
   margin: auto;
@@ -39,13 +39,14 @@
   }
 
   &__content {
-    flex-grow: 1;
-    text-align: center;
+    display: flex;
+    align-items: center;
 
     span {
       margin-left: 15px;
       margin-right: 15px;
       font-size: $small;
+      white-space: nowrap;
     }
 
     .fleeticon {
@@ -59,14 +60,12 @@
     font-size: $small;
     text-decoration: underline;
     text-transform: uppercase;
+    margin-right: 15px;
   }
 
   &__remove {
-    @include size(30px);
+    height: auto;
     cursor: pointer;
-    text-align: center;
-    margin-left: 15px;
-    height: 37px;
 
     .fleeticon {
       transition: color 150ms ease-in-out;
@@ -82,17 +81,14 @@
   &__ex {
     text-decoration: none;
 
-    .button::after {
-      content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png");
-      transform: scale(0.5);
-      border-radius: 0px;
-      z-index: 4;
-    }
+    button {
+      display: flex;
+      align-items: center;
 
-    .button:hover::after {
-      content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png");
-      transform: scale(0.5);
-      border-radius: 0px;
+      img {
+        height: 16px;
+        width: 16px;
+      }
     }
   }
 }

frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx

@@ -26,7 +26,7 @@ class AppSettingsPage extends Component {
 
     dispatch(updateConfig(diff))
       .then(() => {
-        dispatch(renderFlash("success", "Settings updated!"));
+        dispatch(renderFlash("success", "Settings updated."));
 
         return false;
       })
@@ -38,7 +38,6 @@ class AppSettingsPage extends Component {
         return false;
       });
 
-    window.scrollTo(0, 0);
     return false;
   };
 

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/AgentOptionsPage/AgentOptionsPage.tsx

@@ -61,7 +61,6 @@ const AgentOptionsPage = (props: IAgentOptionsPageProps): JSX.Element => {
     )
       .then(() => {
         dispatch(renderFlash("success", "Successfully saved agent options"));
-        window.scrollTo(0, 0);
       })
       .catch((errors: { [key: string]: any }) => {
         dispatch(renderFlash("error", errors.stack));

frontend/pages/admin/UserManagementPage/UserManagementPage.jsx

@@ -110,7 +110,6 @@ export class UserManagementPage extends Component {
             renderFlash("success", `Successfully edited ${userEditing?.name}`)
           );
           toggleEditUserModal();
-          window.scrollTo(0, 0);
         })
         .catch(() => {
           dispatch(
@@ -120,7 +119,6 @@ export class UserManagementPage extends Component {
             )
           );
           toggleEditUserModal();
-          window.scrollTo(0, 0);
         });
     }
 
@@ -134,7 +132,6 @@ export class UserManagementPage extends Component {
       .then(() => {
         dispatch(renderFlash("success", userUpdatedFlashMessage));
         toggleEditUserModal();
-        window.scrollTo(0, 0);
       })
       .catch(() => {
         dispatch(
@@ -144,12 +141,11 @@ export class UserManagementPage extends Component {
           )
         );
         toggleEditUserModal();
-        window.scrollTo(0, 0);
       });
   };
 
   onCreateUserSubmit = (formData) => {
-    const { dispatch } = this.props;
+    const { dispatch, config } = this.props;
     // Do some data formatting adding `invited_by` for the request to be correct.
     const requestData = {
       ...formData,
@@ -159,17 +155,18 @@ export class UserManagementPage extends Component {
     dispatch(inviteActions.create(requestData))
       .then(() => {
         dispatch(
-          renderFlash("success", `Successfully created ${formData.name}.`)
+          renderFlash(
+            "success",
+            `An invitation email was sent from ${config.sender_address} to ${formData.email}.`
+          )
         );
         this.toggleCreateUserModal();
-        window.scrollTo(0, 0);
       })
       .catch(() => {
         dispatch(
           renderFlash("error", "Could not create user. Please try again.")
         );
         this.toggleCreateUserModal();
-        window.scrollTo(0, 0);
       });
   };
 
@@ -189,7 +186,6 @@ export class UserManagementPage extends Component {
           dispatch(
             renderFlash("success", `Successfully deleted ${userEditing?.name}.`)
           );
-          window.scrollTo(0, 0);
         })
         .catch(() => {
           dispatch(
@@ -198,7 +194,6 @@ export class UserManagementPage extends Component {
               `Could not delete ${userEditing?.name}. Please try again.`
             )
           );
-          window.scrollTo(0, 0);
         });
       toggleDeleteUserModal();
     } else {
@@ -214,7 +209,6 @@ export class UserManagementPage extends Component {
             )
           );
         });
-      window.scrollTo(0, 0);
       toggleDeleteUserModal();
     }
   };

frontend/pages/packs/EditPackPage/EditPackPage.jsx

@@ -189,13 +189,11 @@ export class EditPackPage extends Component {
       .then(() => {
         this.setState({ selectedScheduledQuery: null, selectedQuery: null });
         dispatch(renderFlash("success", "Scheduled Query updated!"));
-        window.scrollTo(0, 0);
       })
       .catch(() => {
         dispatch(
           renderFlash("error", "Unable to update your Scheduled Query.")
         );
-        window.scrollTo(0, 0);
       });
   };
 
@@ -218,7 +216,6 @@ export class EditPackPage extends Component {
     return Promise.all(promises).then(() => {
       this.setState({ selectedScheduledQuery: null, selectedQuery: null });
       dispatch(renderFlash("success", "Scheduled queries removed"));
-      window.scrollTo(0, 0);
     });
   };
 
@@ -233,7 +230,6 @@ export class EditPackPage extends Component {
     dispatch(create(scheduledQueryData)).catch(() => {
       dispatch(renderFlash("error", "Unable to schedule your query."));
     });
-    window.scrollTo(0, 0);
 
     return false;
   };

frontend/pages/queries/QueryPage/QueryPage.jsx

@@ -401,7 +401,6 @@ export class QueryPage extends Component {
       window,
     } = global;
     const { queryResultsToggle, queryPosition } = this.state;
-    window.scrollTo(0, 0);
     const {
       parentNode: { parentNode: parent },
     } = evt.currentTarget;