[Vue] Migrate ajaxHelper.ts + piwik-url service (#18104)

1 files changed, 579 insertions, 0 deletions

diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js b/plugins/CoreHome/vue/dist/CoreHome.umd.js
index 3b81ac053b..f2d953639a 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js
@@ -116,6 +116,8 @@ __webpack_require__.d(__webpack_exports__, "ActivityIndicator", function() { ret
 __webpack_require__.d(__webpack_exports__, "translate", function() { return /* reexport */ translate; });
 __webpack_require__.d(__webpack_exports__, "alertAdapter", function() { return /* reexport */ alertAdapter; });
 __webpack_require__.d(__webpack_exports__, "Periods", function() { return /* reexport */ Periods_Periods; });
+__webpack_require__.d(__webpack_exports__, "AjaxHelper", function() { return /* reexport */ AjaxHelper_AjaxHelper; });
+__webpack_require__.d(__webpack_exports__, "PiwikUrl", function() { return /* reexport */ PiwikUrl_PiwikUrl; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 // This file is imported into lib/wc client bundles.
@@ -639,6 +641,579 @@ function piwikPeriods() {
 }
 
 angular.module('piwikApp.service').factory('piwikPeriods', piwikPeriods);
+// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/PiwikUrl/PiwikUrl.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Similar to angulars $location but works around some limitation. Use it if you need to access
+ * search params
+ */
+const PiwikUrl = {
+  getSearchParam(paramName) {
+    const hash = window.location.href.split('#');
+    const regex = new RegExp(`${paramName}(\\[]|=)`);
+
+    if (hash && hash[1] && regex.test(decodeURIComponent(hash[1]))) {
+      const valueFromHash = broadcast.getValueFromHash(paramName, window.location.href); // for date, period and idsite fall back to parameter from url, if non in hash was provided
+
+      if (valueFromHash || paramName !== 'date' && paramName !== 'period' && paramName !== 'idSite') {
+        return valueFromHash;
+      }
+    }
+
+    return broadcast.getValueFromUrl(paramName, window.location.search);
+  }
+
+};
+/* harmony default export */ var PiwikUrl_PiwikUrl = (PiwikUrl);
+// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.ts
+function AjaxHelper_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+window.globalAjaxQueue = [];
+window.globalAjaxQueue.active = 0;
+
+window.globalAjaxQueue.clean = function globalAjaxQueueClean() {
+  for (let i = this.length; i >= 0; i -= 1) {
+    if (!this[i] || this[i].readyState === 4) {
+      this.splice(i, 1);
+    }
+  }
+};
+
+window.globalAjaxQueue.push = function globalAjaxQueuePush(...args) {
+  this.active += args.length; // cleanup ajax queue
+
+  this.clean(); // call original array push
+
+  return Array.prototype.push.call(this, ...args);
+};
+
+window.globalAjaxQueue.abort = function globalAjaxQueueAbort() {
+  // abort all queued requests if possible
+  this.forEach(x => x && x.abort && x.abort()); // remove all elements from array
+
+  this.splice(0, this.length);
+  this.active = 0;
+};
+/**
+ * error callback to use by default
+ */
+
+
+function defaultErrorCallback(deferred, status) {
+  // do not display error message if request was aborted
+  if (status === 'abort') {
+    return;
+  }
+
+  const loadingError = $('#loadingError');
+
+  if (Piwik_Popover.isOpen() && deferred && deferred.status === 500) {
+    if (deferred && deferred.status === 500) {
+      $(document.body).html(piwikHelper.escape(deferred.responseText));
+    }
+  } else {
+    loadingError.show();
+  }
+}
+/**
+ * Global ajax helper to handle requests within piwik
+ */
+
+
+class AjaxHelper_AjaxHelper {
+  /**
+   * Format of response
+   */
+
+  /**
+   * A timeout for the request which will override any global timeout
+   */
+
+  /**
+   * Callback function to be executed on success
+   */
+
+  /**
+   * Use this.callback if an error is returned
+   */
+
+  /**
+   * Callback function to be executed on error
+   */
+
+  /**
+   * Callback function to be executed on complete (after error or success)
+   */
+
+  /**
+   * Params to be passed as GET params
+   * @see ajaxHelper.mixinDefaultGetParams
+   */
+
+  /**
+   * Base URL used in the AJAX request. Can be set by setUrl.
+   *
+   * It is set to '?' rather than 'index.php?' to increase chances that it works
+   * including for users who have an automatic 301 redirection from index.php? to ?
+   * POST values are missing when there is such 301 redirection. So by by-passing
+   * this 301 redirection, we avoid this issue.
+   *
+   * @see ajaxHelper.setUrl
+   */
+
+  /**
+   * Params to be passed as GET params
+   * @see ajaxHelper.mixinDefaultPostParams
+   */
+
+  /**
+   * Element to be displayed while loading
+   */
+
+  /**
+   * Element to be displayed on error
+   */
+
+  /**
+   * Handle for current request
+   */
+  constructor() {
+    AjaxHelper_defineProperty(this, "format", 'json');
+
+    AjaxHelper_defineProperty(this, "timeout", null);
+
+    AjaxHelper_defineProperty(this, "callback", null);
+
+    AjaxHelper_defineProperty(this, "useRegularCallbackInCaseOfError", false);
+
+    AjaxHelper_defineProperty(this, "errorCallback", void 0);
+
+    AjaxHelper_defineProperty(this, "withToken", false);
+
+    AjaxHelper_defineProperty(this, "completeCallback", void 0);
+
+    AjaxHelper_defineProperty(this, "getParams", {});
+
+    AjaxHelper_defineProperty(this, "getUrl", '?');
+
+    AjaxHelper_defineProperty(this, "postParams", {});
+
+    AjaxHelper_defineProperty(this, "loadingElement", null);
+
+    AjaxHelper_defineProperty(this, "errorElement", '#ajaxError');
+
+    AjaxHelper_defineProperty(this, "requestHandle", null);
+
+    AjaxHelper_defineProperty(this, "defaultParams", ['idSite', 'period', 'date', 'segment']);
+
+    this.errorCallback = defaultErrorCallback;
+  }
+  /**
+   * Adds params to the request.
+   * If params are given more then once, the latest given value is used for the request
+   *
+   * @param  params
+   * @param  type  type of given parameters (POST or GET)
+   * @return {void}
+   */
+
+
+  addParams(params, type) {
+    if (typeof params === 'string') {
+      // TODO: add global types for broadcast (multiple uses below)
+      params = window['broadcast'].getValuesFromUrl(params); // eslint-disable-line
+    }
+
+    const arrayParams = ['compareSegments', 'comparePeriods', 'compareDates'];
+    Object.keys(params).forEach(key => {
+      const value = params[key];
+
+      if (arrayParams.indexOf(key) !== -1 && !value) {
+        return;
+      }
+
+      if (type.toLowerCase() === 'get') {
+        this.getParams[key] = value;
+      } else if (type.toLowerCase() === 'post') {
+        this.postParams[key] = value;
+      }
+    });
+  }
+
+  withTokenInUrl() {
+    this.withToken = true;
+  }
+  /**
+   * Sets the base URL to use in the AJAX request.
+   */
+
+
+  setUrl(url) {
+    this.addParams(broadcast.getValuesFromUrl(url), 'GET');
+  }
+  /**
+   * Gets this helper instance ready to send a bulk request. Each argument to this
+   * function is a single request to use.
+   */
+
+
+  setBulkRequests(...urls) {
+    const urlsProcessed = urls.map(u => $.param(u));
+    this.addParams({
+      module: 'API',
+      method: 'API.getBulkRequest',
+      urls: urlsProcessed,
+      format: 'json'
+    }, 'post');
+  }
+  /**
+   * Set a timeout (in milliseconds) for the request. This will override any global timeout.
+   *
+   * @param timeout  Timeout in milliseconds
+   */
+
+
+  setTimeout(timeout) {
+    this.timeout = timeout;
+  }
+  /**
+   * Sets the callback called after the request finishes
+   *
+   * @param callback  Callback function
+   */
+
+
+  setCallback(callback) {
+    this.callback = callback;
+  }
+  /**
+   * Set that the callback passed to setCallback() should be used if an application error (i.e. an
+   * Exception in PHP) is returned.
+   */
+
+
+  useCallbackInCaseOfError() {
+    this.useRegularCallbackInCaseOfError = true;
+  }
+  /**
+   * Set callback to redirect on success handler
+   * &update=1(+x) will be appended to the current url
+   *
+   * @param [params] to modify in redirect url
+   * @return {void}
+   */
+
+
+  redirectOnSuccess(params) {
+    this.setCallback(() => {
+      piwikHelper.redirect(params);
+    });
+  }
+  /**
+   * Sets the callback called in case of an error within the request
+   */
+
+
+  setErrorCallback(callback) {
+    this.errorCallback = callback;
+  }
+  /**
+   * Sets the complete callback which is called after an error or success callback.
+   */
+
+
+  setCompleteCallback(callback) {
+    this.completeCallback = callback;
+  }
+  /**
+   * Sets the response format for the request
+   *
+   * @param format  response format (e.g. json, html, ...)
+   */
+
+
+  setFormat(format) {
+    this.format = format;
+  }
+  /**
+   * Set the div element to show while request is loading
+   *
+   * @param [element]  selector for the loading element
+   */
+
+
+  setLoadingElement(element) {
+    this.loadingElement = element || '#ajaxLoadingDiv';
+  }
+  /**
+   * Set the div element to show on error
+   *
+   * @param element  selector for the error element
+   */
+
+
+  setErrorElement(element) {
+    if (!element) {
+      return;
+    }
+
+    this.errorElement = element;
+  }
+  /**
+   * Detect whether are allowed to use the given default parameter or not
+   */
+
+
+  useGETDefaultParameter(parameter) {
+    if (parameter && this.defaultParams) {
+      for (let i = 0; i < this.defaultParams.length; i += 1) {
+        if (this.defaultParams[i] === parameter) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+  /**
+   * Removes a default parameter that is usually send automatically along the request.
+   *
+   * @param parameter  A name such as "period", "date", "segment".
+   */
+
+
+  removeDefaultParameter(parameter) {
+    if (parameter && this.defaultParams) {
+      for (let i = 0; i < this.defaultParams.length; i += 1) {
+        if (this.defaultParams[i] === parameter) {
+          this.defaultParams.splice(i, 1);
+        }
+      }
+    }
+  }
+  /**
+   * Send the request
+   */
+
+
+  send() {
+    if ($(this.errorElement).length) {
+      $(this.errorElement).hide();
+    }
+
+    if (this.loadingElement) {
+      $(this.loadingElement).fadeIn();
+    }
+
+    this.requestHandle = this.buildAjaxCall();
+    globalAjaxQueue.push(this.requestHandle);
+  }
+  /**
+   * Aborts the current request if it is (still) running
+   */
+
+
+  abort() {
+    if (this.requestHandle && typeof this.requestHandle.abort === 'function') {
+      this.requestHandle.abort();
+      this.requestHandle = null;
+    }
+  }
+  /**
+   * Builds and sends the ajax requests
+   */
+
+
+  buildAjaxCall() {
+    const self = this;
+    const parameters = this.mixinDefaultGetParams(this.getParams);
+    let url = this.getUrl;
+
+    if (url[url.length - 1] !== '?') {
+      url += '&';
+    } // we took care of encoding &segment properly already, so we don't use $.param for it ($.param
+    // URL encodes the values)
+
+
+    if (parameters.segment) {
+      url = `${url}segment=${parameters.segment}&`;
+      delete parameters.segment;
+    }
+
+    if (parameters.date) {
+      url = `${url}date=${decodeURIComponent(parameters.date.toString())}&`;
+      delete parameters.date;
+    }
+
+    url += $.param(parameters);
+    const ajaxCall = {
+      type: 'POST',
+      async: true,
+      url,
+      dataType: this.format || 'json',
+      complete: this.completeCallback,
+      error: function errorCallback() {
+        globalAjaxQueue.active -= 1;
+
+        if (self.errorCallback) {
+          self.errorCallback.apply(this, arguments); // eslint-disable-line
+        }
+      },
+      success: (response, status, request) => {
+        if (this.loadingElement) {
+          $(this.loadingElement).hide();
+        }
+
+        if (response && response.result === 'error' && !this.useRegularCallbackInCaseOfError) {
+          let placeAt = null;
+          let type = 'toast';
+
+          if ($(this.errorElement).length && response.message) {
+            $(this.errorElement).show();
+            placeAt = this.errorElement;
+            type = null;
+          }
+
+          if (response.message) {
+            const UI = window['require']('piwik/UI'); // eslint-disable-line
+
+            const notification = new UI.Notification();
+            notification.show(response.message, {
+              placeat: placeAt,
+              context: 'error',
+              type,
+              id: 'ajaxHelper'
+            });
+            notification.scrollToNotification();
+          }
+        } else if (this.callback) {
+          this.callback(response, status, request);
+        }
+
+        globalAjaxQueue.active -= 1;
+        const {
+          piwik
+        } = window;
+
+        if (piwik && piwik.ajaxRequestFinished) {
+          piwik.ajaxRequestFinished();
+        }
+      },
+      data: this.mixinDefaultPostParams(this.postParams),
+      timeout: this.timeout !== null ? this.timeout : undefined
+    };
+    return $.ajax(ajaxCall);
+  }
+
+  isRequestToApiMethod() {
+    return this.getParams && this.getParams.module === 'API' && this.getParams.method || this.postParams && this.postParams.module === 'API' && this.postParams.method;
+  }
+
+  isWidgetizedRequest() {
+    return broadcast.getValueFromUrl('module') === 'Widgetize';
+  }
+
+  getDefaultPostParams() {
+    if (this.withToken || this.isRequestToApiMethod() || piwik.shouldPropagateTokenAuth) {
+      return {
+        token_auth: piwik.token_auth,
+        // When viewing a widgetized report there won't be any session that can be used, so don't
+        // force session usage
+        force_api_session: broadcast.isWidgetizeRequestWithoutSession() ? 0 : 1
+      };
+    }
+
+    return {};
+  }
+  /**
+   * Mixin the default parameters to send as POST
+   *
+   * @param params   parameter object
+   */
+
+
+  mixinDefaultPostParams(params) {
+    const defaultParams = this.getDefaultPostParams();
+    const mergedParams = { ...defaultParams,
+      ...params
+    };
+    return mergedParams;
+  }
+  /**
+   * Mixin the default parameters to send as GET
+   *
+   * @param   params   parameter object
+   */
+
+
+  mixinDefaultGetParams(originalParams) {
+    const segment = PiwikUrl_PiwikUrl.getSearchParam('segment');
+    const defaultParams = {
+      idSite: piwik.idSite || broadcast.getValueFromUrl('idSite'),
+      period: piwik.period || broadcast.getValueFromUrl('period'),
+      segment
+    };
+    const params = originalParams; // never append token_auth to url
+
+    if (params.token_auth) {
+      params.token_auth = null;
+      delete params.token_auth;
+    }
+
+    Object.keys(defaultParams).forEach(key => {
+      if (this.useGETDefaultParameter(key) && !params[key] && !this.postParams[key] && defaultParams[key]) {
+        params[key] = defaultParams[key];
+      }
+    }); // handle default date & period if not already set
+
+    if (this.useGETDefaultParameter('date') && !params.date && !this.postParams.date) {
+      params.date = piwik.currentDateString;
+    }
+
+    return params;
+  }
+
+}
+// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/AjaxHelper/AjaxHelper.adapter.ts
+
+window.ajaxHelper = AjaxHelper_AjaxHelper;
+
+function ajaxQueue() {
+  return globalAjaxQueue;
+}
+
+angular.module('piwikApp.service').service('globalAjaxQueue', ajaxQueue);
+// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/PiwikUrl/PiwikUrl.adapter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+function piwikUrl() {
+  const model = {
+    getSearchParam: PiwikUrl_PiwikUrl.getSearchParam.bind(PiwikUrl_PiwikUrl)
+  };
+  return model;
+}
+
+piwikUrl.$inject = [];
+angular.module('piwikApp.service').service('piwikUrl', piwikUrl);
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
 
@@ -826,6 +1401,10 @@ angular.module('piwikApp').directive('piwikAlert', alertAdapter);
 
 
 
+
+
+
+
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js