Search params are not deleted

core/src/utilities/helpers/routing-helpers.js

@@ -512,7 +512,9 @@ class RoutingHelpersClass {
       return;
     }
     Object.keys(localSearchParams).forEach(key => {
-      localSearchParams[key] = encodeURIComponent(localSearchParams[key]);
+      if (localSearchParams[key] !== undefined) {
+        localSearchParams[key] = encodeURIComponent(localSearchParams[key]);
+      }
     });
     if (currentNode && currentNode.clientPermissions && currentNode.clientPermissions.urlParameters) {
       const filteredObj = {};

test/e2e-test-application/e2e/support/commands.js

@@ -25,6 +25,17 @@ const setLuigiConfig = (win, config) => {
   }, 20);
 };
 
+Cypress.Commands.add('visitFiddleConfigWithPathRouting', (path = '/', config = fiddleConfig) => {
+  cy.visit(`http://localhost:8080/${path}`, {
+    onBeforeLoad: win => {
+      win.localStorage.clear();
+      win.sessionStorage.clear();
+      setAcceptedCookies(win);
+      setLuigiConfig(win, config);
+    }
+  });
+});
+
 Cypress.Commands.add('visitWithFiddleConfig', (path = '/', config = fiddleConfig) => {
   cy.visit(`http://localhost:8080/#${path}`, {
     onBeforeLoad: win => {

test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js

@@ -731,8 +731,6 @@ describe('Fiddle', () => {
     let newConfig;
     beforeEach(() => {
       newConfig = cloneDeep(fiddleConfig);
-    });
-    beforeEach(() => {
       newConfig.globalSearch = {
         searchFieldCentered: true,
         searchProvider: {}
@@ -906,6 +904,130 @@ describe('Fiddle', () => {
     });
   });
 
+  describe('LuigiClient add and delete node and search params', () => {
+    let newConfig;
+    beforeEach(() => {
+      newConfig = cloneDeep(fiddleConfig);
+      newConfig.routing.useHashRouting = true;
+      const node = {
+        pathSegment: 'mynode',
+        label: 'MyNode',
+        viewUrl: '/examples/microfrontends/luigi-client-test.html',
+        clientPermissions: {
+          urlParameters: {
+            luigi: {
+              read: true,
+              write: true
+            },
+            q: {
+              read: true,
+              write: true
+            }
+          }
+        }
+      };
+      newConfig.navigation.nodes[0].children.push(node);
+    });
+
+    it('Add and delete search params hash routing enabled', () => {
+      cy.visitWithFiddleConfig('/home/mynode', newConfig);
+      cy.getIframeBody().then($body => {
+        cy.wrap($body)
+          .find('[data-testid="lui-add-search-params"]')
+          .invoke('show');
+        cy.wrap($body)
+          .contains('add search params')
+          .click();
+      });
+      cy.expectPathToBe('/home/mynode?luigi=rocks&q=test');
+      cy.getIframeBody().then($body => {
+        cy.wrap($body)
+          .find('[data-testid="lui-delete-search-params"]')
+          .invoke('show');
+        cy.wrap($body)
+          .contains('delete search params')
+          .click();
+      });
+      cy.expectPathToBe('/home/mynode?luigi=rocks');
+    });
+    it('Add and delete node params hash routing enabled', () => {
+      cy.visitWithFiddleConfig('/home/mynode', newConfig);
+      cy.getIframeBody().then($body => {
+        cy.wrap($body)
+          .find('[data-testid="lui-add-node-params"]')
+          .invoke('show');
+        cy.wrap($body)
+          .contains('add node params')
+          .click();
+      });
+      cy.expectPathToBe('/home/mynode?~q=test&~luigi=rocks');
+      cy.getIframeBody().then($body => {
+        cy.wrap($body)
+          .find('[data-testid="lui-delete-node-params"]')
+          .invoke('show');
+        cy.wrap($body)
+          .contains('delete node params')
+          .click();
+      });
+      cy.expectPathToBe('/home/mynode?~luigi=rocks');
+    });
+  });
+  describe('LuigiClient add and delete node and search paramstest', () => {
+    let newConfig;
+    beforeEach(() => {
+      newConfig = cloneDeep(fiddleConfig);
+      newConfig.routing.useHashRouting = false;
+      const node = {
+        pathSegment: 'mynode',
+        label: 'MyNode',
+        viewUrl: '/examples/microfrontends/luigi-client-test.html',
+        clientPermissions: {
+          urlParameters: {
+            luigi: {
+              read: true,
+              write: true
+            },
+            q: {
+              read: true,
+              write: true
+            }
+          }
+        }
+      };
+      newConfig.navigation.nodes[0].children.push(node);
+    });
+    it('Add and delete search params path routing enabled', () => {
+      newConfig.routing.useHashRouting = false;
+      cy.visitFiddleConfigWithPathRouting('', newConfig);
+      cy.get('.fd-side-nav__main-navigation')
+        .contains('MyNode')
+        .click();
+      cy.getIframeBody().then($body => {
+        cy.wrap($body)
+          .find('[data-testid="lui-add-search-params"]')
+          .invoke('show');
+        cy.wrap($body)
+          .contains('add search params')
+          .click();
+      });
+      cy.location().should(location => {
+        expect(location.pathname + location.search).to.eq('/home/mynode?luigi=rocks&q=test');
+      });
+
+      cy.getIframeBody().then($body => {
+        cy.wrap($body)
+          .find('[data-testid="lui-delete-search-params"]')
+          .invoke('show');
+        cy.wrap($body)
+          .contains('delete search params')
+          .click();
+      });
+      cy.location().should(location => {
+        expect(location.pathname + location.search).to.eq('/home/mynode?luigi=rocks');
+
+      });
+    });
+  });
   describe('Custom text in the footer', () => {
     it('checks if the text in footer exist, defined by settings', () => {
       cy.window().then(win => {

website/fiddle/public/examples/microfrontends/luigi-client-test.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+	<link href="/vendor/fundamental-styles/dist/fundamental-styles.css" rel="stylesheet">
+	<link href="../../styles/styles.css" rel="stylesheet">
+	<script src="/vendor/luigi-client/luigi-client.js"></script>
+    <style>
+		.lui-hide-button{
+			display:none;
+		}
+	</style>
+</head>
+<body>
+    <button data-testid="lui-add-search-params" class="lui-hide-button" onclick="addSearchParams()">add search params</button>
+	<button data-testid="lui-delete-search-params" class="lui-hide-button" onclick="deleteSearchParam()">delete search params</button>
+	<button data-testid="lui-add-node-params" class="lui-hide-button" onclick="addNodeParams()">add node params</button>
+	<button data-testid="lui-delete-node-params" class="lui-hide-button" onclick="deleteNodeParam()">delete node params</button>
+    <script>
+        function addSearchParams(){
+			LuigiClient.addCoreSearchParams({q:'test', luigi:'rocks', tets:'tets'});
+		}
+		function deleteSearchParam(){
+			LuigiClient.addCoreSearchParams({q:undefined})
+		}
+		function addNodeParams(){
+			LuigiClient.addNodeParams({q:'test', luigi:'rocks'});
+		}
+		function deleteNodeParam(){
+			LuigiClient.addNodeParams({q:undefined, luigi:'rocks'});
+		}
+	</script>
+    </script>
+</body>
+</html>

website/fiddle/public/examples/microfrontends/multipurpose.html

@@ -1,69 +1,77 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <title></title>
+    <meta charset="utf-8" />
+    <link
+      href="/vendor/fundamental-styles/dist/fundamental-styles.css"
+      rel="stylesheet"
+    />
+    <link href="../../styles/styles.css" rel="stylesheet" />
+    <script src="/vendor/luigi-client/luigi-client.js"></script>
+    <style>
+      html,
+      body {
+        position: relative;
+      }
 
-<head>
-	<title></title>	
-	<meta charset="utf-8">
-	<link href="/vendor/fundamental-styles/dist/fundamental-styles.css" rel="stylesheet">
-	<link href="../../styles/styles.css" rel="stylesheet">
-	<script src="/vendor/luigi-client/luigi-client.js"></script>
-	<style>
-		html, body {
-			position: relative;
-		}
+      #imgCnt img {
+        width: 100%;
+      }
 
-		#imgCnt img {
-			width: 100%;
-		}
+      #imgCnt {
+        text-align: center;
+      }
 
-		#imgCnt {
-			text-align: center;
-		}
+      #textCnt {
+        padding: 30px;
+        text-align: center;
+        font-family: '72', sans-serif;
+        visibility: hidden;
+      }
 
-		#textCnt {
-			padding: 30px; 
-			text-align: center; 
-			font-family: '72', sans-serif;
-			visibility: hidden;
-		}
+      #textCnt.visible {
+        visibility: visible;
+      }
+    </style>
+  </head>
 
-		#textCnt.visible {
-			visibility: visible;
-		}
-	</style>
-</head>
-
-<body style="-webkit-font-smoothing: antialiased; color: #515559;">
-	<div id="imgCnt"></div>
-	<div id="textCnt">
-		<h1 id="title">Multi purpose demo page</h1>
-		<p id="content">Some content</p>
-	</div>
-
-	<script>
-		function updateFn(context) {
-			if(context.title) {
-				document.getElementById("title").innerHTML = context.title;
-			}
-			if(context.content) {
-				document.getElementById("content").innerHTML = context.content;
-			}
-			if(context.imgUrl) {
-				var iwidth = !isNaN(context.imgWidth) ? "width: " + context.imgWidth + "px" : "";
-				document.getElementById("imgCnt").innerHTML = "<img src='"+context.imgUrl+"' style='"+iwidth+"; margin-top: "+(context.imgTopMargin?'5':'')+"0px'>";
-			}
-			document.getElementById("textCnt").classList.add("visible");
-		}
-		LuigiClient.addInitListener(updateFn);
-		LuigiClient.addContextUpdateListener(updateFn);
-
-		// fallback visibility if no initlistener called for 3 seconds
-		setTimeout(function() {
-			document.getElementById("textCnt").classList.add("visible");
-		}, 3000);
-
-	</script>
-
-</body>
+  <body style="-webkit-font-smoothing: antialiased; color: #515559;">
+    <div id="imgCnt"></div>
+    <div id="textCnt">
+      <h1 id="title">Multi purpose demo page</h1>
+      <p id="content">Some content</p>
+    </div>
+    <script>
+      function updateFn(context) {
+        if (context.title) {
+          document.getElementById('title').innerHTML = context.title;
+        }
+        if (context.content) {
+          document.getElementById('content').innerHTML = context.content;
+        }
+        if (context.imgUrl) {
+          var iwidth = !isNaN(context.imgWidth)
+            ? 'width: ' + context.imgWidth + 'px'
+            : '';
+          document.getElementById('imgCnt').innerHTML =
+            "<img src='" +
+            context.imgUrl +
+            "' style='" +
+            iwidth +
+            '; margin-top: ' +
+            (context.imgTopMargin ? '5' : '') +
+            "0px'>";
+        }
+        document.getElementById('textCnt').classList.add('visible');
+      }
+      LuigiClient.addInitListener(updateFn);
+      LuigiClient.addContextUpdateListener(updateFn);
 
+      // fallback visibility if no initlistener called for 3 seconds
+      setTimeout(function() {
+        document.getElementById('textCnt').classList.add('visible');
+      }, 3000);
+    </script>
+  </body>
 </html>