404 support for non existing paths

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

@@ -140,6 +140,37 @@ describe('Luigi client features', () => {
     });
   });
 
+  describe('linkManager wrong paths navigation', () => {
+    let $iframeBody;
+    beforeEach(() => {
+      cy.get('iframe').then($iframe => {
+        $iframeBody = $iframe.contents().find('body');
+        cy.goToFeaturesPage($iframeBody);
+      });
+    });
+    it('navigate to a partitialy wrong link', () => {
+      cy.wrap($iframeBody)
+        .contains('Partitialy wrong link')
+        .click();
+      cy.location().should(loc => {
+        expect(loc.hash).to.eq('#/overview/maskopatol');
+      });
+      cy.get('.fd-alert').contains(
+        'Could not map the exact target node for the requested route'
+      );
+    });
+
+    it('navigate to a totally wrong link', () => {
+      cy.wrap($iframeBody)
+        .contains('Totally wrong link')
+        .click();
+      cy.location().should(loc => {
+        expect(loc.hash).to.eq('#/maskopatol/has/a/child');
+      });
+      cy.get('.fd-alert').contains('Could not find the requested route');
+    });
+  });
+
   describe('uxManager', () => {
     it('backdrop', () => {
       cy.wait(500);

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

@@ -74,4 +74,27 @@ describe('Navigation', () => {
       cy.get('.fd-app__sidebar').should('contain', 'Keep Selected Example');
     });
   });
+
+  describe('Wrong URL handling', () => {
+    it('Shows "not exact route" error', () => {
+      cy.visit('http://localhost:4200/#/projects/pr2/maskopatol');
+
+      cy.location().should(loc => {
+        expect(loc.hash).to.eq('#/projects/pr2/maskopatol');
+      });
+
+      cy.get('.fd-alert').contains(
+        'Could not map the exact target node for the requested route'
+      );
+    });
+    it('Shows "route not found" (404) error', () => {
+      cy.visit('http://localhost:4200/#/maskopatol');
+
+      cy.location().should(loc => {
+        expect(loc.hash).to.eq('#/maskopatol');
+      });
+
+      cy.get('.fd-alert').contains('Could not find the requested route');
+    });
+  });
 });

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

@@ -1,76 +1,97 @@
 <section class="fd-section">
-  <div class="fd-section__header">
-    <h1 class="fd-section__title">Project {{ projectId }}</h1>
-  </div>
-  <div class="fd-panel">
-      <p><strong>LuigiClient uxManager methods:</strong></p>
-      <button class="fd-button" (click)="toggleModal()">Add backdrop</button>
-      <p>
-        <app-code-snippet data="luigiClient.uxManager().addBackdrop()"></app-code-snippet>
-        <app-code-snippet data="luigiClient.uxManager().removeBackdrop()"></app-code-snippet>
-      </p>
-  </div>
+	<div class="fd-section__header">
+		<h1 class="fd-section__title">Project {{ projectId }}</h1>
+	</div>
+	<div class="fd-panel">
+		<p><strong>LuigiClient uxManager methods:</strong></p>
+		<button class="fd-button" (click)="toggleModal()">Add backdrop</button>
+		<p>
+			<app-code-snippet data="luigiClient.uxManager().addBackdrop()"></app-code-snippet>
+			<app-code-snippet data="luigiClient.uxManager().removeBackdrop()"></app-code-snippet>
+		</p>
+	</div>
 </section>
 
 <section class="fd-section" *ngIf="preservedViewCallbackContext">
-  <div class="fd-panel">
-    <div class="fd-alert" role="alert">
-      <span class="fd-status-label fd-status-label--available"></span> Context received from linkManager().goBack():<br />
-      <pre>{{ preservedViewCallbackContext | json }}</pre>
-    </div>
-  </div>
+	<div class="fd-panel">
+		<div class="fd-alert" role="alert">
+			<span class="fd-status-label fd-status-label--available"></span> Context received from linkManager().goBack():<br />
+			<pre>{{ preservedViewCallbackContext | json }}</pre>
+		</div>
+	</div>
 </section>
 
 <section class="fd-section link-manager" *ngIf="projectId && projectId !== 'overview'">
