[Vue] migrate the plugin-settings directive (#18432)

* tweak

* add return type

* finish converting side-nav directive

* starting on reporting menu conversion

* remove unused properties

* convert reporting pages service

* migrate report metadata store

* remove angularjs files

* migrating reporting pages store

* make store adapters more immutable

* get service adapters to work

* fix a UI test

* another html fix

* migrate most of reporting menu directive and model

* Use themed font family for input forms to override materialize.css styling

* rebuild vue

* add a missing div

* ui test fixes

* update styling

* get to build

* get to load in the UI w/o error

* clone result of functions

* fix compile issue

* migrate widget loader and get to load in UI

* rebuild vue

* migrate widgetcontainer

* migrate widget bydimension container

* migrate widget + add tooltips directive

* quick fix

* Updating version to 4.6.0

* loading in page

* update expected screenshot

* add wait just in case travis is slow

* fix ordering bug

* add another wait

* rebuild vue

* css tweak

* fix some bugs and tests

* undo screenshot changes

* Menus test passing locally

* [Vue] date picker viewDate property is not kept up to date (#18385)

* viewDate ref is not kept up to date

* rebuild corehome

* reporting menu subcategory items are meant to be normal links

* update some screenshots

* use innerText instead of text() since angularjs maintains newlines in HTML that vue does not add

* trigger angularjs digest after ajaxhelper request

* rebuild vue

* update screenshots, fix bug in link generation in reporting menu and allow syncing multiple screenshot regexes at a time

* undo box-shadow change for UI tests

* fix more issues & update more tests

* update some screenshots

* fix some tests

* rebuild CoreHome

* quick fix

* built vue files

* fix angularjs issue

* add comment

* update umd files

* 4.6.1-rc1

* 4.6.1

* fix field array title

* apply some pr feedback

* apply more pr feedback

* another fix

* tweak

* fix ng-change not executed before ng-model

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* update some screenshots

* rebuild vue

* remove some TODOs

* initiate initial ng-change ONLY for site selectors where this behavior applies

* emit/broadcast on correct scope in wrapper

* rebuild vue

* fix some issues

* couple more fixes

* fix another title issue

* rebuild vue

* do not report on ajax errors in notifications if not logged in

* migrate reporting page and model

* rebuild vue

* create sites selector model adapter

* fix siteselector vue bug, initial site is only set if there is just one site available

* rebuild vue

* migrate plugin settings directive

* remove TODO

* fix a bunch of bugs

* fix another widget bug

* built vue files

* fix function signature

* fix vue warning

* fix ajax request race condition

* rebuild vue

* add new notification type "help" so the help notification is not cleared when clearing transient notifications

* fix some bugs and tests

* update screenshot

* update screenshot & fix a test

* allow using unminified jquery ui + fix bug in last fix

* fix error when enrichedheadline is used in modal

* add polyfill min.js

* remove two todos

* fix widget url logic

* update some screenshots and fix sanitization/escape issue

* update screenshots

* rebuild vue

* fix url location updating regression in MatomoUrl.updateLocation use

* submodule

* update screenshots and fix possible error in json parse

* built vue files

* Merge branch 'vue-period-selector-regression' into vue-reporting-menu

* rebuild vue

* use correct variable

* rebuild vue

* fix widget url logic

* segment parameter can be undefined now for some reason

* fix ngmodel binding in siteselector adapter (for last time hopefully)

* the original site selector only set the first site to the first site in the initial sites query if there was only one site in the entire matomo instance

* fix sitesmanager ui test failure

* fix usersettings test failure

* rebuild vue

* more siteselector tweaks.

* build CoreHome

* more siteselector tweaks.

* another siteselector issue

* update screenshots

* update screenshot and try to fix random failure

* fix some issues in widget.vue when containerid is specified

* fix couple tests

* fix several test failures

* fix string concat

* fix test failure

* extra change

* fix last change and random failure

* styling fix

* fix last fix

* real fix this time

* fix stray request

* proper fix

* update build files

* try to fix random failure

* do not submit form

* check for api errors in promise chain in ajaxhelper.ts

* force a digest after a location change

* use proper abortcontroller method instead of promise hack, have to add new polyfill + try to fix random test failure

* update screenshots

* post loadPage event after url changes so URL changes are propagated properly to widgets, take columns param into account when re-rendering a page

* Update ReportingMenu.vue

merge conflicts

* built vue files

* revert invalid UI file changes

* fix two regressions in period selector comparison launching/detection (#18497)

* forward compareSegments in when applying period selector change + check if comparing periods in period selector

* built vue files

* fix piwik-widget selector in dataTable.js

* remove space

* extra scope apply after hash change so angularjs notices, change css class to use kebab case, check for field using css class as well in Widget.vue

* rebuild vue

* built vue files

* try to fix random failure

* fix order of JS in karma tests

* remove empty props

* use promise chaining

* undo submodule change

* Fixes: Saving plugin settings might not work with certain password managers enabled (#18515)

* Update PluginSettings.vue

* built vue files

Co-authored-by: peterhashair <peterhashair@users.noreply.github.com>

* apply review feedback

* submodule updates

* fix property type in vue

Co-authored-by: Justin Velluppillai <justin@innocraft.com>
Co-authored-by: justinvelluppillai <justinvelluppillai@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>
Co-authored-by: Peter Zhang <peter@innocraft.com>
Co-authored-by: peterhashair <peterhashair@users.noreply.github.com>
Co-authored-by: sgiehl <stefan@matomo.org>

1 files changed, 40 insertions, 7 deletions

diff --git a/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts b/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
index 3017f89db8..67c6d65fb9 100644
--- a/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
+++ b/plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
@@ -5,6 +5,8 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
+/* eslint-disable max-classes-per-file */
+
 import { ITimeoutService } from 'angular';
 import jqXHR = JQuery.jqXHR;
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
@@ -15,6 +17,8 @@ interface AjaxOptions {
   postParams?: QueryParameters;
   headers?: Record<string, string>;
   format?: string;
+  createErrorNotification?: boolean;
+  abortController?: AbortController;
 }
 
 window.globalAjaxQueue = [] as unknown as GlobalAjaxQueue;
@@ -74,6 +78,8 @@ function defaultErrorCallback(deferred: XMLHttpRequest, status: string): void {
   }
 }
 
+class ApiResponseError extends Error {}
+
 /**
  * Global ajax helper to handle requests within Matomo
  */
@@ -158,6 +164,8 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
    */
   requestHandle: JQuery.jqXHR|null = null;
 
+  abortController: AbortController|null = null;
+
   defaultParams = ['idSite', 'period', 'date', 'segment'];
 
   // helper method entry point
@@ -178,7 +186,34 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
     if (options.headers) {
       helper.headers = options.headers;
     }
-    return helper.send();
+
+    if (typeof options.createErrorNotification !== 'undefined'
+      && !options.createErrorNotification
+    ) {
+      helper.useCallbackInCaseOfError();
+    }
+
+    if (options.abortController) {
+      helper.abortController = options.abortController;
+    }
+
+    return helper.send().then((data) => {
+      // check for error if not using default notification behavior
+      if (data.result === 'error') {
+        throw new ApiResponseError(data.message);
+      }
+
+      return data;
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static post<R = any>(
+    params: QueryParameters,
+    postParams: QueryParameters,
+    options: AjaxOptions = {},
+  ): Promise<R> {
+    return this.fetch<R>(params, { ...options, postParams });
   }
 
   constructor() {
@@ -380,6 +415,10 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
       // ignore
     }
 
+    if (this.abortController) {
+      this.abortController.signal.addEventListener('abort', () => this.requestHandle.abort());
+    }
+
     const result: AbortablePromise<T> = new Promise<T>((resolve, reject) => {
       this.requestHandle!.then((data: unknown) => {
         resolve(data as T); // ignoring textStatus/jqXHR
@@ -396,12 +435,6 @@ export default class AjaxHelper<T = any> { // eslint-disable-line
       });
     }) as AbortablePromise<T>;
 
-    result.abort = () => {
-      if (this.requestHandle) {
-        this.requestHandle.abort();
-      }
-    };
-
     return result;
   }