modify tab url based on given parent url (#1731)

This pr is made in tandem with the [theme changes](yext/answers-hitchhiker-theme#1067) to support iframe experience's tab navigation where opening one in a new browser tab should still be under the domain of the iFrame's parent for the new page's url.

if a `_parentUrl` is provided, the tabs are updated with their href having the domain of the parent url and a verticalUrl param attached to indicate which page to navigate to. The target is also updated to '_parent' to handle the case of tab navigation in the same browser tab.
a function `setParentUrl` is added to the navigation component for user to set `_parentUrl`, which will cause a rerender of the component to update the tabs's link


J=SLAP-2089
TEST=manual

Tested along with the changes in theme. 
Deployed two test sites in storm, with [one being from the theme dev branch](https://devtabnaviniframe-theme-slapshot-pagescdn-com.preview.pagescdn.com/?query=virginia&referrerPageUrl=) that points to the SDK pr dev branch, under the staging commit: dev/tab-nav-in-iframe[@65f09b10](yext/answers-hitchhiker-theme@65f09b1). That is used in the src script of iframe_test.html of the [other site](https://devyttesting-theme-slapshot-pagescdn-com.preview.pagescdn.com/?query=virginia&referrerPageUrl=) under the staging commit: dev/yt-testing[@517e852f](yext/answers-hitchhiker-theme@517e852). Navigate to different tabs in the same tab and opening them in new tab. See that the page is still under the domain of the iFrame's parent.

conf/i18n/translations/messages.pot

@@ -269,7 +269,7 @@ msgctxt "Button label, deselects one or more options"
 msgid "reset"
 msgstr ""
 
-#: src/ui/components/navigation/navigationcomponent.js:127
+#: src/ui/components/navigation/navigationcomponent.js:128
 msgctxt "Button label, displays more items"
 msgid "More"
 msgstr ""
@@ -436,7 +436,7 @@ msgctxt "Noun, a page of results"
 msgid "Page"
 msgstr ""
 
-#: src/ui/components/navigation/navigationcomponent.js:185
+#: src/ui/components/navigation/navigationcomponent.js:186
 msgctxt "Noun, labels the navigation for the search page"
 msgid "Search Page Navigation"
 msgstr ""

src/ui/components/navigation/navigationcomponent.js

@@ -9,6 +9,7 @@ import DOM from '../../dom/dom';
 import { mergeTabOrder, getDefaultTabOrder, getUrlParams } from '../../tools/taborder';
 import { filterParamsForExperienceLink, replaceUrlParams } from '../../../core/utils/urlutils.js';
 import TranslationFlagger from '../../i18n/translationflagger';
+import SearchParams from '../../dom/searchparams';
 
 /**
  * The debounce duration for resize events
@@ -238,6 +239,11 @@ export default class NavigationComponent extends Component {
     }
   }
 
+  setParentUrl (parentUrl) {
+    this._parentUrl = parentUrl;
+    this.setState(this.core.storage.get(StorageKeys.NAVIGATION) || {});
+  }
+
   onUnMount () {
     this.unbindOverflowHandlers();
   }
@@ -379,6 +385,19 @@ export default class NavigationComponent extends Component {
       }
     }
 
+    if (this._parentUrl) {
+      const parentUrlWithoutParams = this._parentUrl.split('?')[0];
+      const urlParser = document.createElement('a');
+      tabs.forEach(tab => {
+        urlParser.href = tab.url;
+        const tabParams = new SearchParams(urlParser.search);
+        const verticalUrl = urlParser.pathname.replace(/^\//, '');
+        tabParams.set('verticalUrl', verticalUrl);
+        tab.url = parentUrlWithoutParams + '?' + tabParams.toString();
+        tab.target = '_parent';
+      });
+    }
+
     return super.setState({
       tabs: tabs,
       overflowLabel: this.overflowLabel,

src/ui/templates/navigation/navigation.hbs

@@ -5,6 +5,7 @@
         <a class="js-yxt-navItem yxt-Nav-item{{#if isActive}} is-active{{/if}}"
           {{#if isActive}} aria-current="page"{{/if}}
           href="{{url}}"
+          {{#if target}} target="{{target}}"{{/if}}
           data-middleclick="active"
           {{#if @first}}
             data-eventtype="ALL_TAB_NAVIGATION"