Show unsaved changes warning on tab switch

When changing event/series metadata/acl in the event/series details
and not explicitly saving them, the changes are lost when switching to
another tab. This patch causes the browser to show a warning dialog
when a user tries to switch to a different tab while there are unsaved
changes.

Author: Arnei

src/components/events/partials/modals/EventDetails.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { hasAccess } from "../../../../utils/utils";
+import { confirmUnsaved, hasAccess } from "../../../../utils/utils";
 import EventDetailsCommentsTab from "../ModalTabsAndPages/EventDetailsCommentsTab";
 import EventDetailsAccessPolicyTab from "../ModalTabsAndPages/EventDetailsAccessPolicyTab";
 import EventDetailsWorkflowTab from "../ModalTabsAndPages/EventDetailsWorkflowTab";
@@ -219,8 +219,16 @@ const EventDetails = ({
 	];
 
 	const openTab = (tabNr: EventDetailsPage) => {
-		dispatch(removeNotificationWizardForm());
-		dispatch(openModalTab(tabNr, "entry", "entry"))
+		let isUnsavedChanges = false;
+		isUnsavedChanges = policyChanged;
+		if (formikRef.current && formikRef.current.dirty !== undefined && formikRef.current.dirty) {
+			isUnsavedChanges = true;
+		}
+
+		if (!isUnsavedChanges || confirmUnsaved(t)) {
+			dispatch(removeNotificationWizardForm());
+			dispatch(openModalTab(tabNr, "entry", "entry"))
+		}
 	};
 
 	return (

src/components/events/partials/modals/EventDetailsModal.tsx

@@ -7,6 +7,7 @@ import { getModalEvent } from "../../../../selectors/eventDetailsSelectors";
 import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlice";
 import { Modal } from "../../../shared/modals/Modal";
 import { FormikProps } from "formik";
+import { confirmUnsaved } from "../../../../utils/utils";
 
 /**
  * This component renders the modal for displaying event details
@@ -21,10 +22,6 @@ const EventDetailsModal = () => {
 
 	const event = useAppSelector(state => getModalEvent(state))!;
 
-	const confirmUnsaved = () => {
-		return window.confirm(t("CONFIRMATIONS.WARNINGS.UNSAVED_CHANGES"));
-	};
-
 	const hideModal = () => {
 		dispatch(setModalEvent(null));
 		dispatch(setShowModal(false));
@@ -37,7 +34,7 @@ const EventDetailsModal = () => {
 			isUnsavedChanges = true
 		}
 
-		if (!isUnsavedChanges || confirmUnsaved()) {
+		if (!isUnsavedChanges || confirmUnsaved(t)) {
 			setPolicyChanged(false);
 			dispatch(removeNotificationWizardForm());
 			hideModal();

src/components/events/partials/modals/SeriesDetails.tsx

@@ -11,7 +11,7 @@ import {
 	hasStatistics as seriesHasStatistics,
 } from "../../../../selectors/seriesDetailsSelectors";
 import { getOrgProperties, getUserInformation } from "../../../../selectors/userInfoSelectors";
-import { hasAccess } from "../../../../utils/utils";
+import { confirmUnsaved, hasAccess } from "../../../../utils/utils";
 import SeriesDetailsAccessTab from "../ModalTabsAndPages/SeriesDetailsAccessTab";
 import SeriesDetailsThemeTab from "../ModalTabsAndPages/SeriesDetailsThemeTab";
 import SeriesDetailsStatisticTab from "../ModalTabsAndPages/SeriesDetailsStatisticTab";
@@ -28,6 +28,7 @@ import DetailsTobiraTab from "../ModalTabsAndPages/DetailsTobiraTab";
 import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 import { removeNotificationWizardTobira } from "../../../../slices/notificationSlice";
 import { ParseKeys } from "i18next";
+import { FormikProps } from "formik";
 
 /**
  * This component manages the tabs of the series details modal
@@ -36,10 +37,12 @@ const SeriesDetails = ({
 	seriesId,
 	policyChanged,
 	setPolicyChanged,
+	formikRef,
 }: {
 	seriesId: string
 	policyChanged: boolean
 	setPolicyChanged: (policyChanged: boolean) => void
+	formikRef: React.RefObject<FormikProps<any> | null>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -110,7 +113,15 @@ const SeriesDetails = ({
 	];
 
 	const openTab = (tabNr: number) => {
-		setPage(tabNr);
+		let isUnsavedChanges = false;
+		isUnsavedChanges = policyChanged;
+		if (formikRef.current && formikRef.current.dirty !== undefined && formikRef.current.dirty) {
+			isUnsavedChanges = true;
+		}
+
+		if (!isUnsavedChanges || confirmUnsaved(t)) {
+			setPage(tabNr);
+		}
 	};
 
 	return (
@@ -136,6 +147,7 @@ const SeriesDetails = ({
 						metadata={[metadataFields]}
 						updateResource={updateSeriesMetadata}
 						editAccessRole="ROLE_UI_SERIES_DETAILS_METADATA_EDIT"
+						formikRef={formikRef}
 						header={tabs[page].tabNameTranslation}
 					/>
 				)}
@@ -145,6 +157,7 @@ const SeriesDetails = ({
 						metadata={extendedMetadata}
 						updateResource={updateExtendedSeriesMetadata}
 						editAccessRole="ROLE_UI_SERIES_DETAILS_METADATA_EDIT"
+						formikRef={formikRef}
 					/>
 				)}
 				{page === 2 && (

src/components/events/partials/modals/SeriesDetailsModal.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import SeriesDetails from "./SeriesDetails";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { useAppDispatch } from "../../../../store";
 import { Modal, ModalHandle } from "../../../shared/modals/Modal";
+import { confirmUnsaved } from "../../../../utils/utils";
+import { FormikProps } from "formik";
 
 /**
  * This component renders the modal for displaying series details
@@ -22,13 +24,16 @@ const SeriesDetailsModal = ({
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
-
-	const confirmUnsaved = () => {
-		return window.confirm(t("CONFIRMATIONS.WARNINGS.UNSAVED_CHANGES"));
-	};
+	const formikRef = useRef<FormikProps<any>>(null);
 
 	const close = () => {
-		if (!policyChanged || confirmUnsaved()) {
+		let isUnsavedChanges = false
+		isUnsavedChanges = policyChanged
+		if (formikRef.current && formikRef.current.dirty !== undefined && formikRef.current.dirty) {
+			isUnsavedChanges = true
+		}
+
+		if (!isUnsavedChanges || confirmUnsaved(t)) {
 			setPolicyChanged(false);
 			dispatch(removeNotificationWizardForm());
 			return true;
@@ -47,6 +52,7 @@ const SeriesDetailsModal = ({
 				seriesId={seriesId}
 				policyChanged={policyChanged}
 				setPolicyChanged={(value) => setPolicyChanged(value)}
+				formikRef={formikRef}
 			/>
 		</Modal>
 	);

src/utils/utils.ts

@@ -145,3 +145,10 @@ export const translateOverrideFallback = (asset: UploadOption, t: TFunction, suf
 
 	return result;
 }
+
+/**
+ * Have the browser show a warning dialog for unsaved changes
+ */
+export const confirmUnsaved = (t: TFunction) => {
+	return window.confirm(t("CONFIRMATIONS.WARNINGS.UNSAVED_CHANGES"));
+};