-  <div class="fd-panel">
-    <p><strong>LuigiClient linkManager methods:</strong></p>
-    <ul class="fd-list-group">
-      <li class="fd-list-group__item">
-        <a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/overview')">absolute: to overview</a>
-        <app-code-snippet data="luigiClient.linkManager().navigate('/overview')"></app-code-snippet>
-      </li>
-      <li class="fd-list-group__item">
-        <a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('users/groups/stakeholders')">relative: to stakeholders</a>
-        <app-code-snippet data="luigiClient.linkManager().navigate('users/groups/stakeholders')"></app-code-snippet>
-      </li>
-      <li class="fd-list-group__item">
-        <a href="javascript:void(0)" (click)="luigiClient.linkManager().fromClosestContext().navigate('/users/groups/stakeholders')">closest parent: to stakeholders</a>
-        <app-code-snippet data="luigiClient.linkManager().fromClosestContext().navigate('/users/groups/stakeholders')"></app-code-snippet>
-      </li>
-      <li class="fd-list-group__item">
-        <a href="javascript:void(0)" (click)="luigiClient.linkManager().fromContext('project').navigate('/settings')">parent by name: project to settings</a>
-        <app-code-snippet data="luigiClient.linkManager().fromContext('project').navigate('/settings')"></app-code-snippet>
-      </li>
-      <li class="fd-list-group__item">
-        <a href="javascript:void(0)" (click)="luigiClient.linkManager().fromClosestContext().withParams({foo: 'bar'}).navigate('settings')">project to settings with params (foo=bar)</a>
-        <app-code-snippet data="luigiClient.linkManager().fromClosestContext().withParams({foo: 'bar'}).navigate('settings')"></app-code-snippet>
-      </li>
-      <li class="fd-list-group__item">
-        <a href="javascript:void(0)" (click)="luigiClient.linkManager().fromContext('FOOMARK').navigate('/settings')">parent by name: with nonexisting context</a> (look at the console)
-        <app-code-snippet data="luigiClient.linkManager().fromContext('FOOMARK').navigate('/settings')"></app-code-snippet>
-      </li>
-      <li class="fd-list-group__item">
-        <a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/settings', null, true)">with preserved view: project to global settings and back</a>
-        <app-code-snippet data="luigiClient.linkManager().navigate('/settings', null, true)"></app-code-snippet>
-      </li>
-      <li class="fd-list-group__item check-path">
-        <span>Check if path exists</span>
-        <app-code-snippet data="luigiClient.linkManager().pathExists('{{pathExists.formValue}}')"></app-code-snippet>
-        <span>
-          <input type="text" [(ngModel)]="pathExists.formValue" (input)="resetPathExistsResult()"/>
-          <button class="fd-button" (click)="checkIfPathExists()">Check</button>
-        </span>
-        <p class="check-path-result">
-          <ng-container *ngIf="pathExists.result === true">
-            Path {{pathExists.formValue}} exists!
-          </ng-container>
-          <ng-container *ngIf="pathExists.result === false">
-            Path {{pathExists.formValue}} does not exist!
-          </ng-container>
-        </p>
-      </li>
-    </ul>
-  </div>
+	<div class="fd-panel">
+		<p><strong>LuigiClient linkManager methods:</strong></p>
+		<ul class="fd-list-group">
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/overview')">absolute: to overview</a>
+				<app-code-snippet data="luigiClient.linkManager().navigate('/overview')"></app-code-snippet>
+			</li>
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('users/groups/stakeholders')">relative: to stakeholders</a>
+				<app-code-snippet data="luigiClient.linkManager().navigate('users/groups/stakeholders')"></app-code-snippet>
+			</li>
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().fromClosestContext().navigate('/users/groups/stakeholders')">
+					closest parent: to stakeholders</a>
+				<app-code-snippet data="luigiClient.linkManager().fromClosestContext().navigate('/users/groups/stakeholders')"></app-code-snippet>
+			</li>
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().fromContext('project').navigate('/settings')">
+					parent by name: project to settings</a>
+				<app-code-snippet data="luigiClient.linkManager().fromContext('project').navigate('/settings')"></app-code-snippet>
+			</li>
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().fromClosestContext().withParams({foo: 'bar'}).navigate('settings')">
+					project to settings with params (foo=bar)</a>
+				<app-code-snippet data="luigiClient.linkManager().fromClosestContext().withParams({foo: 'bar'}).navigate('settings')"></app-code-snippet>
+			</li>
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().fromContext('FOOMARK').navigate('/settings')">
+					parent by name: with nonexisting context</a> (look at the console)
+				<app-code-snippet data="luigiClient.linkManager().fromContext('FOOMARK').navigate('/settings')"></app-code-snippet>
+			</li>
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/settings', null, true)">
+					with preserved view: project to global settings and back</a>
+				<app-code-snippet data="luigiClient.linkManager().navigate('/settings', null, true)"></app-code-snippet>
+			</li>
+			<li class="fd-list-group__item check-path">
+				<span>Check if path exists</span>
+				<app-code-snippet data="luigiClient.linkManager().pathExists('{{pathExists.formValue}}')"></app-code-snippet>
+				<span>
+					<input type="text" [(ngModel)]="pathExists.formValue" (input)="resetPathExistsResult()" />
+					<button class="fd-button" (click)="checkIfPathExists()">Check</button>
+				</span>
+				<p class="check-path-result">
+					<ng-container *ngIf="pathExists.result === true">
+						Path {{pathExists.formValue}} exists!
+					</ng-container>
+					<ng-container *ngIf="pathExists.result === false">
+						Path {{pathExists.formValue}} does not exist!
+					</ng-container>
+				</p>
+			</li>
+		</ul>
+	</div>
 </section>
 
