Merge branch 'feature/hover-glory' into feature/934-ew-admin_edit-table-rows

# Conflicts:
#	ui/src/admin/components/RolesTable.js

ui/src/admin/components/RoleRow.js

@@ -1,6 +1,30 @@
 import React, {PropTypes} from 'react'
+import _ from 'lodash'
+
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
 
+const PERMISSIONS = [
+  "NoPermissions",
+  "ViewAdmin",
+  "ViewChronograf",
+  "CreateDatabase",
+  "CreateUserAndRole",
+  "AddRemoveNode",
+  "DropDatabase",
+  "DropData",
+  "ReadData",
+  "WriteData",
+  "Rebalance",
+  "ManageShard",
+  "ManageContinuousQuery",
+  "ManageQuery",
+  "ManageSubscription",
+  "Monitor",
+  "CopyShard",
+  "KapacitorAPI",
+  "KapacitorConfigAPI",
+]
+
 const RoleRow = ({role: {name, permissions, users}}) => (
   <tr>
     <td>{name}</td>
@@ -8,8 +32,8 @@ const RoleRow = ({role: {name, permissions, users}}) => (
       {
         permissions && permissions.length ?
         <MultiSelectDropdown
-          items={permissions.map((perm) => perm.name)}
-          selectedItems={[]}
+          items={PERMISSIONS}
+          selectedItems={_.get(permissions, ['0', 'allowed'], [])}
           label={'Select Permissions'}
           onApply={() => '//TODO'}
         /> : '\u2014'
@@ -26,6 +50,9 @@ const RoleRow = ({role: {name, permissions, users}}) => (
         /> : '\u2014'
       }
     </td>
+    <td>
+      🗑
+    </td>
   </tr>
 )
 
@@ -47,4 +74,4 @@ RoleRow.propTypes = {
   }).isRequired,
 }
 
-export default RoleRow
+export default RoleRow

ui/src/admin/components/RolesTable.js

@@ -3,7 +3,20 @@ import RoleRow from 'src/admin/components/RoleRow'
 import EmptyRow from 'src/admin/components/EmptyRow'
 
 const RolesTable = ({roles}) => (
-  <div className="panel panel-minimal">
+  <div className="panel panel-info">
+    <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+      <div className="users__search-widget input-group admin__search-widget">
+        <input
+          type="text"
+          className="form-control"
+          placeholder="Filter Role..."
+        />
+        <div className="input-group-addon">
+          <span className="icon search" aria-hidden="true"></span>
+        </div>
+      </div>
+      <a href="#" className="btn btn-primary">Create Role</a>
+    </div>
     <div className="panel-body">
       <table className="table v-center">
         <thead>
@@ -11,6 +24,7 @@ const RolesTable = ({roles}) => (
             <th>Name</th>
             <th>Permissions</th>
             <th>Users</th>
+            <th></th>
           </tr>
         </thead>
         <tbody>

ui/src/admin/components/UserRow.js

@@ -17,7 +17,7 @@ const UserRow = ({user: {name, roles, permissions}}) => (
     </td>
     <td>
       {
-        permissions && permissions.length ?
+        false && permissions && permissions.length ?
         <MultiSelectDropdown
           items={permissions.map((perm) => perm.name)}
           selectedItems={[]}
@@ -47,4 +47,4 @@ UserRow.propTypes = {
   }).isRequired,
 }
 
-export default UserRow
+export default UserRow

ui/src/style/components/search-widget.scss

@@ -2,10 +2,13 @@
     Custom Search Widget
     ----------------------------------------------
 */
+$search-widget-height: 36px;
+
 .users__search-widget {
   position: relative;
 
   input.form-control {
+    height: $search-widget-height;
     position: relative;
     width: 100%;
     z-index: 1;
@@ -19,7 +22,7 @@
   .input-group-addon {
     padding: 0;
     text-align: center;
-    line-height: 38px;
+    line-height: calc(#{$search-widget-height} - 2px);
     position: absolute;
     color: $g10-wolf;
     top: 0;
@@ -32,4 +35,7 @@
     transition:
       color 0.25s ease;
   }
-}
+}
+.admin__search-widget {
+  width: 300px;
+}

ui/src/style/components/tables.scss

@@ -108,6 +108,40 @@ table .monotype {
   }
 }
 
+
+/*
+    Table Styles for Admin Pages
+    ----------------------------------------------
+*/
+.admin-table {
+  .admin-table--delete {
+    visibility: hidden;
+  }
+  tbody tr {
+    transition: background-color 0.25s ease;
+    &:hover {
+      background-color: $g4-onyx;
+    }
+  }
+  tbody tr:hover .admin-table--delete {
+    visibility: visible;
+  }
+  .dropdown-toggle {
+    background-color: transparent;
+    width: 330px;
+
+    .caret {
+      opacity: 0;
+    }
+  }
+  tbody tr:hover .dropdown-toggle {
+    color: $g20-white !important;
+    background-color: $c-pool;
+
+    .caret {opacity: 1;}
+  }
+}
+
 /*
     Responsive Tables
     ----------------------------------------------
@@ -119,4 +153,4 @@ table .monotype {
     border-color: $g5-pepper;
     @include custom-scrollbar($g5-pepper, $c-pool);
   }
-}
+}

ui/src/style/theme/theme-dark.scss

@@ -25,7 +25,6 @@
   .panel-title {
     color: $g10-wolf !important;
   }
-
   .panel-body {
     padding: 30px;
     background-color: $g3-castle;
@@ -38,24 +37,40 @@
     > *:last-child {
       margin-bottom: 0;
     }
-
-    table {
-      th,td {
-        border-color: $g5-pepper;
-      }
-      th {
-        color: $g17-whisper;
-      }
-      td {
-        color: $g14-chromium;
-      }
-      tbody tr:last-child td {
-        border-bottom: 2px solid $g5-pepper;
-      }
-    }
   }
 }
+.panel.panel-info {
+  background-color: $g3-castle;
+  border: 0;
 
+  .panel-body,
+  .panel-heading {
+    background-color: transparent;
+  }
+  .panel-body {
+    padding: 30px;
+  }
+  .panel-heading {
+    border-color: $g4-onyx;
+    .panel-title { color: $g14-chromium;}
+  }
+}
+.panel .panel-body table {
+  margin: 0;
+
+  th,td {
+    border-color: $g5-pepper;
+  }
+  th {
+    color: $g17-whisper;
+  }
+  td {
+    color: $g14-chromium;
+  }
+  tbody tr:last-child td {
+    border-bottom: 2px solid $g5-pepper;
+  }
+}
 
 
 /*