From 7cfb96bd09a01a5ae753f8f6dc91fc65e648b55d Mon Sep 17 00:00:00 2001
From: Philipp Pracht <philipp.pracht@sap.com>
Date: Thu, 14 Oct 2021 19:30:06 +0200
Subject: [PATCH] Breadcrumb container (#2324)

experimental mvp
---
 core/src/App.html                   |  33 ++++-
 core/src/Modal.html                 |   8 ++
 core/src/SplitView.html             |   4 +
 core/src/navigation/Breadcrumb.html | 189 ++++++++++++++++++++++++++++
 core/src/navigation/LeftNav.html    |   4 +
 5 files changed, 236 insertions(+), 2 deletions(-)
 create mode 100644 core/src/navigation/Breadcrumb.html

diff --git a/core/src/App.html b/core/src/App.html
index ce1b4981ed..0bf622436a 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -96,12 +96,19 @@
     bind:luigiCustomSearchRenderer__slot
     burgerTooltip="{burgerTooltip}"
   />
+  {#if !(hideNav)}
   <GlobalNav
     pathData="{navigationPath}"
     pathParams="{pathParams}"
     on:handleClick="{handleNavClick}"
   />
-  {#if !(hideNav||hideSideNav)}
+  {#if breadcrumbsEnabled}
+  <Breadcrumb
+    pathData="{navigationPath}"
+    pathParams="{pathParams}"
+    on:handleClick="{handleNavClick}"
+  />
+  {/if} {/if} {#if !(hideNav||hideSideNav)}
   <LeftNav
     pathData="{navigationPath}"
     pathParams="{pathParams}"
@@ -130,7 +137,14 @@
   import TopNav from './navigation/TopNav.html';
   import TabNav from './navigation/TabNav.html';
   import GlobalNav from './navigation/GlobalNav.html';
-  import { afterUpdate, onMount, setContext, createEventDispatcher } from 'svelte';
+  import Breadcrumb from './navigation/Breadcrumb.html';
+  import {
+    afterUpdate,
+    beforeUpdate,
+    onMount,
+    setContext,
+    createEventDispatcher
+  } from 'svelte';
   import { fade } from 'svelte/transition';
   import { CSS_BREAKPOINTS } from './utilities/constants';
   import {
@@ -228,6 +242,7 @@
   export let searchResult;
   export let storedUserSettings;
   let featureToggleList;
+  let breadcrumbsEnabled;
 
   const prepareInternalData = async config => {
     const iframeConf = config.iframe.luigi;
@@ -1608,6 +1623,10 @@
   });
 
   afterUpdate(() => {});
+
+  beforeUpdate(() => {
+    breadcrumbsEnabled = GenericHelpers.requestExperimentalFeature('breadcrumbs');
+  });
 </script>
 
 <style type="text/scss">
@@ -1620,6 +1639,7 @@
     --luigi__left-sidenav--width: 15rem;
     --luigi__app-title--width: 60vw;
     --luigi__multi-app-dropdown--width: 60vw;
+    --luigi__breadcrumb--height: 2.75rem;
   }
 
   :global(html) {
@@ -1666,6 +1686,11 @@
     @include transition(visibility 0s 0.3s, opacity 0.3s linear);
   }
 
+  :global(.lui-breadcrumb) .iframeContainer,
+  :global(.lui-breadcrumb) .spinnerContainer {
+    top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height));
+  }
+
   .iframeContainer,
   .spinnerContainer {
     position: absolute;
@@ -1704,6 +1729,10 @@
     height: 100%;
   }
 
+  :global(.lui-breadcrumb) .iframeContainerTabNav {
+    top: calc(#{$topNavHeight} + #{$topNavHeightTab} + var(--luigi__breadcrumb--height));
+  }
+
   .iframeContainerTabNav {
     top: calc(#{$topNavHeight} + #{$topNavHeightTab});
   }
diff --git a/core/src/Modal.html b/core/src/Modal.html
index 1545eeaeaa..113b1fca5f 100644
--- a/core/src/Modal.html
+++ b/core/src/Modal.html
@@ -286,6 +286,10 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-1">
 
 <style type="text/scss">
   @import 'styles/variables';
+  :global(.lui-breadcrumb) .drawer-dialog {
+    top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height));
+  }
+
   .drawer-dialog {
     position: absolute;
     top: $topNavHeight;
@@ -304,6 +308,10 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-1">
     height: 100%;
   }
 
+  :global(.lui-breadcrumb) .drawer__backdrop {
+    top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height));
+  }
+
   .drawer__backdrop {
     top: $topNavHeight;
   }
