fix(UserRow): show project permissions summary in label

fix #622

i18n/english.yml

@@ -773,6 +773,8 @@ components:
     delete: Delete
     deleteConfirm: Are you sure you want to permanently delete this user?
     edit: Edit
+    missingProject: unknown
+    noProjectsFound: No projects
     orgAdmin: Org admin
     save: Save
   UserSettings:

lib/admin/components/UserRow.js

@@ -3,6 +3,7 @@
 import Icon from '@conveyal/woonerf/components/icon'
 import React, {Component} from 'react'
 import {Row, Col, Button, Label as BsLabel, Image, ListGroupItem} from 'react-bootstrap'
+import uuidv4 from 'uuid/v4'
 
 import * as adminActions from '../actions/admin'
 import ConfirmModal from '../../common/components/ConfirmModal'
@@ -15,6 +16,9 @@ import UserSettings from './UserSettings'
 import type {UserProfile, Organization, Project} from '../../types'
 import type {ManagerUserState} from '../../types/reducers'
 
+// Generate random value to avoid conflicting with an existing project name/id.
+const MISSING_PROJECT_VALUE = uuidv4()
+
 type Props = {
   creatingUser: ManagerUserState,
   deleteUser: typeof adminActions.deleteUser,
@@ -41,6 +45,57 @@ export default class UserRow extends Component<Props, State> {
     this.toggleExpansion()
   }
 
+  /**
+   * Constructs label indicating user authorization level (e.g., app/org admin)
+   * or listing the projects the user has access to.
+   */
+  _getUserPermissionLabel = (permissions: UserPermissions) => {
+    const {projects} = this.props
+    // Default label to no projects found.
+    let labelText = this.messages('noProjectsFound')
+    let missingProjectCount = 0
+    let labelStyle, title
+    if (permissions.isApplicationAdmin()) {
+      labelStyle = 'danger'
+      labelText = this.messages('appAdmin')
+    } else if (permissions.canAdministerAnOrganization()) {
+      labelStyle = 'warning'
+      labelText = this.messages('orgAdmin')
+    } else {
+      const missingProjectIds = []
+      // Find project names for any projects that exist.
+      const projectNames = Object.keys(permissions.projectLookup)
+        .map(id => {
+          const project = projects.find(p => p.id === id)
+          // Use name of project for label (or track missing project with uuid).
+          // A missing project can occur when the same Auth0 tenant is used for
+          // multiple instances of Data Tools or if a project is deleted (but
+          // the permission is still attached to the user).
+          if (project) return project.name
+          missingProjectCount++
+          missingProjectIds.push(id)
+          return MISSING_PROJECT_VALUE
+        })
+        .filter(name => name)
+      // Store project ids in title if needed on hover.
+      title = `${this.messages('missingProject')}: ${missingProjectIds.join(', ')}`
+      const uniqueProjectNames = Array.from(new Set(projectNames))
+      // Build message based on number of projects.
+      if (uniqueProjectNames.length > 0) {
+        // Use warning label if user has missing projects.
+        labelStyle = missingProjectCount > 0 ? 'warning' : 'info'
+        labelText = uniqueProjectNames
+          // Replace uuid with missing project count message.
+          .map(name => name === MISSING_PROJECT_VALUE
+            ? `${missingProjectCount} ${this.messages('missingProject')}`
+            : name
+          )
+          .join(', ')
+      }
+    }
+    return <BsLabel title={title} bsStyle={labelStyle}>{labelText}</BsLabel>
+  }
+
   save = () => {
     const settings = this.refs.userSettings.getSettings()
     this.props.updateUserData(this.props.user, settings)
@@ -92,12 +147,8 @@ export default class UserRow extends Component<Props, State> {
           <Col xs={8} sm={5} md={6}>
             <h5>
               {user.email}{' '}
-              {permissions.isApplicationAdmin()
-                ? <BsLabel bsStyle='danger'>{this.messages('appAdmin')}</BsLabel>
-                : permissions.canAdministerAnOrganization()
-                  ? <BsLabel bsStyle='warning'>{this.messages('orgAdmin')}</BsLabel>
-                  : null
-              }{' '}
+              {this._getUserPermissionLabel(permissions)}
+              {' '}
               {userOrganization && creatorIsApplicationAdmin
                 ? <BsLabel bsStyle='default'>{userOrganization.name}</BsLabel>
                 : null