BC-5074 - Confirm before page unload

src/components/feature-board-file-element/upload/FileUpload.unit.ts

@@ -55,6 +55,18 @@ describe(FileUpload.name, () => {
 
 				expect(wrapper.text()).toContain(testSlot);
 			});
+
+			it("should not show notification on page unload", async () => {
+				setup();
+
+				const beforeUnloadEvent = new Event("beforeunload");
+				const preventDefaultSpy = jest.fn();
+
+				beforeUnloadEvent.preventDefault = preventDefaultSpy;
+				window.dispatchEvent(beforeUnloadEvent);
+
+				expect(preventDefaultSpy).not.toHaveBeenCalled();
+			});
 		});
 
 		describe("when file gets picked", () => {
@@ -82,6 +94,23 @@ describe(FileUpload.name, () => {
 				const progressLinear = wrapper.find("v-progress-linear-stub");
 				expect(progressLinear.exists()).toBe(true);
 			});
+
+			it("should show notification on page unload", async () => {
+				const { wrapper } = setup();
+
+				const filePicker = wrapper.findComponent(FilePicker);
+				expect(filePicker.exists()).toBe(true);
+
+				filePicker.vm.$emit("update:file", { fileName: "Test.jpg" });
+
+				const beforeUnloadEvent = new Event("beforeunload");
+				const preventDefaultSpy = jest.fn();
+
+				beforeUnloadEvent.preventDefault = preventDefaultSpy;
+				window.dispatchEvent(beforeUnloadEvent);
+
+				expect(preventDefaultSpy).toHaveBeenCalled();
+			});
 		});
 	});
 

src/components/feature-board-file-element/upload/FileUpload.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import { useSharedLastCreatedElement } from "@util-board";
-import { defineComponent, ref, watch } from "vue";
+import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import FilePicker from "./file-picker/FilePicker.vue";
 
 export default defineComponent({
@@ -42,6 +42,23 @@ export default defineComponent({
 			}
 		});
 
+		const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+			if (fileWasPicked.value) {
+				// Opens confirmation dialog in firefox
+				event.preventDefault();
+				// Opens confirmation dialog in chrome
+				event.returnValue = "";
+			}
+		};
+
+		onMounted(() => {
+			window.addEventListener("beforeunload", handleBeforeUnload);
+		});
+
+		onBeforeUnmount(() => {
+			window.removeEventListener("beforeunload", handleBeforeUnload);
+		});
+
 		const onFileSelect = async (file: File) => {
 			fileWasPicked.value = true;
 			emit("upload:file", file);