From 9df24a6a79c5bc4fdbc76eb2bd11876f625cbbf7 Mon Sep 17 00:00:00 2001
From: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com>
Date: Fri, 5 Feb 2021 11:14:32 +0100
Subject: [PATCH] Change Profile Avatar layout and logic (#1859)

---
 core/fundamentalStyleClasses.js               |  2 +-
 core/src/navigation/TopNav.html               | 23 +++++++++++----
 .../tests/0-fiddle/fiddle-navigation.spec.js  | 28 +++++++++++--------
 .../1-angular/user_settings_dialog.spec.js    |  2 +-
 .../src/luigi-config/extended/auth.js         |  2 +-
 5 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/core/fundamentalStyleClasses.js b/core/fundamentalStyleClasses.js
index 2862b50aea..b6a516765a 100644
--- a/core/fundamentalStyleClasses.js
+++ b/core/fundamentalStyleClasses.js
@@ -5,7 +5,7 @@ module.exports = [
   './node_modules/fundamental-styles/dist/action-bar.css',
   // './node_modules/fundamental-styles/dist/alert.css',
   //'./node_modules/fundamental-styles/dist/file-uploader.css',
-  //'./node_modules/fundamental-styles/dist/avatar.css',
+  './node_modules/fundamental-styles/dist/avatar.css',
   //'./node_modules/fundamental-styles/dist/badge.css',
   './node_modules/fundamental-styles/dist/bar.css',
   //'./node_modules/fundamental-styles/dist/breadcrumb.css',
diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html
index c4773cf8b6..17139c9175 100644
--- a/core/src/navigation/TopNav.html
+++ b/core/src/navigation/TopNav.html
@@ -350,21 +350,29 @@
             <div
               class="{userInfo.picture ? 'fd-shellbar__button--user-menu' : '' }"
             >
-              <button
-                class="fd-shellbar__button fd-button"
-                style="{userInfo.picture?`background-image: url('${userInfo.picture}');background-size:30px;background-repeat: no-repeat;background-position: center;`:''}"
+              <div
+                class="fd-button fd-shellbar__button"
                 aria-expanded="{dropDownStates.profilePopover || false}"
                 aria-haspopup="true"
                 on:click="{() => toggleDropdownState('profilePopover')}"
                 title="{userInfo.name ? userInfo.name : userInfo.email}"
+                role="button"
+                data-testid="luigi-topnav-profile-btn"
               >
+                {#if userInfo.picture}
+                <span
+                  class="fd-avatar fd-avatar--xs fd-avatar--circle"
+                  style="background-image:url('{userInfo.picture}')"
+                ></span>
+                {:else}
                 <i
                   class="sap-icon {!userInfo.picture?'sap-icon--customer':'fd-identifier fd-identifier--xs fd-identifier--circle'}"
                 ></i>
-              </button>
+                {/if}
+              </div>
             </div>
             <div
-              class="fd-popover__body fd-popover__body--right"
+              class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
               aria-hidden="{!(dropDownStates.profilePopover || false)}"
               id="profilePopover"
             >
@@ -650,6 +658,11 @@
     .fd-top-nav__icon {
       color: var(--sapShell_TextColor, #fff);
     }
+
+    //Override from FD Styles to remove borders around the profile image
+    .fd-shellbar__avatar--circle {
+      border: none;
+    }
   }
 
   .hideNavComponent {
diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
index 88c42cda4c..32799e14cc 100644
--- a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
@@ -221,7 +221,7 @@ describe('Fiddle', () => {
         cy.visitWithFiddleConfig('/home/two', newConfig);
       });
       it('Static profile, and logging out with customLogoutFn', () => {
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         logoutLink().should('exist');
         loginLink().should('not.exist');
 
@@ -294,7 +294,7 @@ describe('Fiddle', () => {
         newConfig.auth.disableAutoLogin = true;
         visitWithAuthConfig('/', newConfig);
 
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         logoutLink().should('not.exist');
         loginLink().should('exist');
       });
@@ -304,7 +304,7 @@ describe('Fiddle', () => {
         visitWithAuthConfig('/', newConfig);
 
         // Logged out
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         logoutLink().should('not.exist');
         loginLink().should('exist');
 
@@ -313,7 +313,7 @@ describe('Fiddle', () => {
         cy.login('tets@email.com', 'tets', true);
 
         // Logged in
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         loginLink().should('not.exist');
         logoutLink().should('exist');
 
@@ -331,31 +331,33 @@ describe('Fiddle', () => {
         newConfig.auth.disableAutoLogin = false;
         visitLoggedInWithAuthConfig('/', newConfig);
 
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         logoutLink().should('exist');
         loginLink().should('not.exist');
 
         // Verify profile value
         logoutLink().contains('Bye bye');
       });
+
       it('No profile, logged in', () => {
         newConfig.navigation.profile = undefined;
         newConfig.auth.disableAutoLogin = false;
         visitLoggedInWithAuthConfig('/', newConfig);
 
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         logoutLink().should('exist');
         loginLink().should('not.exist');
 
         // Verify default value
         logoutLink().contains('Sign Out');
       });
+
       it('Trigger Login and Logout with Core API', () => {
         newConfig.navigation.profile = undefined;
         newConfig.auth.disableAutoLogin = true;
         visitWithAuthConfig('/', newConfig);
 
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         loginLink().should('exist');
 
         cy.window().then(win => {
@@ -365,7 +367,7 @@ describe('Fiddle', () => {
 
         cy.login('tets@email.com', 'tets', true);
 
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         logoutLink().should('exist');
 
         cy.window().then(win => {
@@ -385,19 +387,21 @@ describe('Fiddle', () => {
           }
         };
         visitLoggedInWithAuthConfig('/', newConfig);
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         cy.get('[data-testid="settings-link"]').should('exist');
         cy.get('[data-testid="settings-link"]').contains('My UserSettings');
       });
+
       it('User settings in profile menu with default label', () => {
         newConfig.settings = {
           userSettings: {}
         };
         visitLoggedInWithAuthConfig('/', newConfig);
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         cy.get('[data-testid="settings-link"]').should('exist');
         cy.get('[data-testid="settings-link"]').contains('Settings');
       });
+
       it('User settings not in the profile menu, if not configured', () => {
         newConfig.navigation.profile = {
           logout: {
@@ -408,7 +412,7 @@ describe('Fiddle', () => {
         newConfig.auth.disableAutoLogin = false;
         visitLoggedInWithAuthConfig('/', newConfig);
 
-        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
         logoutLink().should('exist');
         cy.get('[data-testid="settings-link"]').should('not.exist');
       });
@@ -663,7 +667,7 @@ describe('Fiddle', () => {
         .click();
 
       cy.get('.iframeUserSettingsCtn iframe').then(ifr => {
-        expect(ifr[0].src).to.equal('http://localhost:8080/index.html')
+        expect(ifr[0].src).to.equal('http://localhost:8080/index.html');
       });
     });
   });
diff --git a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
index cfd293f92b..3264e6e5fd 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
@@ -4,7 +4,7 @@ describe('Navigation', () => {
 
   const openSettingsDialogBox = () => {
     //Click on User Icon (top menu right)
-    cy.get('.fd-user-menu button')
+    cy.get('[data-testid="luigi-topnav-profile-btn"]')
       .should('exist')
       .click();
 
diff --git a/test/e2e-test-application/src/luigi-config/extended/auth.js b/test/e2e-test-application/src/luigi-config/extended/auth.js
index cca4ba6b6b..3aaf0eb644 100644
--- a/test/e2e-test-application/src/luigi-config/extended/auth.js
+++ b/test/e2e-test-application/src/luigi-config/extended/auth.js
@@ -23,7 +23,7 @@ class Auth {
         resolve({
           name: 'Luigi User',
           email: 'luigi.user@example.com'
-          // picture: '/assets/github-logo.png'
+          //picture: '/assets/favicon-sap.ico'
         });
       });
     }