Context Switcher in top navigation

.gitignore

@@ -7,6 +7,5 @@ node_modules
 
 # Lerna
 lerna-debug.log
-oidc-client.min.js
 
 .changelog

core/.gitignore

@@ -23,10 +23,12 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode/
-public/luigi.css
-public/luigi.js
-public/luigi.vendor.js
-public/SAP-icons.woff
+/public/luigi.css
+/public/luigi.js
+/public/*.woff
+/public/*.woff2
+/public/*.ttf
+/public/auth
 
 # maps
 *.map

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 (bottom)')
+      .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',
+      'Environment 1'
+    );
+
+    // Overview
+    cy.goToOverviewPage();
+
+    // check label
+    cy.get('.context-switcher .fd-popover__control button').should(
+      'contain',
+      'Select Environment ...'
+    );
+  });
+});

core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js

@@ -176,9 +176,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 => {
@@ -188,10 +188,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');
       });
     });
   });

core/examples/luigi-sample-angular/src/app/app-routing.module.ts

@@ -56,6 +56,22 @@ const routes: Routes = [
   {
     path: 'projects/:projectId/dynamic/:dynamicValue',
     component: DynamicComponent
+  },
+  {
+    path: 'create/:dynamicValue',
+    component: DynamicComponent
+  },
+  {
+    path: 'environments',
+    component: DynamicComponent
+  },
+  {
+    path: 'environments/:dynamicValue',
+    component: DynamicComponent
+  },
+  {
+    path: 'environments/:ignoredDynamicValue/:dynamicValue',
+    component: DynamicComponent
   }
 ];
 

core/examples/luigi-sample-angular/src/app/project/dynamic/dynamic.component.ts

@@ -35,8 +35,12 @@ export class DynamicComponent implements OnInit, OnDestroy {
           return;
         }
 
+        const lastPathParam = Object.values(
+          LuigiClient.getPathParams() || {}
+        ).pop();
+
         // 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();

core/examples/luigi-sample-angular/src/assets/extendedConfiguration.js

@@ -421,9 +421,22 @@ Luigi.setConfig({
         },
         {
           hideFromNav: true,
-          pathSegment: 'hidden-sample',
-          label: 'Hidden',
-          viewUrl: '/sampleapp.html#/projects/overview'
+          pathSegment: 'create-environment',
+          viewUrl: '/sampleapp.html#/create/environment',
+          context: {
+            label: 'Create Environment'
+          }
+        },
+        {
+          hideFromNav: true,
+          pathSegment: 'environments',
+          viewUrl: '/sampleapp.html#/environments',
+          children: [
+            {
+              pathSegment: ':environmentId',
+              viewUrl: '/sampleapp.html#/environments/:environmentId'
+            }
+          ]
         },
         {
           pathSegment: 'forbidden-sample',
@@ -470,9 +483,46 @@ Luigi.setConfig({
           ]
         }
       ];
+    },
+    // The following configuration will be used to render the context switcher component
+    contextSwitcher: {
+      defaultLabel: 'Select Environment ...',
+      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)
+          pathValue: 'env' + n // will be used to replace dynamic part
+        }));
+      },
+      actions: [
+        {
+          label: '+ New Environment (top)',
+          link: '/create-environment'
+        },
+        {
+          label: '+ New Environment (bottom)',
+          link: '/create-environment',
+          position: 'bottom', // top or bottom
+          clickHandler: 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
+          }
+        }
+      ],
+
+      /**
+       * 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),
+       * or if options have not been fetched yet
+       */
+      fallbackLabelResolver: id => {
+        return id.replace(/\b\w/g, l => l.toUpperCase());
+      }
     }
   },
-
   routing: {
     /**
      * Development:

core/package.json

@@ -11,13 +11,14 @@
     "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",
     "file-loader": "^2.0.0",
     "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",
@@ -38,18 +39,19 @@
     "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"
   },
   "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"
     }
   ],