Fetch user initials from UIServer (#1505)

src/components/cylc/workflow/Toolbar.vue

@@ -93,33 +93,47 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         color="primary"
         data-cy="add-view-btn"
       >
-        <v-icon class="icon">{{ $options.icons.add }}</v-icon>
+        <v-icon class="icon">
+          {{ $options.icons.add }}
+        </v-icon>
         <span class="label">
           {{ $t('Toolbar.addView') }}
         </span>
 
         <v-menu
           activator="parent"
           location="bottom"
-          >
+        >
           <v-list>
             <v-list-item
               v-for="view in views"
               :id="`toolbar-add-${ view.name }-view`"
               :key="view.name"
               @click="$emit('add', { viewName: view.name })"
             >
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon>{{ view.icon }}</v-icon>
               </template>
               <v-list-item-title>{{ startCase(view.name) }}</v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
       </v-btn>
-      <v-btn icon size="small">
-        <v-avatar color="primary" size="small">
-          {{ userInitials }}
+      <v-btn
+        icon
+        size="small"
+      >
+        <v-avatar
+          color="primary"
+          size="small"
+        >
+          <div v-if="user.initials">
+            {{ user.initials }}
+          </div>
+          <v-icon
+            v-else
+            :icon="$options.icons.mdiAccount"
+          />
         </v-avatar>
         <v-menu activator="parent">
           <v-card :title="user.username">
@@ -151,7 +165,8 @@ import {
   mdiPlay,
   mdiPlusBoxMultiple,
   mdiStop,
-  mdiViewList
+  mdiViewList,
+  mdiAccount
 } from '@mdi/js'
 import { startCase } from 'lodash'
 import { useToolbar, toolbarHeight } from '@/utils/toolbar'
@@ -255,9 +270,6 @@ export default {
           )
         )
       }
-    },
-    userInitials () {
-      return this.user.username[0].toUpperCase()
     }
   },
 
@@ -315,6 +327,7 @@ export default {
     run: mdiPlay,
     stop: mdiStop,
     mdiCog,
+    mdiAccount
   },
 }
 </script>

src/model/User.model.js

@@ -25,9 +25,10 @@
  * @property {string} owner - UIS owner
  * @property {string[]} permissions - list of permissions
  * @property {string} mode - single or multi user mode
+ * @property {string} initials - user initials
  */
 export default class User {
-  constructor (username, groups, created, admin, server, owner, permissions, mode) {
+  constructor (username, groups, created, admin, server, owner, permissions, mode, initials) {
     // the authenticated user
     // (full info only available when authenticated via the hub)
     this.username = username
@@ -41,5 +42,6 @@ export default class User {
     this.owner = owner
     this.permissions = permissions
     this.mode = mode
+    this.initials = initials
   }
 }

src/services/user.service.js

@@ -34,7 +34,8 @@ class UserService {
         data.server,
         data.owner,
         data.permissions,
-        data.mode
+        data.mode,
+        data.initials
       )
     })
   }

tests/e2e/specs/toolbar.cy.js

@@ -28,9 +28,36 @@ describe('Toolbar component', () => {
       .get('#core-app-bar')
       .should('not.exist')
   })
-  it('Contains an avatar displaying user initial', () => {
+  it('Contains an avatar displaying user icon', () => {
     cy.visit('/#/workspace/one')
     cy
+      .get('#core-app-bar')
+      .get('.v-avatar')
+      .get('.v-icon')
+      .should('exist')
+  })
+})
+
+describe('Toolbar Component authenticated user', () => {
+  beforeEach(() => {
+    cy.intercept('/userprofile', {
+      body: {
+        username: 'user',
+        name: 'user',
+        initials: 'U',
+        owner: 'user',
+        permissions: [
+          'read',
+          'write'
+        ],
+        mode: 'single user'
+      }
+    }).as('test-data-server-owner-input')
+    cy.visit('/#/workspace/one')
+  })
+
+  it('Contains an avatar displaying user initials', () => {
+    cy.wait('@test-data-server-owner-input')
       .get('#core-app-bar')
       .get('.v-avatar')
       .should('have.text', 'U')

tests/unit/model/user.model.spec.js

@@ -27,14 +27,18 @@ describe('User model', () => {
       const server = '/cylc/user/john.foe'
       const owner = 'john.goe'
       const permissions = ['play', 'ping', 'read']
-      const user = new User(name, groups, created, admin, server, owner, permissions)
+      const mode = 'single user'
+      const initials = 'jf'
+      const user = new User(name, groups, created, admin, server, owner, permissions, mode, initials)
       expect(user.username).to.equal(name)
       expect(user.groups.length === 2).to.equal(admin)
       expect(user.admin).to.equal(true)
       expect(user.created).to.equal(created)
       expect(user.server).to.equal(server)
       expect(user.owner).to.equal(owner)
       expect(user.permissions).to.equal(permissions)
+      expect(user.mode).to.equal(mode)
+      expect(user.initials).to.equal(initials)
     })
   })
 })