Merge pull request #791 from hashicorp/chore-enhanced-user-info

Show user "account name" wherever users are listed (if possible)

addons/api/addon/models/user.js

@@ -1,5 +1,6 @@
 import GeneratedUserModel from '../generated/models/user';
 import { attr } from '@ember-data/model';
+import { computed } from '@ember/object';
 import { A } from '@ember/array';
 
 export default class UserModel extends GeneratedUserModel {
@@ -16,6 +17,35 @@ export default class UserModel extends GeneratedUserModel {
   })
   account_ids;
 
+  /**
+   * Represents the user's primary account email, if any.
+   * @type {string}
+   */
+  @attr('string', { readOnly: true }) email;
+
+  /**
+   * Represents the user's primary account full_name, if any.
+   * @type {string}
+   */
+  @attr('string', { readOnly: true }) full_name;
+
+  /**
+   * Represents the user's primary account login_name, if any.
+   * @type {string}
+   */
+  @attr('string', { readOnly: true }) login_name;
+
+  /**
+   * Convenience for getting a reasonable string that names the account.
+   * There are many options, so we fallback in order of precedence.
+   * @type {string}
+   */
+  @computed('email,full_name,login_name,displayName')
+  get accountName() {
+    const { email, full_name, login_name } = this;
+    return email || full_name || login_name;
+  }
+
   // =methods
 
   /**

addons/api/mirage/generated/factories/user.js

@@ -1,5 +1,5 @@
 import { Factory } from 'ember-cli-mirage';
-import { random, date, datatype } from 'faker';
+import { random, date, datatype, internet } from 'faker';
 
 /**
  * GeneratedUserModelFactory
@@ -11,4 +11,5 @@ export default Factory.extend({
   created_time: () => date.recent(),
   updated_time: () => date.recent(),
   disabled: () => datatype.boolean(),
+  email: () => internet.email().toLowerCase(),
 });

addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@@ -27,6 +27,7 @@ $chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%2362
 
   position: relative;
   display: inline-block;
+  vertical-align: middle;
 
   .rose-dropdown-trigger {
     @include type.type(button, semibold);

addons/rose/addon/styles/rose/components/table/_table.scss

@@ -31,7 +31,7 @@
 
   .rose-table-cell,
   .rose-table-header-cell {
-    vertical-align: middle;
+    vertical-align: text-top;
 
     &.align-right {
       text-align: right;

ui/admin/app/components/form/group/add-members/index.hbs

@@ -16,21 +16,33 @@
     <Rose::Table as |table|>
       <table.header as |header|>
         <header.row as |row|>
-          <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.description.label'}}</row.headerCell>
         </header.row>
       </table.header>
       <table.body as |body|>
         {{#each this.availableUsers as |user|}}
           <body.row as |row|>
-            <row.cell>
+            <row.headerCell>
               <form.checkbox
-                @label={{user.id}}
-                @description={{user.description}}
+                @label={{user.displayName}}
                 onChange={{fn this.toggleMember user}}
               />
-            </row.cell>
-            <row.cell>{{user.name}}</row.cell>
+              {{#if user.accountName}}
+                {{!
+                  The following is a formatting hack since we don't have a great
+                  way to manage micro-whitespace or alignment among separate
+                  components without resorting to heavy-handed grids
+                  or contextualization.  This is a one-off.
+                }}
+                <br />
+                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
+                <Rose::Badge>{{user.accountName}}</Rose::Badge>
+              {{/if}}
+            </row.headerCell>
+            <row.cell><code>{{user.id}}</code></row.cell>
+            <row.cell>{{user.description}}</row.cell>
           </body.row>
         {{/each}}
       </table.body>

ui/admin/app/components/form/role/add-principals/index.hbs

@@ -16,22 +16,33 @@
     <Rose::Table as |table|>
       <table.header as |header|>
         <header.row as |row|>
-          <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.description.label'}}</row.headerCell>
         </header.row>
       </table.header>
       <table.body as |body|>
         {{#each this.filteredPrincipals as |principal|}}
           <body.row as |row|>
-            <row.cell>
+            <row.headerCell>
               <form.checkbox
-                @label={{principal.id}}
-                @description={{principal.description}}
+                @label={{principal.displayName}}
                 onChange={{fn this.togglePrincipal principal}}
               />
-            </row.cell>
-            <row.cell>{{principal.name}}</row.cell>
+              {{#if principal.accountName}}
+                {{!
+                  The following is a formatting hack since we don't have a great
+                  way to manage micro-whitespace or alignment among separate
+                  components without resorting to heavy-handed grids
+                  or contextualization.  This is a one-off.
+                }}
+                <br />
+                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
+                <Rose::Badge>{{principal.accountName}}</Rose::Badge>
+              {{/if}}
+            </row.headerCell>
+            <row.cell>{{principal.id}}</row.cell>
             <row.cell>
               <Rose::Badge>{{t
                   (concat
@@ -40,6 +51,7 @@
                   )
                 }}</Rose::Badge>
             </row.cell>
+            <row.cell>{{principal.description}}</row.cell>
           </body.row>
         {{/each}}
       </table.body>

ui/admin/app/templates/scopes/scope/groups/group/members.hbs

@@ -15,6 +15,9 @@
         <body.row as |row|>
           <row.headerCell>
             {{member.displayName}}
+            {{#if member.accountName}}
+              <br /><Rose::Badge>{{member.accountName}}</Rose::Badge>
+            {{/if}}
           </row.headerCell>
           <row.cell>
             <Copyable

ui/admin/app/templates/scopes/scope/roles/role/principals.hbs

@@ -16,6 +16,9 @@
         <body.row as |row|>
           <row.headerCell>
             {{principal.model.displayName}}
+            {{#if principal.model.accountName}}
+              <br /><Rose::Badge>{{principal.model.accountName}}</Rose::Badge>
+            {{/if}}
           </row.headerCell>
           <row.cell>
             {{t (concat 'resources.role.principal.types.' principal.type)}}

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -47,7 +47,13 @@
                   <code>{{sessionAggregate.session.id}}</code>
                 </Copyable>
               </row.headerCell>
-              <row.cell>{{sessionAggregate.user.displayName}}</row.cell>
+              <row.cell>
+                <code>{{sessionAggregate.user.id}}</code>
+                {{#if sessionAggregate.user.accountName}}
+                  <br /><Rose::Badge
+                  >{{sessionAggregate.user.accountName}}</Rose::Badge>
+                {{/if}}
+              </row.cell>
               <row.cell>{{sessionAggregate.target.displayName}}</row.cell>
               <row.cell>
                 <time

ui/admin/app/templates/scopes/scope/users/index.hbs

@@ -46,6 +46,9 @@
                 {{else}}
                   {{user.displayName}}
                 {{/if}}
+                {{#if user.accountName}}
+                  <br /><Rose::Badge>{{user.accountName}}</Rose::Badge>
+                {{/if}}
                 <p>{{user.description}}</p>
               </row.headerCell>
               <row.cell>