Adds node property for hiding global search (#3922)

* Adds flag for global search * Fixes code review issue
SAP · Oct 1, 2024 · 4cb41cb · 4cb41cb
1 parent fa3a695
commit 4cb41cb
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 13 deletions.
diff --git a/core/src/App.svelte b/core/src/App.svelte
@@ -263,6 +263,7 @@
           navigationPath,
           context,
           pathParams,
+          hideGlobalSearch,
           hideSideNav,
           isolateView,
           pageErrorHandler,
@@ -300,6 +301,8 @@
               context = obj.context;
             } else if (prop === 'pathParams') {
               pathParams = obj.pathParams;
+            } else if (prop === 'hideGlobalSearch') {
+              hideGlobalSearch = obj.hideGlobalSearch;
             } else if (prop === 'hideSideNav') {
               if (hideSideNav != obj.hideSideNav) {
                 noAnimation = true;
@@ -655,6 +658,7 @@
   /// RESIZING
 
   let hideNav;
+  let hideGlobalSearch;
   let hideSideNav;
   let noAnimation;
   let previousWindowWidth;
@@ -1868,6 +1872,7 @@
           <div class="fd-tool-layout__header-container">
             {#if !isHeaderDisabled}
               <TopNav
+                hideSearchComponent={hideGlobalSearch}
                 pathData={navigationPath}
                 {pathParams}
                 on:handleClick={handleNavClick}
@@ -1991,6 +1996,7 @@
     {/if}
     {#if !isHeaderDisabled}
       <TopNav
+        hideSearchComponent={hideGlobalSearch}
         pathData={navigationPath}
         {pathParams}
         on:handleClick={handleNavClick}

diff --git a/core/src/navigation/TopNav.svelte b/core/src/navigation/TopNav.svelte
@@ -25,6 +25,7 @@
   export let authorizationEnabled;
   export let autologinEnabled;
   export let isLoggedIn = false;
+  export let hideSearchComponent;
   export let hideNavComponent;
   export let responsiveNavSetting;
   export let profileTypeSettings;
@@ -294,7 +295,7 @@
         on:handleClick={handleClickExternal}
       />
     </div>
-    {#if globalSearchConfig && isGlobalSearchCentered}
+    {#if globalSearchConfig && isGlobalSearchCentered && !hideSearchComponent}
       <div class="lui-global-search">
         <GlobalSearchCentered
           {globalSearchConfig}
@@ -311,7 +312,7 @@
     {/if}
     <div class="fd-shellbar__group fd-shellbar__group--actions lui-shellbar_group--actions">
       {#if !authorizationEnabled || isLoggedIn}
-        {#if globalSearchConfig && !isGlobalSearchCentered}
+        {#if globalSearchConfig && !isGlobalSearchCentered && !hideSearchComponent}
           <GlobalSearch
             bind:isSearchFieldVisible
             on:toggleSearch
@@ -435,7 +436,7 @@
                 >
                   <nav class="fd-menu">
                     <ul class="fd-menu__list fd-menu__list--no-shadow">
-                      {#if globalSearchConfig && !isGlobalSearchCentered}
+                      {#if globalSearchConfig && !isGlobalSearchCentered && !hideSearchComponent}
                         <li class="fd-menu__item">
                           <!-- svelte-ignore a11y-click-events-have-key-events -->
                           <!-- svelte-ignore a11y-missing-attribute -->

diff --git a/core/src/services/routing.js b/core/src/services/routing.js
@@ -404,19 +404,17 @@ class RoutingClass {
       }
 
       let cNode2 = currentNode;
+      let hideGlobalSearchInherited = nodeObject.hideGlobalSearch;
+      if (hideGlobalSearchInherited === undefined) {
+        hideGlobalSearchInherited = RoutingHelpers.handleInheritedProperty(cNode2, 'hideGlobalSearch', () => {
+          cNode2 = NavigationHelpers.getParentNode(cNode2, pathData.navigationPath);
+        });
+      }
       let hideSideNavInherited = nodeObject.hideSideNav;
       if (hideSideNavInherited === undefined) {
-        while (cNode2) {
-          if (cNode2.tabNav && cNode2.hideSideNav === true) {
-            hideSideNavInherited = true;
-            break;
-          }
-          if (cNode2.hideSideNav === false) {
-            hideSideNavInherited = false;
-            break;
-          }
+        hideSideNavInherited = RoutingHelpers.handleInheritedProperty(cNode2, 'hideSideNav', () => {
           cNode2 = NavigationHelpers.getParentNode(cNode2, pathData.navigationPath);
-        }
+        });
       }
 
       const ctx = RoutingHelpers.substituteDynamicParamsInObject(
@@ -434,6 +432,7 @@ class RoutingClass {
         navigationPath: pathData.navigationPath,
         context: ctx,
         pathParams: pathData.pathParams,
+        hideGlobalSearch: hideGlobalSearchInherited || false,
         hideSideNav: hideSideNavInherited || false,
         isolateView: nodeObject.isolateView || false,
         tabNav: tabNavInherited

diff --git a/core/src/utilities/helpers/routing-helpers.js b/core/src/utilities/helpers/routing-helpers.js
@@ -689,6 +689,33 @@ class RoutingHelpersClass {
     }
     return historyState;
   }
+
+  /**
+   * Deals with undefined inherited property
+   * @param {Object} node the data of node
+   * @param {string} property name of affected property
+   * @param {() => void} callback optional method to be called
+   * @returns {(boolean|undefined)} true if the given props are present in node, falsy otherwise
+   */
+  handleInheritedProperty(node, property, callback) {
+    let inheritedProperty;
+
+    if (node) {
+      if (node.tabNav && node[property] === true) {
+        inheritedProperty = true;
+      }
+
+      if (node[property] === false) {
+        inheritedProperty = false;
+      }
+
+      if (callback && typeof callback === 'function') {
+        callback();
+      }
+    }
+
+    return inheritedProperty;
+  }
 }
 
 export const RoutingHelpers = new RoutingHelpersClass();
diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md
@@ -625,6 +625,11 @@ runTimeErrorHandler: {
 - **type**: boolean
 - **description**: shows or hides a navigation node. You can still navigate to the node but it does not show up in the top or left pane.
 
+### hideGlobalSearch
+- **type**: boolean
+- **description**: if set to `true`, the global search disappears when you click the affected node.
+- **default**: `false`
+
 ### hideSideNav
 - **type**: boolean
 - **description**: if set to `true`, the left navigation disappears when you click the affected node.