[Vue] migrate location-provider-selection directive to vue component (#19026)

* migrate location-provider-selection directive to vue component

* test manually

* fix UI tests

* fix paragraph markup

Co-authored-by: sgiehl <stefan@matomo.org>

23 files changed, 45 insertions, 23 deletions

diff --git a/plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.adapter.ts b/plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.adapter.ts
index 84cb965fc6..614d128056 100644
--- a/plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.adapter.ts
+++ b/plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.adapter.ts
@@ -6,7 +6,7 @@
  */
 
 import ActivityIndicator from './ActivityIndicator.vue';
-import translate from '../translate';
+import { translate } from '../translate';
 import createAngularJsAdapter from '../createAngularJsAdapter';
 
 export default createAngularJsAdapter({
diff --git a/plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.vue b/plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.vue
index a5f27080dc..ea3daf5ddb 100644
--- a/plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.vue
+++ b/plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import translate from '../translate';
+import { translate } from '../translate';
 
 export default defineComponent({
   props: {
diff --git a/plugins/CoreHome/vue/src/AjaxForm/AjaxForm.vue b/plugins/CoreHome/vue/src/AjaxForm/AjaxForm.vue
index 935f438b62..2a84ef2559 100644
--- a/plugins/CoreHome/vue/src/AjaxForm/AjaxForm.vue
+++ b/plugins/CoreHome/vue/src/AjaxForm/AjaxForm.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import translate from '../translate';
+import { translate } from '../translate';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
 import { NotificationsStore } from '../Notification';
 
diff --git a/plugins/CoreHome/vue/src/Comparisons/Comparisons.store.ts b/plugins/CoreHome/vue/src/Comparisons/Comparisons.store.ts
index f6734c3e56..3c7659dde6 100644
--- a/plugins/CoreHome/vue/src/Comparisons/Comparisons.store.ts
+++ b/plugins/CoreHome/vue/src/Comparisons/Comparisons.store.ts
@@ -13,7 +13,7 @@ import {
 } from 'vue';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
 import Matomo from '../Matomo/Matomo';
-import translate from '../translate';
+import { translate } from '../translate';
 import Periods from '../Periods/Periods';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
 import SegmentsStore from '../Segmentation/Segments.store';
diff --git a/plugins/CoreHome/vue/src/Comparisons/Comparisons.vue b/plugins/CoreHome/vue/src/Comparisons/Comparisons.vue
index 62bf2f04cc..d9ab36781d 100644
--- a/plugins/CoreHome/vue/src/Comparisons/Comparisons.vue
+++ b/plugins/CoreHome/vue/src/Comparisons/Comparisons.vue
@@ -76,7 +76,7 @@ import ComparisonsStoreInstance from './Comparisons.store.instance';
 import Matomo from '../Matomo/Matomo';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
-import translate from '../translate';
+import { translate } from '../translate';
 import Tooltips from '../Tooltips/Tooltips';
 
 interface ProcessedReportComparison {
diff --git a/plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.vue b/plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.vue
index 2e7b60ab64..15f8d10e78 100644
--- a/plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.vue
+++ b/plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.vue
@@ -165,7 +165,7 @@ import DateRangePicker from '../DateRangePicker/DateRangePicker.vue';
 import PeriodDatePicker from '../PeriodDatePicker/PeriodDatePicker.vue';
 import ActivityIndicator from '../ActivityIndicator/ActivityIndicator.vue';
 import Matomo from '../Matomo/Matomo';
-import translate from '../translate';
+import { translate } from '../translate';
 import ComparisonsStore from '../Comparisons/Comparisons.store.instance';
 import useExternalPluginComponent from '../useExternalPluginComponent';
 import {
diff --git a/plugins/CoreHome/vue/src/Periods/Day.ts b/plugins/CoreHome/vue/src/Periods/Day.ts
index f4150d9a35..f6a49efa07 100644
--- a/plugins/CoreHome/vue/src/Periods/Day.ts
+++ b/plugins/CoreHome/vue/src/Periods/Day.ts
@@ -5,7 +5,7 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-import translate from '../translate';
+import { translate } from '../translate';
 import Periods from './Periods';
 import { parseDate, format, todayIsInRange } from './utilities';
 
diff --git a/plugins/CoreHome/vue/src/Periods/Month.ts b/plugins/CoreHome/vue/src/Periods/Month.ts
index 2924745912..ea19981dbc 100644
--- a/plugins/CoreHome/vue/src/Periods/Month.ts
+++ b/plugins/CoreHome/vue/src/Periods/Month.ts
@@ -5,7 +5,7 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-import translate from '../translate';
+import { translate } from '../translate';
 import Periods from './Periods';
 import { parseDate, todayIsInRange } from './utilities';
 
diff --git a/plugins/CoreHome/vue/src/Periods/Range.ts b/plugins/CoreHome/vue/src/Periods/Range.ts
index f1c092d7da..144a945c91 100644
--- a/plugins/CoreHome/vue/src/Periods/Range.ts
+++ b/plugins/CoreHome/vue/src/Periods/Range.ts
@@ -5,7 +5,7 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-import translate from '../translate';
+import { translate } from '../translate';
 import Periods from './Periods';
 import {
   parseDate,
diff --git a/plugins/CoreHome/vue/src/Periods/Week.ts b/plugins/CoreHome/vue/src/Periods/Week.ts
index 4bb45ceedf..2045fb4afe 100644
--- a/plugins/CoreHome/vue/src/Periods/Week.ts
+++ b/plugins/CoreHome/vue/src/Periods/Week.ts
@@ -5,7 +5,7 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-import translate from '../translate';
+import { translate } from '../translate';
 import Periods from './Periods';
 import { parseDate, format, todayIsInRange } from './utilities';
 
diff --git a/plugins/CoreHome/vue/src/Periods/Year.ts b/plugins/CoreHome/vue/src/Periods/Year.ts
index 9f9c0c0c88..178781af37 100644
--- a/plugins/CoreHome/vue/src/Periods/Year.ts
+++ b/plugins/CoreHome/vue/src/Periods/Year.ts
@@ -5,7 +5,7 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-import translate from '../translate';
+import { translate } from '../translate';
 import Periods from './Periods';
 import { parseDate, todayIsInRange } from './utilities';
 
diff --git a/plugins/CoreHome/vue/src/QuickAccess/QuickAccess.vue b/plugins/CoreHome/vue/src/QuickAccess/QuickAccess.vue
index a9ae4a65f3..c86008c139 100644
--- a/plugins/CoreHome/vue/src/QuickAccess/QuickAccess.vue
+++ b/plugins/CoreHome/vue/src/QuickAccess/QuickAccess.vue
@@ -99,7 +99,7 @@
 import { DeepReadonly, defineComponent } from 'vue';
 import FocusAnywhereButHere from '../FocusAnywhereButHere/FocusAnywhereButHere';
 import FocusIf from '../FocusIf/FocusIf';
-import translate from '../translate';
+import { translate } from '../translate';
 import SitesStore from '../SiteSelector/SitesStore';
 import Site from '../SiteSelector/Site';
 import Matomo from '../Matomo/Matomo';
diff --git a/plugins/CoreHome/vue/src/ReportExport/ReportExport.ts b/plugins/CoreHome/vue/src/ReportExport/ReportExport.ts
index f5e5d334d6..f7f8a07430 100644
--- a/plugins/CoreHome/vue/src/ReportExport/ReportExport.ts
+++ b/plugins/CoreHome/vue/src/ReportExport/ReportExport.ts
@@ -7,7 +7,7 @@
 
 import { DirectiveBinding } from 'vue';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
-import translate from '../translate';
+import { translate } from '../translate';
 import ReportExportPopover from './ReportExportPopover.vue';
 import Matomo from '../Matomo/Matomo';
 import createVueApp from '../createVueApp';
diff --git a/plugins/CoreHome/vue/src/ReportExport/ReportExportPopover.vue b/plugins/CoreHome/vue/src/ReportExport/ReportExportPopover.vue
index 2df26563d8..37caea1e2b 100644
--- a/plugins/CoreHome/vue/src/ReportExport/ReportExportPopover.vue
+++ b/plugins/CoreHome/vue/src/ReportExport/ReportExportPopover.vue
@@ -150,7 +150,7 @@ import useExternalPluginComponent from '../useExternalPluginComponent';
 import SelectOnFocus from '../SelectOnFocus/SelectOnFocus';
 import Matomo from '../Matomo/Matomo';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
-import translate from '../translate';
+import { translate } from '../translate';
 
 interface DataTable {
   param: Record<string, string|string[]>;
diff --git a/plugins/CoreHome/vue/src/ReportingMenu/ReportingMenu.store.ts b/plugins/CoreHome/vue/src/ReportingMenu/ReportingMenu.store.ts
index 108318ec76..2241b23d8e 100644
--- a/plugins/CoreHome/vue/src/ReportingMenu/ReportingMenu.store.ts
+++ b/plugins/CoreHome/vue/src/ReportingMenu/ReportingMenu.store.ts
@@ -8,7 +8,7 @@
 import { computed, reactive, readonly } from 'vue';
 import ReportingPagesStoreInstance from '../ReportingPages/ReportingPages.store';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
-import translate from '../translate';
+import { translate } from '../translate';
 import { sortOrderables } from '../Orderable';
 import { Category, CategoryContainer, getCategoryChildren } from './Category';
 import { getSubcategoryChildren, Subcategory, SubcategoryContainer } from './Subcategory';
diff --git a/plugins/CoreHome/vue/src/ReportingMenu/ReportingMenu.vue b/plugins/CoreHome/vue/src/ReportingMenu/ReportingMenu.vue
index 49a4073266..463e42989f 100644
--- a/plugins/CoreHome/vue/src/ReportingMenu/ReportingMenu.vue
+++ b/plugins/CoreHome/vue/src/ReportingMenu/ReportingMenu.vue
@@ -145,7 +145,7 @@ import { NotificationsStore } from '../Notification';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
 import ReportingMenuStoreInstance from './ReportingMenu.store';
 import Matomo from '../Matomo/Matomo';
-import translate from '../translate';
+import { translate } from '../translate';
 import WidgetsStoreInstance from '../Widget/Widgets.store';
 import { Category, CategoryContainer } from './Category';
 import { Subcategory, SubcategoryContainer } from './Subcategory';
diff --git a/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue b/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
index 5f9dec0367..2cba4525ae 100644
--- a/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
+++ b/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
@@ -52,7 +52,7 @@ import ReportingPageStoreInstance from './ReportingPage.store';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
 import { Periods } from '../Periods';
 import { NotificationsStore } from '../Notification';
-import translate from '../translate';
+import { translate } from '../translate';
 import Matomo from '../Matomo/Matomo';
 import ReportingPagesStoreInstance from '../ReportingPages/ReportingPages.store';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
diff --git a/plugins/CoreHome/vue/src/ShowSensitiveData/ShowSensitiveData.ts b/plugins/CoreHome/vue/src/ShowSensitiveData/ShowSensitiveData.ts
index db5d495d88..76d5c0c53a 100644
--- a/plugins/CoreHome/vue/src/ShowSensitiveData/ShowSensitiveData.ts
+++ b/plugins/CoreHome/vue/src/ShowSensitiveData/ShowSensitiveData.ts
@@ -6,7 +6,7 @@
  */
 
 import { DirectiveBinding } from 'vue';
-import translate from '../translate';
+import { translate } from '../translate';
 
 interface ShowSensitiveDataArgs {
   sensitiveData: string;
diff --git a/plugins/CoreHome/vue/src/SiteSelector/SiteSelector.vue b/plugins/CoreHome/vue/src/SiteSelector/SiteSelector.vue
index f05d59a7b0..5d115f8136 100644
--- a/plugins/CoreHome/vue/src/SiteSelector/SiteSelector.vue
+++ b/plugins/CoreHome/vue/src/SiteSelector/SiteSelector.vue
@@ -126,7 +126,7 @@ import FocusIf from '../FocusIf/FocusIf';
 import AllSitesLink from './AllSitesLink.vue';
 import Matomo from '../Matomo/Matomo';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
-import translate from '../translate';
+import { translate } from '../translate';
 import SitesStore from './SitesStore';
 import debounce from '../debounce';
 import SiteRef from './SiteRef';
diff --git a/plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue b/plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue
index 76548ccc26..2d1eeea6a7 100644
--- a/plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue
+++ b/plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue
@@ -32,7 +32,7 @@
 import { IRootScopeService, IScope } from 'angular';
 import { defineComponent } from 'vue';
 import ActivityIndicator from '../ActivityIndicator/ActivityIndicator.vue';
-import translate from '../translate';
+import { translate } from '../translate';
 import Matomo from '../Matomo/Matomo';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
 import { NotificationsStore } from '../Notification';
diff --git a/plugins/CoreHome/vue/src/createVueApp.ts b/plugins/CoreHome/vue/src/createVueApp.ts
index c968a892a1..65caca5251 100644
--- a/plugins/CoreHome/vue/src/createVueApp.ts
+++ b/plugins/CoreHome/vue/src/createVueApp.ts
@@ -6,7 +6,7 @@
  */
 
 import { createApp } from 'vue';
-import translate from './translate';
+import { translate, translateOrDefault } from './translate';
 
 export default function createVueApp(
   ...args: Parameters<typeof createApp>
@@ -14,5 +14,6 @@ export default function createVueApp(
   const app = createApp(...args);
   app.config.globalProperties.$sanitize = window.vueSanitize;
   app.config.globalProperties.translate = translate;
+  app.config.globalProperties.translateOrDefault = translateOrDefault;
   return app;
 }
diff --git a/plugins/CoreHome/vue/src/index.ts b/plugins/CoreHome/vue/src/index.ts
index 3080549c03..63113e7b5f 100644
--- a/plugins/CoreHome/vue/src/index.ts
+++ b/plugins/CoreHome/vue/src/index.ts
@@ -71,7 +71,7 @@ export {
 } from './createAngularJsAdapter';
 export { default as activityIndicatorAdapter } from './ActivityIndicator/ActivityIndicator.adapter';
 export { default as ActivityIndicator } from './ActivityIndicator/ActivityIndicator.vue';
-export { default as translate } from './translate';
+export * from './translate';
 export { default as Alert } from './Alert/Alert.vue';
 export { default as AjaxHelper, AjaxOptions } from './AjaxHelper/AjaxHelper';
 export { setCookie, getCookie, deleteCookie } from './CookieHelper/CookieHelper';
diff --git a/plugins/CoreHome/vue/src/translate.ts b/plugins/CoreHome/vue/src/translate.ts
index 8df4fe2fc4..37f9184bfe 100644
--- a/plugins/CoreHome/vue/src/translate.ts
+++ b/plugins/CoreHome/vue/src/translate.ts
@@ -5,10 +5,14 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-export default function translate(
+export function translate(
   translationStringId: string,
   ...values: (string|string[])[]
 ): string {
+  if (!translationStringId) {
+    return '';
+  }
+
   let pkArgs = values as string[];
   // handle variadic args AND single array of values (to match _pk_translate signature)
   if (values.length === 1 && values[0] && Array.isArray(values[0])) {
@@ -16,3 +20,20 @@ export default function translate(
   }
   return window._pk_translate(translationStringId, pkArgs); // eslint-disable-line
 }
+
+export function translateOrDefault(
+  translationStringIdOrText?: string,
+  ...values: (string|string[])[]
+): string {
+  if (!translationStringIdOrText || !window.piwik_translations[translationStringIdOrText]) {
+    return translationStringIdOrText!;
+  }
+
+  let pkArgs = values as string[];
+  // handle variadic args AND single array of values (to match _pk_translate signature)
+  if (values.length === 1 && values[0] && Array.isArray(values[0])) {
+    [pkArgs] = values as string[][];
+  }
+
+  return window._pk_translate(translationStringIdOrText, pkArgs); // eslint-disable-line
+}