Merge pull request #2339 from influxdata/multitenancy_table_polish

Multitenancy Table Polish

ui/src/admin/components/chronograf/OrganizationsTableRowNew.js

@@ -83,6 +83,7 @@ class OrganizationsTableRowNew extends Component {
           disabled={isSaveDisabled}
           onCancel={onCancelCreateOrganization}
           onConfirm={this.handleClickSave}
+          confirmLeft={true}
         />
       </div>
     )

ui/src/admin/components/chronograf/PageHeader.js

@@ -1,23 +0,0 @@
-import React, {PropTypes} from 'react'
-
-const PageHeader = ({currentOrganization}) =>
-  <div className="page-header">
-    <div className="page-header__container">
-      <div className="page-header__left">
-        <h1 className="page-header__title">
-          {currentOrganization.name}
-        </h1>
-      </div>
-    </div>
-  </div>
-
-const {shape, string} = PropTypes
-
-PageHeader.propTypes = {
-  currentOrganization: shape({
-    id: string.isRequired,
-    name: string.isRequired,
-  }).isRequired,
-}
-
-export default PageHeader

ui/src/admin/components/chronograf/UsersTable.js

@@ -57,6 +57,7 @@ class UsersTable extends Component {
           numUsers={users.length}
           onClickCreateUser={this.handleClickCreateUser}
           isCreatingUser={isCreatingUser}
+          organization={organization}
         />
         <div className="panel-body">
           <table className="table table-highlight v-center chronograf-admin-table">
@@ -74,7 +75,6 @@ class UsersTable extends Component {
                 <th style={{width: colProvider}}>Provider</th>
                 <th style={{width: colScheme}}>Scheme</th>
                 <th className="text-right" style={{width: colActions}} />
-                <th /* for DeleteConfirmTableCell */ />
               </tr>
             </thead>
             <tbody>

ui/src/admin/components/chronograf/UsersTableHeader.js

@@ -7,14 +7,19 @@ class UsersTableHeader extends Component {
   }
 
   render() {
-    const {onClickCreateUser, numUsers, isCreatingUser} = this.props
+    const {
+      onClickCreateUser,
+      numUsers,
+      isCreatingUser,
+      organization,
+    } = this.props
 
     const panelTitle = numUsers === 1 ? `${numUsers} User` : `${numUsers} Users`
 
     return (
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">
         <h2 className="panel-title">
-          {panelTitle}
+          {panelTitle} in <em>{organization.name}</em>
         </h2>
         <Authorized requiredRole={ADMIN_ROLE}>
           <button
@@ -31,12 +36,16 @@ class UsersTableHeader extends Component {
   }
 }
 
-const {bool, func, number} = PropTypes
+const {bool, func, shape, string, number} = PropTypes
 
 UsersTableHeader.propTypes = {
   numUsers: number.isRequired,
   onClickCreateUser: func.isRequired,
   isCreatingUser: bool.isRequired,
+  organization: shape({
+    name: string.isRequired,
+    id: string.isRequired,
+  }),
 }
 
 export default UsersTableHeader

ui/src/admin/components/chronograf/UsersTableRow.js

@@ -16,13 +16,7 @@ const UsersTableRow = ({
   onChangeSuperAdmin,
   onDelete,
 }) => {
-  const {
-    colRole,
-    colSuperAdmin,
-    colProvider,
-    colScheme,
-    colActions,
-  } = USERS_TABLE
+  const {colRole, colSuperAdmin, colProvider, colScheme} = USERS_TABLE
 
   const dropdownRolesItems = USER_ROLES.map(r => ({
     ...r,
@@ -66,7 +60,6 @@ const UsersTableRow = ({
       <td style={{width: colScheme}}>
         {user.scheme}
       </td>
-      <td className="text-right" style={{width: colActions}} />
       <DeleteConfirmTableCell
         text="Remove"
         onDelete={onDelete}

ui/src/admin/constants/chronografTableSizing.js

@@ -3,5 +3,5 @@ export const USERS_TABLE = {
   colSuperAdmin: 90,
   colProvider: 170,
   colScheme: 90,
-  colActions: 68,
+  colActions: 80,
 }

ui/src/admin/containers/AdminChronografPage.js

@@ -5,7 +5,6 @@ import {bindActionCreators} from 'redux'
 import * as adminChronografActionCreators from 'src/admin/actions/chronograf'
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
 
-import PageHeader from 'src/admin/components/chronograf/PageHeader'
 import AdminTabs from 'src/admin/components/chronograf/AdminTabs'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
@@ -67,23 +66,27 @@ class AdminChronografPage extends Component {
 
     return (
       <div className="page">
-        <PageHeader currentOrganization={currentOrganization} />
+        <div className="page-header">
+          <div className="page-header__container">
+            <div className="page-header__left">
+              <h1 className="page-header__title">Chronograf Admin</h1>
+            </div>
+          </div>
+        </div>
         <FancyScrollbar className="page-contents">
           {users
             ? <div className="container-fluid">
                 <div className="row">
-                  <div className="col-xs-12">
-                    <AdminTabs
-                      meRole={meRole}
-                      // UsersTable
-                      users={users}
-                      organization={currentOrganization}
-                      onCreateUser={this.handleCreateUser}
-                      onUpdateUserRole={this.handleUpdateUserRole()}
-                      onUpdateUserSuperAdmin={this.handleUpdateUserSuperAdmin()}
-                      onDeleteUser={this.handleDeleteUser()}
-                    />
-                  </div>
+                  <AdminTabs
+                    meRole={meRole}
+                    // UsersTable
+                    users={users}
+                    organization={currentOrganization}
+                    onCreateUser={this.handleCreateUser}
+                    onUpdateUserRole={this.handleUpdateUserRole()}
+                    onUpdateUserSuperAdmin={this.handleUpdateUserSuperAdmin()}
+                    onDeleteUser={this.handleDeleteUser()}
+                  />
                 </div>
               </div>
             : <div className="page-spinner" />}

ui/src/style/components/organizations-table.scss

@@ -123,8 +123,8 @@ input[type="text"].form-control.orgs-table--input {
   > .orgs-table--name,
   > .orgs-table--name:hover,
   > .orgs-table--default-role {
-    color: $g15-platinum;
-    font-weight: 700;
+    color: $g17-whisper;
+    font-weight: 500;
   }
   > .orgs-table--default-role {
     line-height: 30px;