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

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;

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}

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();
-  });
 });

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`}>

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}
         />

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>
     );

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;
+    }
+  }
 }