update redirectUrl URL construction (#1667)

update redirectUrl URL construction to prioritize user-specified params over answers params

J=SLAP-232
TEST=manual & auto

- tested search bar and filter search component in chrome, safari, firefox, and ie11. Configure redirectUrl to be 'https://answers.yext.com/?query=test&another-param=stuff' and search for 'rose'. See that the redirectUrl preserve query param and other non-conflicting params from answers and user-specified ones
- see the new jest tests passed

conf/i18n/translations/messages.pot

@@ -191,7 +191,7 @@ msgstr ""
 
 #: src/ui/components/filters/geolocationcomponent.js:153
 #: src/ui/components/search/locationbiascomponent.js:89
-#: src/ui/components/search/searchcomponent.js:234
+#: src/ui/components/search/searchcomponent.js:235
 msgid "We are unable to determine your location"
 msgstr ""
 
@@ -245,7 +245,7 @@ msgid "Remove this filter"
 msgstr ""
 
 #: src/ui/components/questions/questionsubmissioncomponent.js:70
-#: src/ui/components/search/searchcomponent.js:73
+#: src/ui/components/search/searchcomponent.js:74
 msgctxt "Button label"
 msgid "Submit"
 msgstr ""
@@ -385,7 +385,7 @@ msgctxt "Labels a link"
 msgid "Learn more here."
 msgstr ""
 
-#: src/ui/components/search/searchcomponent.js:64
+#: src/ui/components/search/searchcomponent.js:65
 msgctxt "Labels an input field"
 msgid "Conduct a search"
 msgstr ""
@@ -396,7 +396,7 @@ msgctxt "Labels an input field"
 msgid "Search for a filter option"
 msgstr ""
 
-#: src/ui/components/search/filtersearchcomponent.js:64
+#: src/ui/components/search/filtersearchcomponent.js:65
 msgctxt "Labels an input field"
 msgid "What are you interested in?"
 msgstr ""
@@ -484,7 +484,7 @@ msgctxt "True or False"
 msgid "True"
 msgstr ""
 
-#: src/ui/components/search/searchcomponent.js:82
+#: src/ui/components/search/searchcomponent.js:83
 msgctxt "Verb, clears search"
 msgid "Clear"
 msgstr ""

src/ui/components/search/filtersearchcomponent.js

@@ -10,6 +10,7 @@ import FilterNodeFactory from '../../../core/filters/filternodefactory';
 import ComponentTypes from '../../components/componenttypes';
 import TranslationFlagger from '../../i18n/translationflagger';
 import QueryTriggers from '../../../core/models/querytriggers';
+import { constructRedirectUrl } from '../../tools/urlutils';
 
 /**
  * FilterSearchComponent is used for autocomplete using the FilterSearch backend.
@@ -208,7 +209,8 @@ export default class FilterSearchComponent extends Component {
         // If we have a redirectUrl, we want the params to be
         // serialized and submitted.
         if (typeof this.redirectUrl === 'string') {
-          window.location.href = this.redirectUrl + '?' + params.toString();
+          const newRedirectUrl = constructRedirectUrl(this.redirectUrl, params);
+          window.location.href = newRedirectUrl.href;
           return false;
         }
 

src/ui/components/search/searchcomponent.js

@@ -11,6 +11,7 @@ import VoiceSearchController from '../../speechrecognition/voicesearchcontroller
 import { speechRecognitionIsSupported } from '../../../core/speechrecognition/support';
 import SearchBarIconController from '../../controllers/searchbariconcontroller';
 import alert from '../../alert';
+import { constructRedirectUrl } from '../../tools/urlutils';
 
 /**
  * SearchComponent exposes an interface in order to create
@@ -517,8 +518,9 @@ export default class SearchComponent extends Component {
     // serialized and submitted.
     if (typeof this.redirectUrl === 'string') {
       if (this._allowEmptySearch || query) {
-        const newUrl = this.redirectUrl + '?' + params.toString();
-        window.open(newUrl, this.redirectUrlTarget) || (window.location.href = newUrl);
+        const newRedirectUrl = constructRedirectUrl(this.redirectUrl, params);
+        window.open(newRedirectUrl.href, this.redirectUrlTarget) ||
+          (window.location.href = newRedirectUrl.href);
         return false;
       }
     }

src/ui/tools/urlutils.js

@@ -0,0 +1,21 @@
+import SearchParams from '../dom/searchparams';
+
+/**
+ * Construct a new redirect url with params saved in answers storage.
+ * In the case of duplicate params, priorize user-specified params.
+ *
+ * @param {string} redirectUrl user-specified redirect url
+ * @param {SearchParams} params url params saved in answers storage
+ * @returns {URL} new redirect url including params from answers storage
+ */
+export function constructRedirectUrl (redirectUrl, params) {
+  const newRedirectUrl = new URL(redirectUrl);
+  const redirectUrlParams = new SearchParams(newRedirectUrl.search);
+  for (const [key, val] of params.entries()) {
+    if (!redirectUrlParams.has(key)) {
+      redirectUrlParams.set(key, val);
+    }
+  }
+  newRedirectUrl.search = redirectUrlParams.toString();
+  return newRedirectUrl;
+}

tests/ui/tools/urlutils.js

@@ -0,0 +1,25 @@
+import { SearchParams } from '../../../src/ui';
+import { constructRedirectUrl } from '../../../src/ui/tools/urlutils';
+
+describe('constructRedirectUrl', () => {
+  it('include answers params', () => {
+    const userRedirectUrl = 'https://answers.yext.com/';
+    const params = new SearchParams('?answers-param=rose');
+    const newRedirectUrl = constructRedirectUrl(userRedirectUrl, params);
+    expect(newRedirectUrl.search).toEqual('?answers-param=rose');
+  });
+
+  it('handle duplicate params', () => {
+    const userRedirectUrl = 'https://answers.yext.com/?query=test';
+    const params = new SearchParams('?query=rose');
+    const newRedirectUrl = constructRedirectUrl(userRedirectUrl, params);
+    expect(newRedirectUrl.search).toEqual('?query=test');
+  });
+
+  it('handle a mix of user-specified and answers params', () => {
+    const userRedirectUrl = 'https://answers.yext.com/?query=test&context=abc';
+    const params = new SearchParams('?query=rose&filter=manager');
+    const newRedirectUrl = constructRedirectUrl(userRedirectUrl, params);
+    expect(newRedirectUrl.search).toEqual('?query=test&context=abc&filter=manager');
+  });
+});