Create component to indicate current role to the user

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)

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 {

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;