From 07d42b8ea9c7c9eb78b05d9f84cca3c7180c2696 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 25 Oct 2017 14:14:35 -0700
Subject: [PATCH] Create component to indicate current role to the user

---
 ui/src/shared/components/RoleIndicator.js     | 55 +++++++++++++++++++
 ui/src/style/components/react-tooltips.scss   |  4 ++
 ui/src/style/components/source-indicator.scss |  5 +-
 3 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/shared/components/RoleIndicator.js

diff --git a/ui/src/shared/components/RoleIndicator.js b/ui/src/shared/components/RoleIndicator.js
new file mode 100644
index 000000000..c425c18c8
--- /dev/null
+++ b/ui/src/shared/components/RoleIndicator.js
@@ -0,0 +1,55 @@
+import React, {PropTypes} from 'react'
+import uuid from 'node-uuid'
+
+import {connect} from 'react-redux'
+
+import ReactTooltip from 'react-tooltip'
+
+const getRoleName = ({roles: [{name}, ..._]}) => name
+
+const RoleIndicator = ({me, isUsingAuth}) => {
+  if (!isUsingAuth) {
+    return null
+  }
+
+  const roleName = getRoleName(me)
+  const RoleTooltip = `<h1>Role: <code>${roleName}</code></h1>`
+  const uuidTooltip = uuid.v4()
+
+  return (
+    <div
+      className="role-indicator"
+      data-for={uuidTooltip}
+      data-tip={RoleTooltip}
+    >
+      <span className="icon user" />
+      <ReactTooltip
+        id={uuidTooltip}
+        effect="solid"
+        html={true}
+        place="bottom"
+        class="influx-tooltip"
+      />
+    </div>
+  )
+}
+
+const {arrayOf, bool, shape, string} = PropTypes
+
+RoleIndicator.propTypes = {
+  isUsingAuth: bool.isRequired,
+  me: shape({
+    roles: arrayOf(
+      shape({
+        name: string.isRequired,
+      })
+    ),
+  }),
+}
+
+const mapStateToProps = ({auth: {me, isUsingAuth}}) => ({
+  me,
+  isUsingAuth,
+})
+
+export default connect(mapStateToProps)(RoleIndicator)
diff --git a/ui/src/style/components/react-tooltips.scss b/ui/src/style/components/react-tooltips.scss
index 7dcccf414..2c1e8540d 100644
--- a/ui/src/style/components/react-tooltips.scss
+++ b/ui/src/style/components/react-tooltips.scss
@@ -46,6 +46,10 @@ $tooltip-code-color: $c-potassium;
     line-height: 1.125em;
     letter-spacing: 0;
     font-family: $default-font;
+
+    &:only-child {
+      margin: 0;
+    }
   }
 
   p {
diff --git a/ui/src/style/components/source-indicator.scss b/ui/src/style/components/source-indicator.scss
index 60099d3b3..82f2fe51d 100644
--- a/ui/src/style/components/source-indicator.scss
+++ b/ui/src/style/components/source-indicator.scss
@@ -1,7 +1,8 @@
 /*
-    Source Indicator component styles
-    ----------------------------------------------------------------
+    Source & Role Indicator component styles
+    ----------------------------------------------------------------------------
 */
+.role-indicator,
 .source-indicator {
   @include no-user-select();
   display: inline-block;