diff --git a/core/src/SplitView.html b/core/src/SplitView.html
index 4758b3d15f..14eb739d36 100644
--- a/core/src/SplitView.html
+++ b/core/src/SplitView.html
@@ -399,6 +399,10 @@ <h1 class="fd-splitView__title">{splitViewSettings.title}</h1>
     }
   }
 
+  :global(.lui-breadcrumb) :global(#splitViewDraggerBackdrop) {
+    top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height));
+  }
+
   :global(#splitViewDraggerBackdrop) {
     position: absolute;
     background-color: rgba(255, 255, 255, 0.7);
diff --git a/core/src/navigation/Breadcrumb.html b/core/src/navigation/Breadcrumb.html
new file mode 100644
index 0000000000..6e3df0070a
--- /dev/null
+++ b/core/src/navigation/Breadcrumb.html
@@ -0,0 +1,189 @@
+<div class="lui-breadcrumb-container" bind:this="{breadcrumbContainer}"></div>
+
+<script>
+  import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
+  import { LuigiAuth, LuigiConfig, LuigiI18N } from '../core-api';
+  import {
+    NavigationHelpers,
+    RoutingHelpers,
+    StateHelpers,
+    EventListenerHelpers,
+    GenericHelpers
+  } from '../utilities/helpers';
+  import { Routing } from '../services/routing';
+  import { Navigation } from './services/navigation';
+
+  const dispatch = createEventDispatcher();
+
+  export let pathData;
+  let previousPathData;
+  let previousBreadcrumbs = {};
+
+  let breadcrumbContainer;
+
+  let store = getContext('store');
+
+  export let showBreadcrumb;
+  export let hideNavComponent;
+  export let responsiveNavSetting;
+  let addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
+
+  const setNavData = async () => {
+    if (pathData && 0 < pathData.length) {
+      // const tnd = await NavigationHelpers.generateTopNavNodes(pathData);
+      // children = tnd.children;
+      // selectedNode = tnd.selectedNode;
+      previousPathData = pathData;
+    }
+  };
+
+  const clickHandler = element => {
+    if (!element.last) {
+      handleClick(element.node);
+    }
+  };
+
+  onMount(() => {
+    StateHelpers.doOnStoreChange(store, () => {}, ['navigation']);
+  });
+
+  beforeUpdate(async () => {
+    if (pathData && (!previousPathData || previousPathData != pathData)) {
+      setNavData();
+
+      if (pathData.length === 0) {
+        // data reset, just do nothing
+        return;
+      }
+
+      const breadcrumbConfig = LuigiConfig.getConfigValue('navigation.breadcrumbs');
+      showBreadcrumb = !!breadcrumbConfig;
+      if (showBreadcrumb) {
+        // if enabled in general, check node scope
+        pathData.forEach(node => {
+          if (node.showBreadcrumbs === false) {
+            showBreadcrumb = false;
+          } else if (node.showBreadcrumbs === true) {
+            showBreadcrumb = true;
+          }
+        });
+      }
+
+      if (showBreadcrumb) {
+        addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
+
+        if (breadcrumbConfig.renderer) {
+          let items = [];
+          const start = breadcrumbConfig.omitRoot ? 2 : 1;
+
+          for (let i = start; i < pathData.length; i++) {
+            // First run needed for pre-render
+            const node = pathData[i];
+            const route = RoutingHelpers.mapPathToNode(Routing.getCurrentPath(), node);
+            if (previousBreadcrumbs[route]) {
+              items.push(previousBreadcrumbs[route]);
+            } else if (node.label || node.titleResolver) {
+              document.body.classList.add('lui-breadcrumb');
+              if (node.titleResolver) {
+                items.push({
+                  label:
+                    node.titleResolver.prerenderFallback &&
+                    node.titleResolver.fallbackTitle
+                      ? getNodeLabel(node.titleResolver.fallbackTitle)
+                      : breadcrumbConfig.pendingItemLabel || '',
+                  node: node,
+                  route: route,
+                  pending: true
+                });
+              } else if (node.label) {
+                items.push({ label: getNodeLabel(node), node: node, route: route });
+              }
+            }
+          }
+
+          if (breadcrumbConfig.clearBeforeRender) {
+            breadcrumbContainer.innerHTML = '';
+          }
+          breadcrumbConfig.renderer(breadcrumbContainer, items, clickHandler);
+          items = [];
+
+          for (let i = start; i < pathData.length; i++) {
+            const node = pathData[i];
+
+            const route = RoutingHelpers.mapPathToNode(Routing.getCurrentPath(), node);
+
+            if (node.titleResolver) {
+              const data = await Navigation.extractDataFromPath(route);
+
+              const ctx = RoutingHelpers.substituteDynamicParamsInObject(
+                Object.assign({}, data.pathData.context, node.context),
+                data.pathData.pathParams
+              );
+
+              try {
+                const headerData = await NavigationHelpers.fetchNodeTitleData(node, ctx);
+                items.push({ label: headerData.label, node: node, route: route });
+                continue;
+              } catch (e) {
+                //
+              }
+            }
+
+            if (node.label) {
+              items.push({ label: getNodeLabel(node), node: node, route: route });
+            }
+          }
+
+          if (breadcrumbConfig.clearBeforeRender) {
+            breadcrumbContainer.innerHTML = '';
+          }
+          if (items.length > 1) {
+            items[items.length - 1].last = true;
+            document.body.classList.add('lui-breadcrumb');
+            breadcrumbConfig.renderer(breadcrumbContainer, items, clickHandler);
+          } else if (breadcrumbConfig.autoHide) {
+            document.body.classList.remove('lui-breadcrumb');
+          }
+          previousBreadcrumbs = {};
+          items.map(item => {
+            previousBreadcrumbs[item.route] = item;
+          });
+        } else {
+          document.body.classList.remove('lui-breadcrumb');
+          console.warn('No breadcrumb container renderer specified');
+        }
+      } else {
+        breadcrumbContainer.innerHTML = '';
+        document.body.classList.remove('lui-breadcrumb');
+      }
+    }
+  });
+
+  function getNodeLabel(node) {
+    return LuigiI18N.getTranslation(node.label) || node.label;
+  }
+
+  export function handleClick(node) {
+    dispatch('handleClick', { node });
+  }
+</script>
+
+<style type="text/scss">
+  @import 'styles/variables';
+  .lui-breadcrumb-container {
+    position: absolute;
+    right: 0;
+    top: $topNavHeight;
+    height: var(--luigi__breadcrumb--height);
+    left: 0;
+    display: none;
+  }
+
+  :global(.lui-breadcrumb) .lui-breadcrumb-container {
+    display: block;
+  }
+
+  :global(.lui-global-nav-visible) .lui-breadcrumb-container {
+    left: $globalNavWidth;
+  }
+</style>
diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
index 499494ee0e..78b9f5960a 100644
--- a/core/src/navigation/LeftNav.html
+++ b/core/src/navigation/LeftNav.html
@@ -744,6 +744,10 @@
     display: none;
   }
 
+  :global(.lui-breadcrumb) .fd-app__sidebar {
+    top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height));
+  }
+
   .fd-app__sidebar {
     position: fixed;
     top: $topNavHeight;