Dynamic nodes prevent navigation tree mutation

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

@@ -120,6 +120,11 @@ describe('Luigi client features', () => {
         { path: '/projects/pr2/', successExpected: true },
         // existent absolute path without '/' at the end
         { path: '/projects/pr2', successExpected: true },
+        // existent path with two dynamic pathSegments
+        {
+          path: '/projects/pr1/users/groups/avengers/settings/dynamic-two',
+          successExpected: true
+        },
         // existent relative path
         { path: 'developers', successExpected: true }
       ].map(data => {

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

@@ -36,6 +36,10 @@ const routes: Routes = [
     path: 'projects/:projectId/users/groups/:groupId/settings',
     component: GroupSettingsComponent
   },
+  {
+    path: 'projects/:projectId/users/groups/:groupId/settings/:dynamicValue',
+    component: DynamicComponent
+  },
   { path: 'projects/:projectId/developers', component: DevelopersComponent },
   { path: 'projects/:projectId/settings', component: SettingsComponent },
   {

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

@@ -109,11 +109,25 @@ var projectDetailNavProviderFn = function(context) {
                   {
                     label: 'Group Settings',
                     pathSegment: 'settings',
+                    keepSelectedForChildren: true,
                     icon: 'user-settings',
                     viewUrl:
                       '/sampleapp.html#/projects/' +
                       projectId +
-                      '/users/groups/:group/settings'
+                      '/users/groups/:group/settings',
+                    children: [
+                      {
+                        label: 'Multi Path Params',
+                        pathSegment: ':dynamic',
+                        viewUrl:
+                          '/sampleapp.html#/projects/' +
+                          projectId +
+                          '/users/groups/:group/settings/:dynamic',
+                        context: {
+                          label: ':dynamic'
+                        }
+                      }
+                    ]
                   }
                 ]
               }

core/src/App.html

@@ -33,7 +33,9 @@
   import TopNav from './navigation/TopNav.html';
   import LeftNav from './navigation/LeftNav.html';
   import ConfirmationModal from './ConfirmationModal.html';
+  import { LuigiConfig } from './services/config.js';
   import * as Routing from './services/routing.js';
+  import * as Navigation from './navigation/services/navigation.js'
   import * as Iframe from './services/iframe';
   import * as RoutingHelpers from './utilities/helpers/routing-helpers';
   import * as GenericHelpers from './utilities/helpers/generic-helpers';
@@ -277,23 +279,20 @@
           if ('luigi.navigation.pathExists' === e.data.msg) {
             const data = e.data.data;
             const path = buildPath(this, data);
-            const matchedPath = await Routing.matchPath(path);
+            const matched = await Routing.matchPath(path);
 
-            let normalizedPath =
-              (!path.startsWith('/') ? '/' : '') +
-              (path.endsWith('/') ? path.slice(0, -1) : path);
-            const pathExists = matchedPath === normalizedPath;
             config.iframe.contentWindow.postMessage(
               {
                 msg: 'luigi.navigation.pathExists.answer',
                 data: {
                   correlationId: data.id,
-                  pathExists
+                  pathExists: matched.pathData.isExistingRoute
                 }
               },
               '*'
             );
           }
+
           if ('luigi.set-page-dirty' === e.data.msg) {
             this.set({
               unsavedChanges: {
@@ -320,7 +319,7 @@
       },
       handleNavClick(node) {
         this.getUnsavedChangesModalPromise().then(
-          () => { Routing.handleRouteClick(node) }
+          () => { Routing.handleRouteClick(node, this.get()) }
         );
       },
       handleModalResult(result) {

core/src/navigation/services/navigation.js

@@ -3,6 +3,7 @@
 import * as NavigationHelpers from '../../utilities/helpers/navigation-helpers';
 import * as AsyncHelpers from '../../utilities/helpers/async-helpers';
 import * as GenericHelpers from '../../utilities/helpers/generic-helpers';
+import * as RoutingHelpers from '../../utilities/helpers/routing-helpers';
 
 export const getNavigationPath = async (rootNavProviderPromise, activePath) => {
   if (!rootNavProviderPromise) {
@@ -25,12 +26,17 @@ export const getNavigationPath = async (rootNavProviderPromise, activePath) => {
     }
     await getChildren(rootNode); // keep it, mutates and filters children
     const nodeNamesInCurrentPath = (activePath || '').split('/');
-    return buildNode(
+    const navObj = await buildNode(
       nodeNamesInCurrentPath,
       [rootNode],
       rootNode.children,
       rootNode.context || {}
     );
+    navObj.isExistingRoute =
+      !activePath ||
+      nodeNamesInCurrentPath.length ===
+        navObj.navigationPath.filter(x => x.pathSegment).length;
+    return navObj;
   } catch (err) {
     console.error('Failed to load top navigation nodes.', err);
   }
@@ -83,21 +89,23 @@ const buildNode = async (
   nodeNamesInCurrentPath,
   nodesInCurrentPath,
   childrenOfCurrentNode,
-  context
+  context,
+  pathParams = {}
 ) => {
   if (!context.parentNavigationContexts) {
     context.parentNavigationContexts = [];
   }
   let result = {
     navigationPath: nodesInCurrentPath,
-    context: context
+    context: context,
+    pathParams: pathParams
   };
   if (
     nodeNamesInCurrentPath.length > 0 &&
     childrenOfCurrentNode &&
     childrenOfCurrentNode.length > 0
   ) {
-    const urlPathElement = nodeNamesInCurrentPath.splice(0, 1)[0];
+    const urlPathElement = nodeNamesInCurrentPath[0];
     const node = findMatchingNode(urlPathElement, childrenOfCurrentNode);
     if (node) {
       nodesInCurrentPath.push(node);
@@ -109,11 +117,21 @@ const buildNode = async (
       try {
         let children = await getChildren(node, newContext);
 
+        if (node.pathSegment.startsWith(':')) {
+          pathParams[
+            node.pathSegment.replace(':', '')
+          ] = RoutingHelpers.sanitizeParam(urlPathElement);
+        }
+        const newNodeNamesInCurrentPath = nodeNamesInCurrentPath.slice();
+        newNodeNamesInCurrentPath.shift();
+
         result = buildNode(
-          nodeNamesInCurrentPath,
+          newNodeNamesInCurrentPath,
+          // nodeNamesInCurrentPath,
           nodesInCurrentPath,
           children,
-          newContext
+          newContext,
+          pathParams
         );
       } catch (err) {
         console.error('Error getting nodes children', err);
@@ -147,52 +165,13 @@ export const findMatchingNode = (urlPathElement, nodes) => {
     }
   }
   nodes.some(node => {
-    // Static nodes
-    if (node.pathSegment === urlPathElement) {
-      result = node;
-      return true;
-    }
-
-    // Dynamic nodes
     if (
-      (node.pathSegment && node.pathSegment.startsWith(':')) ||
-      (node.pathParam && node.pathParam.key)
+      // Static nodes
+      node.pathSegment === urlPathElement ||
+      // Dynamic nodes
+      (node.pathSegment && node.pathSegment.startsWith(':'))
     ) {
-      if (node.pathParam && node.pathParam.key) {
-        node.viewUrl = node.pathParam.viewUrl;
-        node.context = node.pathParam.context
-          ? Object.assign({}, node.pathParam.context)
-          : undefined;
-        node.pathSegment = node.pathParam.pathSegment;
-      } else {
-        node.pathParam = {
-          key: node.pathSegment.slice(0),
-          pathSegment: node.pathSegment,
-          viewUrl: node.viewUrl,
-          context: node.context ? Object.assign({}, node.context) : undefined
-        };
-      }
-      node.pathParam.value = urlPathElement;
-
-      // path substitutions
-      node.pathSegment = node.pathSegment.replace(
-        node.pathParam.key,
-        urlPathElement
-      );
-
-      if (node.viewUrl) {
-        node.viewUrl = node.viewUrl.replace(node.pathParam.key, urlPathElement);
-      }
-
-      if (node.context) {
-        Object.entries(node.context).map(entry => {
-          const dynKey = entry[1];
-          if (dynKey === node.pathParam.key) {
-            node.context[entry[0]] = dynKey.replace(dynKey, urlPathElement);
-          }
-        });
-      }
-
+      // Return last matching node
       result = node;
       return true;
     }

core/src/services/iframe.js

@@ -2,10 +2,9 @@
 // Please consider adding any new methods to 'iframe-helpers' if they don't require anything from this file.
 import * as IframeHelpers from '../utilities/helpers/iframe-helpers';
 import * as GenericHelpers from '../utilities/helpers/generic-helpers';
+import * as RoutingHelpers from '../utilities/helpers/routing-helpers';
 
 const iframeNavFallbackTimeout = 2000;
-const contextVarPrefix = 'context.';
-const nodeParamsVarPrefix = 'nodeParams.';
 let timeoutHandle;
 
 export const getActiveIframe = node => {
@@ -39,22 +38,7 @@ export const navigateIframe = (config, component, node) => {
   const componentData = component.get();
   let viewUrl = componentData.viewUrl;
   if (viewUrl) {
-    viewUrl = IframeHelpers.replaceVars(
-      viewUrl,
-      componentData.pathParams,
-      ':',
-      false
-    );
-    viewUrl = IframeHelpers.replaceVars(
-      viewUrl,
-      componentData.context,
-      contextVarPrefix
-    );
-    viewUrl = IframeHelpers.replaceVars(
-      viewUrl,
-      componentData.nodeParams,
-      nodeParamsVarPrefix
-    );
+    viewUrl = RoutingHelpers.substituteViewUrl(viewUrl, componentData);
   }
 
   if (