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 @@
@@ -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'
});
});
}