-<app-modal [modalActive]="modalActive" (modalClosed)="toggleModal()"></app-modal>
+<section class="fd-section" *ngIf="projectId && projectId !== 'overview'">
+	<div class="fd-panel">
+		<p><strong>LuigiClient - wrong paths in linkManager.navigate():</strong></p>
+		<ul class="fd-list-group">
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/overview/maskopatol')">Partitialy wrong link</a>
+				<app-code-snippet data="luigiClient.linkManager().navigate('/overview/maskopatol')"></app-code-snippet>
+			</li>
+			<li class="fd-list-group__item">
+				<a href="javascript:void(0)" (click)="luigiClient.linkManager().navigate('/maskopatol/has/a/child')">Totally wrong link</a>
+				<app-code-snippet data="luigiClient.linkManager().navigate('/maskopatol/has/a/child')"></app-code-snippet>
+			</li>
+		</ul>
+	</div>
+</section>
+
+<app-modal [modalActive]="modalActive" (modalClosed)="toggleModal()"></app-modal>

core/package.json

@@ -37,7 +37,7 @@
   "scripts": {
     "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": "./node_modules/mocha/bin/mocha --require babel-register --require babel-polyfill --require jsdom-global/register --recursive test",
     "bundlesize": "bundlesize",
     "prepush": "npm run bundle && npm run bundlesize"
   },

core/src/App.html

@@ -1,16 +1,24 @@
-
 <div id="app {hideNav? 'no-nav' : ''}">
