1687 profile setting dialog

core/package.json

@@ -80,7 +80,7 @@
     },
     {
       "path": "./public-ie11/luigi-ie11.js",
-      "maxSize": "580 kB",
+      "maxSize": "590 kB",
       "compression": "none"
     },
     {
@@ -134,4 +134,4 @@
     "type": "git",
     "url": "ssh://github.com/SAP/luigi.git"
   }
-}
+}

core/src/Authorization.html

@@ -1,4 +1,3 @@
-
 {#if !isHidden}
 <nav class="fd-menu">
   <ul class="fd-menu__list fd-menu__list--no-shadow">
@@ -43,6 +42,28 @@
       </a>
     </li>
     {/each}
+    {#if isUserSettings}
+    <li class="fd-menu__item" on:click="{onUserSettingsClick}" data-testid="{getTestId(profileNav.settings)}">
+      <a aria-label="User Settings" class="fd-menu__link" data-testid="settings-link">
+        {#if profileNav.settings.icon}
+        {#if hasOpenUIicon(profileNav.settings)}
+        <span
+          class="fd-top-nav__icon sap-icon--{profileNav.settings.icon}"
+        ></span>
+        {:else}
+        <img
+          class="fd-top-nav__icon nav-icon"
+          src="{profileNav.settings.icon}"
+          alt="{profileNav.settings.altText ? profileNav.settings.altText : ''}"
+        >
+        {/if}
+        {/if}
+        <span
+          class="fd-menu__title"
+        >{$getTranslation(profileNav.settings.label)}</span>
+      </a>
+    </li>
+    {/if}
     {#if isAuthorizationEnabled || isProfileLogoutItem}
     {#if isLoggedIn || !isAuthorizationEnabled && isProfileLogoutItem}
     <li
@@ -84,7 +105,7 @@
 <script>
   import { AuthLayerSvc } from './services';
   import { createEventDispatcher, onMount, getContext } from 'svelte';
-  import { LuigiAuth, LuigiConfig } from './core-api';
+  import { LuigiAuth, LuigiConfig, LuigiNavigation } from './core-api';
   import {
     AuthHelpers,
     GenericHelpers,
@@ -102,9 +123,10 @@
   let idpProviderInstance;
   let userInfo;
   let isLoggedIn;
-  let profileNav = { logout: {}, items: [] };
+  let profileNav = { logout: {}, items: [], settings: {} };
   let isAuthorizationEnabled;
   let isProfileLogoutItem;
+  let isUserSettings;
   let navProfileListenerInstalled;
   let profileLogoutFnDefined;
   let store = getContext('store');
@@ -159,17 +181,32 @@
           const logoutItem = await LuigiConfig.getConfigValueAsync(
             'navigation.profile.logout'
           );
+          //check if the User Settings schema exist
+          const userSettings = await LuigiConfig.getConfigValueAsync(
+            'settings.userSettings'
+          );
+          isUserSettings = Boolean(userSettings);
+          //check if Settings dropdown is enabled for navigation in Shellbar
+          const userSettingsProfileMenuEntry = await LuigiConfig.getConfigValueAsync(
+            'settings.userSettings.userSettingsProfileMenuEntry'
+          );
+
           const profileNavData = {
             items:
               (await LuigiConfig.getConfigValueAsync(
                 'navigation.profile.items'
               )) || []
           };
+          if (isUserSettings) {
+            profileNavData['settings'] = {
+              ...TOP_NAV_DEFAULTS.userSettingsProfileMenuEntry,
+              ...userSettingsProfileMenuEntry
+            };
+          }
           profileNavData['logout'] = {
             ...TOP_NAV_DEFAULTS.logout,
             ...logoutItem
           };
-
           isProfileLogoutItem = Boolean(logoutItem);
           profileLogoutFnDefined = false;
           AuthLayerSvc.setProfileLogoutFn(null);
@@ -230,6 +267,15 @@
     });
   }
 
+  export function onUserSettingsClick() {
+    getUnsavedChangesModalPromise().then(() => {
+      LuigiNavigation.openAsModal('projects/pr1/users', {
+        title: 'Users',
+        size: 'm'
+      });
+    });
+  }
+
   export function logout() {
     AuthLayerSvc.logout();
   }
@@ -251,4 +297,4 @@
     display: block;
     padding: 0.75rem 1rem 0.75rem 0.75rem;
   }
-</style>
+</style>

core/src/utilities/luigi-config-defaults.js

@@ -2,6 +2,10 @@ export const TOP_NAV_DEFAULTS = {
   logout: {
     label: 'Sign Out',
     icon: 'log'
+  },
+  userSettingsProfileMenuEntry: {
+    label: 'Settings',
+    icon: 'settings'
   }
 };
 

test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js

@@ -366,6 +366,43 @@ describe('Fiddle', () => {
 
         cy.contains('Login again');
       });
+      it('User settings in profile menu with custom label', () => {
+        newConfig.settings = {
+          userSettings: {
+            userSettingsProfileMenuEntry: {
+              label: 'My UserSettings',
+              icon: 'settings'
+            }
+          }
+        }
+        visitLoggedInWithAuthConfig('/', newConfig);
+        cy.get('[data-testid="luigi-topnav-profile"] button').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="settings-link"]').should('exist');
+        cy.get('[data-testid="settings-link"]').contains('Settings')
+      });
+      it.only('TESTS', () => {
+        newConfig.navigation.profile = {
+          logout: {
+            label: 'Bye bye',
+            icon: 'sys-cancel'
+          }
+        };
+        newConfig.auth.disableAutoLogin = false;
+        visitLoggedInWithAuthConfig('/', newConfig);
+
+        cy.get('[data-testid="luigi-topnav-profile"] button').click();
+        logoutLink().should('exist');
+        cy.get('[data-testid="settings-link"]').should('not.exist');
+      });
     });
   });
 

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

@@ -55,6 +55,52 @@ class Settings {
       }
     };
   }; */
+  userSettings = {
+    userSettingsProfileMenuEntry: {
+      label: 'My Settings',
+      icon: 'settings'
+    },
+    userSettingGroups: {
+      userAccount: {
+        label: 'User Account',
+        sublabel: 'username',
+        icon: 'icon.jpg',
+        title: 'title',
+        settings: {
+          name: { type: 'string', label: 'Name', isEditable: true },
+          email: { type: 'string', label: 'E-Mail', isEditable: false },
+          server: { type: 'string', label: 'Server', isEditable: false }
+        }
+      },
+      language: {
+        label: 'Language & Region',
+        sublabel: 'EN | Time Format: 12h',
+        icon: false,
+        title: 'Language & Region',
+        settings: {
+          language: {
+            type: 'enum',
+            label: 'Language and Region',
+            options: ['German', 'English', 'Spanish', 'French'],
+            description:
+              'After you save your settings, the browser will refresh for the new language to take effect.'
+          },
+          date: { type: 'string', label: 'Date Format' },
+          time: { type: 'enum', label: 'Time Format', options: ['12 h', '24 h'] }
+        }
+      },
+      privacy: {
+        label: 'Privacy',
+        title: 'Privacy',
+        settings: {
+          policy: {
+            type: 'string',
+            label: 'Privacy policy has not been defined.'
+          }
+        }
+      }
+    }
+  }
 }
 
 export const settings = new Settings();