From d8cffc8a8a1251b0d0858cde426dfcf6e4351322 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Mon, 15 Oct 2018 12:46:20 +0200
Subject: [PATCH 01/45] tets

---
 core/examples/luigi-sample-angular/src/app/app.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/app/app.component.ts b/core/examples/luigi-sample-angular/src/app/app.component.ts
index 48b58e9afd..78dc87f0fd 100644
--- a/core/examples/luigi-sample-angular/src/app/app.component.ts
+++ b/core/examples/luigi-sample-angular/src/app/app.component.ts
@@ -12,9 +12,9 @@ import {
 })
 export class AppComponent implements OnInit {
   public luigiClient: LuigiClient = LuigiClient;
-  public title = 'app';
+  public title: string = 'app';
 
-  constructor(private luigiService: LuigiContextService) {}
+  constructor(private luigiService: LuigiContextService) { }
 
   ngOnInit() {
     this.luigiClient.addInitListener(context =>

From e8e0405634bb0a95a90f0db36235cb4fbedc8d95 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Tue, 30 Oct 2018 09:18:58 +0100
Subject: [PATCH 02/45] initial

---
 .../src/assets/extendedConfiguration.js       | 47 +++++++++++++++----
 core/src/TopNav.html                          | 29 ++++++++++--
 2 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 7e5ac1aaa9..200c9a4dbd 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -434,13 +434,13 @@ Luigi.setConfig({
           label: 'Settings',
           viewUrl: '/sampleapp.html#/settings'
         },
-        {
-          label: 'Open Google in this tab',
-          externalLink: {
-            url: 'http://google.com',
-            sameWindow: true
-          }
-        },
+        // {
+        //   label: 'Open Google in this tab',
+        //   externalLink: {
+        //     url: 'http://google.com',
+        //     sameWindow: true
+        //   }
+        // },
         {
           pathSegment: 'ext',
           label: 'External Page',
@@ -468,7 +468,38 @@ Luigi.setConfig({
           ]
         }
       ];
-    }
+    },
+    // The following configuration will be used to render the context switcher component
+    contextSwitcher: [
+      {
+        id: 'environmentSwitcher',
+        options: () => {
+          return [...Array(10).keys()].map(n => ({
+            label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
+            pathSegmentValue: 'env' + n // will be used to replace dynamic part
+          }));
+        },
+        actions: [
+          {
+            label: '+ New Environment',
+            link: '/environments/new',
+            position: 'bottom', // top | bottom
+            clickHandler: () => {
+              // called BEFORE route change
+              return true; // route change will be done using link value (if defined)
+              // return false // route change will not be done even if link attribute is defined
+            }
+          }
+        ],
+        parentNode: '/environments', // Can only be an absolute path
+
+        fallbackLabelResolver: id => {
+          // would resolve what do display in the context switcher (Label) in case the activated context (option) is not listed in available options
+          // hidden context case (i.e kyma-system namespace)
+          return capitalize(id);
+        }
+      }
+    ]
   },
 
   routing: {
diff --git a/core/src/TopNav.html b/core/src/TopNav.html
index 8aa645864d..a7bbe3e999 100644
--- a/core/src/TopNav.html
+++ b/core/src/TopNav.html
@@ -7,7 +7,7 @@
       </div>
     </div>
     <div class="fd-global-nav__group fd-global-nav__group--right">
-      <div class="fd-global-nav__actions">
+      <div class="fd-global-nav__top-menu">
         {#if children && pathData.length > 0}
           {#each children as node}
             {#if !node.hideFromNav}
@@ -21,15 +21,36 @@
             {/if}
           {/each}
         {/if}
+      </div>
+
+      <div class="fd-global-nav__context-menu">
+        <div class="fd-popover context-switcher">
+          <div class="fd-popover__control">
+            <button class="fd-button--secondary fd-button--secondary" aria-expanded="{dropDownStates.CONTEXT_SWITCHER_POPOVER || false}"
+              aria-haspopup="true" on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
+              Context Switcher
+              </button>
+          </div>
+          <div class="fd-popover__body" aria-hidden="{dropDownStatesNegated.CONTEXT_SWITCHER_POPOVER || true}" id="CONTEXT_SWITCHER_POPOVER">
+            <nav class="fd-menu">
+              <ul class="fd-menu__list">
+                <li><a href="#" class="fd-menu__item">Option 1</a></li>
+                <li><a href="#" class="fd-menu__item">Option 1</a></li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
 
-        {#if authorizationEnabled}
+      {#if authorizationEnabled}
+      <div class="fd-global-nav__actions">
         <div class="fd-popover user-settings">
           <div class="fd-popover__control">
             <button class="fd-popover__control fd-button--secondary fd-button--m fd-global-nav__btn sap-icon--customer" aria-expanded="{dropDownStates.PROFILE_POPOVER || false}"
               aria-haspopup="true" on:click="toggleDropdownState('PROFILE_POPOVER')" on:blur="closeDropdown('PROFILE_POPOVER')"></button>
           </div>
           <div class="fd-popover__body" aria-hidden="{dropDownStatesNegated.PROFILE_POPOVER || true}" id="PROFILE_POPOVER">
-            <nav class="fd-menu" id="">
+            <nav class="fd-menu">
               <Authorization />
               <!-- <ul class="fd-menu__list">
                 <li><a href="#" class="fd-menu__item">Option 1</a></li>
@@ -38,8 +59,8 @@
             </nav>
           </div>
         </div>
-        {/if}
       </div>
+      {/if}
     </div>
   </nav>
 </div>

From c4e4d57097d42376f20a63c73e751dee8f961d77 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Tue, 30 Oct 2018 16:15:56 +0100
Subject: [PATCH 03/45] refactored route change listener to a external function
 that can be used everywhere

---
 core/src/App.html             | 43 ++++++++++++-----------------------
 core/src/services/routing.js  | 19 ++++++++++++++++
 core/src/utilities/helpers.js | 10 +++++++-
 3 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/core/src/App.html b/core/src/App.html
index 7a88eafe5b..2dd809b678 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -36,36 +36,25 @@
     return paths.includes(routePath);
   };
 
-  const getModifiedHash = s => s.newURL.split('#/')[1];
-  const enableHashRouting = (component, node, config) => {
-    window.addEventListener('hashchange', event => {
+  const enableRouting = (component, node, config) => {
+    // intial route handling
+    const isHashRouting = getConfigValue('routing.useHashRouting');
+    const currentPath = (isHashRouting) ?
+      window.location.hash
+      : trimLeadingSlash(window.location.pathname);
+    Routing.handleRouteChange(currentPath, component, node, config);
+
+    // subsequential route handling
+    Routing.addRouteChangeListener((path) => {
       const pv = component.get().preservedViews;
-      if (!isValidBackRoute(pv, getModifiedHash(event))) {
+      if (!isValidBackRoute(pv, path)) {
         component.set({ preservedViews: [] });
         Routing.removeInactiveIframes(node);
       }
-      Routing.handleRouteChange(getModifiedHash(event), component, node, config);
-    });
-
-    Routing.handleRouteChange(window.location.hash, component, node, config);
-  };
-
-  const enablePathRouting = (component, node, config) => {
-    window.addEventListener('popstate', () => {
-      const getModifiedPathname = window.history.state.path
-        .split('/')
-        .slice(1)
-        .join('/');
-      Routing.handleRouteChange(getModifiedPathname, component, node, config);
+      Routing.handleRouteChange(path, component, node, config);
     });
+  }
 
-    Routing.handleRouteChange(
-      trimLeadingSlash(window.location.pathname),
-      component,
-      node,
-      config
-    );
-  };
 
   const buildPath = (component, params) => {
     let path = params.link;
@@ -232,11 +221,7 @@
         // them to prevent memory leaks
         // this.on('destroy', storeListener.cancel);
 
-        if (getConfigValue('routing.useHashRouting')) {
-          return enableHashRouting(this, node, config);
-        }
-
-        return enablePathRouting(this, node, config);
+        enableRouting(this, node, config);
       }
     },
     methods: {
diff --git a/core/src/services/routing.js b/core/src/services/routing.js
index 398077731d..d5ec5888e2 100644
--- a/core/src/services/routing.js
+++ b/core/src/services/routing.js
@@ -405,3 +405,22 @@ export const handleRouteClick = (node, windowElem = window) => {
   const route = buildRoute(node, `/${node.pathSegment}`);
   navigateTo(route, windowElem);
 };
+
+export const getModifiedHash = s => s.newURL.split('#/')[1];
+export const getModifiedPathname = () =>
+  window.history.state.path
+    .split('/')
+    .slice(1)
+    .join('/');
+
+export const addRouteChangeListener = callback => {
+  if (getConfigValue('routing.useHashRouting')) {
+    return window.addEventListener('hashchange', event => {
+      callback(getModifiedHash(event));
+    });
+  }
+
+  return window.addEventListener('popstate', () => {
+    callback(getModifiedPathname());
+  });
+};
diff --git a/core/src/utilities/helpers.js b/core/src/utilities/helpers.js
index e3a6081516..5284fe308a 100644
--- a/core/src/utilities/helpers.js
+++ b/core/src/utilities/helpers.js
@@ -66,7 +66,7 @@ export const getPathWithoutHash = path => {
 };
 
 /**
- *  Prepend current url to redirect_uri, if it is a relative path
+ * Prepend current url to redirect_uri, if it is a relative path
  * @param {path} string full url, relative or absolute path
  */
 export const prependOrigin = path => {
@@ -79,3 +79,11 @@ export const prependOrigin = path => {
   }
   return window.location.origin;
 };
+
+/**
+ * Returns the negated string value from a bool string
+ * @param {str} string 'true' or 'false'
+ */
+export const getNegatedBoolString = str => {
+  return str === 'true' ? 'false' : 'true';
+};

From 35be633afd7e510a3d241758da76a12fe641ed9f Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Wed, 31 Oct 2018 08:31:11 +0100
Subject: [PATCH 04/45] context switcher, reading options from config, setting
 proper paths for routing

---
 core/.gitignore                               |   1 +
 .../src/app/app-routing.module.ts             |   4 +
 .../src/assets/extendedConfiguration.js       |  75 ++++++----
 .../luigi-sample-angular/src/index.html       |   1 +
 core/src/App.html                             |   6 +-
 core/src/TopNav.html                          |  28 +---
 core/src/navigation/ContextSwitcher.html      | 140 ++++++++++++++++++
 .../navigation/services/context-switcher.js   |  66 +++++++++
 core/src/services/routing.js                  |   6 +
 core/webpack.config.js                        |   6 +-
 10 files changed, 274 insertions(+), 59 deletions(-)
 create mode 100644 core/src/navigation/ContextSwitcher.html
 create mode 100644 core/src/navigation/services/context-switcher.js

diff --git a/core/.gitignore b/core/.gitignore
index eb0f34004a..ad8ab63bcf 100644
--- a/core/.gitignore
+++ b/core/.gitignore
@@ -27,6 +27,7 @@ public/luigi.css
 public/luigi.js
 public/luigi.vendor.js
 public/SAP-icons.woff
+public/fundamental-ui
 
 # maps
 *.map
diff --git a/core/examples/luigi-sample-angular/src/app/app-routing.module.ts b/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
index 825134a68d..fc84a09ca8 100644
--- a/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
+++ b/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
@@ -56,6 +56,10 @@ const routes: Routes = [
   {
     path: 'projects/:projectId/dynamic/:dynamicValue',
     component: DynamicComponent
+  },
+  {
+    path: 'environments/:dynamicValue',
+    component: DynamicComponent
   }
 ];
 
diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 200c9a4dbd..30152823a0 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -419,9 +419,16 @@ Luigi.setConfig({
         },
         {
           hideFromNav: true,
-          pathSegment: 'hidden-sample',
-          label: 'Hidden',
-          viewUrl: '/sampleapp.html#/projects/overview'
+          pathSegment: 'environments',
+          children: [
+            {
+              pathSegment: ':environmentId',
+              viewUrl: '/sampleapp.html#/environments/:environmentId',
+              context: {
+                label: ':environmentId'
+              }
+            }
+          ]
         },
         {
           pathSegment: 'forbidden-sample',
@@ -470,36 +477,44 @@ Luigi.setConfig({
       ];
     },
     // The following configuration will be used to render the context switcher component
-    contextSwitcher: [
-      {
-        id: 'environmentSwitcher',
-        options: () => {
-          return [...Array(10).keys()].map(n => ({
-            label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
-            pathSegmentValue: 'env' + n // will be used to replace dynamic part
-          }));
-        },
-        actions: [
-          {
-            label: '+ New Environment',
-            link: '/environments/new',
-            position: 'bottom', // top | bottom
-            clickHandler: () => {
-              // called BEFORE route change
-              return true; // route change will be done using link value (if defined)
-              // return false // route change will not be done even if link attribute is defined
-            }
+    contextSwitcher: {
+      id: 'environmentSwitcher',
+      options: () => {
+        return [...Array(10).keys()].map(n => ({
+          label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
+          pathValue: 'env' + n // will be used to replace dynamic part
+        }));
+      },
+      actions: [
+        {
+          label: '+ New Environment',
+          link: '/environments/new',
+          position: 'bottom', // top | bottom
+          clickHandler: () => {
+            // called BEFORE route change
+            return true; // route change will be done using link value (if defined)
+            // return false // route change will not be done even if link attribute is defined
           }
-        ],
-        parentNode: '/environments', // Can only be an absolute path
-
-        fallbackLabelResolver: id => {
-          // would resolve what do display in the context switcher (Label) in case the activated context (option) is not listed in available options
-          // hidden context case (i.e kyma-system namespace)
-          return capitalize(id);
         }
+      ],
+      parentNodePath: '/environments', // Has to be an absolute path
+      // parentNodePath: '/environments/:pathValue/overview', // Can only be an absolute path
+
+      /**
+       * fallbackLabelResolver
+       * Resolve what do display in the context switcher (Label) in case the activated
+       * context (option) is not listed in available options (eg kyma-system namespace)
+       */
+      fallbackLabelResolver: async id => {
+        // capitalize, delayed output
+        return await new Promise(resolve => {
+          setTimeout(() => {
+            resolve((id && id.replace(/\b\w/g, l => l.toUpperCase())) || id);
+          }, 100);
+        });
+        // return id.replace(/\b\w/g, l => l.toUpperCase());
       }
-    ]
+    }
   },
 
   routing: {
diff --git a/core/examples/luigi-sample-angular/src/index.html b/core/examples/luigi-sample-angular/src/index.html
index 56db6f0a2b..d144a3fcf5 100644
--- a/core/examples/luigi-sample-angular/src/index.html
+++ b/core/examples/luigi-sample-angular/src/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Luigi</title>
+  <link rel='stylesheet' href='/luigi-core/fundamental-ui/fundamental-ui.min.css'>
   <link rel='stylesheet' href='/luigi-core/luigi.css'>
 </head>
 <body>
diff --git a/core/src/App.html b/core/src/App.html
index 2dd809b678..b142c2ca09 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -23,7 +23,6 @@
   import { getConfigValue, getConfigValueFromObject } from './services/config.js';
   import { isFunction } from './utilities/helpers.js';
 
-  const trimLeadingSlash = str => str.replace(/^\//, '');
   const isValidBackRoute = (preservedViews, routeHash) => {
     if (preservedViews.length === 0) {
       return false;
@@ -38,10 +37,7 @@
 
   const enableRouting = (component, node, config) => {
     // intial route handling
-    const isHashRouting = getConfigValue('routing.useHashRouting');
-    const currentPath = (isHashRouting) ?
-      window.location.hash
-      : trimLeadingSlash(window.location.pathname);
+    const currentPath = Routing.getCurrentPath();
     Routing.handleRouteChange(currentPath, component, node, config);
 
     // subsequential route handling
diff --git a/core/src/TopNav.html b/core/src/TopNav.html
index a7bbe3e999..9600c9d985 100644
--- a/core/src/TopNav.html
+++ b/core/src/TopNav.html
@@ -23,24 +23,7 @@
         {/if}
       </div>
 
-      <div class="fd-global-nav__context-menu">
-        <div class="fd-popover context-switcher">
-          <div class="fd-popover__control">
-            <button class="fd-button--secondary fd-button--secondary" aria-expanded="{dropDownStates.CONTEXT_SWITCHER_POPOVER || false}"
-              aria-haspopup="true" on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
-              Context Switcher
-              </button>
-          </div>
-          <div class="fd-popover__body" aria-hidden="{dropDownStatesNegated.CONTEXT_SWITCHER_POPOVER || true}" id="CONTEXT_SWITCHER_POPOVER">
-            <nav class="fd-menu">
-              <ul class="fd-menu__list">
-                <li><a href="#" class="fd-menu__item">Option 1</a></li>
-                <li><a href="#" class="fd-menu__item">Option 1</a></li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </div>
+      <ContextSwitcher />
 
       {#if authorizationEnabled}
       <div class="fd-global-nav__actions">
@@ -67,13 +50,11 @@
 
 <script type="text/javascript">
   import Backdrop from './Backdrop.html';
+  import ContextSwitcher from './navigation/ContextSwitcher.html';
   import Authorization from './Authorization.html';
   import { handleRouteClick } from './services/routing.js';
   import { getConfigValue, getConfigBooleanValue } from './services/config.js';
-
-  const getNegatedBoolString = str => {
-    return str === 'true' ? 'false' : 'true';
-  };
+  import { getNegatedBoolString } from './utilities/helpers.js';
 
   const setTopNavData = (current, component) => {
     if (current.pathData && 0 < current.pathData.length) {
@@ -151,7 +132,8 @@
       }
     },
     components: {
-      Authorization
+      Authorization,
+      ContextSwitcher
     }
   };
 </script>
diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
new file mode 100644
index 0000000000..ed76218601
--- /dev/null
+++ b/core/src/navigation/ContextSwitcher.html
@@ -0,0 +1,140 @@
+{#if contextSwitcherEnabled}
+<div class="fd-global-nav__context-menu">
+  <div class="fd-popover context-switcher">
+    <div class="fd-popover__control">
+      <button class="fd-button--secondary" aria-expanded="{dropDownStates.CONTEXT_SWITCHER_POPOVER || false}"
+        aria-haspopup="true" on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
+        Context Switcher
+        </button>
+    </div>
+    <div class="fd-popover__body" aria-hidden="{dropDownStatesNegated.CONTEXT_SWITCHER_POPOVER || true}" id="CONTEXT_SWITCHER_POPOVER">
+      <nav class="fd-menu">
+        <ul class="fd-menu__list fd-menu__list--top">
+          <li><a class="fd-menu__item" on:click="goTo('/environment/create')">+ Environment</a></li>
+        </ul>
+        <ul class="fd-menu__list" id="context_menu_middle">
+        {#if options && options.length}
+          {#each options as node}
+          <li><a class="fd-menu__item" on:click="goTo(node.path)">{node.label}</a></li>
+          {/each}
+        {/if}
+        </ul>
+        <ul class="fd-menu__list fd-menu__list--bottom" style="border-top: 1px solid #eee">
+          <li><a class="fd-menu__item" on:click="goTo('/environment/create')"><span class="sap-icon--log"></span> Something</a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</div>
+{/if}
+
+<script type="text/javascript">
+  import { ContextSwitcherHelpers } from './services/context-switcher.js';
+  import { getConfigValue, getConfigValueAsync, getConfigBooleanValue } from '../services/config.js';
+  import { getNegatedBoolString } from '../utilities/helpers.js';
+  import * as Routing from '../services/routing.js';
+
+  export default {
+    async oncreate() {
+      const contextSwitcherConfig = getConfigValue('navigation.contextSwitcher');
+      this.set({
+        contextSwitcherEnabled: !!contextSwitcherConfig,
+        config: contextSwitcherConfig
+      });
+
+      if (contextSwitcherConfig) {
+        const contextSwitcherOptions = await getConfigValueAsync('navigation.contextSwitcher.options');
+        console.log('TCL: contextSwitcherConfig', contextSwitcherConfig, contextSwitcherOptions);
+        const options = await ContextSwitcherHelpers.generateSwitcherNav(contextSwitcherConfig, contextSwitcherOptions);
+        console.log('options', options);
+        this.set({ options });
+      }
+
+      this.setSelectedContext(Routing.getCurrentPath());
+      Routing.addRouteChangeListener((path) => this.setSelectedContext(path));
+    },
+    data() {
+      return {
+        dropDownStates: {}
+      };
+    },
+    computed: {
+      dropDownStatesNegated({ dropDownStates }) {
+        const negated = {};
+        for (const key in dropDownStates) {
+          if (dropDownStates.hasOwnProperty(key)) {
+            negated[key] = getNegatedBoolString(dropDownStates[key]);
+          }
+        }
+        return negated;
+      }
+    },
+    methods: {
+      setSelectedContext(currentPath) {
+        const parentNodePath = this.get().config.parentNodePath;
+        let selectedLabel;
+        const inContextPath = parentNodePath && currentPath.indexOf(parentNodePath) !== -1;
+        if (inContextPath) {
+          // we are inside the context switcher base path
+          const truncatedPath = currentPath.replace(parentNodePath, '');
+          const selectedId = truncatedPath.split('/')[0];
+          console.log('setSelectedContext for truncated', currentPath, parentNodePath, '=', truncatedPath, 'id', selectedId);
+          selectedLabel = this.getMatchingNodeName(selectedId);
+        } else if (parentNodePath) {
+          
+        }
+        this.set({
+          selectedLabel
+        })
+      },
+      getMatchingNodeName(id) {
+
+      }
+      goTo(path) {
+        if (getConfigBooleanValue('routing.useHashRouting')) {
+          window.location.hash = path;
+        } else {
+          window.location.pathname = path;
+        }
+      },
+      toggleDropdownState(name) {
+        const dropDownStates = this.get().dropDownStates || {};
+        dropDownStates[name] = getNegatedBoolString(dropDownStates[name]);
+        this.set({
+          dropDownStates
+        });
+      },
+      closeDropdown(name) {
+        const dropDownStates = this.get().dropDownStates || {};
+        dropDownStates[name] = 'false';
+        this.set({
+          dropDownStates
+        });
+      }
+    }
+  };
+</script>
+
+<style type="text/scss">
+  $fd-icons-path: 'node_modules/fundamental-ui/scss/icons/';
+  @import 'node_modules/fundamental-ui/scss/icons';
+  // @import 'node_modules/fundamental-ui/scss/components/action-bar';
+  // @import 'node_modules/fundamental-ui/scss/components/global-nav';
+  // @import 'node_modules/fundamental-ui/scss/components/popover';
+  // @import 'node_modules/fundamental-ui/scss/components/button';
+  // fundamental-ui is loaded globally
+
+  .fd-popover__body {
+    right: 0;
+  }
+  .fd-menu__list--top {
+    border-bottom: 1px solid #eeeeef;
+  }
+  .fd-menu__list--bottom {
+    border-top: 1px solid #eeeeef;
+  }
+  #context_menu_middle {
+    max-height: 240px; // TODO: markus clarify how long this list should be (programatically or static value?)
+    overflow-y: auto;
+  }
+</style>
diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
new file mode 100644
index 0000000000..a23a19e830
--- /dev/null
+++ b/core/src/navigation/services/context-switcher.js
@@ -0,0 +1,66 @@
+export const ContextSwitcherHelpers = {
+  prepareParentNodePath(config) {
+    if (config.parentNodePath) {
+      if (!config.parentNodePath.startsWith('/')) {
+        console.error(
+          'Error: navigation.parentNodePath must be an absolute path and start with a slash.'
+        );
+      }
+      // add trailing slash if it does not have a dynamic path segment
+      const hasNoDynamicPathSegment =
+        config.parentNodePath.split('/').filter(p => p.startsWith(':'))
+          .length === 0;
+      if (hasNoDynamicPathSegment && !config.parentNodePath.endsWith('/')) {
+        config.parentNodePath = `${config.parentNodePath}/`;
+      }
+    }
+    if (!config.parentNodePath) {
+      const optionsWithoutAbsolutePaths =
+        rawOptions.filter(o => o.pathValue.startsWith('/')).length !==
+        rawOptions.length;
+      if (optionsWithoutAbsolutePaths) {
+        console.error(
+          'Error: navigation.parentNodePath is not defined, therefore navigation.options[].pathValue must be absolute paths.'
+        );
+      }
+    }
+    return config.parentNodePath;
+  },
+
+  buildNodePath(parentNodePath, opt) {
+    // prepare base path
+    // 0 options[].pathValue renamed to pathValue, as it could contain a full path too
+    // 1. check if parentNodePath exists
+    // 1.1. if parentNodePath exists, must start with /
+    // 1.2. parentNodePath must end with / or contain colon to substitute the value
+    // 1.3. if no colon path segment, pathValue gets appended to parentNodePath
+    // 1.4. if colon is present, parentValue will get substituted
+    // 2. if parentNodePath does not exist
+    // 2.1. options pathValue must start with /
+    // 2.2. and will be completely used for routing
+
+    let path = opt.pathValue;
+    // parentNodePath contains dynamic pathSegment
+    if (parentNodePath && parentNodePath.indexOf(':') !== -1) {
+      path = parentNodePath
+        .split('/')
+        .map(pp => {
+          // Replace dynamic node with pathValue. Name of dynamic node can be anything, also just a single colon
+          return pp.startsWith(':') ? opt.pathValue : pp;
+        })
+        .join('/');
+    } else if (parentNodePath) {
+      // parentNodePath without dynamic pathSegment
+      path = parentNodePath + opt.pathValue;
+    }
+    return path;
+  },
+
+  generateSwitcherNav(config, rawOptions) {
+    const parentNodePath = this.prepareParentNodePath(config);
+    return rawOptions.map(opt => ({
+      label: opt.label,
+      path: this.buildNodePath(parentNodePath, opt)
+    }));
+  }
+};
diff --git a/core/src/services/routing.js b/core/src/services/routing.js
index d5ec5888e2..ee188fb37c 100644
--- a/core/src/services/routing.js
+++ b/core/src/services/routing.js
@@ -406,6 +406,7 @@ export const handleRouteClick = (node, windowElem = window) => {
   navigateTo(route, windowElem);
 };
 
+export const trimLeadingSlash = str => str.replace(/^\//, '');
 export const getModifiedHash = s => s.newURL.split('#/')[1];
 export const getModifiedPathname = () =>
   window.history.state.path
@@ -413,6 +414,11 @@ export const getModifiedPathname = () =>
     .slice(1)
     .join('/');
 
+export const getCurrentPath = () =>
+  getConfigValue('routing.useHashRouting')
+    ? window.location.hash.replace('#', '')
+    : trimLeadingSlash(window.location.pathname);
+
 export const addRouteChangeListener = callback => {
   if (getConfigValue('routing.useHashRouting')) {
     return window.addEventListener('hashchange', event => {
diff --git a/core/webpack.config.js b/core/webpack.config.js
index 87f2733b02..68c6641575 100644
--- a/core/webpack.config.js
+++ b/core/webpack.config.js
@@ -81,7 +81,11 @@ module.exports = {
     new ExtractTextPlugin('luigi.css'),
     new CopyWebpackPlugin([
       'node_modules/oidc-client/dist/oidc-client.min.js',
-      'node_modules/fundamental-ui/dist/SAP-icons.woff'
+      'node_modules/fundamental-ui/dist/SAP-icons.woff',
+      {
+        from: 'node_modules/fundamental-ui/dist',
+        to: 'fundamental-ui'
+      }
     ])
   ],
   mode: 'production',

From e25b3fe0bad19be76bcc244cc1e18ed75af9ad9a Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Fri, 2 Nov 2018 12:32:17 +0100
Subject: [PATCH 05/45] added dynamic top + bottom actions, lazy loading for
 context switcher

---
 .../src/app/app-routing.module.ts             |   8 ++
 .../src/assets/extendedConfiguration.js       |  44 +++++--
 core/src/navigation/ContextSwitcher.html      | 116 +++++++++++++-----
 .../navigation/services/context-switcher.js   |   9 +-
 core/src/services/routing.js                  |   7 +-
 core/src/utilities/helpers.js                 |   6 +
 6 files changed, 147 insertions(+), 43 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/app/app-routing.module.ts b/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
index fc84a09ca8..1a0dac6922 100644
--- a/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
+++ b/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
@@ -57,9 +57,17 @@ const routes: Routes = [
     path: 'projects/:projectId/dynamic/:dynamicValue',
     component: DynamicComponent
   },
+  {
+    path: 'create/:dynamicValue',
+    component: DynamicComponent
+  },
   {
     path: 'environments/:dynamicValue',
     component: DynamicComponent
+  },
+  {
+    path: 'environments/:ignoredDynamicValue/:dynamicValue',
+    component: DynamicComponent
   }
 ];
 
diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 30152823a0..965bbdddea 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -417,6 +417,14 @@ Luigi.setConfig({
           viewUrl: '/sampleapp.html#/projects/overview',
           children: projectsNavProviderFn
         },
+        {
+          hideFromNav: true,
+          pathSegment: 'create-environment',
+          viewUrl: '/sampleapp.html#/create/environment',
+          context: {
+            label: 'Create Environment'
+          }
+        },
         {
           hideFromNav: true,
           pathSegment: 'environments',
@@ -425,8 +433,25 @@ Luigi.setConfig({
               pathSegment: ':environmentId',
               viewUrl: '/sampleapp.html#/environments/:environmentId',
               context: {
-                label: ':environmentId'
-              }
+                label: ':environmentId',
+                links: ['Overview']
+              },
+              children: ['Overview'].map(name => ({
+                pathSegment: name
+                  .toLowerCase()
+                  .split(' ')
+                  .join('-'),
+                label: name,
+                context: {
+                  label: name
+                },
+                viewUrl:
+                  '/sampleapp.html#/environments/:environmentId/' +
+                  name
+                    .toLowerCase()
+                    .split(' ')
+                    .join('-')
+              }))
             }
           ]
         },
@@ -479,8 +504,11 @@ Luigi.setConfig({
     // The following configuration will be used to render the context switcher component
     contextSwitcher: {
       id: 'environmentSwitcher',
+      parentNodePath: '/environments', // Has to be an absolute path
+      emptyLabel: 'Select Environment ...',
+      lazyloadOptions: false, // load options on click
       options: () => {
-        return [...Array(10).keys()].map(n => ({
+        return [...Array(10).keys()].filter(n => n !== 0).map(n => ({
           label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
           pathValue: 'env' + n // will be used to replace dynamic part
         }));
@@ -488,17 +516,16 @@ Luigi.setConfig({
       actions: [
         {
           label: '+ New Environment',
-          link: '/environments/new',
-          position: 'bottom', // top | bottom
-          clickHandler: () => {
+          link: '/create-environment',
+          position: 'top', // top | bottom
+          clickHandler: node => {
+            console.log('clickHandler reached', node);
             // called BEFORE route change
             return true; // route change will be done using link value (if defined)
             // return false // route change will not be done even if link attribute is defined
           }
         }
       ],
-      parentNodePath: '/environments', // Has to be an absolute path
-      // parentNodePath: '/environments/:pathValue/overview', // Can only be an absolute path
 
       /**
        * fallbackLabelResolver
@@ -516,7 +543,6 @@ Luigi.setConfig({
       }
     }
   },
-
   routing: {
     /**
      * Development:
diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index ed76218601..c22a01bfe4 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -3,25 +3,50 @@
   <div class="fd-popover context-switcher">
     <div class="fd-popover__control">
       <button class="fd-button--secondary" aria-expanded="{dropDownStates.CONTEXT_SWITCHER_POPOVER || false}"
-        aria-haspopup="true" on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
-        Context Switcher
-        </button>
+        aria-haspopup="true" on:click="onContextSwitcherOpen('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
+        {#if !selectedLabel}{config.emptyLabel}{/if}
+        {#if selectedLabel}{selectedLabel}{/if}
+      </button>
     </div>
     <div class="fd-popover__body" aria-hidden="{dropDownStatesNegated.CONTEXT_SWITCHER_POPOVER || true}" id="CONTEXT_SWITCHER_POPOVER">
       <nav class="fd-menu">
+        {#if actions && actions.length}
         <ul class="fd-menu__list fd-menu__list--top">
-          <li><a class="fd-menu__item" on:click="goTo('/environment/create')">+ Environment</a></li>
+          {#each actions as node}
+          {#if node.position === 'top' || !['top', 'bottom'].includes(node.position)}
+          <li><a class="fd-menu__item" on:click="onActionClick(node)">{node.label}</a></li>
+          {/if}
+          {/each}
         </ul>
+        {/if}
+
         <ul class="fd-menu__list" id="context_menu_middle">
-        {#if options && options.length}
+        {#if options.length === 0}
+          <li><div class="fd-spinner"><div></div></div></li>
+        {/if}
+        {#if options.length}
           {#each options as node}
-          <li><a class="fd-menu__item" on:click="goTo(node.path)">{node.label}</a></li>
+          <li><a class="fd-menu__item" on:click="goTo(node.path)">
+          {#if node.label}{node.label}{/if}
+          {#if !node.label}
+            {#await getMatchingNodeName(options, config.fallbackLabelResolver, node.id)}
+            {:then label}
+              {label}
+            {/await}
+          {/if}
+          </a></li>
           {/each}
         {/if}
         </ul>
-        <ul class="fd-menu__list fd-menu__list--bottom" style="border-top: 1px solid #eee">
-          <li><a class="fd-menu__item" on:click="goTo('/environment/create')"><span class="sap-icon--log"></span> Something</a></li>
+        {#if actions && actions.length}
+        <ul class="fd-menu__list fd-menu__list--bottom">
+          {#each actions as node}
+          {#if node.position === 'bottom'}
+          <li><a class="fd-menu__item" on:click="onActionClick(node)">{node.label}</a></li>
+          {/if}
+          {/each}
         </ul>
+        {/if}
       </nav>
     </div>
   </div>
@@ -30,8 +55,8 @@
 
 <script type="text/javascript">
   import { ContextSwitcherHelpers } from './services/context-switcher.js';
-  import { getConfigValue, getConfigValueAsync, getConfigBooleanValue } from '../services/config.js';
-  import { getNegatedBoolString } from '../utilities/helpers.js';
+  import { getConfigValue, getConfigValueAsync, getConfigValueFromObjectAsync, getConfigBooleanValue } from '../services/config.js';
+  import { getNegatedBoolString, trimLeadingSlash } from '../utilities/helpers.js';
   import * as Routing from '../services/routing.js';
 
   export default {
@@ -43,19 +68,24 @@
       });
 
       if (contextSwitcherConfig) {
-        const contextSwitcherOptions = await getConfigValueAsync('navigation.contextSwitcher.options');
-        console.log('TCL: contextSwitcherConfig', contextSwitcherConfig, contextSwitcherOptions);
-        const options = await ContextSwitcherHelpers.generateSwitcherNav(contextSwitcherConfig, contextSwitcherOptions);
-        console.log('options', options);
-        this.set({ options });
+        const actions = await getConfigValueAsync('navigation.contextSwitcher.actions');
+        this.set({
+          actions,
+          fallbackLabelResolver: contextSwitcherConfig.fallbackLabelResolver
+        });
+        // options are loaded initially by default
+        if (typeof contextSwitcherConfig.lazyloadOptions === 'undefined' || contextSwitcherConfig.lazyloadOptions) {
+          await this.fetchOptions();
+        }
       }
 
-      this.setSelectedContext(Routing.getCurrentPath());
-      Routing.addRouteChangeListener((path) => this.setSelectedContext(path));
+      await this.setSelectedContext(Routing.getCurrentPath());
+      Routing.addRouteChangeListener(() => this.setSelectedContext(Routing.getCurrentPath()));
     },
     data() {
       return {
-        dropDownStates: {}
+        dropDownStates: {},
+        options: []
       };
     },
     computed: {
@@ -69,27 +99,44 @@
         return negated;
       }
     },
+    helpers: {
+      getMatchingNodeName: (options, config, id) => {
+        return ContextSwitcherHelpers.getMatchingNodeName(options, config, id);
+      }
+    },
     methods: {
-      setSelectedContext(currentPath) {
-        const parentNodePath = this.get().config.parentNodePath;
+      async fetchOptions() {
+        let options = this.get().options;
+        if (!options.length) {
+          const contextSwitcherOptions = await getConfigValueAsync('navigation.contextSwitcher.options');
+          options = await ContextSwitcherHelpers.generateSwitcherNav(this.get().config, contextSwitcherOptions);
+          this.set({options});
+        }
+      },
+      async setSelectedContext(currentPath) {
         let selectedLabel;
-        const inContextPath = parentNodePath && currentPath.indexOf(parentNodePath) !== -1;
-        if (inContextPath) {
+        const parentNodePath = this.get().config.parentNodePath;
+        const inContextBasePath = parentNodePath && currentPath.indexOf(parentNodePath) !== -1;
+        if (inContextBasePath) {
           // we are inside the context switcher base path
-          const truncatedPath = currentPath.replace(parentNodePath, '');
+          const truncatedPath = trimLeadingSlash(currentPath.replace(parentNodePath, ''));
           const selectedId = truncatedPath.split('/')[0];
-          console.log('setSelectedContext for truncated', currentPath, parentNodePath, '=', truncatedPath, 'id', selectedId);
-          selectedLabel = this.getMatchingNodeName(selectedId);
-        } else if (parentNodePath) {
-          
+          selectedLabel = await ContextSwitcherHelpers.getMatchingNodeName(this.get().options, this.get().config.fallbackLabelResolver, selectedId);
         }
         this.set({
           selectedLabel
         })
       },
-      getMatchingNodeName(id) {
-
-      }
+      async onActionClick(node) {
+        if (node.clickHandler) {
+          const result = await getConfigValueFromObjectAsync({result: node.clickHandler(node)}, 'result');
+          if (!result) {
+            // If the clickHandler returns falsy value, do nothing, else continue with linking
+            return;
+          }
+        }
+        this.goTo(node.link);
+      },
       goTo(path) {
         if (getConfigBooleanValue('routing.useHashRouting')) {
           window.location.hash = path;
@@ -97,6 +144,10 @@
           window.location.pathname = path;
         }
       },
+      onContextSwitcherOpen(name) {
+        this.toggleDropdownState(name);
+        this.fetchOptions();
+      },
       toggleDropdownState(name) {
         const dropDownStates = this.get().dropDownStates || {};
         dropDownStates[name] = getNegatedBoolString(dropDownStates[name]);
@@ -127,6 +178,9 @@
   .fd-popover__body {
     right: 0;
   }
+  .fd-spinner {
+    margin: 20px auto;
+  }
   .fd-menu__list--top {
     border-bottom: 1px solid #eeeeef;
   }
@@ -134,7 +188,7 @@
     border-top: 1px solid #eeeeef;
   }
   #context_menu_middle {
-    max-height: 240px; // TODO: markus clarify how long this list should be (programatically or static value?)
+    max-height: 257px; // TODO: check with Franz
     overflow-y: auto;
   }
 </style>
diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index a23a19e830..50d216383f 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -56,11 +56,18 @@ export const ContextSwitcherHelpers = {
     return path;
   },
 
+  async getMatchingNodeName(options, fallbackLabelResolver, id) {
+    return new Promise(async resolve => {
+      resolve(fallbackLabelResolver ? await fallbackLabelResolver(id) : id);
+    });
+  },
+
   generateSwitcherNav(config, rawOptions) {
     const parentNodePath = this.prepareParentNodePath(config);
     return rawOptions.map(opt => ({
       label: opt.label,
-      path: this.buildNodePath(parentNodePath, opt)
+      path: this.buildNodePath(parentNodePath, opt),
+      id: opt.pathValue
     }));
   }
 };
diff --git a/core/src/services/routing.js b/core/src/services/routing.js
index ee188fb37c..5f5582e108 100644
--- a/core/src/services/routing.js
+++ b/core/src/services/routing.js
@@ -5,7 +5,11 @@ import {
   getConfigBooleanValue,
   getConfigValueFromObject
 } from './config';
-import { getPathWithoutHash, getUrlWithoutHash } from '../utilities/helpers';
+import {
+  getPathWithoutHash,
+  getUrlWithoutHash,
+  trimLeadingSlash
+} from '../utilities/helpers';
 
 const iframeNavFallbackTimeout = 2000;
 let timeoutHandle;
@@ -406,7 +410,6 @@ export const handleRouteClick = (node, windowElem = window) => {
   navigateTo(route, windowElem);
 };
 
-export const trimLeadingSlash = str => str.replace(/^\//, '');
 export const getModifiedHash = s => s.newURL.split('#/')[1];
 export const getModifiedPathname = () =>
   window.history.state.path
diff --git a/core/src/utilities/helpers.js b/core/src/utilities/helpers.js
index 5284fe308a..c8432622f1 100644
--- a/core/src/utilities/helpers.js
+++ b/core/src/utilities/helpers.js
@@ -87,3 +87,9 @@ export const prependOrigin = path => {
 export const getNegatedBoolString = str => {
   return str === 'true' ? 'false' : 'true';
 };
+
+/**
+ * Removes leading slash of a string
+ * @param {str} string string without leading slash
+ */
+export const trimLeadingSlash = str => str.replace(/^\//, '');

From be143f34a1d628ed5eebce6126f12c24a2f79f4c Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Fri, 2 Nov 2018 13:42:15 +0100
Subject: [PATCH 06/45] lazyloadOptions defaults to true, added documentation

---
 .../src/assets/extendedConfiguration.js       | 21 +++++---------
 core/src/TopNav.html                          |  4 ++-
 core/src/navigation/ContextSwitcher.html      |  6 ++--
 docs/navigation-configuration.md              | 29 +++++++++++++++++--
 4 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 965bbdddea..ff077191f3 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -503,10 +503,9 @@ Luigi.setConfig({
     },
     // The following configuration will be used to render the context switcher component
     contextSwitcher: {
-      id: 'environmentSwitcher',
-      parentNodePath: '/environments', // Has to be an absolute path
       emptyLabel: 'Select Environment ...',
-      lazyloadOptions: false, // load options on click
+      parentNodePath: '/environments', // absolute path
+      lazyloadOptions: true, // load options on click instead on page load
       options: () => {
         return [...Array(10).keys()].filter(n => n !== 0).map(n => ({
           label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
@@ -517,9 +516,8 @@ Luigi.setConfig({
         {
           label: '+ New Environment',
           link: '/create-environment',
-          position: 'top', // top | bottom
+          position: 'top', // top or bottom
           clickHandler: node => {
-            console.log('clickHandler reached', node);
             // called BEFORE route change
             return true; // route change will be done using link value (if defined)
             // return false // route change will not be done even if link attribute is defined
@@ -530,16 +528,11 @@ Luigi.setConfig({
       /**
        * fallbackLabelResolver
        * Resolve what do display in the context switcher (Label) in case the activated
-       * context (option) is not listed in available options (eg kyma-system namespace)
+       * context (option) is not listed in available options (eg kyma-system namespace),
+       * or if options have not been fetched yet
        */
-      fallbackLabelResolver: async id => {
-        // capitalize, delayed output
-        return await new Promise(resolve => {
-          setTimeout(() => {
-            resolve((id && id.replace(/\b\w/g, l => l.toUpperCase())) || id);
-          }, 100);
-        });
-        // return id.replace(/\b\w/g, l => l.toUpperCase());
+      fallbackLabelResolver: id => {
+        return id.replace(/\b\w/g, l => l.toUpperCase());
       }
     }
   },
diff --git a/core/src/TopNav.html b/core/src/TopNav.html
index 9600c9d985..af02564c5c 100644
--- a/core/src/TopNav.html
+++ b/core/src/TopNav.html
@@ -173,7 +173,9 @@
     line-height: 1em;
     padding: 13px 0;
   }
-
+  .fd-global-nav__top-menu {
+    margin-right: 5px;
+  }
   .hideNavComponent {
     display: none;
   }
diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index c22a01bfe4..e4f05f7d5e 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -73,8 +73,8 @@
           actions,
           fallbackLabelResolver: contextSwitcherConfig.fallbackLabelResolver
         });
-        // options are loaded initially by default
-        if (typeof contextSwitcherConfig.lazyloadOptions === 'undefined' || contextSwitcherConfig.lazyloadOptions) {
+        // options are loaded lazy by default
+        if (contextSwitcherConfig.lazyloadOptions === false) {
           await this.fetchOptions();
         }
       }
@@ -107,7 +107,7 @@
     methods: {
       async fetchOptions() {
         let options = this.get().options;
-        if (!options.length) {
+        if (!options.length || getConfigValue('navigation.contextSwitcher.lazyloadOptions') !== false) {
           const contextSwitcherOptions = await getConfigValueAsync('navigation.contextSwitcher.options');
           options = await ContextSwitcherHelpers.generateSwitcherNav(this.get().config, contextSwitcherOptions);
           this.set({options});
diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index 448b1f2496..f1baeb2193 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -27,7 +27,7 @@ window.Luigi.setConfig({
   },
   // navigation structure and settings
   navigation: {
-    nodeAccessibilityResolver: function (nodeToCheckPermissionFor, parentNode, currentContext) {}
+    nodeAccessibilityResolver: function (nodeToCheckPermissionFor, parentNode, currentContext) {},
     nodes: [
         // STATIC navigation node
       {
@@ -49,7 +49,15 @@ window.Luigi.setConfig({
         },
         children: [node, node, node]
       }
-    ]
+    ],
+    contextSwitcher: {
+      emptyLabel: 'Select Environment ...',
+      parentNodePath: '/environments',
+      lazyloadOptions: false,
+      fallbackLabelResolver: (id) => (id.toUpperCase()),
+      options: [{label,pathValue}, {label,pathValue}]
+      },
+      actions: [{label,link,position,clickHandler?}],
   }
 });
 ```
@@ -66,6 +74,23 @@ You can configure the way Luigi tackles routing in your application in the **Rou
 - **nodeAccessibilityResolver** allows you to define a permission checker function that gets executed on every node. If it returns `false`, Luigi removes the node and its children from the navigation structure.
   **nodeAccessibilityResolver** receives all values defined in the node configuration. See [angular sampleconfig.js](../core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js) for the **constraints** example.
 
+## Context Switcher
+
+Allows to switch between a curated list of navigation elements. Adds a drop down switcher next to the profile in the top navigation bar. Usually used for switching between environments. 
+
+- **emptyLabel** specifies the default label that is shown if no context is selected.
+- **parentNodePath** specifies the base path, that is prepended to **options[].pathValue**. Must be an absolute path.
+- **lazyloadOptions** defines when to fetch **options**. When set to `true`, loads **options** on Context Switcher click without any caching. When set to `false`, loads **options** once on page load . Defaults to `true`. 
+- **options** defines the list of context element. Context element properties are:
+  - **label** defines the context element label. If it is not defined, **pathValue** will be passed to **fallbackLabelResolver** to set its value. Defaults to **pathValue**, if **fallbackLabelResolver** is not defined.
+  - **pathValue** defines the context element path that is appended to **parentNodePath**. **pathValue** is used as 
+- **actions** defines a list of additional elements that are shown on above or below the Context Switcher **options**. Each action contains the following parameters:
+  - **label** defines the action element label
+  - **position** is optional. Defines the action element position. Can be `top` or `bottom`. Defaults to `top`
+  - **link** is optional. Defines an absolute Link to a **node**.
+  - **clickHandler** specifies a function and is executed on click and should return a boolean. If it returns `true`, **link** is opened afterwards.
+- **fallbackLabelResolver** specifies a function that is executed to fetch a context element label if **options** are not yet loaded or **label** is not defined.
+
 ## Nodes
 
 - **pathSegment** specifies the partial URL of the current segment. A static settings example reflects `luigidomain.test/settings`, while a dynamic one, prefixed with a colon, loads on any other value. **pathSegments** must not contain slashes.

From 119cac28cbfbda9060b2ea7618470ceb04aa4ac6 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Fri, 2 Nov 2018 14:08:19 +0100
Subject: [PATCH 07/45] added e2e tets

---
 .../e2e/tests/context-switcher.spec.js        | 51 +++++++++++++++++++
 docs/navigation-configuration.md              |  2 +-
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js

diff --git a/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
new file mode 100644
index 0000000000..2796ce8a42
--- /dev/null
+++ b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
@@ -0,0 +1,51 @@
+describe('Context Switcher', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:4200');
+    cy.login('tets@email.com', 'tets');
+  });
+
+  it('Clicking around the Context Switcher', () => {
+    // default label
+    cy.get('.context-switcher')
+      .contains('Select Environment ...')
+      .click();
+
+    // click an action
+    cy.get('.context-switcher .fd-popover__body')
+      .contains('New Environment')
+      .click();
+
+    cy.location().should(loc => {
+      expect(loc.hash).to.eq('#/create-environment');
+    });
+
+    // default label
+    cy.get('.context-switcher')
+      .contains('Select Environment ...')
+      .click();
+
+    // click an action
+    cy.get('.context-switcher .fd-popover__body')
+      .contains('Environment 1')
+      .click();
+
+    cy.location().should(loc => {
+      expect(loc.hash).to.eq('#/environments/env1');
+    });
+
+    // check label
+    cy.get('.context-switcher .fd-popover__control button').should(
+      'contain',
+      'Env1'
+    );
+
+    // Overview
+    cy.goToOverviewPage();
+
+    // check label
+    cy.get('.context-switcher .fd-popover__control button').should(
+      'contain',
+      'Select Environment ...'
+    );
+  });
+});
diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index f1baeb2193..ffa8b33c16 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -76,7 +76,7 @@ You can configure the way Luigi tackles routing in your application in the **Rou
 
 ## Context Switcher
 
-Allows to switch between a curated list of navigation elements. Adds a drop down switcher next to the profile in the top navigation bar. Usually used for switching between environments. 
+Allows to switch between a curated list of navigation elements. Adds a drop down switcher next to the profile in the top navigation bar. Typically used for switching between environments. 
 
 - **emptyLabel** specifies the default label that is shown if no context is selected.
 - **parentNodePath** specifies the base path, that is prepended to **options[].pathValue**. Must be an absolute path.

From 0a83dd7e9afeb7df8d700f397c9866852d16d5bf Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Mon, 5 Nov 2018 15:30:43 +0100
Subject: [PATCH 08/45] changes based on comments, fixed e2e tests

---
 .../e2e/tests/context-switcher.spec.js        |  4 +-
 .../e2e/tests/luigi-client-features.spec.js   |  9 ++--
 .../e2e/tests/navigation.spec.js              |  2 +-
 .../dps2/child-node-2.component.html          |  2 +-
 .../src/assets/extendedConfiguration.js       |  9 +---
 core/src/App.html                             |  2 -
 core/src/Authorization.html                   |  2 -
 core/src/Backdrop.html                        |  1 -
 core/src/LeftNav.html                         |  4 --
 core/src/TopNav.html                          |  9 ----
 core/src/navigation/ContextSwitcher.html      | 46 ++++++++-----------
 .../navigation/services/context-switcher.js   |  6 +--
 core/src/services/routing.js                  |  6 +--
 docs/navigation-configuration.md              | 18 ++++----
 14 files changed, 42 insertions(+), 78 deletions(-)

diff --git a/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
index 2796ce8a42..f68f6bb64e 100644
--- a/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
+++ b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
@@ -1,10 +1,10 @@
-describe('Context Switcher', () => {
+describe('Context switcher', () => {
   beforeEach(() => {
     cy.visit('http://localhost:4200');
     cy.login('tets@email.com', 'tets');
   });
 
-  it('Clicking around the Context Switcher', () => {
+  it('Clicking around the context switcher', () => {
     // default label
     cy.get('.context-switcher')
       .contains('Select Environment ...')
diff --git a/core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js b/core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js
index 2620ad9836..04d5e0a790 100644
--- a/core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js
+++ b/core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js
@@ -146,9 +146,9 @@ describe('Luigi client features', () => {
         .contains('External Page')
         .click();
 
-      cy.get('.fd-spinner').should('exist');
+      cy.get('.spinnerContainer .fd-spinner').should('exist');
 
-      cy.get('.fd-spinner').should('not.exist');
+      cy.get('.spinnerContainer .fd-spinner').should('not.exist');
 
       cy.wait(250);
       cy.get('iframe').then($iframe => {
@@ -158,10 +158,11 @@ describe('Luigi client features', () => {
         cy.wrap($iframeBody)
           .contains('Show loading indicator')
           .click();
-        cy.get('.fd-spinner').should('exist');
+
+        cy.get('.spinnerContainer .fd-spinner').should('exist');
 
         // wait for programmatic hide of loading indicator
-        cy.get('.fd-spinner').should('not.exist');
+        cy.get('.spinnerContainer .fd-spinner').should('not.exist');
       });
     });
   });
diff --git a/core/examples/luigi-sample-angular/e2e/tests/navigation.spec.js b/core/examples/luigi-sample-angular/e2e/tests/navigation.spec.js
index 18b160c7d4..f9d7c0f848 100644
--- a/core/examples/luigi-sample-angular/e2e/tests/navigation.spec.js
+++ b/core/examples/luigi-sample-angular/e2e/tests/navigation.spec.js
@@ -24,7 +24,7 @@ describe('Navigation', () => {
     cy.get('.fd-app__sidebar').should('not.contain', 'Project One');
     cy.get('.fd-app__sidebar').should('contain', 'Miscellaneous2');
     cy.get('.fd-app__sidebar')
-      .contains('Default Child Node Example')
+      .contains('Default Child node Example')
       .click();
 
     //default child node example
diff --git a/core/examples/luigi-sample-angular/src/app/project/default-child/dps2/child-node-2.component.html b/core/examples/luigi-sample-angular/src/app/project/default-child/dps2/child-node-2.component.html
index 9b388dc6d0..cd64cfd591 100644
--- a/core/examples/luigi-sample-angular/src/app/project/default-child/dps2/child-node-2.component.html
+++ b/core/examples/luigi-sample-angular/src/app/project/default-child/dps2/child-node-2.component.html
@@ -6,7 +6,7 @@ <h1 class="fd-section__title">Child node 2</h1>
   <p>Navigation node config for this <strong>defaultChildNode</strong> demo:</p>
 <app-code-snippet data="{
   pathSegment: 'dps',
-  label: 'Default Child Node Example',
+  label: 'Default Child node Example',
   defaultChildNode: 'dps2',
   children: [
     {
diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index ff077191f3..27c62b53cd 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -466,13 +466,6 @@ Luigi.setConfig({
           label: 'Settings',
           viewUrl: '/sampleapp.html#/settings'
         },
-        // {
-        //   label: 'Open Google in this tab',
-        //   externalLink: {
-        //     url: 'http://google.com',
-        //     sameWindow: true
-        //   }
-        // },
         {
           pathSegment: 'ext',
           label: 'External Page',
@@ -503,7 +496,7 @@ Luigi.setConfig({
     },
     // The following configuration will be used to render the context switcher component
     contextSwitcher: {
-      emptyLabel: 'Select Environment ...',
+      defaultLabel: 'Select Environment ...',
       parentNodePath: '/environments', // absolute path
       lazyloadOptions: true, // load options on click instead on page load
       options: () => {
diff --git a/core/src/App.html b/core/src/App.html
index b142c2ca09..3a9e85c682 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -237,8 +237,6 @@
 </script>
 
 <style type="text/scss">
-  @import 'node_modules/fundamental-ui/scss/layout/page';
-  @import 'node_modules/fundamental-ui/scss/components/spinner';
   @import 'static.css';
 
   :global(html) {
diff --git a/core/src/Authorization.html b/core/src/Authorization.html
index 3d90b01112..9b41a049a0 100644
--- a/core/src/Authorization.html
+++ b/core/src/Authorization.html
@@ -132,6 +132,4 @@
 
 
 <style type="text/scss">
-  @import 'node_modules/fundamental-ui/scss/core';
-  @import 'node_modules/fundamental-ui/scss/components/menu';
 </style>
diff --git a/core/src/Backdrop.html b/core/src/Backdrop.html
index 130284343a..bc5e4ec93e 100644
--- a/core/src/Backdrop.html
+++ b/core/src/Backdrop.html
@@ -33,7 +33,6 @@
 </script>
 
 <style type="text/scss">
-  @import 'node_modules/fundamental-ui/scss/layout/overlay';
   /* Due to approach use (splitted backdrop) we need to override styles fd styles */
   .fd-overlay {
     position: fixed;
diff --git a/core/src/LeftNav.html b/core/src/LeftNav.html
index c64951cabc..a0da9e8420 100644
--- a/core/src/LeftNav.html
+++ b/core/src/LeftNav.html
@@ -86,10 +86,6 @@ <h1 class="fd-side-nav__title">{key}</h1>
 </script>
 
 <style type="text/scss">
-  @import 'node_modules/fundamental-ui/scss/core';
-  @import 'node_modules/fundamental-ui/scss/icons';
-  @import 'node_modules/fundamental-ui/scss/components/side-nav';
-  @import 'node_modules/fundamental-ui/scss/helpers';
   a {
     cursor: pointer;
   }
diff --git a/core/src/TopNav.html b/core/src/TopNav.html
index af02564c5c..d59404a654 100644
--- a/core/src/TopNav.html
+++ b/core/src/TopNav.html
@@ -139,15 +139,6 @@
 </script>
 
 <style type="text/scss">
-  $fd-icons-path: 'node_modules/fundamental-ui/scss/icons/';
-
-  @import 'node_modules/fundamental-ui/scss/icons';
-  @import 'node_modules/fundamental-ui/scss/components/action-bar';
-  @import 'node_modules/fundamental-ui/scss/components/button';
-  @import 'node_modules/fundamental-ui/scss/components/popover';
-  @import 'node_modules/fundamental-ui/scss/components/menu';
-  @import 'node_modules/fundamental-ui/scss/components/global-nav';
-
   .user-settings .fd-popover__body {
     right: 0;
   }
diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index e4f05f7d5e..7ba5e533bd 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -3,8 +3,8 @@
   <div class="fd-popover context-switcher">
     <div class="fd-popover__control">
       <button class="fd-button--secondary" aria-expanded="{dropDownStates.CONTEXT_SWITCHER_POPOVER || false}"
-        aria-haspopup="true" on:click="onContextSwitcherOpen('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
-        {#if !selectedLabel}{config.emptyLabel}{/if}
+        aria-haspopup="true" on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')">
+        {#if !selectedLabel}{config.defaultLabel}{/if}
         {#if selectedLabel}{selectedLabel}{/if}
       </button>
     </div>
@@ -21,10 +21,10 @@
         {/if}
 
         <ul class="fd-menu__list" id="context_menu_middle">
-        {#if options.length === 0}
+        {#if options && options.length === 0}
           <li><div class="fd-spinner"><div></div></div></li>
         {/if}
-        {#if options.length}
+        {#if options && options.length}
           {#each options as node}
           <li><a class="fd-menu__item" on:click="goTo(node.path)">
           {#if node.label}{node.label}{/if}
@@ -85,7 +85,12 @@
     data() {
       return {
         dropDownStates: {},
-        options: []
+        contextSwitcherEnabled: false,
+        config: {},
+        actions: [],
+        options: null,
+        fallbackLabelResolver: null,
+        selectedLabel: null
       };
     },
     computed: {
@@ -107,7 +112,7 @@
     methods: {
       async fetchOptions() {
         let options = this.get().options;
-        if (!options.length || getConfigValue('navigation.contextSwitcher.lazyloadOptions') !== false) {
+        if (!options || !options.length || this.get().config.lazyloadOptions !== false) {
           const contextSwitcherOptions = await getConfigValueAsync('navigation.contextSwitcher.options');
           options = await ContextSwitcherHelpers.generateSwitcherNav(this.get().config, contextSwitcherOptions);
           this.set({options});
@@ -116,7 +121,7 @@
       async setSelectedContext(currentPath) {
         let selectedLabel;
         const parentNodePath = this.get().config.parentNodePath;
-        const inContextBasePath = parentNodePath && currentPath.indexOf(parentNodePath) !== -1;
+        const inContextBasePath = parentNodePath && currentPath.includes(parentNodePath);
         if (inContextBasePath) {
           // we are inside the context switcher base path
           const truncatedPath = trimLeadingSlash(currentPath.replace(parentNodePath, ''));
@@ -129,9 +134,9 @@
       },
       async onActionClick(node) {
         if (node.clickHandler) {
-          const result = await getConfigValueFromObjectAsync({result: node.clickHandler(node)}, 'result');
+          const result = await node.clickHandler(node);
+          // If the clickHandler returns true, open the link
           if (!result) {
-            // If the clickHandler returns falsy value, do nothing, else continue with linking
             return;
           }
         }
@@ -144,37 +149,22 @@
           window.location.pathname = path;
         }
       },
-      onContextSwitcherOpen(name) {
-        this.toggleDropdownState(name);
-        this.fetchOptions();
-      },
       toggleDropdownState(name) {
         const dropDownStates = this.get().dropDownStates || {};
         dropDownStates[name] = getNegatedBoolString(dropDownStates[name]);
         this.set({
           dropDownStates
         });
-      },
-      closeDropdown(name) {
-        const dropDownStates = this.get().dropDownStates || {};
-        dropDownStates[name] = 'false';
-        this.set({
-          dropDownStates
-        });
+
+        if (JSON.parse(dropDownStates[name])) {
+          this.fetchOptions();
+        }
       }
     }
   };
 </script>
 
 <style type="text/scss">
-  $fd-icons-path: 'node_modules/fundamental-ui/scss/icons/';
-  @import 'node_modules/fundamental-ui/scss/icons';
-  // @import 'node_modules/fundamental-ui/scss/components/action-bar';
-  // @import 'node_modules/fundamental-ui/scss/components/global-nav';
-  // @import 'node_modules/fundamental-ui/scss/components/popover';
-  // @import 'node_modules/fundamental-ui/scss/components/button';
-  // fundamental-ui is loaded globally
-
   .fd-popover__body {
     right: 0;
   }
diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index 50d216383f..d51061b775 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -41,7 +41,7 @@ export const ContextSwitcherHelpers = {
 
     let path = opt.pathValue;
     // parentNodePath contains dynamic pathSegment
-    if (parentNodePath && parentNodePath.indexOf(':') !== -1) {
+    if (parentNodePath && parentNodePath.includes(':')) {
       path = parentNodePath
         .split('/')
         .map(pp => {
@@ -57,9 +57,7 @@ export const ContextSwitcherHelpers = {
   },
 
   async getMatchingNodeName(options, fallbackLabelResolver, id) {
-    return new Promise(async resolve => {
-      resolve(fallbackLabelResolver ? await fallbackLabelResolver(id) : id);
-    });
+    return fallbackLabelResolver ? await fallbackLabelResolver(id) : id;
   },
 
   generateSwitcherNav(config, rawOptions) {
diff --git a/core/src/services/routing.js b/core/src/services/routing.js
index 5f5582e108..e4211c9168 100644
--- a/core/src/services/routing.js
+++ b/core/src/services/routing.js
@@ -410,7 +410,6 @@ export const handleRouteClick = (node, windowElem = window) => {
   navigateTo(route, windowElem);
 };
 
-export const getModifiedHash = s => s.newURL.split('#/')[1];
 export const getModifiedPathname = () =>
   window.history.state.path
     .split('/')
@@ -419,17 +418,18 @@ export const getModifiedPathname = () =>
 
 export const getCurrentPath = () =>
   getConfigValue('routing.useHashRouting')
-    ? window.location.hash.replace('#', '')
+    ? window.location.hash.replace('#', '') // TODO: getPathWithoutHash(window.location.hash) fails in ContextSwitcher
     : trimLeadingSlash(window.location.pathname);
 
 export const addRouteChangeListener = callback => {
   if (getConfigValue('routing.useHashRouting')) {
+    const getModifiedHash = s => s.newURL.split('#/')[1];
     return window.addEventListener('hashchange', event => {
       callback(getModifiedHash(event));
     });
   }
 
   return window.addEventListener('popstate', () => {
-    callback(getModifiedPathname());
+    callback(trimLeadingSlash(getModifiedPathname()));
   });
 };
diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index ffa8b33c16..4017e3ad47 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -51,7 +51,7 @@ window.Luigi.setConfig({
       }
     ],
     contextSwitcher: {
-      emptyLabel: 'Select Environment ...',
+      defaultLabel: 'Select Environment ...',
       parentNodePath: '/environments',
       lazyloadOptions: false,
       fallbackLabelResolver: (id) => (id.toUpperCase()),
@@ -74,19 +74,19 @@ You can configure the way Luigi tackles routing in your application in the **Rou
 - **nodeAccessibilityResolver** allows you to define a permission checker function that gets executed on every node. If it returns `false`, Luigi removes the node and its children from the navigation structure.
   **nodeAccessibilityResolver** receives all values defined in the node configuration. See [angular sampleconfig.js](../core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js) for the **constraints** example.
 
-## Context Switcher
+## Context switcher
 
-Allows to switch between a curated list of navigation elements. Adds a drop down switcher next to the profile in the top navigation bar. Typically used for switching between environments. 
+the context switcher is a drop-down list available in the top navigation bar. It allows you to switch between a curated list of navigation elements such as Environments.
 
-- **emptyLabel** specifies the default label that is shown if no context is selected.
-- **parentNodePath** specifies the base path, that is prepended to **options[].pathValue**. Must be an absolute path.
-- **lazyloadOptions** defines when to fetch **options**. When set to `true`, loads **options** on Context Switcher click without any caching. When set to `false`, loads **options** once on page load . Defaults to `true`. 
+- **defaultLabel** specifies the default label that is shown if no context is selected.
+- **parentNodePath** specifies the base path, that is prepended to **options[].pathValue**. It must be an absolute path.
+- **lazyloadOptions** defines when to fetch **options**. When set to `true`, loads **options** when you click the context switcher. It doesn't involve any caching. When set to `false`, loads **options** once when the page loads . The default value is `true`. 
 - **options** defines the list of context element. Context element properties are:
-  - **label** defines the context element label. If it is not defined, **pathValue** will be passed to **fallbackLabelResolver** to set its value. Defaults to **pathValue**, if **fallbackLabelResolver** is not defined.
+  - **label** defines the context element label. If not defined, the **pathValue** is passed to **fallbackLabelResolver** to set its value. The default value is **pathValue**, if **fallbackLabelResolver** is not defined.
   - **pathValue** defines the context element path that is appended to **parentNodePath**. **pathValue** is used as 
-- **actions** defines a list of additional elements that are shown on above or below the Context Switcher **options**. Each action contains the following parameters:
+- **actions** defines a list of additional elements that are shown on above or below the context switcher **options**. Each action contains the following parameters:
   - **label** defines the action element label
-  - **position** is optional. Defines the action element position. Can be `top` or `bottom`. Defaults to `top`
+  - **position** is optional. Defines the action element position. Can be `top` or `bottom`. The default value is `top.`
   - **link** is optional. Defines an absolute Link to a **node**.
   - **clickHandler** specifies a function and is executed on click and should return a boolean. If it returns `true`, **link** is opened afterwards.
 - **fallbackLabelResolver** specifies a function that is executed to fetch a context element label if **options** are not yet loaded or **label** is not defined.

From b14f8bb5b23b39c0328739cc0be6172f9c4f718f Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Mon, 5 Nov 2018 15:55:47 +0100
Subject: [PATCH 09/45] copying only fundamental stuff that we need

---
 core/.gitignore        |  1 -
 core/src/static.css    | 10 +++++-----
 core/webpack.config.js | 17 +++++++++++++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/core/.gitignore b/core/.gitignore
index ad8ab63bcf..45f908e145 100644
--- a/core/.gitignore
+++ b/core/.gitignore
@@ -26,7 +26,6 @@ yarn-error.log*
 public/luigi.css
 public/luigi.js
 public/luigi.vendor.js
-public/SAP-icons.woff
 public/fundamental-ui
 
 # maps
diff --git a/core/src/static.css b/core/src/static.css
index 17da294257..37d430cd18 100644
--- a/core/src/static.css
+++ b/core/src/static.css
@@ -1,7 +1,7 @@
 /* This file lets you import styles that Svelte can't consume inside <style> tags, such as @font-face, @keyframe etc. */
 @font-face {
-    font-family: SAP-icons;
-    src: url('SAP-icons.woff') format("woff");
-    font-weight: 400;
-    font-style: normal
-  }
+  font-family: SAP-icons;
+  src: url('/luigi-core/fundamental-ui/SAP-icons.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
diff --git a/core/webpack.config.js b/core/webpack.config.js
index 68c6641575..496b8bd36c 100644
--- a/core/webpack.config.js
+++ b/core/webpack.config.js
@@ -81,10 +81,23 @@ module.exports = {
     new ExtractTextPlugin('luigi.css'),
     new CopyWebpackPlugin([
       'node_modules/oidc-client/dist/oidc-client.min.js',
-      'node_modules/fundamental-ui/dist/SAP-icons.woff',
       {
-        from: 'node_modules/fundamental-ui/dist',
+        context: 'node_modules/fundamental-ui/dist',
+        to: 'fundamental-ui',
+        from: {
+          glob: 'SAP-icons.*'
+        }
+      },
+      {
+        from: 'node_modules/fundamental-ui/dist/fundamental-ui.min.css',
         to: 'fundamental-ui'
+      },
+      {
+        context: 'node_modules/fundamental-ui/dist/',
+        to: 'fundamental-ui',
+        from: {
+          glob: 'fonts'
+        }
       }
     ])
   ],

From 4ca466797157495f500d8fc5cd183f9b65f068b8 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Tue, 6 Nov 2018 11:26:57 +0100
Subject: [PATCH 10/45] docu update

---
 docs/navigation-configuration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index 4017e3ad47..54630f8c42 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -83,7 +83,7 @@ the context switcher is a drop-down list available in the top navigation bar. It
 - **lazyloadOptions** defines when to fetch **options**. When set to `true`, loads **options** when you click the context switcher. It doesn't involve any caching. When set to `false`, loads **options** once when the page loads . The default value is `true`. 
 - **options** defines the list of context element. Context element properties are:
   - **label** defines the context element label. If not defined, the **pathValue** is passed to **fallbackLabelResolver** to set its value. The default value is **pathValue**, if **fallbackLabelResolver** is not defined.
-  - **pathValue** defines the context element path that is appended to **parentNodePath**. **pathValue** is used as 
+  - **pathValue** defines the context element path that is appended to **parentNodePath** and reflects a **pathSegment**.
 - **actions** defines a list of additional elements that are shown on above or below the context switcher **options**. Each action contains the following parameters:
   - **label** defines the action element label
   - **position** is optional. Defines the action element position. Can be `top` or `bottom`. The default value is `top.`

From bc8a934f9563fd46916fae0521db894a32d3d3a7 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Tue, 6 Nov 2018 13:21:00 +0100
Subject: [PATCH 11/45] docu update

---
 docs/navigation-configuration.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index 54630f8c42..89cba28f19 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -76,7 +76,7 @@ You can configure the way Luigi tackles routing in your application in the **Rou
 
 ## Context switcher
 
-the context switcher is a drop-down list available in the top navigation bar. It allows you to switch between a curated list of navigation elements such as Environments.
+The context switcher is a drop-down list available in the top navigation bar. It allows you to switch between a curated list of navigation elements such as Environments.
 
 - **defaultLabel** specifies the default label that is shown if no context is selected.
 - **parentNodePath** specifies the base path, that is prepended to **options[].pathValue**. It must be an absolute path.
@@ -85,9 +85,9 @@ the context switcher is a drop-down list available in the top navigation bar. It
   - **label** defines the context element label. If not defined, the **pathValue** is passed to **fallbackLabelResolver** to set its value. The default value is **pathValue**, if **fallbackLabelResolver** is not defined.
   - **pathValue** defines the context element path that is appended to **parentNodePath** and reflects a **pathSegment**.
 - **actions** defines a list of additional elements that are shown on above or below the context switcher **options**. Each action contains the following parameters:
-  - **label** defines the action element label
-  - **position** is optional. Defines the action element position. Can be `top` or `bottom`. The default value is `top.`
-  - **link** is optional. Defines an absolute Link to a **node**.
+  - **label** defines the action element label.
+  - **position** defines the action element position. Can be `top` or `bottom`. The default value is `top`. This parameter is optional.
+  - **link** defines an absolute Link to a **node**. This parameter is optional.
   - **clickHandler** specifies a function and is executed on click and should return a boolean. If it returns `true`, **link** is opened afterwards.
 - **fallbackLabelResolver** specifies a function that is executed to fetch a context element label if **options** are not yet loaded or **label** is not defined.
 

From c0e1682c139e7f4f8ab62931d9c2c68eb4e79b57 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Tue, 6 Nov 2018 14:16:55 +0100
Subject: [PATCH 12/45] removed docu that is not part of the ticket

---
 docs/navigation-configuration.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index a02f78e159..c36cbba317 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -218,9 +218,6 @@ The node parameters are as follows:
 - **pathSegment** specifies the partial URL of the current segment. **pathSegment** must not contain slashes.
   - A static settings example reflects `luigidomain.test/settings`.
   - A dynamic settings example, prefixed with a colon, loads on any other value. 
-- **externalLink** is an object which specifies that the node links to an external URL. If this property is set, **pathSegment** is ignored. It consists of the following properties:
-  - **sameWindow** defines if the external URL is opened in a new or current tab.
-  - **url** is the external URL that the node leads to.
 - **label** contains the display name of the navigation node.
 - **hideFromNav** 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.
 - **viewUrl** contains the URL or path to a view which renders when you click the navigation node. Use either a full URL or a relative path. This value may consist of variables if you have specified a **navigationContext** with a dynamic **pathSegment**. If **viewUrl** is undefined, Luigi activates the child node specified in **defaultChildNode**. When both **viewUrl** and **defaultChildNode** are undefined, Luigi opens the first child of the current node.

From f1414a78c52fc055667a39c39b6085086b2f02d9 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Tue, 6 Nov 2018 16:14:04 +0100
Subject: [PATCH 13/45] Unit tests

---
 core/src/navigation/ContextSwitcher.html      |  27 ++-
 .../navigation/services/context-switcher.js   | 100 +++++-----
 core/test/context-switcher.spec.js            | 172 ++++++++++++++++++
 3 files changed, 230 insertions(+), 69 deletions(-)
 create mode 100644 core/test/context-switcher.spec.js

diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index 7ba5e533bd..86845a715c 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -29,7 +29,7 @@
           <li><a class="fd-menu__item" on:click="goTo(node.path)">
           {#if node.label}{node.label}{/if}
           {#if !node.label}
-            {#await getMatchingNodeName(options, config.fallbackLabelResolver, node.id)}
+            {#await getFallbackNodeName(config.fallbackLabelResolver, node.id)}
             {:then label}
               {label}
             {/await}
@@ -56,7 +56,7 @@
 <script type="text/javascript">
   import { ContextSwitcherHelpers } from './services/context-switcher.js';
   import { getConfigValue, getConfigValueAsync, getConfigValueFromObjectAsync, getConfigBooleanValue } from '../services/config.js';
-  import { getNegatedBoolString, trimLeadingSlash } from '../utilities/helpers.js';
+  import * as Helpers from '../utilities/helpers.js';
   import * as Routing from '../services/routing.js';
 
   export default {
@@ -98,15 +98,15 @@
         const negated = {};
         for (const key in dropDownStates) {
           if (dropDownStates.hasOwnProperty(key)) {
-            negated[key] = getNegatedBoolString(dropDownStates[key]);
+            negated[key] = Helpers.getNegatedBoolString(dropDownStates[key]);
           }
         }
         return negated;
       }
     },
     helpers: {
-      getMatchingNodeName: (options, config, id) => {
-        return ContextSwitcherHelpers.getMatchingNodeName(options, config, id);
+      getFallbackNodeName: (config, id) => {
+        return ContextSwitcherHelpers.getFallbackNodeName(config, id);
       }
     },
     methods: {
@@ -119,17 +119,12 @@
         }
       },
       async setSelectedContext(currentPath) {
-        let selectedLabel;
-        const parentNodePath = this.get().config.parentNodePath;
-        const inContextBasePath = parentNodePath && currentPath.includes(parentNodePath);
-        if (inContextBasePath) {
-          // we are inside the context switcher base path
-          const truncatedPath = trimLeadingSlash(currentPath.replace(parentNodePath, ''));
-          const selectedId = truncatedPath.split('/')[0];
-          selectedLabel = await ContextSwitcherHelpers.getMatchingNodeName(this.get().options, this.get().config.fallbackLabelResolver, selectedId);
-        }
+        const config = this.get().config;
+        const parentNodePath = config.parentNodePath;
+        const fallbackLabelResolver = config.fallbackLabelResolver;
+        const options = await getConfigValueFromObjectAsync(config, 'options');
         this.set({
-          selectedLabel
+          selectedLabel: await ContextSwitcherHelpers.getSelectedLabel(currentPath, options, parentNodePath, fallbackLabelResolver)
         })
       },
       async onActionClick(node) {
@@ -151,7 +146,7 @@
       },
       toggleDropdownState(name) {
         const dropDownStates = this.get().dropDownStates || {};
-        dropDownStates[name] = getNegatedBoolString(dropDownStates[name]);
+        dropDownStates[name] = Helpers.getNegatedBoolString(dropDownStates[name]);
         this.set({
           dropDownStates
         });
diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index d51061b775..fc708a9bac 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -1,71 +1,65 @@
+import * as Helpers from '../../utilities/helpers.js';
+
 export const ContextSwitcherHelpers = {
   prepareParentNodePath(config) {
+    if (!config.parentNodePath || !config.parentNodePath.startsWith('/')) {
+      console.error(
+        'Luigi Config Error: navigation.contextSwitcher.parentNodePath must be defined as an absolute path.'
+      );
+    }
     if (config.parentNodePath) {
-      if (!config.parentNodePath.startsWith('/')) {
-        console.error(
-          'Error: navigation.parentNodePath must be an absolute path and start with a slash.'
-        );
-      }
       // add trailing slash if it does not have a dynamic path segment
-      const hasNoDynamicPathSegment =
-        config.parentNodePath.split('/').filter(p => p.startsWith(':'))
-          .length === 0;
-      if (hasNoDynamicPathSegment && !config.parentNodePath.endsWith('/')) {
+      if (!config.parentNodePath.endsWith('/')) {
         config.parentNodePath = `${config.parentNodePath}/`;
       }
     }
-    if (!config.parentNodePath) {
-      const optionsWithoutAbsolutePaths =
-        rawOptions.filter(o => o.pathValue.startsWith('/')).length !==
-        rawOptions.length;
-      if (optionsWithoutAbsolutePaths) {
-        console.error(
-          'Error: navigation.parentNodePath is not defined, therefore navigation.options[].pathValue must be absolute paths.'
-        );
-      }
-    }
     return config.parentNodePath;
   },
 
-  buildNodePath(parentNodePath, opt) {
-    // prepare base path
-    // 0 options[].pathValue renamed to pathValue, as it could contain a full path too
-    // 1. check if parentNodePath exists
-    // 1.1. if parentNodePath exists, must start with /
-    // 1.2. parentNodePath must end with / or contain colon to substitute the value
-    // 1.3. if no colon path segment, pathValue gets appended to parentNodePath
-    // 1.4. if colon is present, parentValue will get substituted
-    // 2. if parentNodePath does not exist
-    // 2.1. options pathValue must start with /
-    // 2.2. and will be completely used for routing
-
-    let path = opt.pathValue;
-    // parentNodePath contains dynamic pathSegment
-    if (parentNodePath && parentNodePath.includes(':')) {
-      path = parentNodePath
-        .split('/')
-        .map(pp => {
-          // Replace dynamic node with pathValue. Name of dynamic node can be anything, also just a single colon
-          return pp.startsWith(':') ? opt.pathValue : pp;
-        })
-        .join('/');
-    } else if (parentNodePath) {
-      // parentNodePath without dynamic pathSegment
-      path = parentNodePath + opt.pathValue;
-    }
-    return path;
-  },
-
-  async getMatchingNodeName(options, fallbackLabelResolver, id) {
-    return fallbackLabelResolver ? await fallbackLabelResolver(id) : id;
-  },
-
   generateSwitcherNav(config, rawOptions) {
     const parentNodePath = this.prepareParentNodePath(config);
     return rawOptions.map(opt => ({
       label: opt.label,
-      path: this.buildNodePath(parentNodePath, opt),
+      path: (parentNodePath || '/') + opt.pathValue,
       id: opt.pathValue
     }));
+  },
+
+  getMatchingNodeName(options, id) {
+    const found = options.find(o => o.pathValue === id);
+    return found && found.label;
+  },
+
+  async getFallbackNodeName(fallbackLabelResolver, id) {
+    return fallbackLabelResolver ? await fallbackLabelResolver(id) : id;
+  },
+
+  async getSelectedLabel(
+    currentPath,
+    options,
+    parentNodePath,
+    fallbackLabelResolver
+  ) {
+    let selectedLabel;
+    const inContextBasePath =
+      parentNodePath && currentPath.includes(parentNodePath);
+    if (inContextBasePath) {
+      // we are inside the context switcher base path
+      const truncatedPath = Helpers.trimLeadingSlash(
+        currentPath.replace(parentNodePath, '')
+      );
+      const selectedId = truncatedPath.split('/')[0];
+      selectedLabel = ContextSwitcherHelpers.getMatchingNodeName(
+        options,
+        selectedId
+      );
+      selectedLabel =
+        selectedLabel ||
+        (await ContextSwitcherHelpers.getFallbackNodeName(
+          fallbackLabelResolver,
+          selectedId
+        ));
+    }
+    return selectedLabel;
   }
 };
diff --git a/core/test/context-switcher.spec.js b/core/test/context-switcher.spec.js
new file mode 100644
index 0000000000..5da826db49
--- /dev/null
+++ b/core/test/context-switcher.spec.js
@@ -0,0 +1,172 @@
+const CSHelpers = require('../src/navigation/services/context-switcher')
+  .ContextSwitcherHelpers;
+const assert = require('chai').assert;
+const sinon = require('sinon');
+
+describe('ContextSwitcher', function() {
+  afterEach(() => {
+    sinon.restore();
+    sinon.reset();
+  });
+
+  const getMockConfig = () => ({
+    defaultLabel: 'Select Environment ...',
+    parentNodePath: '/environments/',
+    lazyloadOptions: true,
+    actions: [
+      {
+        label: '+ New Environment',
+        link: '/create-environment',
+        position: 'top'
+      }
+    ],
+    options: []
+  });
+
+  const myResolverFn = id => {
+    return '##' + id + '##';
+  };
+
+  describe('prepareParentNodePath()', () => {
+    let mockConfig;
+    beforeEach(() => {
+      mockConfig = getMockConfig();
+    });
+
+    it('undefined parentNodePath', () => {
+      console.error = sinon.spy();
+      CSHelpers.prepareParentNodePath({});
+      sinon.assert.calledOnce(console.error);
+    });
+
+    it('falsy relative parentNodePath', () => {
+      console.error = sinon.spy();
+      CSHelpers.prepareParentNodePath({ parentNodePath: 'relative/path' });
+      sinon.assert.calledOnce(console.error);
+    });
+
+    it('absolute parentNodePath adds slash', () => {
+      const result = CSHelpers.prepareParentNodePath({
+        parentNodePath: '/environment'
+      });
+      assert.equal(result, '/environment/');
+    });
+
+    it('absolute parentNodePath with slash does not add slash', () => {
+      const result = CSHelpers.prepareParentNodePath({
+        parentNodePath: '/environment/'
+      });
+      assert.equal(result, '/environment/');
+    });
+
+    it('no parentNodePath', () => {
+      const result = CSHelpers.prepareParentNodePath({
+        parentNodePath: '/environment'
+      });
+      assert.equal(result, '/environment/');
+    });
+  });
+
+  describe('getFallbackNodeName()', () => {
+    it('without fallback resolver', async () => {
+      const result = await CSHelpers.getFallbackNodeName(undefined, 'some_id');
+      assert.equal(result, 'some_id');
+    });
+
+    it('with fallback resolver', async () => {
+      const result = await CSHelpers.getFallbackNodeName(
+        myResolverFn,
+        'some_id'
+      );
+      assert.equal(result, '##some_id##');
+    });
+  });
+
+  describe('generateSwitcherNav()', () => {
+    it('composes proper values', async () => {
+      const result = await CSHelpers.generateSwitcherNav(
+        { parentNodePath: '/environment' },
+        [{ label: 'Env 1', pathValue: 'env1' }]
+      );
+      assert.equal(
+        JSON.stringify(result),
+        JSON.stringify([
+          {
+            label: 'Env 1',
+            path: '/environment/env1',
+            id: 'env1'
+          }
+        ])
+      );
+    });
+
+    it('composes proper values', async () => {
+      const result = await CSHelpers.generateSwitcherNav({}, [
+        { label: 'Env 1', pathValue: 'env1' }
+      ]);
+      assert.equal(
+        JSON.stringify(result),
+        JSON.stringify([
+          {
+            label: 'Env 1',
+            path: '/env1',
+            id: 'env1'
+          }
+        ])
+      );
+    });
+  });
+
+  describe('getMatchingNodeName()', () => {
+    const env1 = { label: 'Env 1', pathValue: 'env1' };
+    const env2 = { label: 'Env 2', pathValue: 'env2' };
+
+    it('returns undefined if node is not inside options', () => {
+      const result = CSHelpers.getMatchingNodeName([env1, env2], 'env3');
+      assert.equal(result, undefined);
+    });
+
+    it('returns matching node label', () => {
+      const result = CSHelpers.getMatchingNodeName([env1, env2], 'env2');
+      assert.equal(result, 'Env 2');
+    });
+  });
+
+  describe('getSelectedLabel()', () => {
+    const parentNodePath = '/environment';
+
+    it('returns undefined if outsite current path', async () => {
+      const result = await CSHelpers.getSelectedLabel(
+        '/something',
+        [],
+        parentNodePath,
+        myResolverFn
+      );
+      assert.equal(result, undefined);
+    });
+
+    it('returns undefined if outsite parentNodePath', async () => {
+      const env1 = { label: 'Env 1', pathValue: 'env1' };
+      const env2 = { label: 'Env 2', pathValue: 'env2' };
+      const result = await CSHelpers.getSelectedLabel(
+        '/environment/env2',
+        [env1, env2],
+        parentNodePath,
+        myResolverFn
+      );
+      assert.equal(result, env2.label);
+    });
+
+    it('returns fallback label if inside parentNodePath', async () => {
+      const env1 = { label: 'Env 1', pathValue: 'env1' };
+      const env2 = { label: 'Env 2', pathValue: 'env2' };
+      const result = await CSHelpers.getSelectedLabel(
+        '/environment/env3',
+        [env1, env2],
+        parentNodePath,
+        myResolverFn
+      );
+      assert.equal(result, '##env3##');
+    });
+  });
+});

From 065ae8f942b10c6d3626d3efeaa4af148b76b295 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Tue, 6 Nov 2018 16:56:45 +0100
Subject: [PATCH 14/45] latest changes

---
 .../e2e/tests/context-switcher.spec.js                    | 2 +-
 .../src/assets/extendedConfiguration.js                   | 6 +++++-
 core/src/navigation/ContextSwitcher.html                  | 3 ++-
 core/src/navigation/services/context-switcher.js          | 8 +++-----
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
index f68f6bb64e..7860b61496 100644
--- a/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
+++ b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
@@ -36,7 +36,7 @@ describe('Context switcher', () => {
     // check label
     cy.get('.context-switcher .fd-popover__control button').should(
       'contain',
-      'Env1'
+      'Environment 1'
     );
 
     // Overview
diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 55795a8223..6e8cd5c3c6 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -506,10 +506,14 @@ Luigi.setConfig({
         }));
       },
       actions: [
+        {
+          label: '+ New Simple',
+          link: '/create-environment'
+        },
         {
           label: '+ New Environment',
           link: '/create-environment',
-          position: 'top', // top or bottom
+          position: 'bottom', // top or bottom
           clickHandler: node => {
             // called BEFORE route change
             return true; // route change will be done using link value (if defined)
diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index 86845a715c..833eb3f9f3 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -151,7 +151,8 @@
           dropDownStates
         });
 
-        if (JSON.parse(dropDownStates[name])) {
+        const isOpened = JSON.parse(dropDownStates[name]);
+        if (isOpened) {
           this.fetchOptions();
         }
       }
diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index fc708a9bac..35b5ae259f 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -7,11 +7,9 @@ export const ContextSwitcherHelpers = {
         'Luigi Config Error: navigation.contextSwitcher.parentNodePath must be defined as an absolute path.'
       );
     }
-    if (config.parentNodePath) {
-      // add trailing slash if it does not have a dynamic path segment
-      if (!config.parentNodePath.endsWith('/')) {
-        config.parentNodePath = `${config.parentNodePath}/`;
-      }
+    if (config.parentNodePath && !config.parentNodePath.endsWith('/')) {
+      // add trailing slash it does not exist
+      config.parentNodePath = `${config.parentNodePath}/`;
     }
     return config.parentNodePath;
   },

From 3bd455d5220a95d0312a54ad9acb9055da76b610 Mon Sep 17 00:00:00 2001
From: Barbara <barbara.m.szwarc@gmail.com>
Date: Wed, 7 Nov 2018 08:52:26 +0100
Subject: [PATCH 15/45] Add missing line and improve wording (#199)

* Add missing line and improve wording

* Apply review comments
---
 docs/navigation-configuration.md | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index c36cbba317..2dee18a456 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -4,7 +4,7 @@ Navigation parameters allow you to specify routing configuration, set the appear
 
 ## Navigation elements
 
-The image shows the elements of the Luigi navigation: 
+The image shows the elements of Luigi navigation: 
 
 1. Top navigation, where the main navigation path is displayed.
 2. Side navigation, where the applications are defined.
@@ -94,7 +94,7 @@ The following example shows the structure of different navigation paths. If the
 
 ### Path parameters
 
-Use the path parameter values to define the **pathSegment** in your configuration. You can either use a static value for your **pathSegment**, or add a colon to this value as in `:projectId`, to and make it act as a parameter. This tells Luigi to accept any value for this **pathSegment** of the main application URL. The value replaces the parameter when it is further processed by the application.
+Use path parameter values to define the **pathSegment** in your configuration. You can either use a static value for your **pathSegment**, or add a colon to this value as in `:projectId`, to make it act as a parameter. This tells Luigi to accept any value for this **pathSegment** of the main application URL. The value replaces the parameter when it is further processed by the application.
 
 A sample structure with a parametrized **pathSegment** is as follows:
 ```
@@ -199,7 +199,7 @@ You can use the listed parameters and functions to configure your navigation str
 
 ### Routing
 
-You can configure the way Luigi tackles routing in your application in the **Routing** section of the configuration file. In the example, you can choose the routing strategy to apply in your application as either hash or path location routing.
+You can configure the way Luigi tackles routing in your application in the **Routing** section of the configuration file. For example, you can choose the routing strategy to apply in your application as either hash or path location routing.
 
 - **useHashRouting** defines either hash-based (`url.com/#/yourpath`) or path-based (`url.com/yourpath`) routing.
 - **nodeParamPrefix** sets the prefix character when using the `LuigiClient.linkManager().withParam()` function, which provides a way to simply attach query parameters to the view URL for activities such as sorting and filtering. The URL contains the parameters to allow deep linking. If you want to use a different character prefix, define yours here. The default character is `~`.
@@ -218,6 +218,9 @@ The node parameters are as follows:
 - **pathSegment** specifies the partial URL of the current segment. **pathSegment** must not contain slashes.
   - A static settings example reflects `luigidomain.test/settings`.
   - A dynamic settings example, prefixed with a colon, loads on any other value. 
+- **externalLink** is an object which indicates that the node links to an external URL. If this parameter is defined, **pathSegment** is ignored. It has the following properties:
+  - **sameWindow** defines if the external URL is opened in a new or current tab.
+  - **url** is the external URL that the node leads to.
 - **label** contains the display name of the navigation node.
 - **hideFromNav** 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.
 - **viewUrl** contains the URL or path to a view which renders when you click the navigation node. Use either a full URL or a relative path. This value may consist of variables if you have specified a **navigationContext** with a dynamic **pathSegment**. If **viewUrl** is undefined, Luigi activates the child node specified in **defaultChildNode**. When both **viewUrl** and **defaultChildNode** are undefined, Luigi opens the first child of the current node.
@@ -226,8 +229,8 @@ The node parameters are as follows:
 - **defaultChildNode** sets the child node that Luigi activates automatically if the current node has no **viewUrl** defined. Provide **pathSegment** of the child node you want to activate as a string.
 - **isolateView** renders the view in a new frame when you enter and leave the node. This setting overrides the same-domain frame re-usage. The **isolateView** is disabled by default.
 - **keepSelectedForChildren** focuses the navigation on its current hierarchy, omitting the display of children.
-- **loadingIndicator.enabled** shows a loading indicator when switching between micro front-ends. If you have a super fast micro front-end, you can disable this feature to prevent the flickering of the loading indicator. The **loadingIndicator.loadingIndicator** is enabled by default.
-- **loadingIndicator.hideAutomatically** disables the automatic hiding of the loading indicator once the micro front-end is loaded. Only considered if the loading indicator is enabled. Does not apply if the loading indicator is activated manually with the `LuigiClient.uxManager().showLoadingIndicator()` function. If the loading indicator is enabled and automatic hiding is disabled, use `LuigiClient.uxManager().hideLoadingIndicator()` to hide it manually in your micro front-end during the startup. The **loadingIndicator.hideAutomatically** is enabled by default.
+- **loadingIndicator.enabled** shows a loading indicator when switching between micro front-ends. If you have a fast micro front-end, you can disable this feature to prevent flickering of the loading indicator. This parameter is enabled by default.
+- **loadingIndicator.hideAutomatically** disables the automatic hiding of the loading indicator once the micro front-end is loaded. It is only considered if the loading indicator is enabled. It does not apply if the loading indicator is activated manually with the `LuigiClient.uxManager().showLoadingIndicator()` function. If the loading indicator is enabled and automatic hiding is disabled, use `LuigiClient.uxManager().hideLoadingIndicator()` to hide it manually in your micro front-end during the startup. This parameter is enabled by default.
 
 
 

From cd56d94be7cffcf6885e579e870934eea78c94b1 Mon Sep 17 00:00:00 2001
From: Peter Kurajsky <pekura@users.noreply.github.com>
Date: Wed, 7 Nov 2018 08:54:01 +0100
Subject: [PATCH 16/45] Describe get path params and get node params better
 (#155)

Improve documentation around path parameters and node parameters
---
 README.md                |  7 +++--
 client/luigi-client.js   | 23 ++++++++-------
 docs/README.md           |  6 ++--
 docs/luigi-client-api.md | 63 +++++++++++++++++++++++++++++++++-------
 4 files changed, 72 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index aaecd6080d..031e34902c 100644
--- a/README.md
+++ b/README.md
@@ -23,9 +23,10 @@ Luigi core is the part of Luigi that enables navigation, security and routing. T
 
 Luigi client enables integration of Luigi in views. You can easily configure the lifecycle and links of the client, as well as customize the appearance of your navigation.
 
-* [Lifecycle](docs/luigi-client-api.md#lifecycle) gives you details on the life cycle of listeners, navigation nodes, and Event data.
-* [Link Manager](docs/luigi-client-api.md#linkmanager) guides you through the configuration of the Link Manager.
-* [UX Manager](docs/luigi-client-api.md#uxmanager) shows you how to set up the UX Manager.
+- [Lifecycle](docs/luigi-client-api.md#lifecycle) gives you details on the life cycle of listeners, navigation nodes and event data.
+- [Link Manager](docs/luigi-client-api.md#linkmanager) allows you to navigate to a specific route.
+- [UX Manager](docs/luigi-client-api.md#uxmanager) helps you to manage the appearance in Luigi.
+
 See [this](https://github.com/kyma-project/luigi/blob/master/client/README.md) document to learn more about the Luigi client. 
 
 View [example applications](/core/examples).
diff --git a/client/luigi-client.js b/client/luigi-client.js
index efc6af4af9..8ee093f76f 100644
--- a/client/luigi-client.js
+++ b/client/luigi-client.js
@@ -202,8 +202,9 @@
       return currentContext.context;
     },
     /**
-     * Returns the configuration object of the active navigation node.
-     * @returns {Object} node parameters.
+     * Returns the node parameters of the active URL.
+     * Node parameters are defined like URL query parameters but with a specific prefix allowing them to be passed to the micro front-end view.  The default prefix is **~** and it is used in the following example: `https://my.luigi.app/home/products?~sort=asc~page=3`.
+     * @returns {Object} node parameters, where the object property name is the node parameter name without the prefix, and its value is the value of the node parameter. For example `{sort: 'asc', page: 3}`.
      * @memberof lifecycle
      */
     getNodeParams: function getNodeParams() {
@@ -211,7 +212,9 @@
     },
     /**
      * Returns the dynamic path parameters of the active URL.
-     * @returns {Object} path parameters.
+     * Path parameters are defined by navigation nodes with a dynamic **pathSegment** value starting with **:** such as `productId`.
+     * All such parameters in the current navigation path (as defined by the active URL) are returned.
+     * @returns {Object} path parameters, where the object property name is the path parameter name without the prefix, and its value is the actual value of the path parameter. For example ` {productId: 1234, ...}`.
      * @memberof lifecycle
      */
     getPathParams: function getPathParams() {
@@ -237,9 +240,9 @@
       return {
         /** @lends linkManager */
         /**
-         * Navigates to the given path in the hosting Luigi app. Contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is a classical navigation.
+         * Navigates to the given path in the hosting Luigi application. Contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is a standard navigation.
          * @param {string} path path to be navigated to
-         * @param {string} sessionId  current Luigi sessionId
+         * @param {string} sessionId current Luigi **sessionId**
          * @param {boolean} preserveView Preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back afterwards. You can use this feature at unlimited levels. The preserved views are discarded as soon as the standard {@link #navigate navigate()} function is used in place of {@link #goBack goBack()}.
          * @example
          * LuigiClient.linkManager().navigate('/overview')
@@ -265,7 +268,7 @@
         },
 
         /**
-         * Sets the current navigation context to that of a specific parent node that has the {@link navigation-configuration.md navigationContext} field declared in its navigation configuration. This navigation context is then used by navigate function.
+         * Sets the current navigation context to that of a specific parent node that has the {@link navigation-configuration.md navigationContext} field declared in its navigation configuration. This navigation context is then used by the `navigate` function.
          * @param {Object} navigationContext
          * @returns {linkManager} link manager instance.
          * @example
@@ -290,7 +293,7 @@
         },
 
         /**
-         * Sets the current navigation context, which is then used by the navigate function. This has to be a parent navigation context, it is not possible to go to child navigation contexts.
+         * Sets the current navigation context, which is then used by the `navigate` function. This has to be a parent navigation context, it is not possible to go to child navigation contexts.
          * @returns {linkManager} link manager instance.
          * @example
          * LuigiClient.linkManager().fromClosestContext().navigate('/users/groups/stakeholders')
@@ -310,7 +313,7 @@
         },
 
         /**
-         * Sends node parameters to the route, which are then used by the navigate function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.
+         * Sends node parameters to the route, which are then used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.
          * @param {Object} nodeParams
          * @returns {linkManager} link manager instance.
          * @example
@@ -361,8 +364,8 @@
         },
 
         /**
-         * Checks if there are one or more preserved views. Can be used to show a back button.
-         * @returns {boolean} a boolean with the information if there is a preserved view available to which a user can return.
+         * Checks if there are one or more preserved views. Can be used to show a **back** button.
+         * @returns {boolean} indicating if there is a preserved view available to which the user can return.
          */
         hasBack: function hasBack() {
           return Boolean(currentContext.internal.viewStackSize !== 0);
diff --git a/docs/README.md b/docs/README.md
index ddb16dbf1b..6f81fda890 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -13,6 +13,6 @@ This directory contains the following documents that relate to the project:
 
 **Luigi Client**
 
-* [Lifecycle](luigi-client-api.md#lifecycle) gives you details on the life cycle of listeners, navigation nodes, and Event data.
-* [Link Manager](luigi-client-api.md#linkmanager) guides you through the configuration of the Link Manager.
-* [UX Manager](luigi-client-api.md#uxmanager) shows you how to set up the UX Manager.
\ No newline at end of file
+* [Lifecycle](luigi-client-api.md#lifecycle) gives you details on the life cycle of listeners, navigation nodes and event data.
+* [Link Manager](luigi-client-api.md#linkmanager) allows you to navigate to a specific route. 
+* [UX Manager](luigi-client-api.md#uxmanager) helps you to manage the appearance in Luigi.
\ No newline at end of file
diff --git a/docs/luigi-client-api.md b/docs/luigi-client-api.md
index 64b9d7965e..57ba50a1f1 100644
--- a/docs/luigi-client-api.md
+++ b/docs/luigi-client-api.md
@@ -14,6 +14,14 @@ Registers a listener that is called with a context object as soon as Luigi is in
 
 -   `initFn` **[function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** the function that is called once Luigi is initialized
 
+### removeInitListener
+
+Removes a init listener
+
+#### Parameters
+
+-   `id` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the id that was returned by `addInitListener`
+
 ### addContextUpdateListener
 
 Registers a listener that is called upon any navigation change.
@@ -22,6 +30,14 @@ Registers a listener that is called upon any navigation change.
 
 -   `contextUpdatedFn` **[function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** the listener function that is called every time Luigi context was changed
 
+### removeContextUpdateListener
+
+Removes a context update listener
+
+#### Parameters
+
+-   `id` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the id that was returned by `addContextUpdateListener`
+
 ### getEventData
 
 Returns the context object. Typically it is not required as the [addContextUpdateListener()](#addContextUpdateListener) receives the same values.
@@ -30,15 +46,18 @@ Returns **{idToken: [string](https://developer.mozilla.org/docs/Web/JavaScript/R
 
 ### getNodeParams
 
-Returns the configuration object of the active navigation node.
+Returns the node parameters of the active URL.
+Node parameters are defined like URL query parameters but with a specific prefix allowing them to be passed to the micro front-end view.  The default prefix is **~** and it is used in the following example: `https://my.luigi.app/home/products?~sort=asc~page=3`.
 
-Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** node parameters.
+Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** node parameters, where the object property name is the node parameter name without the prefix, and its value is the value of the node parameter. For example `{sort: 'asc', page: 3}`.
 
 ### getPathParams
 
 Returns the dynamic path parameters of the active URL.
+Path parameters are defined by navigation nodes with a dynamic **pathSegment** value starting with **:** such as `productId`.
+All such parameters in the current navigation path (as defined by the active URL) are returned.
 
-Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** path parameters.
+Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** path parameters, where the object property name is the path parameter name without the prefix, and its value is the actual value of the path parameter. For example `{productId: 1234, ...}`.
 
 ## linkManager
 
@@ -50,12 +69,12 @@ Lets you navigate to another route. Use the Link Manager instead of an internal
 
 ### navigate
 
-Navigates to the given path in the hosting Luigi app. Contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is a classical navigation.
+Navigates to the given path in the hosting Luigi application. Contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is a standard navigation.
 
 #### Parameters
 
 -   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** path to be navigated to
--   `sessionId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** current Luigi sessionId
+-   `sessionId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** current Luigi **sessionId**
 -   `preserveView` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the [goBack()](#goBack) function to navigate back afterwards. You can use this feature at unlimited levels. The preserved views are discarded as soon as the standard [navigate()](#navigate) function is used in place of [goBack()](#goBack).
 
 #### Examples
@@ -68,7 +87,7 @@ LuigiClient.linkManager().navigate('/settings', null, true) // preserve view
 
 ### fromContext
 
-Sets the current navigation context to that of a specific parent node that has the [navigationContext](navigation-configuration.md) field declared in its navigation configuration. This navigation context is then used by navigate function.
+Sets the current navigation context to that of a specific parent node that has the [navigationContext](navigation-configuration.md) field declared in its navigation configuration. This navigation context is then used by the `navigate` function.
 
 #### Parameters
 
@@ -84,7 +103,7 @@ Returns **[linkManager](#linkmanager)** link manager instance.
 
 ### fromClosestContext
 
-Sets the current navigation context, which is then be used by the navigate function. This has to be a parent navigation context, it is not possible to go to child navigation contexts.
+Sets the current navigation context, which is then used by the `navigate` function. This has to be a parent navigation context, it is not possible to go to child navigation contexts.
 
 #### Examples
 
@@ -96,7 +115,7 @@ Returns **[linkManager](#linkmanager)** link manager instance.
 
 ### withParams
 
-Sends node parameters to the route, which are then used by the navigate function. Use it optionally in combination with any of the navigation functions and receive it with as part of the context object in Luigi Client.
+Sends node parameters to the route, which are then used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.
 
 #### Parameters
 
@@ -107,17 +126,39 @@ Sends node parameters to the route, which are then used by the navigate function
 ```javascript
 LuigiClient.linkManager.withParams({foo: "bar"}).navigate("path")
 
-// Can be chained with context settings functions like this: 
+// Can be chained with context settings functions like this:
 LuigiClient.linkManager.fromContext("currentTeam").withParams({foo: "bar"}).navigate("path")
 ```
 
 Returns **[linkManager](#linkmanager)** link manager instance.
 
+### pathExists
+
+Checks if a path exists in the main application, i.e., if that path can be navigated to. This helper method can be used e.g. to conditionally display a DOM element like a button.
+
+#### Parameters
+
+-   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** path which existence you want to check
+
+#### Examples
+
+```javascript
+let pathExists;
+ this.luigiClient
+ .linkManager()
+ .pathExists('projects/pr2')
+ .then(
+   (pathExists) => {  }
+ );
+```
+
+Returns **[promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** A promise that will resolve to a Boolean variable specifying if the path exists or not.
+
 ### hasBack
 
-Checks if there are one or more preserved views. Can be used to show a back button.
+Checks if there are one or more preserved views. Can be used to show a **back** button.
 
-Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** a boolean with the information if there is a preserved view available to which a user can return.
+Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** indicating if there is a preserved view available to which the user can return.
 
 ### goBack
 

From c4cfbd23a03edf9530b70202b9da14f17639572f Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Wed, 7 Nov 2018 12:13:43 +0100
Subject: [PATCH 17/45] Remove unnecessary import

---
 core/src/navigation/TopNav.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html
index dd25f4cf52..2c0aea8c8f 100644
--- a/core/src/navigation/TopNav.html
+++ b/core/src/navigation/TopNav.html
@@ -47,7 +47,6 @@
 </div>
 
 <script type="text/javascript">
-  import Backdrop from '../Backdrop.html';
   import ContextSwitcher from './ContextSwitcher.html';
   import LogoTitle from './LogoTitle.html';
   import Authorization from '../Authorization.html';

From e524ded73595f2b8ae9dc00b66119e1cee3c881f Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Wed, 7 Nov 2018 12:14:47 +0100
Subject: [PATCH 18/45] Bring back external link example in angular app and add
 small text improvement

---
 .../e2e/tests/context-switcher.spec.js                |  2 +-
 .../src/assets/extendedConfiguration.js               | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
index 7860b61496..63c4efb758 100644
--- a/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
+++ b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
@@ -12,7 +12,7 @@ describe('Context switcher', () => {
 
     // click an action
     cy.get('.context-switcher .fd-popover__body')
-      .contains('New Environment')
+      .contains('New Environment (bottom)')
       .click();
 
     cy.location().should(loc => {
diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 6e8cd5c3c6..98e4b8e260 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -466,6 +466,13 @@ Luigi.setConfig({
           label: 'Settings',
           viewUrl: '/sampleapp.html#/settings'
         },
+        {
+          label: 'Open Google in this tab',
+          externalLink: {
+            url: 'http://google.com',
+            sameWindow: true
+          }
+        },
         {
           pathSegment: 'ext',
           label: 'External Page',
@@ -507,11 +514,11 @@ Luigi.setConfig({
       },
       actions: [
         {
-          label: '+ New Simple',
+          label: '+ New Environment (top)',
           link: '/create-environment'
         },
         {
-          label: '+ New Environment',
+          label: '+ New Environment (bottom)',
           link: '/create-environment',
           position: 'bottom', // top or bottom
           clickHandler: node => {

From 02135b5ebc8b52d6905d2e6afbf4c5238d931dd3 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Wed, 7 Nov 2018 12:21:04 +0100
Subject: [PATCH 19/45] Remove unnecessary code from extended configuration

---
 .../src/assets/extendedConfiguration.js       | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 98e4b8e260..2909f53bb7 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -431,27 +431,7 @@ Luigi.setConfig({
           children: [
             {
               pathSegment: ':environmentId',
-              viewUrl: '/sampleapp.html#/environments/:environmentId',
-              context: {
-                label: ':environmentId',
-                links: ['Overview']
-              },
-              children: ['Overview'].map(name => ({
-                pathSegment: name
-                  .toLowerCase()
-                  .split(' ')
-                  .join('-'),
-                label: name,
-                context: {
-                  label: name
-                },
-                viewUrl:
-                  '/sampleapp.html#/environments/:environmentId/' +
-                  name
-                    .toLowerCase()
-                    .split(' ')
-                    .join('-')
-              }))
+              viewUrl: '/sampleapp.html#/environments/:environmentId'
             }
           ]
         },

From 4c92bfd0cc887b1d27f4cf7cce721e1b97356361 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Mon, 12 Nov 2018 10:20:14 +0100
Subject: [PATCH 20/45] Do not consider context switcher when a path segment
 contains parentNodePath only partially

---
 core/src/navigation/services/context-switcher.js |  6 +++++-
 core/test/context-switcher.spec.js               | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index 35b5ae259f..9a461bb178 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -40,7 +40,11 @@ export const ContextSwitcherHelpers = {
   ) {
     let selectedLabel;
     const inContextBasePath =
-      parentNodePath && currentPath.includes(parentNodePath);
+      parentNodePath &&
+      currentPath
+        .split('/')
+        .filter(s => Boolean(s))
+        .includes(parentNodePath.substring(1));
     if (inContextBasePath) {
       // we are inside the context switcher base path
       const truncatedPath = Helpers.trimLeadingSlash(
diff --git a/core/test/context-switcher.spec.js b/core/test/context-switcher.spec.js
index 5da826db49..c063633d16 100644
--- a/core/test/context-switcher.spec.js
+++ b/core/test/context-switcher.spec.js
@@ -135,7 +135,17 @@ describe('ContextSwitcher', function() {
   describe('getSelectedLabel()', () => {
     const parentNodePath = '/environment';
 
-    it('returns undefined if outsite current path', async () => {
+    it('returns undefined when path only partially contains parentNodePath', async () => {
+      const result = await CSHelpers.getSelectedLabel(
+        '/environmentWhatever',
+        [],
+        parentNodePath,
+        myResolverFn
+      );
+      assert.equal(result, undefined);
+    });
+
+    it('returns undefined if outside current path', async () => {
       const result = await CSHelpers.getSelectedLabel(
         '/something',
         [],
@@ -145,7 +155,7 @@ describe('ContextSwitcher', function() {
       assert.equal(result, undefined);
     });
 
-    it('returns undefined if outsite parentNodePath', async () => {
+    it('returns env id', async () => {
       const env1 = { label: 'Env 1', pathValue: 'env1' };
       const env2 = { label: 'Env 2', pathValue: 'env2' };
       const result = await CSHelpers.getSelectedLabel(

From 714a70140579207f00df4eff371da216e74c4657 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Mon, 12 Nov 2018 11:59:41 +0100
Subject: [PATCH 21/45] Improvement on "Do not consider context switcher when a
 path segment contains parentNodePath only partially"

---
 core/src/navigation/services/context-switcher.js |  9 ++++-----
 core/src/utilities/helpers.js                    | 10 +++++++++-
 core/test/context-switcher.spec.js               | 12 ++++++------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index 9a461bb178..b919196feb 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -1,21 +1,20 @@
 import * as Helpers from '../../utilities/helpers.js';
 
 export const ContextSwitcherHelpers = {
-  prepareParentNodePath(config) {
+  getPreparedParentNodePath(config) {
     if (!config.parentNodePath || !config.parentNodePath.startsWith('/')) {
       console.error(
         'Luigi Config Error: navigation.contextSwitcher.parentNodePath must be defined as an absolute path.'
       );
     }
     if (config.parentNodePath && !config.parentNodePath.endsWith('/')) {
-      // add trailing slash it does not exist
-      config.parentNodePath = `${config.parentNodePath}/`;
+      return `${config.parentNodePath}/`;
     }
     return config.parentNodePath;
   },
 
   generateSwitcherNav(config, rawOptions) {
-    const parentNodePath = this.prepareParentNodePath(config);
+    const parentNodePath = this.getPreparedParentNodePath(config);
     return rawOptions.map(opt => ({
       label: opt.label,
       path: (parentNodePath || '/') + opt.pathValue,
@@ -44,7 +43,7 @@ export const ContextSwitcherHelpers = {
       currentPath
         .split('/')
         .filter(s => Boolean(s))
-        .includes(parentNodePath.substring(1));
+        .includes(Helpers.trimSlashes(parentNodePath));
     if (inContextBasePath) {
       // we are inside the context switcher base path
       const truncatedPath = Helpers.trimLeadingSlash(
diff --git a/core/src/utilities/helpers.js b/core/src/utilities/helpers.js
index adc41dd461..293d684790 100644
--- a/core/src/utilities/helpers.js
+++ b/core/src/utilities/helpers.js
@@ -96,6 +96,14 @@ export const getNegatedBoolString = str => {
 
 /**
  * Removes leading slash of a string
- * @param {str} string string without leading slash
+ * @param {str} string
+ * @returns {string} string without leading slash
  */
 export const trimLeadingSlash = str => str.replace(/^\//, '');
+
+/**
+ * Removes leading ans training slashes of a string
+ * @param {str} string
+ * @returns {string} string without leading or trailing slashes
+ */
+export const trimSlashes = s => s.replace(/^\/+|\/+$/g, '');
diff --git a/core/test/context-switcher.spec.js b/core/test/context-switcher.spec.js
index c063633d16..f193887808 100644
--- a/core/test/context-switcher.spec.js
+++ b/core/test/context-switcher.spec.js
@@ -27,7 +27,7 @@ describe('ContextSwitcher', function() {
     return '##' + id + '##';
   };
 
-  describe('prepareParentNodePath()', () => {
+  describe('getPreparedParentNodePath()', () => {
     let mockConfig;
     beforeEach(() => {
       mockConfig = getMockConfig();
@@ -35,32 +35,32 @@ describe('ContextSwitcher', function() {
 
     it('undefined parentNodePath', () => {
       console.error = sinon.spy();
-      CSHelpers.prepareParentNodePath({});
+      CSHelpers.getPreparedParentNodePath({});
       sinon.assert.calledOnce(console.error);
     });
 
     it('falsy relative parentNodePath', () => {
       console.error = sinon.spy();
-      CSHelpers.prepareParentNodePath({ parentNodePath: 'relative/path' });
+      CSHelpers.getPreparedParentNodePath({ parentNodePath: 'relative/path' });
       sinon.assert.calledOnce(console.error);
     });
 
     it('absolute parentNodePath adds slash', () => {
-      const result = CSHelpers.prepareParentNodePath({
+      const result = CSHelpers.getPreparedParentNodePath({
         parentNodePath: '/environment'
       });
       assert.equal(result, '/environment/');
     });
 
     it('absolute parentNodePath with slash does not add slash', () => {
-      const result = CSHelpers.prepareParentNodePath({
+      const result = CSHelpers.getPreparedParentNodePath({
         parentNodePath: '/environment/'
       });
       assert.equal(result, '/environment/');
     });
 
     it('no parentNodePath', () => {
-      const result = CSHelpers.prepareParentNodePath({
+      const result = CSHelpers.getPreparedParentNodePath({
         parentNodePath: '/environment'
       });
       assert.equal(result, '/environment/');

From cf4a7cab62ad21278bde54f6560e81596a046dac Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Mon, 12 Nov 2018 12:00:21 +0100
Subject: [PATCH 22/45] Use proper configuration to avoid runtime errors on
 environments and environments/ routes

---
 .../luigi-sample-angular/src/app/app-routing.module.ts        | 4 ++++
 .../luigi-sample-angular/src/assets/extendedConfiguration.js  | 1 +
 2 files changed, 5 insertions(+)

diff --git a/core/examples/luigi-sample-angular/src/app/app-routing.module.ts b/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
index 1a0dac6922..bb5c859885 100644
--- a/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
+++ b/core/examples/luigi-sample-angular/src/app/app-routing.module.ts
@@ -61,6 +61,10 @@ const routes: Routes = [
     path: 'create/:dynamicValue',
     component: DynamicComponent
   },
+  {
+    path: 'environments',
+    component: DynamicComponent
+  },
   {
     path: 'environments/:dynamicValue',
     component: DynamicComponent
diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index a2224353b1..5803da6622 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -430,6 +430,7 @@ Luigi.setConfig({
         {
           hideFromNav: true,
           pathSegment: 'environments',
+          viewUrl: '/sampleapp.html#/environments',
           children: [
             {
               pathSegment: ':environmentId',

From c11acf2df1300442e9abc6c9a74cc5791309a10c Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Mon, 12 Nov 2018 15:19:02 +0100
Subject: [PATCH 23/45] Load options only once and based on lazyloadOptions
 value from config

---
 core/src/navigation/ContextSwitcher.html      | 12 ++--
 .../navigation/services/context-switcher.js   | 63 +++++++++++--------
 core/src/utilities/helpers.js                 |  9 ++-
 core/test/context-switcher.spec.js            | 12 ++--
 4 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index 833eb3f9f3..2046ae2cd7 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -69,17 +69,21 @@
 
       if (contextSwitcherConfig) {
         const actions = await getConfigValueAsync('navigation.contextSwitcher.actions');
+        const currentPath = Routing.getCurrentPath();
+
         this.set({
           actions,
           fallbackLabelResolver: contextSwitcherConfig.fallbackLabelResolver
         });
+
         // options are loaded lazy by default
-        if (contextSwitcherConfig.lazyloadOptions === false) {
+        if (ContextSwitcherHelpers.isContextSwitcherDetailsView(currentPath, contextSwitcherConfig.parentNodePath)
+            || contextSwitcherConfig.lazyloadOptions === false) {
           await this.fetchOptions();
+          await this.setSelectedContext(currentPath);
         }
       }
 
-      await this.setSelectedContext(Routing.getCurrentPath());
       Routing.addRouteChangeListener(() => this.setSelectedContext(Routing.getCurrentPath()));
     },
     data() {
@@ -112,7 +116,7 @@
     methods: {
       async fetchOptions() {
         let options = this.get().options;
-        if (!options || !options.length || this.get().config.lazyloadOptions !== false) {
+        if (!options || !options.length) {
           const contextSwitcherOptions = await getConfigValueAsync('navigation.contextSwitcher.options');
           options = await ContextSwitcherHelpers.generateSwitcherNav(this.get().config, contextSwitcherOptions);
           this.set({options});
@@ -120,9 +124,9 @@
       },
       async setSelectedContext(currentPath) {
         const config = this.get().config;
+        const options = this.get().options;
         const parentNodePath = config.parentNodePath;
         const fallbackLabelResolver = config.fallbackLabelResolver;
-        const options = await getConfigValueFromObjectAsync(config, 'options');
         this.set({
           selectedLabel: await ContextSwitcherHelpers.getSelectedLabel(currentPath, options, parentNodePath, fallbackLabelResolver)
         })
diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index b919196feb..74b801083c 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -7,8 +7,8 @@ export const ContextSwitcherHelpers = {
         'Luigi Config Error: navigation.contextSwitcher.parentNodePath must be defined as an absolute path.'
       );
     }
-    if (config.parentNodePath && !config.parentNodePath.endsWith('/')) {
-      return `${config.parentNodePath}/`;
+    if (config.parentNodePath) {
+      return Helpers.addTrailingSlash(config.parentNodePath);
     }
     return config.parentNodePath;
   },
@@ -23,10 +23,21 @@ export const ContextSwitcherHelpers = {
   },
 
   getMatchingNodeName(options, id) {
-    const found = options.find(o => o.pathValue === id);
+    const found = options.find(o => o.id === id);
     return found && found.label;
   },
 
+  isContextSwitcherDetailsView(currentPath, parentNodePath) {
+    const currentPathNormalized = Helpers.addTrailingSlash(currentPath);
+    const parentNodePathNormalized = Helpers.addTrailingSlash(parentNodePath);
+
+    return (
+      parentNodePath &&
+      currentPathNormalized.includes(parentNodePathNormalized) &&
+      !currentPathNormalized.endsWith(parentNodePathNormalized)
+    );
+  },
+
   async getFallbackNodeName(fallbackLabelResolver, id) {
     return fallbackLabelResolver ? await fallbackLabelResolver(id) : id;
   },
@@ -37,30 +48,32 @@ export const ContextSwitcherHelpers = {
     parentNodePath,
     fallbackLabelResolver
   ) {
+    if (
+      !ContextSwitcherHelpers.isContextSwitcherDetailsView(
+        currentPath,
+        parentNodePath
+      )
+    ) {
+      return;
+    }
+
     let selectedLabel;
-    const inContextBasePath =
-      parentNodePath &&
-      currentPath
-        .split('/')
-        .filter(s => Boolean(s))
-        .includes(Helpers.trimSlashes(parentNodePath));
-    if (inContextBasePath) {
-      // we are inside the context switcher base path
-      const truncatedPath = Helpers.trimLeadingSlash(
-        currentPath.replace(parentNodePath, '')
-      );
-      const selectedId = truncatedPath.split('/')[0];
-      selectedLabel = ContextSwitcherHelpers.getMatchingNodeName(
-        options,
+    // we are inside the context switcher base path
+    const truncatedPath = Helpers.trimLeadingSlash(
+      currentPath.replace(parentNodePath, '')
+    );
+    const selectedId = truncatedPath.split('/')[0];
+    selectedLabel = ContextSwitcherHelpers.getMatchingNodeName(
+      options,
+      selectedId
+    );
+    selectedLabel =
+      selectedLabel ||
+      (await ContextSwitcherHelpers.getFallbackNodeName(
+        fallbackLabelResolver,
         selectedId
-      );
-      selectedLabel =
-        selectedLabel ||
-        (await ContextSwitcherHelpers.getFallbackNodeName(
-          fallbackLabelResolver,
-          selectedId
-        ));
-    }
+      ));
+
     return selectedLabel;
   }
 };
diff --git a/core/src/utilities/helpers.js b/core/src/utilities/helpers.js
index 293d684790..103ec399c3 100644
--- a/core/src/utilities/helpers.js
+++ b/core/src/utilities/helpers.js
@@ -99,11 +99,16 @@ export const getNegatedBoolString = str => {
  * @param {str} string
  * @returns {string} string without leading slash
  */
-export const trimLeadingSlash = str => str.replace(/^\//, '');
+export const trimLeadingSlash = str => str.replace(/^\/+|\//, '');
 
 /**
  * Removes leading ans training slashes of a string
  * @param {str} string
  * @returns {string} string without leading or trailing slashes
  */
-export const trimSlashes = s => s.replace(/^\/+|\/+$/g, '');
+export const addTrailingSlash = s => {
+  if (typeof s !== 'string') {
+    return s;
+  }
+  return s.replace(/\/?$/, '/');
+};
diff --git a/core/test/context-switcher.spec.js b/core/test/context-switcher.spec.js
index f193887808..2d5f3978bb 100644
--- a/core/test/context-switcher.spec.js
+++ b/core/test/context-switcher.spec.js
@@ -118,8 +118,8 @@ describe('ContextSwitcher', function() {
   });
 
   describe('getMatchingNodeName()', () => {
-    const env1 = { label: 'Env 1', pathValue: 'env1' };
-    const env2 = { label: 'Env 2', pathValue: 'env2' };
+    const env1 = { label: 'Env 1', id: 'env1' };
+    const env2 = { label: 'Env 2', id: 'env2' };
 
     it('returns undefined if node is not inside options', () => {
       const result = CSHelpers.getMatchingNodeName([env1, env2], 'env3');
@@ -156,8 +156,8 @@ describe('ContextSwitcher', function() {
     });
 
     it('returns env id', async () => {
-      const env1 = { label: 'Env 1', pathValue: 'env1' };
-      const env2 = { label: 'Env 2', pathValue: 'env2' };
+      const env1 = { label: 'Env 1', id: 'env1' };
+      const env2 = { label: 'Env 2', id: 'env2' };
       const result = await CSHelpers.getSelectedLabel(
         '/environment/env2',
         [env1, env2],
@@ -168,8 +168,8 @@ describe('ContextSwitcher', function() {
     });
 
     it('returns fallback label if inside parentNodePath', async () => {
-      const env1 = { label: 'Env 1', pathValue: 'env1' };
-      const env2 = { label: 'Env 2', pathValue: 'env2' };
+      const env1 = { label: 'Env 1', id: 'env1' };
+      const env2 = { label: 'Env 2', id: 'env2' };
       const result = await CSHelpers.getSelectedLabel(
         '/environment/env3',
         [env1, env2],

From d91e8a9bc1f2b4239287d602b309d0c2a00920b5 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Mon, 12 Nov 2018 17:06:23 +0100
Subject: [PATCH 24/45] Add unit tests for new function in context switcher
 helpers

---
 core/package.json                             |  1 +
 .../navigation/services/context-switcher.js   |  6 +-
 core/test/context-switcher.spec.js            | 61 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/core/package.json b/core/package.json
index b0a4271191..7d118a4851 100644
--- a/core/package.json
+++ b/core/package.json
@@ -38,6 +38,7 @@
     "bundle": "webpack --display-error-details",
     "bundle-develop": "webpack -d --watch",
     "test": "./node_modules/mocha/bin/mocha --require babel-register --require babel-polyfill --require jsdom-global/register",
+    "test:watch": "npm run test -- --watch",
     "bundlesize": "bundlesize",
     "prepush": "npm run bundle && npm run bundlesize"
   },
diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index 74b801083c..d56a0b5306 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -31,10 +31,10 @@ export const ContextSwitcherHelpers = {
     const currentPathNormalized = Helpers.addTrailingSlash(currentPath);
     const parentNodePathNormalized = Helpers.addTrailingSlash(parentNodePath);
 
-    return (
+    return Boolean(
       parentNodePath &&
-      currentPathNormalized.includes(parentNodePathNormalized) &&
-      !currentPathNormalized.endsWith(parentNodePathNormalized)
+        currentPathNormalized.includes(parentNodePathNormalized) &&
+        !currentPathNormalized.endsWith(parentNodePathNormalized)
     );
   },
 
diff --git a/core/test/context-switcher.spec.js b/core/test/context-switcher.spec.js
index 2d5f3978bb..120597cf10 100644
--- a/core/test/context-switcher.spec.js
+++ b/core/test/context-switcher.spec.js
@@ -1,8 +1,10 @@
-const CSHelpers = require('../src/navigation/services/context-switcher')
-  .ContextSwitcherHelpers;
 const assert = require('chai').assert;
 const sinon = require('sinon');
 
+const CSHelpers = require('../src/navigation/services/context-switcher')
+  .ContextSwitcherHelpers;
+const Helpers = require('../src/utilities/helpers.js');
+
 describe('ContextSwitcher', function() {
   afterEach(() => {
     sinon.restore();
@@ -132,6 +134,61 @@ describe('ContextSwitcher', function() {
     });
   });
 
+  describe('isContextSwitcherDetailsView()', () => {
+    let currentPath;
+    let parentNodePath;
+
+    beforeEach(() => {
+      parentNodePath = '/home/projects';
+      currentPath = '/home/projects/pr1';
+      Helpers.addTrailingSlash = sinon.stub().callsFake(s => s + `/`);
+    });
+
+    it('returns false if parent node path is falsy', () => {
+      parentNodePath = undefined;
+      const actual = CSHelpers.isContextSwitcherDetailsView(
+        currentPath,
+        parentNodePath
+      );
+      assert.isFalse(actual);
+    });
+
+    it('returns false if parent node path is not included in current path', () => {
+      parentNodePath = '/home/nomatch';
+      const actual = CSHelpers.isContextSwitcherDetailsView(
+        currentPath,
+        parentNodePath
+      );
+      assert.isFalse(actual);
+    });
+
+    it('returns false if last path segment from parent node is not a full match in currentPath', () => {
+      currentPath = '/home/projectsandmore/pr1';
+      const actual = CSHelpers.isContextSwitcherDetailsView(
+        currentPath,
+        parentNodePath
+      );
+      assert.isFalse(actual);
+    });
+
+    it('returns false if current path has no content after parent node path', () => {
+      currentPath = '/home/projects';
+      const actual = CSHelpers.isContextSwitcherDetailsView(
+        currentPath,
+        parentNodePath
+      );
+      assert.isFalse(actual);
+    });
+
+    it('returns true if current path has content after parent node path', () => {
+      const actual = CSHelpers.isContextSwitcherDetailsView(
+        currentPath,
+        parentNodePath
+      );
+      assert.isTrue(actual);
+    });
+  });
+
   describe('getSelectedLabel()', () => {
     const parentNodePath = '/environment';
 

From 41463801c66bc807e0bbbf3eac1e6a0cf411ab33 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Tue, 13 Nov 2018 14:21:43 +0100
Subject: [PATCH 25/45] better documentation for `addTrailingSlash` method

---
 core/src/utilities/helpers.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/src/utilities/helpers.js b/core/src/utilities/helpers.js
index 103ec399c3..d005a94d64 100644
--- a/core/src/utilities/helpers.js
+++ b/core/src/utilities/helpers.js
@@ -102,13 +102,13 @@ export const getNegatedBoolString = str => {
 export const trimLeadingSlash = str => str.replace(/^\/+|\//, '');
 
 /**
- * Removes leading ans training slashes of a string
+ * Adds a trailing slash to a string if it has none
  * @param {str} string
- * @returns {string} string without leading or trailing slashes
+ * @returns {string} string with a trailing slash
  */
-export const addTrailingSlash = s => {
-  if (typeof s !== 'string') {
-    return s;
+export const addTrailingSlash = str => {
+  if (typeof str !== 'string') {
+    return str;
   }
   return s.replace(/\/?$/, '/');
 };

From 8f444400107a705caace9fb2f3ced76d08083e70 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Tue, 13 Nov 2018 16:23:58 +0100
Subject: [PATCH 26/45] Avoid runtime error for pop state event handler (path
 routing) when navigating back to empty url

---
 core/src/services/routing.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/core/src/services/routing.js b/core/src/services/routing.js
index 93bd314ff0..4c02130487 100644
--- a/core/src/services/routing.js
+++ b/core/src/services/routing.js
@@ -422,11 +422,16 @@ export const handleRouteClick = (node, windowElem = window) => {
   navigateTo(route, windowElem);
 };
 
-export const getModifiedPathname = () =>
-  window.history.state.path
+export const getModifiedPathname = () => {
+  if (!window.history.state) {
+    return '';
+  }
+
+  return window.history.state.path
     .split('/')
     .slice(1)
     .join('/');
+};
 
 export const getCurrentPath = () =>
   LuigiConfig.getConfigValue('routing.useHashRouting')
@@ -441,7 +446,7 @@ export const addRouteChangeListener = callback => {
     });
   }
 
-  return window.addEventListener('popstate', () => {
+  window.onpopstate = () => {
     callback(trimLeadingSlash(getModifiedPathname()));
-  });
+  };
 };

From 3bb30e25e4fdac2171022218119af191a45cb782 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Wed, 14 Nov 2018 15:28:47 +0100
Subject: [PATCH 27/45] bundle fundamental-ui.min.css in luigi.css

---
 .../luigi-sample-angular/src/index.html       |  1 -
 core/webpack.config.js                        | 29 ++++++-------------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/index.html b/core/examples/luigi-sample-angular/src/index.html
index c9e72d9465..466d521f20 100644
--- a/core/examples/luigi-sample-angular/src/index.html
+++ b/core/examples/luigi-sample-angular/src/index.html
@@ -2,7 +2,6 @@
 <html>
 <head>
   <title></title>
-  <link rel='stylesheet' href='/luigi-core/fundamental-ui/fundamental-ui.min.css'>
   <link rel='stylesheet' href='/luigi-core/luigi.css'>
 </head>
 <body>
diff --git a/core/webpack.config.js b/core/webpack.config.js
index d235cd7caf..a3d2356491 100644
--- a/core/webpack.config.js
+++ b/core/webpack.config.js
@@ -6,7 +6,10 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   entry: {
-    index: ['./src/main.js']
+    index: [
+      './src/main.js',
+      './node_modules/fundamental-ui/dist/fundamental-ui.min.css'
+    ]
   },
   resolve: {
     mainFields: ['svelte', 'browser', 'module', 'main'],
@@ -65,7 +68,11 @@ module.exports = {
         test: /\.(css)$/,
         use: ExtractTextPlugin.extract({
           fallback: 'file-loader',
-          use: [{ loader: 'css-loader', options: { url: false } }]
+          use: [
+            {
+              loader: 'css-loader'
+            }
+          ]
         })
       },
       {
@@ -83,24 +90,6 @@ module.exports = {
       {
         from: 'node_modules/oidc-client/dist/oidc-client.min.js',
         to: 'auth/oidc/'
-      },
-      {
-        context: 'node_modules/fundamental-ui/dist',
-        to: 'fundamental-ui',
-        from: {
-          glob: 'SAP-icons.*'
-        }
-      },
-      {
-        from: 'node_modules/fundamental-ui/dist/fundamental-ui.min.css',
-        to: 'fundamental-ui'
-      },
-      {
-        context: 'node_modules/fundamental-ui/dist/',
-        to: 'fundamental-ui',
-        from: {
-          glob: 'fonts'
-        }
       }
     ])
   ],

From 24778fc851f7ef68184a9e77aa55ee995ff197fd Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Wed, 14 Nov 2018 15:29:49 +0100
Subject: [PATCH 28/45] increment bundle size for luigi.js and luigi.css

---
 core/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/package.json b/core/package.json
index 7d118a4851..287c939fc8 100644
--- a/core/package.json
+++ b/core/package.json
@@ -45,12 +45,12 @@
   "bundlesize": [
     {
       "path": "./public/luigi.js",
-      "maxSize": "50 kB",
+      "maxSize": "100 kB",
       "compression": "none"
     },
     {
       "path": "./public/luigi.css",
-      "maxSize": "150 kB",
+      "maxSize": "300 kB",
       "compression": "none"
     }
   ],

From fe125273798fcdb79563e602338dc8bcb3647a21 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Wed, 14 Nov 2018 15:35:58 +0100
Subject: [PATCH 29/45] cleanup public folder on each webpack build

---
 core/package.json                                   |  1 +
 core/public/package-lock.json                       |  5 -----
 core/{public => src}/auth/oauth2/callback.html      |  0
 core/{public => src}/auth/oidc/silent-callback.html |  0
 core/webpack.config.js                              | 13 +++++++++++++
 5 files changed, 14 insertions(+), 5 deletions(-)
 delete mode 100644 core/public/package-lock.json
 rename core/{public => src}/auth/oauth2/callback.html (100%)
 rename core/{public => src}/auth/oidc/silent-callback.html (100%)

diff --git a/core/package.json b/core/package.json
index 287c939fc8..3bafd8586d 100644
--- a/core/package.json
+++ b/core/package.json
@@ -11,6 +11,7 @@
     "babel-register": "^6.26.0",
     "bundlesize": "^0.17.0",
     "chai": "^4.1.2",
+    "clean-webpack-plugin": "^1.0.0",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^0.28.11",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
diff --git a/core/public/package-lock.json b/core/public/package-lock.json
deleted file mode 100644
index b00225817d..0000000000
--- a/core/public/package-lock.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "@kyma-project/luigi-core",
-  "version": "0.3.7",
-  "lockfileVersion": 1
-}
diff --git a/core/public/auth/oauth2/callback.html b/core/src/auth/oauth2/callback.html
similarity index 100%
rename from core/public/auth/oauth2/callback.html
rename to core/src/auth/oauth2/callback.html
diff --git a/core/public/auth/oidc/silent-callback.html b/core/src/auth/oidc/silent-callback.html
similarity index 100%
rename from core/public/auth/oidc/silent-callback.html
rename to core/src/auth/oidc/silent-callback.html
diff --git a/core/webpack.config.js b/core/webpack.config.js
index a3d2356491..ae7d97490d 100644
--- a/core/webpack.config.js
+++ b/core/webpack.config.js
@@ -3,6 +3,7 @@ const babelSettings = JSON.parse(readFileSync('.babelrc'));
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const sass = require('node-sass');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 module.exports = {
   entry: {
@@ -85,11 +86,23 @@ module.exports = {
     ]
   },
   plugins: [
+    new CleanWebpackPlugin(['public'], {
+      exclude: ['package.json'],
+      verbose: true
+    }),
     new ExtractTextPlugin('luigi.css'),
     new CopyWebpackPlugin([
       {
         from: 'node_modules/oidc-client/dist/oidc-client.min.js',
         to: 'auth/oidc/'
+      },
+      {
+        from: 'src/auth/oauth2/callback.html',
+        to: 'auth/oauth2/callback.html'
+      },
+      {
+        from: 'src/auth/oidc/silent-callback.html',
+        to: 'auth/oidc/silent-callback.html'
       }
     ])
   ],

From 3f78c848f12d839d59755f81d1d38c3fb7648ef7 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Wed, 14 Nov 2018 15:40:27 +0100
Subject: [PATCH 30/45] update gitignore files

---
 .gitignore      |  1 -
 core/.gitignore | 10 ++++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index a6caf76d5a..e3d9fc8f6f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,5 @@ node_modules
 
 # Lerna
 lerna-debug.log
-oidc-client.min.js
 
 .changelog
diff --git a/core/.gitignore b/core/.gitignore
index 45f908e145..e062e04e22 100644
--- a/core/.gitignore
+++ b/core/.gitignore
@@ -23,10 +23,12 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode/
-public/luigi.css
-public/luigi.js
-public/luigi.vendor.js
-public/fundamental-ui
+/public/luigi.css
+/public/luigi.js
+/public/*.woff
+/public/*.woff2
+/public/*.ttf
+/public/auth
 
 # maps
 *.map

From 9a964e304836253d49e3c14664de5a53e9c2f6d2 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Wed, 14 Nov 2018 16:00:37 +0100
Subject: [PATCH 31/45] cleanup static.css as svelte is not using SAP-icons
 font anymore

---
 core/src/App.html   | 2 --
 core/src/static.css | 7 -------
 2 files changed, 9 deletions(-)
 delete mode 100644 core/src/static.css

diff --git a/core/src/App.html b/core/src/App.html
index 134091137a..79f79771bb 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -269,8 +269,6 @@
 </script>
 
 <style type="text/scss">
-  @import 'static.css';
-
   :global(html) {
     box-sizing: border-box;
     font-size: 14px;
diff --git a/core/src/static.css b/core/src/static.css
deleted file mode 100644
index 37d430cd18..0000000000
--- a/core/src/static.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* This file lets you import styles that Svelte can't consume inside <style> tags, such as @font-face, @keyframe etc. */
-@font-face {
-  font-family: SAP-icons;
-  src: url('/luigi-core/fundamental-ui/SAP-icons.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-}

From ef3d82a339c1216f8455ceecdfa58d951d985709 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Thu, 15 Nov 2018 14:08:42 +0100
Subject: [PATCH 32/45] automatic label for dynamic component if not defined

---
 .../src/app/project/dynamic/dynamic.component.ts          | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
index 542f2d12a2..9568a63b44 100644
--- a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
+++ b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
@@ -35,8 +35,14 @@ export class DynamicComponent implements OnInit, OnDestroy {
           return;
         }
 
+        const pathParams = LuigiClient.getPathParams();
+        let lastPathParam;
+        for (const key in pathParams) {
+          lastPathParam = pathParams[key];
+        }
+
         // We can directly access our specified context values here
-        this.nodeLabel = toTitleCase(ctx.context.label);
+        this.nodeLabel = toTitleCase(ctx.context.label || lastPathParam);
         this.links = ctx.context.links;
         if (!this.cdr['destroyed']) {
           this.cdr.detectChanges();

From 86ba7697cf76b52b1f6c94b1c746cdc61243a0d6 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Thu, 15 Nov 2018 14:49:29 +0100
Subject: [PATCH 33/45] Remove flickering on left nav

---
 core/src/navigation/LeftNav.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
index e0c7f2ab12..3f82cd1c7a 100644
--- a/core/src/navigation/LeftNav.html
+++ b/core/src/navigation/LeftNav.html
@@ -85,6 +85,7 @@ <h1 class="fd-side-nav__title">{key}</h1>
 </script>
 
 <style type="text/scss">
+  $left-nav-width: 320px;
   a {
     cursor: pointer;
   }
@@ -92,11 +93,14 @@ <h1 class="fd-side-nav__title">{key}</h1>
     position: fixed;
     top: 50px;
     left: 0;
-    width: 320px;
+    width: $left-nav-width;
     bottom: 0;
     background-color: white;
     color: #32363a;
     overflow-y: auto;
+    &:hover {
+      width: $left-nav-width; // Override default from fundamental-ui
+    }
   }
 
   .fd-side-nav__group {

From b0e0ff5ca7c6fcdf03b1a387044c9abf29a17b1d Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Thu, 15 Nov 2018 15:01:06 +0100
Subject: [PATCH 34/45] Small refactoring

---
 .../src/app/project/dynamic/dynamic.component.ts            | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
index 9568a63b44..bc81a8e538 100644
--- a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
+++ b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
@@ -35,11 +35,7 @@ export class DynamicComponent implements OnInit, OnDestroy {
           return;
         }
 
-        const pathParams = LuigiClient.getPathParams();
-        let lastPathParam;
-        for (const key in pathParams) {
-          lastPathParam = pathParams[key];
-        }
+        Object.values(LuigiClient.getPathParams() || {}).pop();
 
         // We can directly access our specified context values here
         this.nodeLabel = toTitleCase(ctx.context.label || lastPathParam);

From c56f1df02f89040d7fec116f1cbabfbfeb922bca Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Thu, 15 Nov 2018 15:05:18 +0100
Subject: [PATCH 35/45] Small refactoring well done

---
 .../src/app/project/dynamic/dynamic.component.ts              | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
index bc81a8e538..b55c9785dc 100644
--- a/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
+++ b/core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts
@@ -35,7 +35,9 @@ export class DynamicComponent implements OnInit, OnDestroy {
           return;
         }
 
-        Object.values(LuigiClient.getPathParams() || {}).pop();
+        const lastPathParam = Object.values(
+          LuigiClient.getPathParams() || {}
+        ).pop();
 
         // We can directly access our specified context values here
         this.nodeLabel = toTitleCase(ctx.context.label || lastPathParam);

From a1eab3cfb6c3270875f4a3a3b209cf42bf58c900 Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Thu, 15 Nov 2018 17:00:23 +0100
Subject: [PATCH 36/45] Revert "Remove flickering on left nav"

This reverts commit 86ba7697cf76b52b1f6c94b1c746cdc61243a0d6.
---
 core/src/navigation/LeftNav.html | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
index 3f82cd1c7a..e0c7f2ab12 100644
--- a/core/src/navigation/LeftNav.html
+++ b/core/src/navigation/LeftNav.html
@@ -85,7 +85,6 @@ <h1 class="fd-side-nav__title">{key}</h1>
 </script>
 
 <style type="text/scss">
-  $left-nav-width: 320px;
   a {
     cursor: pointer;
   }
@@ -93,14 +92,11 @@ <h1 class="fd-side-nav__title">{key}</h1>
     position: fixed;
     top: 50px;
     left: 0;
-    width: $left-nav-width;
+    width: 320px;
     bottom: 0;
     background-color: white;
     color: #32363a;
     overflow-y: auto;
-    &:hover {
-      width: $left-nav-width; // Override default from fundamental-ui
-    }
   }
 
   .fd-side-nav__group {

From c1505f402ce34da7b52f6c2d1a31f946c7be0d8a Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Thu, 15 Nov 2018 17:02:01 +0100
Subject: [PATCH 37/45] bundle order in luigi.css to be first fundamental

---
 core/package-lock.json | 59 +++++++++++++++++++++++++++++++++++++++++-
 core/package.json      |  1 +
 core/webpack.config.js | 26 +++++++++----------
 3 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index 51777d2040..2f45d9348a 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1743,6 +1743,15 @@
         }
       }
     },
+    "clean-webpack-plugin": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-1.0.0.tgz",
+      "integrity": "sha512-+f96f52UIET4tOFBbCqezx7KH+w7lz/p4fA1FEjf0hC6ugxqwZedBtENzekN2FnmoTF/bn1LrlkvebOsDZuXKw==",
+      "dev": true,
+      "requires": {
+        "rimraf": "^2.6.1"
+      }
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -2058,7 +2067,7 @@
     },
     "css-loader": {
       "version": "0.28.11",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz",
+      "resolved": "http://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz",
       "integrity": "sha512-wovHgjAx8ZIMGSL8pTys7edA1ClmzxHeY6n/d97gg5odgsxEgKjULPR0viqyC+FWMCL9sfqoC/QCUBo62tLvPg==",
       "dev": true,
       "requires": {
@@ -5321,6 +5330,54 @@
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.4.tgz",
+      "integrity": "sha512-o+Jm+ocb0asEngdM6FsZWtZsRzA8koFUudIDwYUfl94M3PejPHG7Vopw5hN9V8WsMkSFpm3tZP3Fesz89EyrfQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^1.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.5.5",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.5.tgz",
+          "integrity": "sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+          "dev": true
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
diff --git a/core/package.json b/core/package.json
index 3bafd8586d..71808b1c9d 100644
--- a/core/package.json
+++ b/core/package.json
@@ -19,6 +19,7 @@
     "fundamental-ui": "^1.2.2",
     "jsdom": "11.12.0",
     "jsdom-global": "3.0.2",
+    "mini-css-extract-plugin": "^0.4.4",
     "mocha": "^5.2.0",
     "mock-browser": "^0.92.14",
     "node-sass": "^4.9.0",
diff --git a/core/webpack.config.js b/core/webpack.config.js
index ae7d97490d..5190c6938c 100644
--- a/core/webpack.config.js
+++ b/core/webpack.config.js
@@ -1,6 +1,6 @@
 const { readFileSync } = require('fs');
 const babelSettings = JSON.parse(readFileSync('.babelrc'));
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const sass = require('node-sass');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
@@ -8,8 +8,8 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 module.exports = {
   entry: {
     index: [
-      './src/main.js',
-      './node_modules/fundamental-ui/dist/fundamental-ui.min.css'
+      './node_modules/fundamental-ui/dist/fundamental-ui.min.css',
+      './src/main.js'
     ]
   },
   resolve: {
@@ -46,7 +46,7 @@ module.exports = {
                   sass.render(
                     {
                       data: content,
-                      includePaths: ['src', 'node_modules/fundamental-ui/scss'],
+                      includePaths: ['src'],
                       sourceMap: true,
                       outFile: 'x' // this is necessary, but is ignored
                     },
@@ -67,14 +67,14 @@ module.exports = {
       },
       {
         test: /\.(css)$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'file-loader',
-          use: [
-            {
-              loader: 'css-loader'
-            }
-          ]
-        })
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader
+          },
+          {
+            loader: 'css-loader'
+          }
+        ]
       },
       {
         test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
@@ -90,7 +90,7 @@ module.exports = {
       exclude: ['package.json'],
       verbose: true
     }),
-    new ExtractTextPlugin('luigi.css'),
+    new MiniCssExtractPlugin({ filename: 'luigi.css' }),
     new CopyWebpackPlugin([
       {
         from: 'node_modules/oidc-client/dist/oidc-client.min.js',

From a9198481ca66be218558bf7ddb0355b0855a9eee Mon Sep 17 00:00:00 2001
From: Jesus Real <8238188+jesusreal@users.noreply.github.com>
Date: Thu, 15 Nov 2018 17:08:43 +0100
Subject: [PATCH 38/45] remove dependency for extract-text-webpack-plugin

---
 core/package-lock.json | 12 ------------
 core/package.json      |  1 -
 2 files changed, 13 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index 2f45d9348a..8a0066d2e5 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -2983,18 +2983,6 @@
         }
       }
     },
-    "extract-text-webpack-plugin": {
-      "version": "4.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
-      "integrity": "sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA==",
-      "dev": true,
-      "requires": {
-        "async": "^2.4.1",
-        "loader-utils": "^1.1.0",
-        "schema-utils": "^0.4.5",
-        "webpack-sources": "^1.1.0"
-      }
-    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
diff --git a/core/package.json b/core/package.json
index 71808b1c9d..1badaba675 100644
--- a/core/package.json
+++ b/core/package.json
@@ -14,7 +14,6 @@
     "clean-webpack-plugin": "^1.0.0",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^0.28.11",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^2.0.0",
     "fundamental-ui": "^1.2.2",
     "jsdom": "11.12.0",

From ff364cbe647a49ecc0f9a51125a404b06f6d95e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daria=20Domaga=C5=82a?=
 <40663133+dariadomagala@users.noreply.github.com>
Date: Fri, 16 Nov 2018 09:01:56 +0100
Subject: [PATCH 39/45] Update docs/navigation-configuration.md

---
 docs/navigation-configuration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index b88df7904c..24394fa11d 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -290,7 +290,7 @@ The context switcher is a drop-down list available in the top navigation bar. It
 
 - **defaultLabel** specifies the default label that is shown if no context is selected.
 - **parentNodePath** specifies the base path, that is prepended to **options[].pathValue**. It must be an absolute path.
-- **lazyloadOptions** defines when to fetch **options**. When set to `true`, loads **options** when you click the context switcher. It doesn't involve any caching. When set to `false`, loads **options** once when the page loads . The default value is `true`. 
+- **lazyloadOptions** defines when to fetch **options**. When set to `true`, loads **options** when you click the context switcher. It doesn't involve any caching. When set to `false`, loads **options** once the page loads. The default value is `true`. 
 - **options** defines the list of context element. Context element properties are:
   - **label** defines the context element label. If not defined, the **pathValue** is passed to **fallbackLabelResolver** to set its value. The default value is **pathValue**, if **fallbackLabelResolver** is not defined.
   - **pathValue** defines the context element path that is appended to **parentNodePath** and reflects a **pathSegment**.

From 6509c2ed1e67daf3a437e95c6fdfb8fda5683b9b Mon Sep 17 00:00:00 2001
From: dariadomagala <daria.domagala@sap.com>
Date: Fri, 16 Nov 2018 09:49:21 +0100
Subject: [PATCH 40/45] Fix opening context switcher dropdown

---
 core/src/navigation/ContextSwitcher.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index ac61101811..488bde4f1b 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -3,7 +3,7 @@
   <div class="fd-popover context-switcher">
     <div class="fd-popover__control">
       <button class="fd-button--secondary" aria-expanded="{dropDownStates.CONTEXT_SWITCHER_POPOVER || false}"
-        aria-haspopup="true" on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')">
+        aria-haspopup="true" on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
         {#if !selectedLabel}{config.defaultLabel}{/if}
         {#if selectedLabel}{selectedLabel}{/if}
       </button>
@@ -159,6 +159,13 @@
         if (isOpened) {
           this.fetchOptions();
         }
+      },
+      closeDropdown(name) {
+        const dropDownStates = this.get().dropDownStates || {};
+        dropDownStates[name] = 'false';
+        this.set({
+          dropDownStates
+        });
       }
     }
   };

From 28627c90702323dbe8a7d6458b86daa6a2244cd4 Mon Sep 17 00:00:00 2001
From: dariadomagala <daria.domagala@sap.com>
Date: Fri, 16 Nov 2018 10:30:21 +0100
Subject: [PATCH 41/45] Set max width for context switcher and hide part of the
 word if is too long

---
 core/src/navigation/ContextSwitcher.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index 488bde4f1b..f20c77ff35 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -172,6 +172,11 @@
 </script>
 
 <style type="text/scss">
+  .fd-button--secondary, .fd-menu__item {
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .fd-popover__body {
     right: 0;
   }

From b752d422f6015f6a1da8be674ada9226141a0fd3 Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Fri, 16 Nov 2018 13:23:19 +0100
Subject: [PATCH 42/45] Added title attribute to context switcher options.
 Fixes #193

---
 .../src/assets/extendedConfiguration.js         |  3 ++-
 core/src/navigation/ContextSwitcher.html        | 17 ++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 5803da6622..0b8e767d8a 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -491,7 +491,8 @@ Luigi.setConfig({
       lazyloadOptions: true, // load options on click instead on page load
       options: () => {
         return [...Array(10).keys()].filter(n => n !== 0).map(n => ({
-          label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
+          label:
+            'Environment Environment Environment Environment Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
           pathValue: 'env' + n // will be used to replace dynamic part
         }));
       },
diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index f20c77ff35..bacf31ae8e 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -3,7 +3,8 @@
   <div class="fd-popover context-switcher">
     <div class="fd-popover__control">
       <button class="fd-button--secondary" aria-expanded="{dropDownStates.CONTEXT_SWITCHER_POPOVER || false}"
-        aria-haspopup="true" on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
+        aria-haspopup="true" title="{selectedLabel ? selectedLabel : ''}"
+        on:click="toggleDropdownState('CONTEXT_SWITCHER_POPOVER')" on:blur="closeDropdown('CONTEXT_SWITCHER_POPOVER')">
         {#if !selectedLabel}{config.defaultLabel}{/if}
         {#if selectedLabel}{selectedLabel}{/if}
       </button>
@@ -26,15 +27,10 @@
         {/if}
         {#if options && options.length}
           {#each options as node}
-          <li><a class="fd-menu__item" on:click="goTo(node.path)">
-          {#if node.label}{node.label}{/if}
-          {#if !node.label}
-            {#await getFallbackNodeName(config.fallbackLabelResolver, node.id)}
+            {#await getNodeName(node.label, config.fallbackLabelResolver, node.id)}
             {:then label}
-              {label}
+              <li><a class="fd-menu__item" on:click="goTo(node.path)" title="{label}">{label}</a></li>
             {/await}
-          {/if}
-          </a></li>
           {/each}
         {/if}
         </ul>
@@ -109,7 +105,10 @@
       }
     },
     helpers: {
-      getFallbackNodeName: (config, id) => {
+      async getNodeName(label, config, id) {
+        if (label) {
+          return Promise.resolve(label);
+        }
         return ContextSwitcherHelpers.getFallbackNodeName(config, id);
       }
     },

From dcce6efcc67315e1220005d8d1db4139fad2420e Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Fri, 16 Nov 2018 13:38:12 +0100
Subject: [PATCH 43/45] updated docu

---
 docs/navigation-configuration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index 24394fa11d..281a73d33a 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -299,7 +299,7 @@ The context switcher is a drop-down list available in the top navigation bar. It
   - **position** defines the action element position. Can be `top` or `bottom`. The default value is `top`. This parameter is optional.
   - **link** defines an absolute Link to a **node**. This parameter is optional.
   - **clickHandler** specifies a function and is executed on click and should return a boolean. If it returns `true`, **link** is opened afterwards.
-- **fallbackLabelResolver** specifies a function that is executed to fetch a context element label if **options** are not yet loaded or **label** is not defined.
+- **fallbackLabelResolver** specifies a function that is used to fetch the **label** for **options** that do not have a **label** defined. Additionally it fetches the dropdown label for non-existing **options**.
 
 
 ### Dynamic **viewUrl** example

From 91bb21c74b18a9cf8641839cb497b13b27456d14 Mon Sep 17 00:00:00 2001
From: dariadomagala <daria.domagala@sap.com>
Date: Fri, 16 Nov 2018 14:43:15 +0100
Subject: [PATCH 44/45] Change labels

---
 .../luigi-sample-angular/src/assets/extendedConfiguration.js   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
index 0b8e767d8a..5803da6622 100644
--- a/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
+++ b/core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js
@@ -491,8 +491,7 @@ Luigi.setConfig({
       lazyloadOptions: true, // load options on click instead on page load
       options: () => {
         return [...Array(10).keys()].filter(n => n !== 0).map(n => ({
-          label:
-            'Environment Environment Environment Environment Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
+          label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
           pathValue: 'env' + n // will be used to replace dynamic part
         }));
       },

From 84a06724365397baa31ffea627e050d89ee97c7d Mon Sep 17 00:00:00 2001
From: Markus Edenhauser <1720843+maxmarkus@users.noreply.github.com>
Date: Tue, 20 Nov 2018 15:16:28 +0100
Subject: [PATCH 45/45] label are only lazy loaded on click, refactored
 function names

---
 core/src/navigation/ContextSwitcher.html      |  7 +++--
 .../navigation/services/context-switcher.js   | 30 +++++++++++--------
 core/test/context-switcher.spec.js            | 15 ++++------
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index bacf31ae8e..2040203797 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -73,9 +73,10 @@
         });
 
         // options are loaded lazy by default
-        if (ContextSwitcherHelpers.isContextSwitcherDetailsView(currentPath, contextSwitcherConfig.parentNodePath)
-            || contextSwitcherConfig.lazyloadOptions === false) {
+        if(!contextSwitcherConfig.lazyloadOptions) {
           await this.fetchOptions();
+        }
+        if (ContextSwitcherHelpers.isContextSwitcherDetailsView(currentPath, contextSwitcherConfig.parentNodePath)) {
           await this.setSelectedContext(currentPath);
         }
       }
@@ -109,7 +110,7 @@
         if (label) {
           return Promise.resolve(label);
         }
-        return ContextSwitcherHelpers.getFallbackNodeName(config, id);
+        return ContextSwitcherHelpers.getFallbackLabel(config, id);
       }
     },
     methods: {
diff --git a/core/src/navigation/services/context-switcher.js b/core/src/navigation/services/context-switcher.js
index d56a0b5306..779f1e6e69 100644
--- a/core/src/navigation/services/context-switcher.js
+++ b/core/src/navigation/services/context-switcher.js
@@ -22,7 +22,7 @@ export const ContextSwitcherHelpers = {
     }));
   },
 
-  getMatchingNodeName(options, id) {
+  getLabelFromOptions(options, id) {
     const found = options.find(o => o.id === id);
     return found && found.label;
   },
@@ -38,7 +38,7 @@ export const ContextSwitcherHelpers = {
     );
   },
 
-  async getFallbackNodeName(fallbackLabelResolver, id) {
+  async getFallbackLabel(fallbackLabelResolver, id) {
     return fallbackLabelResolver ? await fallbackLabelResolver(id) : id;
   },
 
@@ -57,23 +57,29 @@ export const ContextSwitcherHelpers = {
       return;
     }
 
-    let selectedLabel;
     // we are inside the context switcher base path
     const truncatedPath = Helpers.trimLeadingSlash(
       currentPath.replace(parentNodePath, '')
     );
     const selectedId = truncatedPath.split('/')[0];
-    selectedLabel = ContextSwitcherHelpers.getMatchingNodeName(
-      options,
-      selectedId
-    );
-    selectedLabel =
+
+    let selectedLabel;
+
+    if (options) {
+      selectedLabel = ContextSwitcherHelpers.getLabelFromOptions(
+        options,
+        selectedId
+      );
+    }
+
+    // get the label from fallback if selectedId is not
+    // in options or options not yet lazy loaded by click
+    return (
       selectedLabel ||
-      (await ContextSwitcherHelpers.getFallbackNodeName(
+      (await ContextSwitcherHelpers.getFallbackLabel(
         fallbackLabelResolver,
         selectedId
-      ));
-
-    return selectedLabel;
+      ))
+    );
   }
 };
diff --git a/core/test/context-switcher.spec.js b/core/test/context-switcher.spec.js
index 120597cf10..c4ee4a75ef 100644
--- a/core/test/context-switcher.spec.js
+++ b/core/test/context-switcher.spec.js
@@ -69,17 +69,14 @@ describe('ContextSwitcher', function() {
     });
   });
 
-  describe('getFallbackNodeName()', () => {
+  describe('getFallbackLabel()', () => {
     it('without fallback resolver', async () => {
-      const result = await CSHelpers.getFallbackNodeName(undefined, 'some_id');
+      const result = await CSHelpers.getFallbackLabel(undefined, 'some_id');
       assert.equal(result, 'some_id');
     });
 
     it('with fallback resolver', async () => {
-      const result = await CSHelpers.getFallbackNodeName(
-        myResolverFn,
-        'some_id'
-      );
+      const result = await CSHelpers.getFallbackLabel(myResolverFn, 'some_id');
       assert.equal(result, '##some_id##');
     });
   });
@@ -119,17 +116,17 @@ describe('ContextSwitcher', function() {
     });
   });
 
-  describe('getMatchingNodeName()', () => {
+  describe('getLabelFromOptions()', () => {
     const env1 = { label: 'Env 1', id: 'env1' };
     const env2 = { label: 'Env 2', id: 'env2' };
 
     it('returns undefined if node is not inside options', () => {
-      const result = CSHelpers.getMatchingNodeName([env1, env2], 'env3');
+      const result = CSHelpers.getLabelFromOptions([env1, env2], 'env3');
       assert.equal(result, undefined);
     });
 
     it('returns matching node label', () => {
-      const result = CSHelpers.getMatchingNodeName([env1, env2], 'env2');
+      const result = CSHelpers.getLabelFromOptions([env1, env2], 'env2');
       assert.equal(result, 'Env 2');
     });
   });