-  <Backdrop>
-    <div class="fd-page iframeContainer" use:init="context"></div>
-  </Backdrop>
-  {#if showLoadingIndicator}
-  <div in:fade='{delay: 250, duration: 250}' out:fade='{duration: 250}' class="fd-page spinnerContainer" aria-hidden="false" aria-label="Loading">
-      <div class="fd-spinner"><div></div></div>
-  </div>
-  {/if}
-
-  <TopNav pathData={navigationPath} />
-  <LeftNav pathData={navigationPath} />
+	{#if alertMessage}
+	<div class="fd-alert fd-alert--error fd-alert--dismissible" role="alert" id="j2ALl423">
+		<button on:click="set({alertMessage:null})" class="fd-alert__close" aria-controls="j2ALl423" aria-label="Close"></button>
+		{alertMessage}
+	</div>
+	{/if}
+	<Backdrop>
+		<div class="fd-page iframeContainer" use:init="context" />
+	</Backdrop>
+	{#if showLoadingIndicator}
+	<div in:fade='{delay: 250, duration: 250}' out:fade='{duration: 250}' class="fd-page spinnerContainer" aria-hidden="false"
+	 aria-label="Loading">
+		<div class="fd-spinner">
+			<div></div>
+		</div>
+	</div>
+	{/if}
+
+	<TopNav pathData={navigationPath} />
+	<LeftNav pathData={navigationPath} />
 </div>
 
 <script type="text/javascript">
@@ -22,6 +30,9 @@
   import { getConfigValue, getConfigValueFromObject } from './services/config.js';
   import { isFunction } from './utilities/helpers.js';
 
+  const handleAlertReceived = message => {
+    this.set({ alertMessage: message });
+  };
   const trimLeadingSlash = str => str.replace(/^\//, '');
   const isValidBackRoute = (preservedViews, routeHash) => {
     if (preservedViews.length === 0) {
@@ -119,12 +130,14 @@
   };
 
   const handleNavigation = async (component, data, config) => {
-    const path = buildPath(component, data.params);
-    const matchedPath = await Routing.matchPath(path);
-    if (matchedPath !== null) {
-      addPreserveView(component, data, config);
-      Routing.navigateTo(matchedPath);
+    let path = buildPath(component, data.params);
+
+    if (path[0] !== '/') {
+      path = '/' + path; //add leading slash if necessary
     }
+
+    addPreserveView(component, data, config);
+    Routing.navigateTo(path); //navigate to the raw path. Any errors/alerts are handled later
   };
 
   const sendContextToClient = (component, config, goBackContext = {}) => {
@@ -147,6 +160,7 @@
       return {
         isNavigateBack: false,
         showLoadingIndicator: false,
+        alertMessage: null,
         preservedViews: [
           // {
           //     path: '/project/p2/settings',
@@ -167,7 +181,7 @@
           builderCompatibilityMode: Boolean(window.builderCompatibilityMode)
         };
 
-        window.addEventListener('message', async (e) => {
+        window.addEventListener('message', async e => {
           if ('luigi.get-context' === e.data.msg && config.iframe) {
             sendContextToClient(this, config, {});
 
@@ -226,13 +240,27 @@
             }
           }
 
+          if ('luigi.displayAlert' === e.data.msg) {
+            if (e.data.errorMessage) {
+              this.set({ alertMessage: e.data.errorMessage });
+            } else {
+              console.error(
+                'Ooops, seems like the developers have misconfigured something'
+              );
+            }
+          }
+
+          if ('luigi.hideAlert' === e.data.msg) {
+            this.set({ alertMessage: null });
+          }
           if ('luigi.navigation.pathExists' === e.data.msg) {
             const data = e.data.data;
             const path = buildPath(this, data);
             const matchedPath = await Routing.matchPath(path);
 
-            let normalizedPath = ((!path.startsWith('/')) ? '/' : '') +
-              ((path.endsWith('/')) ? path.slice(0,-1) : path);
+            let normalizedPath =
+              (!path.startsWith('/') ? '/' : '') +
+              (path.endsWith('/') ? path.slice(0, -1) : path);
             const pathExists = matchedPath === normalizedPath;
             config.iframe.contentWindow.postMessage(
               {
@@ -278,6 +306,7 @@
 <style type="text/scss">
   @import 'node_modules/fundamental-ui/scss/layout/page';
   @import 'node_modules/fundamental-ui/scss/components/spinner';
+  @import 'node_modules/fundamental-ui/scss/components/alert';
   @import 'static.css';
 
   :global(html) {
@@ -351,4 +380,18 @@
       right: 0;
     }
   }
+
+  $topNavHeight: 50px;
+  $leftNavWidth: 320px;
+  .fd-alert {
+    position: absolute;
+    min-width: 20rem;
+    width: calc(100% - 2 * (#{$leftNavWidth} + 1rem));
+    top: calc(#{$topNavHeight} + 1rem);
+    left: calc(#{$leftNavWidth} + 1rem);
+    z-index: 2;
+    .fd-alert__close {
+      cursor: pointer;
+    }
+  }
 </style>