From e0790cbca8b5ff024f0080f20845f9dcc5548fef Mon Sep 17 00:00:00 2001 From: Uliana Caceres <2720077+UlianaMunich@users.noreply.github.com> Date: Mon, 21 Jun 2021 15:28:05 +0200 Subject: [PATCH] Update FD Styles from v0.17 to v0.18 (#2074) --- core/fundamentalStyleClasses.js | 3 +- core/package-lock.json | 6 +- core/package.json | 10 +- core/src/Authorization.html | 176 +++++++---- core/src/AuthorizationSimpleProfileMenu.html | 287 ++++++++++++++++++ core/src/navigation/TopNav.html | 80 +++-- docs/general-settings.md | 5 + docs/luigi-ux-features.md | 2 + docs/navigation-advanced.md | 2 +- docs/navigation-configuration-example.md | 2 +- .../tests/0-fiddle/fiddle-navigation.spec.js | 25 +- .../1-angular/login-flow-nav-dropdown.spec.js | 7 +- .../e2e/tests/1-angular/navigation.spec.js | 65 ++++ test/e2e-test-application/package.json | 10 +- .../src/luigi-config/extended/auth.js | 7 +- .../src/luigi-config/extended/navigation.js | 8 +- .../src/luigi-config/extended/settings.js | 4 + .../docs/src/luigi-config/extended/auth.js | 6 +- 18 files changed, 594 insertions(+), 111 deletions(-) create mode 100644 core/src/AuthorizationSimpleProfileMenu.html diff --git a/core/fundamentalStyleClasses.js b/core/fundamentalStyleClasses.js index a003230c73..aefd480af5 100644 --- a/core/fundamentalStyleClasses.js +++ b/core/fundamentalStyleClasses.js @@ -62,5 +62,6 @@ module.exports = [ //'./node_modules/fundamental-styles/dist/tokenizer.css', './node_modules/fundamental-styles/dist/toolbar.css', //'./node_modules/fundamental-styles/dist/tree.css', - './node_modules/fundamental-styles/dist/helpers.css' + './node_modules/fundamental-styles/dist/helpers.css', + './node_modules/fundamental-styles/dist/user-menu.css' ]; diff --git a/core/package-lock.json b/core/package-lock.json index c2c0e20a14..9e0a5669bb 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -4704,9 +4704,9 @@ "dev": true }, "fundamental-styles": { - "version": "0.17.0", - "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.17.0.tgz", - "integrity": "sha512-jY8Ymi1GAU5Rk/bqf/gFd0cSIvPd0A2la4zVAvp5rOFlzoNW3E0WSVhLFmF5JNUWvhunCLvrHJ7l3LNydCyDWg==", + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.18.0.tgz", + "integrity": "sha512-SI/apMZWQ3ed0oOR+3CieCCTTBBjNfuidCrUz28e+c0BeN92M8ZDUrmeeGxOk35o1xnZrQriOjsgMuhY/jY3Cg==", "dev": true }, "gauge": { diff --git a/core/package.json b/core/package.json index 07ca0ca169..4705628cbd 100644 --- a/core/package.json +++ b/core/package.json @@ -24,7 +24,7 @@ "esm": "^3.2.25", "file-loader": "^2.0.0", "fs-extra": "9.0.0", - "fundamental-styles": "^0.17.0", + "fundamental-styles": "^0.18.0", "jsdom": "15.0.0", "jsdom-global": "3.0.2", "live-server": "^1.2.1", @@ -73,22 +73,22 @@ "bundlesize": [ { "path": "./public/luigi.js", - "maxSize": "460 kB", + "maxSize": "474 kB", "compression": "none" }, { "path": "./public/luigi.css", - "maxSize": "565 kB", + "maxSize": "570 kB", "compression": "none" }, { "path": "./public-ie11/luigi-ie11.js", - "maxSize": "670kB", + "maxSize": "680kB", "compression": "none" }, { "path": "./public-ie11/luigi-ie11.css", - "maxSize": "565 kB", + "maxSize": "571 kB", "compression": "none" } ], diff --git a/core/src/Authorization.html b/core/src/Authorization.html index ca59171104..cf55ac0f5c 100644 --- a/core/src/Authorization.html +++ b/core/src/Authorization.html @@ -1,88 +1,139 @@ {#if !isHidden} - + {/if} + +
+
+
+
+ {#if isAuthorizationEnabled || isProfileLogoutItem} {#if isLoggedIn || + !isAuthorizationEnabled && isProfileLogoutItem} +
+ +
+ {/if} {#if isAuthorizationEnabled && !isLoggedIn} + + + {/if}{/if} +
+
+
+
{/if} + + diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html index 867b4d19a1..be1c58f79d 100644 --- a/core/src/navigation/TopNav.html +++ b/core/src/navigation/TopNav.html @@ -305,6 +305,50 @@ class="fd-shellbar__action fd-shellbar__action--show-always" data-testid="luigi-topnav-profile" > + {#if profileTypeSettings === "Fiori3" && + GenericHelpers.requestExperimentalFeature('profileMenuFiori3', true) } +
+
+ {#if userInfo.picture} + + {:else} + + {userInfo.initials} + + {/if} +
+
+ +
+
+ {:else}
@@ -331,19 +375,20 @@ {/if}
-
- -
+
+
+
+ {/if} {/if} {#if isProductSwitcherAvailable} {:else} - @@ -364,6 +409,7 @@ import LogoTitle from './LogoTitle.html'; import BadgeCounter from './BadgeCounter.html'; import Authorization from '../Authorization.html'; + import AuthorizationSimpleProfileMenu from '../AuthorizationSimpleProfileMenu.html'; import TopNavDropDown from '../TopNavDropDown.html'; import ContextSwitcher from './ContextSwitcher.html'; import ProductSwitcher from './ProductSwitcher.html'; @@ -387,6 +433,7 @@ export let isLoggedIn = false; export let hideNavComponent; export let responsiveNavSetting; + export let profileTypeSettings; export let showGlobalNav; export let pathData; let previousPathData; @@ -449,6 +496,7 @@ responsiveNavSetting = LuigiConfig.getConfigValue( 'settings.responsiveNavigation' ); + profileTypeSettings = LuigiConfig.getConfigValue('settings.profileType'); productSwitcherConfig = NavigationHelpers.getProductSwitcherConfig(); isGlobalSearchAvailable = LuigiConfig.getConfigValue('globalSearch'); showGlobalNav = @@ -685,12 +733,8 @@ min-width: 16px; } - .fd-popover__body { - &.fd-popover__body--right { - &:before, - &:after { - right: 14px; - } - } + .fd-user-menu .fd-shellbar__button { + padding-left: 0 !important; + padding-right: 0 !important; } diff --git a/docs/general-settings.md b/docs/general-settings.md index 2eadc1f3cb..d5ae9a008e 100644 --- a/docs/general-settings.md +++ b/docs/general-settings.md @@ -88,6 +88,11 @@ You can set the following values: * `semiCollapsible` displays the arrow button at the bottom of the left side navigation. Once you click the button, the navigation shows up or collapses. * `Fiori3` displays the button on the left side of the top navigation. Once you click the button, the navigation shows up or collapses.
If you don't specify any value for **responsiveNavigation**, the buttons remain hidden. The same applies when you enable **hideSideNav** for the currently active navigation node. +* **profileType** allows applying different layouts of Profile Menu in Shellbar once a user authorized. +You can set the following values: + * `simple` displays basic profile menu list of entities. + * `Fiori3` displays renewed profile menu layout according to Fiori 3 styleguides. It containes avatar of a user, if applicable and additional description. **since**: v1.14.0
+If you don't specify any value for **profileType**, the `simple` layout will be used as a default one. * **burgerTooltip** allows to set and customize a tooltip for the burger, which will be rendered if **responsiveNavigation** is set to `simple` or `Fiori3`. You can set it to `true`. In that case, the default values `Expand navigation` and `Collapse navigation` will be rendered. It is also possible to customize the values. In that case **burgerTooltip** will be an object with the following properties: ```javascript diff --git a/docs/luigi-ux-features.md b/docs/luigi-ux-features.md index 36ace913e1..bf5d6c944e 100644 --- a/docs/luigi-ux-features.md +++ b/docs/luigi-ux-features.md @@ -44,6 +44,8 @@ You can quickly adjust the Luigi application to improve user experience on mobil * Define and apply [**responsiveNavigation**](general-settings.md) settings to make the left navigation responsive. +* Define and apply [**profileType**](general-settings.md) **'simple'** or **'Fiori3'** to change the Profile Menu layout and design. + * Define a custom width for the left side navigation. To do so, simply add the code below to the top of your `index.html`. The default width is 15rem. ```html diff --git a/docs/navigation-advanced.md b/docs/navigation-advanced.md index ba259ffb10..2b15b72a9b 100644 --- a/docs/navigation-advanced.md +++ b/docs/navigation-advanced.md @@ -245,7 +245,7 @@ Example: ```javascript profile: { logout: { - label: 'End session' + label: 'Sign Out' icon: "sys-cancel", customLogoutFn: myLogoutFn }, diff --git a/docs/navigation-configuration-example.md b/docs/navigation-configuration-example.md index 4c99277308..e31be1b2ca 100644 --- a/docs/navigation-configuration-example.md +++ b/docs/navigation-configuration-example.md @@ -140,7 +140,7 @@ Luigi.setConfig({ }, profile: { logout: { - label: 'End session', + label: 'End Session', // icon: "sys-cancel", testId: 'myTestId', customLogoutFn: myLogoutFn 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 d5d7f1258a..ab74bd7205 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 @@ -194,10 +194,10 @@ describe('Fiddle', () => { }); describe('Show-hide of Logout & Login Buttons', () => { const loginLink = () => { - return cy.get('[data-testid="login-link"]'); + return cy.get('[data-testid="login-btn"]'); }; const logoutLink = () => { - return cy.get('[data-testid="logout-link"]'); + return cy.get('[data-testid="logout-btn"]'); }; describe('No Auth', () => { beforeEach(() => { @@ -207,12 +207,7 @@ describe('Fiddle', () => { logout: { label: 'Bye bye', icon: 'sys-cancel' - }, - staticUserInfoFn: () => ({ - name: 'Static User', - email: 'other.luigi.user@example.com', - picture: '/assets/github-logo.png' - }) + } }; cy.visitWithFiddleConfig('/home/two', newConfig); }); @@ -274,9 +269,15 @@ describe('Fiddle', () => { }; newConfig.navigation.profile = { logout: { - label: 'Bye bye', - icon: 'sys-cancel' - } + label: 'Bye bye' + }, + staticUserInfoFn: () => ({ + name: 'Static User', + initials: 'LU', + email: 'other.luigi.user@example.com', + picture: '/assets/favicon-sap.ico', + icon: false + }) }; }); @@ -288,6 +289,7 @@ describe('Fiddle', () => { logoutLink().should('not.exist'); loginLink().should('exist'); }); + it('No Profile, no auto-login, logged out and login', () => { newConfig.auth.disableAutoLogin = true; newConfig.navigation.profile = undefined; @@ -367,6 +369,7 @@ describe('Fiddle', () => { cy.contains('Login again'); }); + it('User settings in profile menu with custom label', () => { newConfig.settings = { userSettings: { diff --git a/test/e2e-test-application/e2e/tests/1-angular/login-flow-nav-dropdown.spec.js b/test/e2e-test-application/e2e/tests/1-angular/login-flow-nav-dropdown.spec.js index a269b61032..6673f82702 100644 --- a/test/e2e-test-application/e2e/tests/1-angular/login-flow-nav-dropdown.spec.js +++ b/test/e2e-test-application/e2e/tests/1-angular/login-flow-nav-dropdown.spec.js @@ -5,7 +5,7 @@ describe('Login Flow', () => { }); }); - it('Username in profile dropdown', () => { + it('User name in profile dropdown', () => { cy.login('tets@email.com', 'tets'); cy.get('[data-testid="luigi-topnav-profile"]').click(); @@ -16,8 +16,9 @@ describe('Login Flow', () => { cy.login('tets@email.com', 'tets'); cy.get('[data-testid="luigi-topnav-profile"]').click(); + cy.get('[data-testid="luigi-topnav-profile-item"]').contains('Project One'); cy.get('[data-testid="luigi-topnav-profile-item"]') - .contains('Project One') + .eq(1) .click(); cy.expectPathToBe('/projects/pr1'); @@ -71,7 +72,7 @@ describe('Login Flow', () => { //logout cy.get('[data-testid="luigi-topnav-profile"]').click(); - cy.contains('End session').click(); + cy.contains('Sign Out').click(); cy.get('[data-testid="logout-headline"]').should('contain', 'You have successfully logged out'); cy.get('[data-testid="logout-message"]').should('contain', 'Sign in again to continue working on awesome things!'); cy.expectPathToBe('/logout.html'); diff --git a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js index 976713ec46..ec045e0129 100644 --- a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js +++ b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js @@ -1007,4 +1007,69 @@ describe('Navigation', () => { }); }); }); + + describe('ProfileMenu Fiori 3 Style', () => { + context('Desktop', () => { + it('not render Fiori3 profile in Shellbar when profileType is equal "simple"', () => { + cy.window().then(win => { + const config = win.Luigi.getConfig(); + config.settings.profileType = 'simple'; + win.Luigi.configChanged(); + + cy.get('[data-testid="luigi-topnav-profile-btn"]') + .should('exist') + .click(); + cy.get('.lui-user-menu-fiori').should('not.be.visible'); + cy.get('.lui-profile-simple-menu').should('be.visible'); + }); + }); + + it('not render Fiori3 profile in Shellbar when experimental is equal false', () => { + cy.window().then(win => { + const config = win.Luigi.getConfig(); + config.settings.profileType = 'Fiori3'; + config.settings.experimental = { profileMenuFiori3: false }; + win.Luigi.configChanged(); + + cy.get('[data-testid="luigi-topnav-profile-btn"]') + .should('exist') + .click(); + cy.get('.lui-user-menu-fiori').should('not.be.visible'); + cy.get('.lui-profile-simple-menu').should('be.visible'); + }); + }); + + it('should render Fiori3 profile in Shellbar when profileType is equal "Fiori3"', () => { + cy.window().then(win => { + const config = win.Luigi.getConfig(); + config.settings.profileType = 'Fiori3'; + config.settings.experimental = { profileMenuFiori3: true }; + win.Luigi.configChanged(); + cy.wait(1000); + + cy.get('[data-testid="luigi-topnav-profile-btn"]').should('exist'); + cy.get('[data-testid="luigi-topnav-profile-btn"]').click(); + cy.get('.lui-user-menu-fiori').should('be.visible'); + cy.get('.lui-profile-simple-menu').should('not.be.visible'); + }); + }); + + it('should have User Description and Avatar when Fiori3 Profile Menu is enabled', () => { + cy.window().then(win => { + const config = win.Luigi.getConfig(); + config.settings.profileType = 'Fiori3'; + config.settings.experimental = { profileMenuFiori3: true }; + win.Luigi.configChanged(); + + cy.wait(1000); + + cy.get('[data-testid="luigi-topnav-profile-btn"]').should('exist'); + cy.get('[data-testid="luigi-topnav-profile-btn"]').click(); + cy.get('[data-testid="luigi-topnav-profile-avatar"]').should('exist'); + cy.get('[data-testid="luigi-topnav-profile-initials"]').should('not.exist'); + cy.get('[data-testid="luigi-topnav-profile-icon"]').should('not.exist'); + }); + }); + }); + }); }); diff --git a/test/e2e-test-application/package.json b/test/e2e-test-application/package.json index 29485a3d91..894c762a30 100644 --- a/test/e2e-test-application/package.json +++ b/test/e2e-test-application/package.json @@ -25,17 +25,17 @@ "@angular/platform-browser": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", "@angular/router": "^6.1.0", - "@luigi-project/plugin-auth-oauth2": "1.0.0", - "@luigi-project/plugin-auth-oidc": "1.0.0", "@luigi-project/client": "1.0.0", "@luigi-project/core": "1.2.1", + "@luigi-project/plugin-auth-oauth2": "1.0.0", + "@luigi-project/plugin-auth-oidc": "1.0.0", "@sap-theming/theming-base-content": "~11.1.28", "ajv": "^6.1.1", "core-js": "^2.4.1", "fundamental-styles": "^0.17.0", + "lodash": ">=4.17.13", "rxjs": "6.2.0", - "zone.js": "^0.8.14", - "lodash": ">=4.17.13" + "zone.js": "^0.8.14" }, "devDependencies": { "@angular-builders/custom-webpack": "7.1.1", @@ -71,4 +71,4 @@ "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" } -} \ No newline at end of file +} 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 3aaf0eb644..102e8e53b1 100644 --- a/test/e2e-test-application/src/luigi-config/extended/auth.js +++ b/test/e2e-test-application/src/luigi-config/extended/auth.js @@ -22,8 +22,11 @@ class Auth { return new Promise(resolve => { resolve({ name: 'Luigi User', - email: 'luigi.user@example.com' - //picture: '/assets/favicon-sap.ico' + initials: 'LU', + email: 'luigi.user@example.com', + picture: '/assets/favicon-sap.ico', + description: 'Luigi Expert' + //icon: true }); }); } diff --git a/test/e2e-test-application/src/luigi-config/extended/navigation.js b/test/e2e-test-application/src/luigi-config/extended/navigation.js index 8ea0cd6cc0..6681381d1b 100644 --- a/test/e2e-test-application/src/luigi-config/extended/navigation.js +++ b/test/e2e-test-application/src/luigi-config/extended/navigation.js @@ -397,16 +397,18 @@ class Navigation { profile = { logout: { - label: 'End session' + label: 'Sign Out' // icon: "sys-cancel", }, items: this.getProfileItems, staticUserInfoFn: () => { return new Promise(resolve => { resolve({ - name: 'Luigi Static User', + name: 'Static User', + initials: 'LU', email: 'other.luigi.user@example.com', - picture: '/assets/github-logo.png' + picture: '/assets/favicon-sap.ico', + description: 'Luigi Developer' }); }); } diff --git a/test/e2e-test-application/src/luigi-config/extended/settings.js b/test/e2e-test-application/src/luigi-config/extended/settings.js index 20745637a2..33087bbcc4 100644 --- a/test/e2e-test-application/src/luigi-config/extended/settings.js +++ b/test/e2e-test-application/src/luigi-config/extended/settings.js @@ -11,6 +11,7 @@ class Settings { appLoadingIndicator = { hideAutomatically: false }; + profileType = ''; // Options: simple | Fiori3 responsiveNavigation = 'Fiori3'; // Options: simple | simpleMobileOnly | semiCollapsible | Fiori3 sideNavFooterText = `Luigi Client: ${version || 'unknown'}`; thirdPartyCookieCheck = { @@ -55,6 +56,9 @@ class Settings { // } // }; // }; + // experimental = { + // profileMenuFiori3: true + // }; } export const settings = new Settings(); diff --git a/website/docs/src/luigi-config/extended/auth.js b/website/docs/src/luigi-config/extended/auth.js index 418ab2ce15..f33d24d914 100644 --- a/website/docs/src/luigi-config/extended/auth.js +++ b/website/docs/src/luigi-config/extended/auth.js @@ -27,7 +27,11 @@ class Auth { return new Promise(resolve => { resolve({ name: 'Luigi User', - email: 'luigi.user@example.com' + initials: 'LU', + email: 'luigi.user@example.com', + //picture: '/assets/favicon-sap.ico', + description: 'Expert', + icon: true }); }); }