Improvements to system console and DM modal (#2930)

Fixing audit and compliance table

Changing prop

Minor improvement to the DM modal

webapp/components/admin_console/connection_security_dropdown_setting.jsx

@@ -10,7 +10,7 @@ import {FormattedMessage} from 'react-intl';
 const CONNECTION_SECURITY_HELP_TEXT = (
     <div className='help-text'>
         <table
-            className='table table-bordered'
+            className='table table-bordered table-margin--none'
             cellPadding='5'
         >
             <tbody>
@@ -80,6 +80,7 @@ export default class ConnectionSecurityDropdownSetting extends React.Component {
                 handleChange={this.props.handleChange}
                 isDisabled={this.props.isDisabled}
                 helpText={CONNECTION_SECURITY_HELP_TEXT}
+                margin='small'
             />
         );
     }

webapp/components/admin_console/dropdown_setting.jsx

@@ -20,7 +20,10 @@ export default class DropdownSetting extends React.Component {
         }
 
         return (
-            <Setting label={this.props.label}>
+            <Setting
+                label={this.props.label}
+                margin={this.props.margin}
+            >
                 <select
                     className='form-control'
                     value={this.props.currentValue}
@@ -43,5 +46,6 @@ DropdownSetting.propTypes = {
     currentValue: React.PropTypes.string.isRequired,
     handleChange: React.PropTypes.func.isRequired,
     isDisabled: React.PropTypes.bool.isRequired,
-    helpText: React.PropTypes.node.isRequired
+    helpText: React.PropTypes.node.isRequired,
+    margin: React.PropTypes.oneOf(['', 'small'])
 };

webapp/components/admin_console/email_settings.jsx

@@ -910,7 +910,7 @@ class EmailSettings extends React.Component {
                         isDisabled={!this.state.sendEmailNotifications}
                     />
                     <div className='form-group'>
-                        <div className='col-sm-8'>
+                        <div className='col-sm-offset-4 col-sm-8'>
                             <div className='help-text'>
                                 <button
                                     className='btn btn-default'

webapp/components/admin_console/setting.jsx

@@ -5,8 +5,13 @@ import React from 'react';
 
 export default class Setting extends React.Component {
     render() {
+        let marginClass;
+        if (this.props.margin === 'small') {
+            marginClass = ' form-group--small';
+        }
+
         return (
-            <div className='form-group'>
+            <div className={'form-group' + marginClass}>
                 <label
                     className='control-label col-sm-4'
                 >
@@ -24,5 +29,6 @@ Setting.defaultProps = {
 
 Setting.propTypes = {
     label: React.PropTypes.node.isRequired,
-    children: React.PropTypes.node.isRequired
+    children: React.PropTypes.node.isRequired,
+    margin: React.PropTypes.oneOf(['', 'small'])
 };

webapp/components/filtered_user_list.jsx

@@ -104,9 +104,26 @@ class FilteredUserList extends React.Component {
 
         let count;
         if (users.length === this.state.users.length) {
-            count = '(' + users.length + ')';
+            count = (
+                <FormattedMessage
+                    id='filtered_user_list.count'
+                    defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}}'
+                    values={{
+                        count: users.length
+                    }}
+                />
+            );
         } else {
-            count = '(' + this.state.users.length + ')';
+            count = (
+                <FormattedMessage
+                    id='filtered_user_list.countTotal'
+                    defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}} of {total} Total'
+                    values={{
+                        count: users.length,
+                        total: this.state.users.length
+                    }}
+                />
+            );
         }
 
         let teamToggle;
@@ -117,7 +134,6 @@ class FilteredUserList extends React.Component {
 
             teamToggle = (
                 <div className='member-select__container'>
-                    <span className='member-count'>{count}</span>
                     <select
                         className='form-control'
                         id='restrictList'
@@ -133,7 +149,7 @@ class FilteredUserList extends React.Component {
                     >
                         <FormattedMessage
                             id='filtered_user_list.show'
-                            defaultMessage='Show'
+                            defaultMessage='Filter:'
                         />
                     </span>
                 </div>
@@ -157,6 +173,9 @@ class FilteredUserList extends React.Component {
                     <div className='col-sm-6'>
                         {teamToggle}
                     </div>
+                    <div className='col-sm-12'>
+                        <span className='member-count pull-left'>{count}</span>
+                    </div>
                 </div>
                 <div
                     ref='userList'

webapp/i18n/en.json

@@ -865,7 +865,7 @@
   "filtered_user_list.countTotal": "{count} {count, plural, =0 {0 members} one {member} other {members}} of {total} Total",
   "filtered_user_list.member": "Member",
   "filtered_user_list.search": "Search members",
-  "filtered_user_list.show": "Show",
+  "filtered_user_list.show": "Filter:",
   "filtered_user_list.team_only": "Members of this Team",
   "find_team.email": "Email",
   "find_team.findDescription": "An email was sent with links to any teams to which you are a member.",

webapp/sass/routes/_admin-console.scss

@@ -28,6 +28,12 @@
         }
     }
 
+    .table {
+        &.table-margin--none {
+            margin-bottom: 0;
+        }
+    }
+
     .sidebar--left {
         &.sidebar--collapsable {
             background: #333;
@@ -154,24 +160,15 @@
         width: 100%;
     }
 
-    .compliance__panel {
+    .compliance__panel,
-        overflow: scroll;
-        width: 100%;
-        height: 400px;
-        border: 1px solid #ddd;
-        margin-top: 10px;
-        padding: 5px;
-        background-color: white;
-    }
-
     .audit__panel {
-        overflow: scroll;
+        background-color: $white;
-        width: 100%;
+        border: 1px solid $border-gray;
-        height: 400px;
+        height: 70vh;
-        border: 1px solid #ddd;
         margin-top: 10px;
+        overflow: auto;
         padding: 5px;
-        background-color: white;
+        width: 100%;
     }
 
     .app__content {
@@ -199,6 +196,10 @@
 
             .form-group {
                 margin-bottom: 25px;
+
+                &.form-group--small {
+                    margin-bottom: 10px;
+                }
             }
 
             .file__upload {
@@ -225,6 +226,10 @@
                     margin: 0;
                 }
 
+                &.no-margin--top {
+                    margin-top: 0;
+                }
+
                 ul,
                 ol {
                     padding-left: 23px;