Add unsaved changes warning in series details

Adds a confirmation modal that warns
about unsaved changes to the metadata
and extended metadata tabs of the series details.

Based off of commit cd6b4e3.

Author: Arnei

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

@@ -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();
@@ -137,6 +140,7 @@ const SeriesDetails = ({
 						updateResource={updateSeriesMetadata}
 						editAccessRole="ROLE_UI_SERIES_DETAILS_METADATA_EDIT"
 						header={tabs[page].tabNameTranslation}
+						formikRef={formikRef}
 					/>
 				)}
 				{page === 1 && (
@@ -145,6 +149,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,10 @@
-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 { FormikProps } from "formik";
 
 /**
  * This component renders the modal for displaying series details
@@ -22,13 +23,20 @@ const SeriesDetailsModal = ({
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
+	const formikRef = useRef<FormikProps<any>>(null);
 
 	const confirmUnsaved = () => {
 		return window.confirm(t("CONFIRMATIONS.WARNINGS.UNSAVED_CHANGES"));
 	};
 
 	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()) {
 			setPolicyChanged(false);
 			dispatch(removeNotificationWizardForm());
 			return true;
@@ -47,6 +55,7 @@ const SeriesDetailsModal = ({
 				seriesId={seriesId}
 				policyChanged={policyChanged}
 				setPolicyChanged={(value) => setPolicyChanged(value)}
+				formikRef={formikRef}
 			/>
 		</Modal>
 	);