From 61635225dcb236cb4c99148dd8d02e846e373051 Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Tue, 9 Mar 2021 09:43:37 -0800
Subject: [PATCH] Front end style and experience fixes (#425)

This PR includes several style and experience fixes discovered during a front end QA pass 3-9-2021

Fixes include:
- The content on _Osquery options_ page now fills the entire width of the new layout
- Add consistent messaging in the SMTP warning on the _Organization settings_ and the _User management_ page
- Add spacing consistent with styles for the buttons in the "Delete label" modal have
- Make scroll behavior of  `<FlashMessage />` behave with the new top navigation
- Remove the SMTP warning from the _Organization settings_ page
---
 .../flash_messages/FlashMessage/_styles.scss  |  2 +-
 .../admin/AppSettingsPage/AppSettingsPage.jsx | 22 +-------
 .../AppSettingsPage/AppSettingsPage.tests.jsx | 50 -------------------
 .../OsqueryOptionsPage/OsqueryOptionsPage.jsx |  2 +-
 .../UserManagementPage/UserManagementPage.jsx |  2 +-
 .../hosts/ManageHostsPage/ManageHostsPage.jsx |  2 +-
 .../pages/hosts/ManageHostsPage/_styles.scss  | 10 ++++
 7 files changed, 15 insertions(+), 75 deletions(-)

diff --git a/frontend/components/flash_messages/FlashMessage/_styles.scss b/frontend/components/flash_messages/FlashMessage/_styles.scss
index 198f03dc2c..75687cdb20 100644
--- a/frontend/components/flash_messages/FlashMessage/_styles.scss
+++ b/frontend/components/flash_messages/FlashMessage/_styles.scss
@@ -9,7 +9,7 @@
 }
 
 .flash-message {
-  @include position(fixed, 52px 0 null 0);
+  @include position(absolute, 0 0 null 0);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx
index d013e68698..3129e4a0d1 100644
--- a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx
+++ b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.jsx
@@ -8,7 +8,6 @@ import configInterface from 'interfaces/config';
 import enrollSecretInterface from 'interfaces/enroll_secret';
 import deepDifference from 'utilities/deep_difference';
 import { renderFlash } from 'redux/nodes/notifications/actions';
-import WarningBanner from 'components/WarningBanner';
 import { updateConfig } from 'redux/nodes/app/actions';
 
 export const baseClass = 'app-settings';
@@ -21,18 +20,6 @@ class AppSettingsPage extends Component {
     enrollSecret: enrollSecretInterface,
   };
 
-  constructor (props) {
-    super(props);
-
-    this.state = { showSmtpWarning: true };
-  }
-
-  onDismissSmtpWarning = () => {
-    this.setState({ showSmtpWarning: false });
-
-    return false;
-  }
-
   onFormSubmit = (formData) => {
     const { appConfig, dispatch } = this.props;
     const diff = deepDifference(formData, appConfig);
@@ -56,10 +43,8 @@ class AppSettingsPage extends Component {
 
   render () {
     const { appConfig, error, enrollSecret } = this.props;
-    const { onDismissSmtpWarning, onFormSubmit } = this;
-    const { showSmtpWarning } = this.state;
+    const { onFormSubmit } = this;
     const { configured: smtpConfigured } = appConfig;
-    const shouldShowWarning = !smtpConfigured && showSmtpWarning;
 
     if (!size(appConfig)) {
       return false;
@@ -70,11 +55,6 @@ class AppSettingsPage extends Component {
     return (
       <div className={`${baseClass} body-wrap`}>
         <p className={`${baseClass}__page-description`}>Set your organization information, Configure SAML and SMTP, and view host enroll secrets.</p>
-        <WarningBanner
-          message="SMTP is not currently configured in Fleet. The &quot;Add new user&quot; feature requires that SMTP is configured in order to send invitation emails. Users may also be added with &quot;fleetctl user create&quot;."
-          onDismiss={onDismissSmtpWarning}
-          shouldShowWarning={shouldShowWarning}
-        />
         <AppConfigForm
           formData={formData}
           handleSubmit={onFormSubmit}
diff --git a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx
index ad9aee3e78..60ad54d9a7 100644
--- a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx
+++ b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx
@@ -8,20 +8,6 @@ const { connectedComponent, reduxMockStore } = testHelpers;
 const baseStore = {
   app: { config: flatConfigStub, enrollSecret: [] },
 };
-const storeWithoutSMTPConfig = {
-  ...baseStore,
-  app: {
-    config: { ...flatConfigStub, configured: false },
-    enrollSecret: [],
-  },
-};
-const storeWithSMTPConfig = {
-  ...baseStore,
-  app: {
-    config: { ...flatConfigStub, configured: true },
-    enrollSecret: [],
-  },
-};
 
 describe('AppSettingsPage - component', () => {
   it('renders', () => {
@@ -30,40 +16,4 @@ describe('AppSettingsPage - component', () => {
 
     expect(page.find('AppSettingsPage').length).toEqual(1);
   });
-
-  it('renders a warning if SMTP has not been configured', () => {
-    const mockStore = reduxMockStore(storeWithoutSMTPConfig);
-    const page = mount(
-      connectedComponent(AppSettingsPage, { mockStore }),
-    ).find('AppSettingsPage');
-
-    const smtpWarning = page.find('WarningBanner');
-
-    expect(smtpWarning.length).toEqual(1);
-    expect(smtpWarning.find('KolideIcon').length).toEqual(1);
-    expect(smtpWarning.text()).toContain('Warning:SMTP is not currently configured in Fleet. The "Add new user" feature requires that SMTP is configured in order to send invitation emails. Users may also be added with "fleetctl user create".');
-  });
-
-  it('dismisses the smtp warning when "DISMISS" is clicked', () => {
-    const mockStore = reduxMockStore(storeWithoutSMTPConfig);
-    const page = mount(
-      connectedComponent(AppSettingsPage, { mockStore }),
-    );
-
-    const smtpWarning = page.find('WarningBanner');
-    const dismissButton = smtpWarning.find('Button').first();
-
-    dismissButton.simulate('click');
-
-    expect(page.find('WarningBanner').html()).toBeFalsy();
-  });
-
-  it('does not render a warning if SMTP has been configured', () => {
-    const mockStore = reduxMockStore(storeWithSMTPConfig);
-    const page = mount(
-      connectedComponent(AppSettingsPage, { mockStore }),
-    ).find('AppSettingsPage');
-
-    expect(page.find('WarningBanner').html()).toBeFalsy();
-  });
 });
diff --git a/frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx b/frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx
index c791afabbd..248f3ada9d 100644
--- a/frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx
+++ b/frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx
@@ -63,7 +63,7 @@ export class OsqueryOptionsPage extends Component {
     const { onSaveOsqueryOptionsFormSubmit } = this;
 
     return (
-      <div className={`${baseClass}__page-wrap has-sidebar`}>
+      <div className={`${baseClass}__page-wrap`}>
         <div className={`${baseClass} body-wrap`}>
           <p className={`${baseClass}__page-description`}>This file describes options returned to osquery when it checks for configuration.</p>
           <div className={`${baseClass}__info-banner`}>
diff --git a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx b/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
index b86646fff2..560a7033a3 100644
--- a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
+++ b/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
@@ -250,7 +250,7 @@ export class UserManagementPage extends Component {
     return (
       <div className={`${baseClass}__smtp-warning-wrapper`}>
         <WarningBanner
-          message="SMTP is not currently configured in Fleet. The &quot;Add new user&quot; features requires that SMTP is configured in order to send invitation emails."
+          message="SMTP is not currently configured in Fleet. The &quot;Invite user&quot; features requires that SMTP is configured in order to send invitation emails. Users may also be added with &quot;fleetctl user create&quot;."
           onResolve={goToAppConfigPage}
           shouldShowWarning={!config.configured}
         />
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
index d40bb18145..8026cc092a 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
@@ -228,8 +228,8 @@ export class ManageHostsPage extends PureComponent {
       >
         <p>Are you sure you wish to delete this label?</p>
         <div className={`${baseClass}__modal-buttons`}>
-          <Button onClick={onDeleteLabel} variant="alert">Delete</Button>
           <Button onClick={toggleDeleteLabelModal} variant="inverse">Cancel</Button>
+          <Button onClick={onDeleteLabel} variant="alert">Delete</Button>
         </div>
       </Modal>
     );
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index c39a433178..9d4505b5d9 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -99,4 +99,14 @@
       }
     }
   }
+
+  &__modal-buttons {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+
+    .button:first-child {
+      margin-right: $pad-base;
+    }
+  }
 }