feat(navbar): display currently logged in user name

src/__tests__/shared/components/navbar/Navbar.test.tsx

@@ -11,17 +11,18 @@ import thunk from 'redux-thunk'
 
 import Navbar from '../../../../shared/components/navbar/Navbar'
 import Permissions from '../../../../shared/model/Permissions'
+import User from '../../../../shared/model/User'
 import { RootState } from '../../../../shared/store'
 
 const mockStore = createMockStore<RootState, any>([thunk])
 
 describe('Navbar', () => {
   const history = createMemoryHistory()
 
-  const setup = (permissions: Permissions[]) => {
+  const setup = (permissions: Permissions[], user?: User) => {
     const store = mockStore({
       title: '',
-      user: { permissions },
+      user: { permissions, user },
     } as any)
 
     const wrapper = mount(
@@ -34,6 +35,11 @@ describe('Navbar', () => {
     return wrapper
   }
 
+  const userName = {
+    givenName: 'givenName',
+    familyName: 'familyName',
+  } as User
+
   const allPermissions = [
     Permissions.ReadPatients,
     Permissions.WritePatients,
@@ -150,13 +156,24 @@ describe('Navbar', () => {
   })
 
   describe('account', () => {
-    it('should render an account link list', () => {
+    it("should render a link with the user's identification", () => {
+      const expectedUserName = `user.login.currentlySignedInAs ${userName.givenName} ${userName.familyName}`
+
+      const wrapper = setup(allPermissions, userName)
+      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
+      const accountLinkList = hospitalRunNavbar.find('.nav-account')
+      const { children } = accountLinkList.first().props() as any
+
+      expect(children[0].props.children).toEqual([undefined, expectedUserName])
+    })
+
+    it('should render a setting link list', () => {
       const wrapper = setup(allPermissions)
       const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
       const accountLinkList = hospitalRunNavbar.find('.nav-account')
       const { children } = accountLinkList.first().props() as any
 
-      expect(children[0].props.children).toEqual([undefined, 'settings.label'])
+      expect(children[1].props.children).toEqual([undefined, 'settings.label'])
     })
 
     it('should navigate to /settings when the list option is selected', () => {
@@ -167,6 +184,7 @@ describe('Navbar', () => {
 
       act(() => {
         children[0].props.onClick()
+        children[1].props.onClick()
       })
 
       expect(history.location.pathname).toEqual('/settings')

src/shared/components/navbar/Navbar.tsx

@@ -12,7 +12,7 @@ const Navbar = () => {
   const dispatch = useDispatch()
   const history = useHistory()
   const { t } = useTranslator()
-  const { permissions } = useSelector((state: RootState) => state.user)
+  const { permissions, user } = useSelector((state: RootState) => state.user)
 
   const navigateTo = (location: string) => {
     history.push(location)
@@ -89,6 +89,15 @@ const Navbar = () => {
           type: 'link-list-icon',
           alignRight: true,
           children: [
+            {
+              type: 'link',
+              label: `${t('user.login.currentlySignedInAs')} ${user?.givenName} ${
+                user?.familyName
+              }`,
+              onClick: () => {
+                navigateTo('/settings')
+              },
+            },
             {
               type: 'link',
               label: t('settings.label'),

src/shared/locales/enUs/translations/user/index.ts

@@ -13,6 +13,7 @@ export default {
           required: 'Password is required.',
         },
       },
+      currentlySignedInAs: 'Currently signed in as',
     },
   },
 }