From d991c55167221dfd7e0e7f48a61ad2943cc9ab9c Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 3 Mar 2017 12:33:52 -0800
Subject: [PATCH] Add hover css to role table rows

---
 ui/src/admin/components/RolesTable.js      | 113 +++++++++++++++------
 ui/src/style/components/search-widget.scss |  10 +-
 ui/src/style/components/tables.scss        |  36 ++++++-
 ui/src/style/theme/theme-dark.scss         |  49 +++++----
 4 files changed, 157 insertions(+), 51 deletions(-)

diff --git a/ui/src/admin/components/RolesTable.js b/ui/src/admin/components/RolesTable.js
index 2b25eb50e..4287f2f11 100644
--- a/ui/src/admin/components/RolesTable.js
+++ b/ui/src/admin/components/RolesTable.js
@@ -1,37 +1,88 @@
 import React, {PropTypes} from 'react'
+import Dropdown from 'src/shared/components/MultiSelectDropdown'
+import _ from 'lodash'
 
-const RolesTable = ({roles}) => (
-  <div className="panel panel-minimal">
-    <div className="panel-body">
-      <table className="table v-center">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Permissions</th>
-            <th>Users</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            roles.length ? roles.map((role) => (
-              <tr key={role.name}>
-                <td>{role.name}</td>
-                <td>{role.permissions && role.permissions.map((p) => p.scope).join(', ')}</td>
-                <td>{role.users && role.users.map((u) => u.name).join(', ')}</td>
-              </tr>
-            )) : (() => (
-              <tr className="table-empty-state">
-                <th colSpan="5">
-                  <p>You don&#39;t have any Roles,<br/>why not create one?</p>
-                </th>
-              </tr>
-            ))()
-          }
-        </tbody>
-      </table>
+// TODO: replace with actual GLOBAL permissions endpoint when we get those from enterprise team
+const PERMISSIONS = [
+  "NoPermissions",
+  "ViewAdmin",
+  "ViewChronograf",
+  "CreateDatabase",
+  "CreateUserAndRole",
+  "AddRemoveNode",
+  "DropDatabase",
+  "DropData",
+  "ReadData",
+  "WriteData",
+  "Rebalance",
+  "ManageShard",
+  "ManageContinuousQuery",
+  "ManageQuery",
+  "ManageSubscription",
+  "Monitor",
+  "CopyShard",
+  "KapacitorAPI",
+  "KapacitorConfigAPI"
+]
+
+const RolesTable = ({roles}) => {
+  return (
+    <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 admin-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Permissions</th>
+              <th>Users</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              roles.length ? roles.map((role) => (
+                <tr key={role.name}>
+                  <td>
+                    {role.name}
+                  </td>
+                  <td>
+                    {console.log(role.permissions[0].allowed)}
+                    <Dropdown selectedItems={_.get(role, ['permissions', '0', 'allowed'], [])} items={PERMISSIONS} onApply={() => {}}/>
+                  </td>
+                  <td>
+                    {role.users && role.users.map((u) => u.name).join(', ')}
+                  </td>
+                  <td className="text-right">
+                    <button className="btn btn-xs btn-danger admin-table--delete">Delete</button>
+                  </td>
+                </tr>
+              )) : (() => (
+                <tr className="table-empty-state">
+                  <th colSpan="5">
+                    <p>You don&#39;t have any Roles,<br/>why not create one?</p>
+                  </th>
+                </tr>
+              ))()
+            }
+          </tbody>
+        </table>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 const {
   arrayOf,
diff --git a/ui/src/style/components/search-widget.scss b/ui/src/style/components/search-widget.scss
index d9ce2e6c3..28fbf225c 100644
--- a/ui/src/style/components/search-widget.scss
+++ b/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;
   }
-}
\ No newline at end of file
+}
+.admin__search-widget {
+  width: 300px;
+}
diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss
index c2c3a0cdc..e4b2d5f7d 100644
--- a/ui/src/style/components/tables.scss
+++ b/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);
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/style/theme/theme-dark.scss b/ui/src/style/theme/theme-dark.scss
index 49b4b775b..858818e0f 100644
--- a/ui/src/style/theme/theme-dark.scss
+++ b/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;
+  }
+}
 
 
 /*
@@ -673,4 +688,4 @@ $form-static-checkbox-size: 16px;
     opacity: 1;
     transform: translate(-50%,-50%) scale(1,1);
   }
-}
\ No newline at end of file
+}