From 755481ef7ba08891b75611d78928f3c0c2fcfc0a Mon Sep 17 00:00:00 2001
From: Alex Saunders <acsauk@gmail.com>
Date: Tue, 3 Oct 2023 13:21:56 +0100
Subject: [PATCH] MLPAB-1147: Fix destructive changes dialog flakiness (#743)

---
 web/assets/data-loss-warning.js | 11 ++--
 web/assets/main.js              | 91 ++++++++++++++++++---------------
 2 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/web/assets/data-loss-warning.js b/web/assets/data-loss-warning.js
index e9a0354051..30c878fcf7 100644
--- a/web/assets/data-loss-warning.js
+++ b/web/assets/data-loss-warning.js
@@ -9,7 +9,6 @@ export class DataLossWarning {
         if (this.dialog && this.dialogOverlay && this.returnToTaskListButton) {
             this.formValuesOnPageLoad = this.getEncodedStringifiedFormValues()
             this.formValuesPriorToPageLoad = this.getFormValuesFromCookie()
-
             this.registerListeners()
         }
     }
@@ -60,10 +59,10 @@ export class DataLossWarning {
                 e.preventDefault()
             }
         })
+        document.getElementById('save-and-continue-btn').addEventListener('click', this.addFormValuesToCookie.bind(this))
         document.getElementById('return-to-tasklist-btn').addEventListener('click', this.toggleDialogVisibility.bind(this))
         document.getElementById('back-to-page-dialog-btn').addEventListener('click', this.toggleDialogVisibility.bind(this))
         document.getElementById('return-to-task-list-dialog-btn').addEventListener('click', this.toggleDialogVisibility.bind(this))
-        document.getElementById('save-and-continue-btn').addEventListener('click', () => { this.addFormValuesToCookie() })
     }
 
     handleTrapFocus(e) {
@@ -96,13 +95,13 @@ export class DataLossWarning {
 
     addFormValuesToCookie() {
         // so the cookie isn't available for longer than required
-        const tenSecondsFutureDate = new Date();
-        tenSecondsFutureDate.setTime(tenSecondsFutureDate.getTime() + 10)
+        const tenSecondsFutureDate = new Date()
+        tenSecondsFutureDate.setSeconds(tenSecondsFutureDate.getSeconds() + 10)
 
-        document.cookie = `formValues=${this.getEncodedStringifiedFormValues()}; expires=${tenSecondsFutureDate.toUTCString()}; SameSite=Lax; Secure`;
+        document.cookie = `formValues=${this.getEncodedStringifiedFormValues()}; expires=${tenSecondsFutureDate.toUTCString()}; SameSite=Lax; Secure`
     }
 
     getFormValuesFromCookie() {
-        return document.cookie.split("; ").find((row) => row.startsWith("formValues="))?.split("=")[1];
+        return document.cookie.split("; ").find((row) => row.startsWith("formValues="))?.split("=")[1]
     }
 }
diff --git a/web/assets/main.js b/web/assets/main.js
index 0cbc116a31..b3a3198a43 100644
--- a/web/assets/main.js
+++ b/web/assets/main.js
@@ -5,51 +5,60 @@ import $ from 'jquery';
 import { CrossServiceHeader } from './service-header';
 import { DataLossWarning } from './data-loss-warning';
 
-window.$ = $
+// Account for DOMContentLoaded firing before JS runs
+if (document.readyState !== "loading") {
+    init()
+} else {
+    document.addEventListener('DOMContentLoaded', init)
+}
 
-GOVUKFrontend.initAll();
-MOJFrontend.initAll();
+function init() {
+    window.$ = $
 
-const header = document.querySelector("[data-module='one-login-header']");
-if (header) {
-    new CrossServiceHeader(header).init();
-}
+    GOVUKFrontend.initAll();
+    MOJFrontend.initAll();
 
-new DataLossWarning().init()
+    const header = document.querySelector("[data-module='one-login-header']");
+    if (header) {
+        new CrossServiceHeader(header).init();
+    }
 
-const backLink = document.querySelector('.govuk-back-link');
-if (backLink) {
-    backLink.addEventListener('click', function (e) {
-        window.history.back();
-        e.preventDefault();
-    }, false);
-}
+    new DataLossWarning().init()
 
-function metaContent(name) {
-    return document.querySelector(`meta[name=${name}]`).content;
-}
+    const backLink = document.querySelector('.govuk-back-link');
+    if (backLink) {
+        backLink.addEventListener('click', function (e) {
+            window.history.back();
+            e.preventDefault();
+        }, false);
+    }
+
+    function metaContent(name) {
+        return document.querySelector(`meta[name=${name}]`).content;
+    }
+
+    try {
+        const config = {
+            sessionSampleRate: 1,
+            guestRoleArn: metaContent('rum-guest-role-arn'),
+            identityPoolId: metaContent('rum-identity-pool-id'),
+            endpoint: metaContent('rum-endpoint'),
+            telemetries: ["http", "errors", "performance"],
+            allowCookies: true,
+            enableXRay: true
+        };
+
+        const APPLICATION_ID = metaContent('rum-application-id');
+        const APPLICATION_VERSION = '1.0.0';
+        const APPLICATION_REGION = metaContent('rum-application-region');
 
-try {
-    const config = {
-        sessionSampleRate: 1,
-        guestRoleArn: metaContent('rum-guest-role-arn'),
-        identityPoolId: metaContent('rum-identity-pool-id'),
-        endpoint: metaContent('rum-endpoint'),
-        telemetries: ["http", "errors", "performance"],
-        allowCookies: true,
-        enableXRay: true
-    };
-
-    const APPLICATION_ID = metaContent('rum-application-id');
-    const APPLICATION_VERSION = '1.0.0';
-    const APPLICATION_REGION = metaContent('rum-application-region');
-
-    const awsRum = new AwsRum(
-        APPLICATION_ID,
-        APPLICATION_VERSION,
-        APPLICATION_REGION,
-        config
-    );
-} catch (error) {
-    // Ignore errors thrown during CloudWatch RUM web client initialization
+        const awsRum = new AwsRum(
+            APPLICATION_ID,
+            APPLICATION_VERSION,
+            APPLICATION_REGION,
+            config
+        );
+    } catch (error) {
+        // Ignore errors thrown during CloudWatch RUM web client initialization
+    }
 }