MWPW-155289: Fixed filtering and sorting in catalog sidenav (#2653)

handled empty hash case in deeplink

libs/deps/mas/merch-card-collection.js

@@ -1,4 +1,4 @@
-import{html as a,LitElement as A}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var E="hashchange";function S(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function u(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function T(r){let e=()=>{if(!window.location.hash.includes("="))return;let t=S(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var x="merch-card-collection:sort",g="merch-card-collection:showmore";var C=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var _="(max-width: 1199px)",y="(min-width: 768px)",b="(min-width: 1200px)";import{css as R,unsafeCSS as w}from"/libs/deps/lit-all.min.js";var N=R`
+import{html as a,LitElement as A}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var E="hashchange";function S(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function u(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function T(r){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=S(window.location.hash);r(t)};return e(),window.addEventListener(E,e),()=>{window.removeEventListener(E,e)}}var x="merch-card-collection:sort",g="merch-card-collection:showmore";var C=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var _="(max-width: 1199px)",y="(min-width: 768px)",b="(min-width: 1200px)";import{css as R,unsafeCSS as w}from"/libs/deps/lit-all.min.js";var N=R`
     #header,
     #resultText,
     #footer {

libs/deps/mas/merch-sidenav.js

@@ -9,7 +9,7 @@ import{html as k,css as H,LitElement as P}from"/libs/deps/lit-all.min.js";var a=
         line-height: 32px;
         color: #747474;
     }
-`;import{html as L,LitElement as D}from"/libs/deps/lit-all.min.js";var v="merch-search:change";var x="merch-sidenav:select";function d(s,e){let t;return function(){let o=this,n=arguments;clearTimeout(t),t=setTimeout(()=>s.apply(o,n),e)}}var g="hashchange";function i(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function r(s,e){if(s.deeplink){let t={};t[s.deeplink]=e,A(t)}}function A(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function C(s){let e=()=>{if(!window.location.hash.includes("="))return;let t=i(window.location.hash);s(t)};return e(),window.addEventListener(g,e),()=>{window.removeEventListener(g,e)}}var p=class extends D{static properties={deeplink:{type:String}};get search(){return this.querySelector("sp-search")}constructor(){super(),this.handleInput=()=>{r(this,this.search.value),this.search.value&&this.dispatchEvent(new CustomEvent(v,{bubbles:!0,composed:!0,detail:{type:"search",value:this.search.value}}))},this.handleInputDebounced=d(this.handleInput.bind(this))}connectedCallback(){super.connectedCallback(),this.search&&(this.search.addEventListener("input",this.handleInputDebounced),this.search.addEventListener("submit",this.handleInputSubmit),this.updateComplete.then(()=>{this.setStateFromURL()}),this.startDeeplink())}disconnectedCallback(){super.disconnectedCallback(),this.search.removeEventListener("input",this.handleInputDebounced),this.search.removeEventListener("submit",this.handleInputSubmit),this.stopDeeplink?.()}setStateFromURL(){let t=i()[this.deeplink];t&&(this.search.value=t)}startDeeplink(){this.stopDeeplink=C(({search:e})=>{this.search.value=e??""})}handleInputSubmit(e){e.preventDefault()}render(){return L`<slot></slot>`}};customElements.define("merch-search",p);import{html as b,LitElement as R,css as M}from"/libs/deps/lit-all.min.js";var m=class extends R{static properties={sidenavListTitle:{type:String},label:{type:String},deeplink:{type:String,attribute:"deeplink"},selectedText:{type:String,reflect:!0,attribute:"selected-text"},selectedValue:{type:String,reflect:!0,attribute:"selected-value"}};static styles=[M`
+`;import{html as L,LitElement as D}from"/libs/deps/lit-all.min.js";var v="merch-search:change";var x="merch-sidenav:select";function d(s,e){let t;return function(){let o=this,n=arguments;clearTimeout(t),t=setTimeout(()=>s.apply(o,n),e)}}var g="hashchange";function i(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function r(s,e){if(s.deeplink){let t={};t[s.deeplink]=e,A(t)}}function A(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function C(s){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=i(window.location.hash);s(t)};return e(),window.addEventListener(g,e),()=>{window.removeEventListener(g,e)}}var p=class extends D{static properties={deeplink:{type:String}};get search(){return this.querySelector("sp-search")}constructor(){super(),this.handleInput=()=>{r(this,this.search.value),this.search.value&&this.dispatchEvent(new CustomEvent(v,{bubbles:!0,composed:!0,detail:{type:"search",value:this.search.value}}))},this.handleInputDebounced=d(this.handleInput.bind(this))}connectedCallback(){super.connectedCallback(),this.search&&(this.search.addEventListener("input",this.handleInputDebounced),this.search.addEventListener("submit",this.handleInputSubmit),this.updateComplete.then(()=>{this.setStateFromURL()}),this.startDeeplink())}disconnectedCallback(){super.disconnectedCallback(),this.search.removeEventListener("input",this.handleInputDebounced),this.search.removeEventListener("submit",this.handleInputSubmit),this.stopDeeplink?.()}setStateFromURL(){let t=i()[this.deeplink];t&&(this.search.value=t)}startDeeplink(){this.stopDeeplink=C(({search:e})=>{this.search.value=e??""})}handleInputSubmit(e){e.preventDefault()}render(){return L`<slot></slot>`}};customElements.define("merch-search",p);import{html as b,LitElement as R,css as M}from"/libs/deps/lit-all.min.js";var m=class extends R{static properties={sidenavListTitle:{type:String},label:{type:String},deeplink:{type:String,attribute:"deeplink"},selectedText:{type:String,reflect:!0,attribute:"selected-text"},selectedValue:{type:String,reflect:!0,attribute:"selected-value"}};static styles=[M`
             :host {
                 display: block;
                 contain: content;

libs/features/mas/web-components/src/deeplink.js

@@ -55,7 +55,7 @@ export function pushState(state) {
  */
 export function deeplink(callback) {
     const handler = () => {
-        if (!window.location.hash.includes('=')) return;
+        if (window.location.hash && !window.location.hash.includes('=')) return;
         const state = parseState(window.location.hash);
         callback(state);
     };

libs/features/mas/web-components/test/deeplink.test.js

@@ -25,8 +25,8 @@ describe('Deep linking', () => {
         });
         document.location.hash = 'filter=all&single_app=acrobat&types=desktop';
         await delay(1);
-        expect(events.length).to.equal(1);
-        expect(events[0]).to.deep.equal({
+        expect(events.length).to.equal(2);
+        expect(events[1]).to.deep.equal({
             filter: 'all',
             search: undefined,
             single_app: 'acrobat',
@@ -39,7 +39,7 @@ describe('Deep linking', () => {
             types: 'desktop%2Cmobile',
         });
         await delay(1);
-        expect(events[1]).to.deep.equal({
+        expect(events[2]).to.deep.equal({
             filter: 'all',
             search: undefined,
             single_app: undefined,
@@ -50,7 +50,7 @@ describe('Deep linking', () => {
             types: undefined,
         });
         await delay(1);
-        expect(events[3]).to.deep.equal({
+        expect(events[4]).to.deep.equal({
             filter: 'all',
             search: undefined,
             single_app: undefined,
@@ -64,7 +64,7 @@ describe('Deep linking', () => {
             types: undefined,
         });
         await delay(1);
-        expect(events[3]).to.deep.equal({
+        expect(events[4]).to.deep.equal({
             filter: 'all',
             types: undefined,
             sort: undefined,
@@ -78,6 +78,6 @@ describe('Deep linking', () => {
             types: 'desktop',
         });
         await delay(1);
-        expect(events.length).to.equal(6);
+        expect(events.length).to.equal(7);
     });
 });