Merge branch 'release/2.23.0' into feature/dropdown-combobox

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

@@ -207,16 +207,13 @@ export default defineAppConfig({
         }
       },
       mapResultHooks: {
-        exampleMapResultsHook: (map, results, locationQuery) => {
-          if (!map || !results || !locationQuery) return
+        exampleMapResultsHook: (map, results) => {
+          if (!map || !results) return
 
           centerMap(
             map,
-            [
-              parseFloat(locationQuery?.center[0]),
-              parseFloat(locationQuery?.center[1])
-            ],
-            13,
+            [15809362.126037747, -4543542.166789566],
+            8,
             {},
             'popover'
           )

examples/nuxt-app/layers/map-features/components/global/test/TestMapShapeLayer.vue

@@ -26,6 +26,8 @@ const lgaShapeURL = computed(() => {
 
 const defaultStyleFn = (feature: Feature, style: Style) => {
   style.getFill().setColor([255, 255, 255, 0.5])
+
+  return style
 }
 
 const layerIdentifier = 'shapeLayer'

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
@@ -82,8 +82,8 @@ Feature: Custom collection map component
     Given 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"
     Given I visit the page "/map"
     And the map is loaded
-    When I click the map component at coordinates 606 424
-    When I wait 2 seconds
+    When I click the map component at coordinates 606 442
+    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
@@ -111,18 +111,19 @@ Feature: Custom collection map component
     And the map is loaded
     Then I click the map component at coordinates 545 385
     And I wait 1 seconds
-    Then I click the map component at coordinates 660 320
-    And I wait 2 seconds
+    Then I click the map component at coordinates 650 320
+    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"
-    Given I visit the page "/map?location[center]=15809362.126037747&location[center]=-4543542.166789566"
+    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 4 seconds
     Then the map matches the image snapshot "map-initial-location-results-hook"
 
   @mockserver

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

@@ -88,7 +88,7 @@ Feature: School buildings map
     Given the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/map-table/vsba/response-all" and status 200 as alias "searchReq"
     And I visit the page "/map"
     When the map is loaded
-    When I click the map component at coordinates 650 429
+    When I click the map component at coordinates 630 440
     When I wait 4 seconds
     Then the map matches the image snapshot "map-cluster-zoom"
 

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

@@ -57,7 +57,10 @@ Feature: Publication page
   Example: Publication print all
     Given the endpoint "/api/tide/publication-children" with query "?ids=4a6d9877-326a-4090-8f7d-51c79191c63b&ids=7f608818-51e5-4c42-831a-a51d46a41ff6&ids=3479556d-7daa-4bc4-985a-d0ec1d954713&ids=a805aea1-6b50-4327-b176-ff4468775ad6&ids=c17daa15-9ad8-412d-a049-aa1ef6c668c2&ids=f85fab41-8217-44c4-bb0d-29ab5bc2832c&ids=c83e001c-2429-4c87-a53c-62a96ee426c6&ids=d51a4112-fd63-42cb-91a6-c17057c25242&ids=095e703d-e8cc-4153-9cf4-13e8a4f095c9&ids=ad3fd4c8-60dc-4c0d-a55c-5137766a2056&ids=64d7c641-640d-46e9-9967-7ad49104d744&ids=463ebde6-f906-427e-adaa-e2c7dba9f875&ids=3218f7fa-e189-44a2-8fdb-fc750409c421&ids=c0bf3b7f-1819-4cdb-99e8-4fd50071adac&ids=bf8208e7-bbc7-40cf-b3c0-111e6caabd91&ids=e0ce9cb4-df4f-4ae9-84e6-b1589486cdc8&ids=03b2d101-d6d8-4e55-a3e4-cad2d08f625b&ids=181e7b7e-ad44-4451-843a-044d760aa18e&ids=9c4656a6-3294-4515-8a7e-e15cd32841b6&ids=fadb534c-9598-40d0-a211-ca4b8a7c140a&ids=556bcf1a-46d6-4565-87e5-79e1b4b31cc5&ids=133ddcfa-b7f7-431c-bc85-f59ba8f44eac&ids=ff6440cc-7605-4ff1-b8a1-f25a5797549f&ids=f197320e-e9e3-46c8-b402-43ddd409599a&ids=e6cdf8c8-c19a-419b-9bb1-22a0938bba58&ids=cf1bfe5d-929e-44e2-a542-18d8b9fcd234&ids=16ef10ae-d3e4-4217-9508-eb4981336a3e" returns fixture "/publication/sample-print-all" with status 200
     When I visit the print all page "/victorian-skills-plan-2023-implementation-update/print-all"
-    Then the in page navigation should include
+    Then the dataLayer should include the following events
+      | event       | page_title                                          |
+      | routeChange | Print - Victorian Skills Plan Implementation Update |
+    And the in page navigation should include
       | title                                                                     | url                                                                                                            |
       | The Victorian Skills Plan 2022 into 2023 actions and initiatives          | /victorian-skills-plan-2023-implementation-update/2022-victorian-skills-plan-actions-and-initiatives           |
       | Promoting post-secondary education skills and career pathways             | /victorian-skills-plan-2023-implementation-update/promoting-post-secondary-education-skills-and-career         |

examples/nuxt-app/test/features/site/search.feature

@@ -6,6 +6,9 @@ Feature: Site search
     Given the "/api/tide/search/**" network request is delayed by 500 milliseconds and stubbed with fixture "/site/search-response", status 200 and alias "siteSearchReq"
     When I visit the page "/search?q=demo"
     Then the search listing skeleton should display 10 items with the class "tide-search-result-skeleton"
+    And the dataLayer should include the following events
+      | event       | page_title | search_term |
+      | routeChange | Search     | demo        |
 
     When I wait 500 milliseconds
     Then the search listing page should have 5 results

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

@@ -16,3 +16,6 @@ Feature: Sitemap
       | Level 4 - Item 2 |
       | Level 2 - Item 2 |
       | Level 1 - Item 2 |
+    And the dataLayer should include the following events
+      | event       | page_title |
+      | routeChange | Sitemap    |

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)
+          }
+        }
+      }
+    })
+  }
+})