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 = `
Role: ${roleName}
`
+ const uuidTooltip = uuid.v4()
+
+ return (
+
+
+
+
+ )
+}
+
+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;