From d52ab5de2e33f2972c8c7edadddae6451e76c86d Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Tue, 11 Oct 2022 11:11:23 +0100
Subject: [PATCH] EchoSrv: Remove $.ajax for loading scripts (#56678)

* user essentials mob! :trident:

lastFile:public/app/core/services/echo/backends/analytics/RudderstackBackend.ts

* user essentials mob! :trident:

lastFile:public/app/core/services/echo/backends/analytics/ApplicationInsightsBackend.ts

* user essentials mob! :trident:

Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../analytics/ApplicationInsightsBackend.ts   | 23 ++++++++-----------
 .../echo/backends/analytics/GA4Backend.ts     | 11 ++-------
 .../echo/backends/analytics/GABackend.ts      | 11 +++------
 .../backends/analytics/RudderstackBackend.ts  | 10 ++------
 public/app/core/services/echo/utils.ts        |  9 ++++++++
 5 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/public/app/core/services/echo/backends/analytics/ApplicationInsightsBackend.ts b/public/app/core/services/echo/backends/analytics/ApplicationInsightsBackend.ts
index 6430c22fd1b..3fae56b9b13 100644
--- a/public/app/core/services/echo/backends/analytics/ApplicationInsightsBackend.ts
+++ b/public/app/core/services/echo/backends/analytics/ApplicationInsightsBackend.ts
@@ -1,5 +1,3 @@
-import $ from 'jquery';
-
 import {
   EchoBackend,
   EchoEventType,
@@ -9,6 +7,8 @@ import {
   PageviewEchoEvent,
 } from '@grafana/runtime';
 
+import { loadScript } from '../../utils';
+
 interface ApplicationInsights {
   trackPageView: () => void;
   trackEvent: (event: { name: string; properties?: Record<string, any> }) => void;
@@ -31,18 +31,15 @@ export class ApplicationInsightsBackend implements EchoBackend<PageviewEchoEvent
   supportedEvents = [EchoEventType.Pageview, EchoEventType.Interaction];
 
   constructor(public options: ApplicationInsightsBackendOptions) {
-    $.ajax({
-      url: 'https://js.monitor.azure.com/scripts/b/ai.2.min.js',
-      dataType: 'script',
-      cache: true,
-    }).done(function () {
-      const applicationInsightsOpts = {
-        config: {
-          connectionString: options.connectionString,
-          endpointUrl: options.endpointUrl,
-        },
-      };
+    const applicationInsightsOpts = {
+      config: {
+        connectionString: options.connectionString,
+        endpointUrl: options.endpointUrl,
+      },
+    };
 
+    const url = 'https://js.monitor.azure.com/scripts/b/ai.2.min.js';
+    loadScript(url).then(() => {
       const init = new (window as any).Microsoft.ApplicationInsights.ApplicationInsights(applicationInsightsOpts);
       (window as any).applicationInsights = init.loadAppInsights();
     });
diff --git a/public/app/core/services/echo/backends/analytics/GA4Backend.ts b/public/app/core/services/echo/backends/analytics/GA4Backend.ts
index 15e118b786d..17b8f0f47f5 100644
--- a/public/app/core/services/echo/backends/analytics/GA4Backend.ts
+++ b/public/app/core/services/echo/backends/analytics/GA4Backend.ts
@@ -1,9 +1,7 @@
-import $ from 'jquery';
-
 import { CurrentUserDTO } from '@grafana/data';
 import { EchoBackend, EchoEventType, PageviewEchoEvent } from '@grafana/runtime';
 
-import { getUserIdentifier } from '../../utils';
+import { getUserIdentifier, loadScript } from '../../utils';
 
 declare global {
   interface Window {
@@ -22,12 +20,7 @@ export class GA4EchoBackend implements EchoBackend<PageviewEchoEvent, GA4EchoBac
 
   constructor(public options: GA4EchoBackendOptions) {
     const url = `https://www.googletagmanager.com/gtag/js?id=${options.googleAnalyticsId}`;
-
-    $.ajax({
-      url,
-      dataType: 'script',
-      cache: true,
-    });
+    loadScript(url);
 
     window.dataLayer = window.dataLayer || [];
     window.gtag = function gtag() {
diff --git a/public/app/core/services/echo/backends/analytics/GABackend.ts b/public/app/core/services/echo/backends/analytics/GABackend.ts
index dd65adf32d9..846068f6ea4 100644
--- a/public/app/core/services/echo/backends/analytics/GABackend.ts
+++ b/public/app/core/services/echo/backends/analytics/GABackend.ts
@@ -1,7 +1,7 @@
-import $ from 'jquery';
-
 import { EchoBackend, EchoEventType, PageviewEchoEvent } from '@grafana/runtime';
 
+import { loadScript } from '../../utils';
+
 export interface GAEchoBackendOptions {
   googleAnalyticsId: string;
   debug?: boolean;
@@ -13,12 +13,7 @@ export class GAEchoBackend implements EchoBackend<PageviewEchoEvent, GAEchoBacke
 
   constructor(public options: GAEchoBackendOptions) {
     const url = `https://www.google-analytics.com/analytics${options.debug ? '_debug' : ''}.js`;
-
-    $.ajax({
-      url,
-      dataType: 'script',
-      cache: true,
-    });
+    loadScript(url);
 
     const ga = (window.ga =
       window.ga ||
diff --git a/public/app/core/services/echo/backends/analytics/RudderstackBackend.ts b/public/app/core/services/echo/backends/analytics/RudderstackBackend.ts
index b169e3c862c..a5e1217b390 100644
--- a/public/app/core/services/echo/backends/analytics/RudderstackBackend.ts
+++ b/public/app/core/services/echo/backends/analytics/RudderstackBackend.ts
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import type { identify, load, page, track } from 'rudder-sdk-js'; // SDK is loaded dynamically from config, so we only import types from the SDK package
 
 import { CurrentUserDTO } from '@grafana/data';
@@ -11,7 +10,7 @@ import {
   PageviewEchoEvent,
 } from '@grafana/runtime';
 
-import { getUserIdentifier } from '../../utils';
+import { getUserIdentifier, loadScript } from '../../utils';
 
 interface Rudderstack {
   identify: typeof identify;
@@ -41,12 +40,7 @@ export class RudderstackBackend implements EchoBackend<PageviewEchoEvent, Rudder
 
   constructor(public options: RudderstackBackendOptions) {
     const url = options.sdkUrl || `https://cdn.rudderlabs.com/v1/rudder-analytics.min.js`;
-
-    $.ajax({
-      url,
-      dataType: 'script',
-      cache: true,
-    });
+    loadScript(url);
 
     const tempRudderstack = ((window as any).rudderanalytics = []);
 
diff --git a/public/app/core/services/echo/utils.ts b/public/app/core/services/echo/utils.ts
index a8a75d92953..3f0493e29e3 100644
--- a/public/app/core/services/echo/utils.ts
+++ b/public/app/core/services/echo/utils.ts
@@ -14,6 +14,15 @@ export function getUserIdentifier(user: CurrentUserDTO) {
   return user.email;
 }
 
+export function loadScript(url: string) {
+  return new Promise((resolve) => {
+    const script = document.createElement('script');
+    script.onload = resolve;
+    script.src = url;
+    document.head.appendChild(script);
+  });
+}
+
 /** @internal */
 export const echoLogger = createLogger('EchoSrv');
 export const echoLog = echoLogger.logger;