Fix changeable settings config properties

core/src/Authorization.html

@@ -154,6 +154,7 @@
   const dispatch = createEventDispatcher();
 
   export let isHidden = false;
+  export let addNavHrefForAnchor;
 
   let idpProviderInstance;
   let userInfo;
@@ -169,7 +170,6 @@
   let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
   let openViewInModal = getContext('openViewInModal');
   let initialsOfUser;
-  const addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
 
   onMount(async () => {
     if (!LuigiAuth.isAuthorizationEnabled()) {

core/src/AuthorizationSimpleProfileMenu.html

@@ -109,6 +109,7 @@
   const dispatch = createEventDispatcher();
 
   export let isHidden = false;
+  export let addNavHrefForAnchor;
 
   let idpProviderInstance;
   let userInfo;
@@ -124,7 +125,6 @@
   let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
   let openViewInModal = getContext('openViewInModal');
   let initialsOfUser;
-  const addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
 
   onMount(async () => {
     if (!LuigiAuth.isAuthorizationEnabled()) {

core/src/TopNavDropDown.html

@@ -62,7 +62,7 @@
   let pathParams;
   let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
   let openViewInModal = getContext('openViewInModal');
-  const addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
+  let addNavHrefForAnchor;
   const getNodeSubtitle = () => {};
 
   //TODO refactor

core/src/navigation/ContextSwitcher.html

@@ -4,8 +4,7 @@
 <div class="fd-shellbar__action fd-shellbar__action--desktop">
   <div class="fd-popover fd-popover--right">
     <div class="fd-popover__control" on:click|stopPropagation="{()=> {}}">
-      {#if LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs') && (selectedOption
-      !== config.defaultLabel) }
+      {#if addNavHrefForAnchor && (selectedOption !== config.defaultLabel) }
       <a
         href="{selectedNodePath}"
         class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
@@ -160,6 +159,7 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-3">
   let getTranslation = getContext('getTranslation');
   let prevContextSwitcherToggle = false;
   let selectedNodePath;
+  let addNavHrefForAnchor;
 
   onMount(async () => {
     StateHelpers.doOnStoreChange(

core/src/navigation/GlobalNav.html

@@ -104,7 +104,7 @@
   export let showGlobalNav;
   export let hideNavComponent;
   export let responsiveNavSetting;
-  const addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
+  let addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
 
   const setTopNavData = async () => {
     if (pathData && 0 < pathData.length) {
@@ -136,6 +136,7 @@
     if (!previousPathData || previousPathData != pathData) {
       setTopNavData();
     }
+    addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
   });
 
   function hasOpenUIicon(node) {

core/src/navigation/LeftNav.html

@@ -51,7 +51,9 @@
     <div class="fd-side-nav__main-navigation">
       {#if children && pathData.length > 1}
       <div class="lui-fd-side-nav-wrapper">
-        <ul class="fd-nested-list {sideNavClass}">
+        <ul
+          class="fd-nested-list {sideNavCompactMode ? 'fd-nested-list fd-nested-list--compact':'fd-nested-list'}"
+        >
           {#each sortedChildrenEntries as [key, nodes],index} {#if key === 'undefined' ||
           key.startsWith(virtualGroupPrefix)}
           <!-- Single nodes -->
@@ -455,7 +457,6 @@
   export let selectedCategory = null;
   export let expandedCategories;
   export let hasCategoriesWithIcon;
-  export let sideNavClass;
   export let sideNavAccordionMode;
   export let burgerTooltip;
   export let navHeader;
@@ -496,12 +497,6 @@
       ['settings.footer']
     );
 
-    // set compact mode class
-    if (Boolean(sideNavCompactMode)) {
-      sideNavClass = 'fd-nested-list fd-nested-list--compact';
-    } else {
-      sideNavClass = 'fd-nested-list';
-    }
     let stateArr = SemiCollapsibleNavigation.initial();
     isSemiCollapsed = stateArr.isSemiCollapsed;
     semiCollapsible = stateArr.semiCollapsible;
@@ -520,6 +515,9 @@
     if (!previousPathData || previousPathData != pathData) {
       setLeftNavData();
     }
+    sideNavCompactMode = LuigiConfig.getConfigBooleanValue('settings.sideNavCompactMode');
+    semiCollapsibleButton =
+      LuigiConfig.getConfigValue('settings.responsiveNavigation') === 'semiCollapsible';
   });
 
   export let sortedChildrenEntries;

core/src/navigation/LogoTitle.html

@@ -1,4 +1,4 @@
-{#if LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs')}
+{#if addNavHrefForAnchor}
 <a
   class="fd-shellbar__logo { !hasLogo ? 'fd-shellbar__logo--image-replaced' : '' } { hasLogo ? 'lui-customlogo' : ''}"
   aria-label="{title}"
@@ -23,8 +23,7 @@
   <img data-testid="luigi-topnav-logo" bind:this="{logo}" alt="{title}" />
   {/if}
 </span>
-{/if} {#if title} {#if !hasApps} {#if
-LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs')}
+{/if} {#if title} {#if !hasApps} {#if addNavHrefForAnchor}
 <a
   class="fd-shellbar__title lui-shellbar-single-app-title"
   data-testid="luigi-topnav-title"
@@ -44,11 +43,11 @@
 {/if}{:else}
 <div class="fd-popover">
   <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
-    {#if LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs')} {#if
-    appSwitcherItems && appSwitcherItems.length > 0} {#each appSwitcherItems as item} {#if
-    item === selectedItem && hasValidLink(item, pathParams)}
+    {#if addNavHrefForAnchor} {#if appSwitcherItems && appSwitcherItems.length > 0} {#each
+    appSwitcherItems as item} {#if item === selectedItem && hasValidLink(item,
+    pathParams)}
     <a
-      href="{addNavHrefForAnchor ? getRouteLink(item) : undefined}"
+      href="{getRouteLink(item)}"
       class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-app-switch"
       aria-haspopup="true"
       aria-expanded="{dropDownStates.appSwitcherPopover || false}"
@@ -60,7 +59,7 @@
       >
       <i class="sap-icon sap-icon--megamenu fd-shellbar__button--icon"></i>
     </a>
-    {/if}{/each}{/if} {#if appSwitcherItems.length > 0 && !selectedItem}
+    {/if} {/each} {/if} {#if appSwitcherItems.length > 0 && !selectedItem}
     <a
       href="/"
       class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-app-switch"
@@ -134,7 +133,7 @@
   import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
   import * as Header from './services/header';
   import { Routing } from '../services/routing';
-  import { NavigationHelpers, RoutingHelpers } from '../utilities/helpers';
+  import { NavigationHelpers, RoutingHelpers, StateHelpers } from '../utilities/helpers';
   import { LuigiConfig } from '../core-api';
 
   const dispatch = createEventDispatcher();
@@ -152,11 +151,11 @@
   export let subTitle;
   export let defaultSubTitle;
   export let pathData;
+  export let addNavHrefForAnchor;
   let previousPathData;
   let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
   let getTranslation = getContext('getTranslation');
   let store = getContext('store');
-  const addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
 
   //TODO refactor
   const getComponentWrapper = () => {

core/src/navigation/ProductSwitcher.html

@@ -39,9 +39,9 @@
               on:click="{() => onActionClick(productSwitcherItem)}"
               data-testid="{getTestId(productSwitcherItem)}"
             >
-              {#if LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs')}
+              {#if addNavHrefForAnchor}
               <a
-                href="{addNavHrefForAnchor ? getRouteLink(productSwitcherItem) : undefined}"
+                href="{getRouteLink(productSwitcherItem)}"
                 on:click|preventDefault="{() => {}}"
                 class="fd-menu__link"
               >
@@ -131,7 +131,7 @@
   let store = getContext('store');
   let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
   let columnsClass;
-  const addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
+  export let addNavHrefForAnchor;
 
   onMount(async () => {
     StateHelpers.doOnStoreChange(

core/src/navigation/TopNav.html

@@ -16,6 +16,7 @@
     <LogoTitle
       pathData="{pathData}"
       pathParams="{pathParams}"
+      addNavHrefForAnchor="{addNavHrefForAnchor}"
       bind:dropDownStates
       on:toggleDropdownState="{toggleDropdownStateExternal}"
       on:handleClick="{handleClickExternal}"
@@ -39,6 +40,7 @@
       bind:dropDownStates
       on:toggleDropdownState="{() => toggleDropdownState('contextSwitcherPopover')}"
       isMobile="{false}"
+      addNavHrefForAnchor="{addNavHrefForAnchor}"
     />
     {/if} {#if isGlobalSearchAvailable || (children && pathData.length > 0)} {#if
     (children && pathData.length > 0)} {#each children as node, i} {#if !(node.hideFromNav
@@ -66,17 +68,22 @@
           aria-hidden="{!(dropDownStates[`dropDownPopover-${i}`] || false)}"
           id="dropDownPopover-{i}"
         >
-          <TopNavDropDown node="{node}" isMobile="{false}" pathParams="{pathParams}" />
+          <TopNavDropDown
+            node="{node}"
+            isMobile="{false}"
+            pathParams="{pathParams}"
+            addNavHrefForAnchor="{addNavHrefForAnchor}"
+          />
         </div>
       </div>
     </div>
     {:else}
     <div
       class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--desktop"
     >
-      {#if LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs')}
+      {#if addNavHrefForAnchor}
       <a
-        href="{addNavHrefForAnchor ? getRouteLink(node) : undefined}"
+        href="{getRouteLink(node)}"
         class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
         title="{resolveTooltipText(node, getNodeLabel(node))}"
         aria-expanded="false"
@@ -331,6 +338,7 @@
           <Authorization
             on:toggleDropdownState="{() => toggleDropdownState('profilePopover')}"
             on:userInfoUpdated="{userInfoUpdate}"
+            addNavHrefForAnchor="{addNavHrefForAnchor}"
           />
         </div>
       </div>
@@ -370,6 +378,7 @@
             <AuthorizationSimpleProfileMenu
               on:toggleDropdownState="{() => toggleDropdownState('profilePopover')}"
               on:userInfoUpdated="{userInfoUpdate}"
+              addNavHrefForAnchor="{addNavHrefForAnchor}"
             />
           </div>
         </div>
@@ -381,6 +390,7 @@
       bind:dropDownStates
       on:toggleDropdownState="{() => toggleDropdownState('productSwitcherPopover')}"
       isMobile="{false}"
+      addNavHrefForAnchor="{addNavHrefForAnchor}"
     />
     {/if}
   </div>
@@ -389,6 +399,7 @@
 <AuthorizationSimpleProfileMenu
   on:toggleDropdownState="{() => toggleDropdownState('profilePopover')}"
   isHidden="{true}"
+  addNavHrefForAnchor="{addNavHrefForAnchor}"
 />
 {/if}
 <script>
@@ -452,7 +463,9 @@
   let selectedLabel;
   let defaultLabelContextSwitcher;
   let contextSwitcherConfig = LuigiConfig.getConfigValue('navigation.contextSwitcher');
-  const addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
+  export let addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue(
+    'navigation.addNavHrefs'
+  );
   const setTopNavData = async () => {
     if (pathData && 0 < pathData.length) {
       const tnd = await NavigationHelpers.generateTopNavNodes(pathData);
@@ -490,6 +503,8 @@
         showGlobalNav =
           LuigiConfig.getConfigBooleanValue('settings.globalSideNavigation') &&
           GenericHelpers.requestExperimentalFeature('globalNav', true);
+        addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
+        contextSwitcherConfig = LuigiConfig.getConfigValue('navigation.contextSwitcher');
       },
       ['navigation']
     );

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

@@ -62,11 +62,11 @@ class Settings {
   //   };
   // };
   // globalSideNavigation = true;
-  // experimental = {
-  //    profileMenuFiori3: true,
-  // globalNav: true
-  //   webcomponents:true
-  // };
+  experimental = {
+    profileMenuFiori3: true,
+    globalNav: true,
+    webcomponents: true
+  };
   // globalSideNavigation = true;
 }