Merge branch 'release/2.23.0' of https://github.com/dpc-sdp/ripple-fr…

…amework into feature/SD-403-decoupled-map-search-stretch-image

# Conflicts:
#	packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v2.22.0
+
+[compare changes](https://github.com/dpc-sdp/ripple-framework/compare/2.22.0...v2.22.0)
+
 ## v2.21.0
 
 [compare changes](https://github.com/dpc-sdp/ripple-framework/compare/2.21.0...v2.21.0)

examples/nuxt-app/app.config.ts

@@ -210,9 +210,13 @@ export default defineAppConfig({
         exampleMapResultsHook: (map, results) => {
           if (!map || !results) return
 
-          map.getView().animate({
-            zoom: 8
-          })
+          centerMap(
+            map,
+            [15809362.126037747, -4543542.166789566],
+            8,
+            {},
+            'popover'
+          )
         }
       }
     }

examples/nuxt-app/test/features/maps/maps.feature

@@ -33,7 +33,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 517 242
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-popover"
 
   @mockserver
@@ -45,7 +45,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 517 242
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-sidebar"
 
   @mockserver
@@ -58,7 +58,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 663 242
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-popover-with-sidepanel"
 
   @mockserver
@@ -71,7 +71,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 663 242
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-sidebar-with-sidepanel"
 
   @mockserver
@@ -83,7 +83,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     When I click the map component at coordinates 606 442
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-popup-type-sidebar-with-sidepanel-double-pin"
 
   @mockserver
@@ -96,7 +96,7 @@ Feature: Custom collection map component
     Given I visit the page "/map"
     And the map is loaded
     Given I click the side panel item with text "Single Pin Test"
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-sidepanel-item-click"
 
   @mockserver
@@ -112,18 +112,18 @@ Feature: Custom collection map component
     Then I click the map component at coordinates 545 385
     And I wait 1 seconds
     Then I click the map component at coordinates 650 320
-    And I wait 2 seconds
+    And I wait 4 seconds
     Then the map matches the image snapshot "map-popover-max-zoom-cluster"
 
   @mockserver
   Scenario: Map zooms to intended initial location with results hook
     Given I load the page fixture with "/maps/basic-page"
     And a custom map results hook called "exampleMapResultsHook" is used
     Then the page endpoint for path "/map" returns the loaded fixture
-    And the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/maps/simple-map-results" and status 200 as alias "searchReq"
+    And the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is delayed by 500 milliseconds and stubbed with fixture "/maps/simple-map-results", status 200 and alias "searchReq"
     Given I visit the page "/map"
     And the map is loaded
-    When I wait 2 seconds
+    When I wait 4 seconds
     Then the map matches the image snapshot "map-initial-location-results-hook"
 
   @mockserver

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.21.0",
+  "version": "2.22.0",
   "npmClient": "pnpm",
   "exact": true,
   "command": {

packages/eslint-config-ripple/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/eslint-config-ripple",
   "description": "ESLint config for Ripple projects",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "index.js",

packages/nuxt-ripple-analytics/app.config.ts

@@ -15,6 +15,13 @@ export default defineAppConfig({
   ripple: {
     analytics: {
       eventListeners
+    },
+    featureFlags: {
+      newRelicBrowserBeacon: 'bam.nr-data.net',
+      newRelicBrowserJSErrorsEnabled: true,
+      newRelicBrowserCookiesEnabled: false,
+      newRelicBrowserDistributedTracingEnabled: false,
+      newRelicBrowserAjaxDenyList: ['bam.nr-data.net']
     }
   }
 })

packages/nuxt-ripple-analytics/composables/useNewRelicBrowserAgent.ts

@@ -0,0 +1,63 @@
+import type { IRplFeatureFlags } from '@dpc-sdp/ripple-tide-api/types'
+
+export default () => {
+  const config = useRuntimeConfig()
+  const browserAgentConfig = config?.public?.newRelic?.browser
+
+  if (!browserAgentConfig.enabled) {
+    return
+  }
+
+  const featureFlags: IRplFeatureFlags = inject('featureFlags', {
+    newRelicBrowserBeacon: 'bam.nr-data.net',
+    newRelicBrowserJSErrorsEnabled: true,
+    newRelicBrowserCookiesEnabled: false,
+    newRelicBrowserDistributedTracingEnabled: false,
+    newRelicBrowserAjaxDenyList: ['bam.nr-data.net']
+  })
+
+  // Scripts from new relic need to be dynamically imported, otherwise they will throw an error
+  const initBrowserAgent = async () => {
+    // Error module has to be manually added when using new relic via npm
+    const { JSErrors } = await import(
+      '@newrelic/browser-agent/features/jserrors'
+    )
+
+    const options = {
+      info: {
+        beacon: featureFlags.newRelicBrowserBeacon,
+        licenseKey: browserAgentConfig.licenseKey,
+        applicationID: browserAgentConfig.applicationID,
+        sa: 1 // 'sa' stands for 'standalone' https://github.com/newrelic/newrelic-browser-agent/blob/bbf414c0d6a483141f32e2dd31b1f8a23ad1dda5/src/features/logging/aggregate/index.js#L100
+      },
+      init: {
+        distributed_tracing: {
+          enabled: featureFlags.newRelicBrowserDistributedTracingEnabled
+        },
+        privacy: {
+          cookies_enabled: featureFlags.newRelicBrowserCookiesEnabled
+        },
+        jserrors: { enabled: featureFlags.newRelicBrowserJSErrorsEnabled },
+        ajax: { deny_list: featureFlags.newRelicBrowserAjaxDenyList }
+      },
+      loader_config: {
+        accountID: browserAgentConfig.accountID,
+        trustKey: browserAgentConfig.trustKey,
+        agentID: browserAgentConfig.agentID,
+        licenseKey: browserAgentConfig.licenseKey,
+        applicationID: browserAgentConfig.applicationID
+      },
+      features: [JSErrors]
+    }
+
+    const { BrowserAgent } = await import(
+      '@newrelic/browser-agent/loaders/browser-agent'
+    )
+
+    new BrowserAgent(options)
+  }
+
+  if (process.client) {
+    initBrowserAgent()
+  }
+}

packages/nuxt-ripple-analytics/nuxt.config.ts

@@ -7,6 +7,16 @@ export default defineNuxtConfig({
         analytics: {
           GTM: 'GTM-KF8NCW2'
         }
+      },
+      newRelic: {
+        browser: {
+          enabled: false,
+          accountID: '',
+          trustKey: '',
+          agentID: '',
+          licenseKey: '',
+          applicationID: ''
+        }
       }
     }
   }

packages/nuxt-ripple-analytics/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-analytics",
   "description": "Nuxt module for handling event tracking.",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@dpc-sdp/ripple-ui-core": "workspace:*",
-    "@gtm-support/core": "^2.0.0"
+    "@gtm-support/core": "^2.0.0",
+    "@newrelic/browser-agent": "^1.273.0"
   },
   "devDependencies": {
     "@dpc-sdp/nuxt-ripple": "workspace:*",

packages/nuxt-ripple-analytics/plugins/newRelicBrowser.ts

@@ -0,0 +1,29 @@
+import { defineNuxtPlugin } from '#app'
+import trackError from '../utils/trackError'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  /* @ts-ignore process is extended by webpack */
+  if (process.client) {
+    nuxtApp.vueApp.use({
+      install(app: any) {
+        useNewRelicBrowserAgent()
+
+        const existingErrorHandler = app.config.errorHandler
+
+        // Catch all vue errors
+        app.config.errorHandler = (error: Error) => {
+          console.error(error)
+          trackError(error)
+
+          // Allow multiple error handlers to run
+          if (
+            existingErrorHandler &&
+            typeof existingErrorHandler === 'function'
+          ) {
+            existingErrorHandler(error)
+          }
+        }
+      }
+    })
+  }
+})

packages/nuxt-ripple-analytics/utils/trackError.ts

@@ -0,0 +1,15 @@
+declare global {
+  interface Window {
+    newrelic?: {
+      noticeError: (error: any) => void
+    }
+  }
+}
+
+const trackError = (error: any) => {
+  if (window?.newrelic?.noticeError) {
+    window.newrelic.noticeError(error)
+  }
+}
+
+export default trackError

packages/nuxt-ripple-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-cli",
   "description": "A CLI for simplifying common setup and scaffolding tasks",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./dist/index.js",

packages/nuxt-ripple-preview/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dpc-sdp/nuxt-ripple-preview",
   "description": "Adds support for drupal preview links in Ripple frontend sites",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple/components/TideAlerts.vue

@@ -71,6 +71,7 @@ const filteredAlerts = computed(() => {
       return !dismissedIds.includes(alert.alertId)
     })
   } catch (e) {
+    trackError(e)
     console.error(
       'Something went wrong when trying to get dismissed alerts cookie'
     )