Change Profile Avatar layout and logic (#1859)

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',

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 {

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('[email protected]', '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('[email protected]', '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');
       });
     });
   });

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();
 

test/e2e-test-application/src/luigi-config/extended/auth.js

@@ -23,7 +23,7 @@ class Auth {
         resolve({
           name: 'Luigi User',
           email: '[email protected]'
-          // picture: '/assets/github-logo.png'
+          //picture: '/assets/favicon-sap.ico'
         });
       });
     }