Add unsaved changes warning in event details

src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx

@@ -17,6 +17,10 @@ import { AsyncThunk } from "@reduxjs/toolkit";
 import RenderDate from "../../../shared/RenderDate";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 
+type InitialValues = {
+	[key: string]: string | string[];
+}
+
 /**
  * This component renders metadata details of a certain event or series
  */
@@ -25,6 +29,7 @@ const DetailsMetadataTab = ({
 	metadata,
 	updateResource,
 	editAccessRole,
+	formikRef,
 	header,
 }: {
 	resourceId: string,
@@ -35,6 +40,7 @@ const DetailsMetadataTab = ({
 		catalog: MetadataCatalog;
 	}, any> //(id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
 	editAccessRole: string,
+	formikRef?: React.RefObject<FormikProps<InitialValues>>
 	header?: string
 }) => {
 	const { t } = useTranslation();
@@ -82,10 +88,11 @@ const DetailsMetadataTab = ({
 							metadata.length > 0 &&
 							metadata.map((catalog, key) => (
 								// initialize form
-								<Formik
+								<Formik<InitialValues>
 									enableReinitialize
 									initialValues={getInitialValues(catalog)}
 									onSubmit={(values) => handleSubmit(values, catalog)}
+									innerRef={formikRef}
 								>
 									{(formik) => (
 										/* Render table for each metadata catalog */

src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx

@@ -52,13 +52,28 @@ import SchedulingLocation from "../wizards/scheduling/SchedulingLocation";
 import SchedulingInputs from "../wizards/scheduling/SchedulingInputs";
 import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts";
 
-/**../wizards/scheduling/SchedulingTime
+export type InitialValues = {
+	scheduleStartDate: string;
+	scheduleStartHour: string;
+	scheduleStartMinute: string;
+	scheduleDurationHours: string;
+	scheduleDurationMinutes: string;
+	scheduleEndDate: string;
+	scheduleEndHour: string;
+	scheduleEndMinute: string;
+	captureAgent: string;
+	inputs: string[];
+}
+
+/**
  * This component manages the main assets tab of event details modal
  */
 const EventDetailsSchedulingTab = ({
 	eventId,
+	formikRef
 }: {
 	eventId: string,
+	formikRef?: React.RefObject<FormikProps<InitialValues>>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -229,10 +244,11 @@ const EventDetailsSchedulingTab = ({
 						/* Scheduling configuration */
 						hasSchedulingProperties && (
 						/* Initialize form */
-							<Formik
+							<Formik<InitialValues>
 								enableReinitialize
 								initialValues={getInitialValues()}
 								onSubmit={(values) => submitForm(values).then((r) => {})}
+								innerRef={formikRef}
 							>
 								{(formik) => (
 									<div className="obj tbl-details">

src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Formik } from "formik";
+import { Formik, FormikProps } from "formik";
 import {
 	deletingWorkflow as getDeletingWorkflow,
 	getBaseWorkflow,
@@ -30,13 +30,22 @@ import { Tooltip } from "../../../shared/Tooltip";
 import { WorkflowTabHierarchy } from "../modals/EventDetails";
 import { useTranslation } from "react-i18next";
 
+type InitialValues = {
+	workflowDefinition: string;
+	configuration: {
+			[key: string]: any;
+	} | undefined;
+}
+
 /**
  * This component manages the workflows tab of the event details modal
  */
 const EventDetailsWorkflowTab = ({
 	eventId,
+	formikRef,
 }: {
 	eventId: string,
+	formikRef?: React.RefObject<FormikProps<InitialValues>>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -286,10 +295,11 @@ const EventDetailsWorkflowTab = ({
 
 							{workflows.scheduling &&
 								(isLoading || (
-									<Formik
+									<Formik<InitialValues>
 										initialValues={setInitialValues()}
 										enableReinitialize
 										onSubmit={(values) => handleSubmit(values)}
+										innerRef={formikRef}
 									>
 										{(formik) => (
 											<div className="obj list-obj">

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

@@ -45,6 +45,7 @@ import {
 } from "../../../../slices/eventDetailsSlice";
 import { addNotification, removeNotificationByKey, removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import DetailsTobiraTab from "../ModalTabsAndPages/DetailsTobiraTab";
+import { FormikProps } from "formik";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 import { unwrapResult } from "@reduxjs/toolkit";
 
@@ -72,11 +73,13 @@ const EventDetails = ({
 	close,
 	policyChanged,
 	setPolicyChanged,
+	formikRef,
 }: {
 	eventId: string,
 	close?: () => void,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
+	formikRef: React.RefObject<FormikProps<any>>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -233,6 +236,7 @@ const EventDetails = ({
 						metadata={[metadata]}
 						updateResource={updateMetadata}
 						editAccessRole="ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"
+						formikRef={formikRef}
 						header={tabs[page].bodyHeaderTranslation ?? ""}
 					/>
 				)}
@@ -242,6 +246,7 @@ const EventDetails = ({
 						metadata={extendedMetadata}
 						updateResource={updateExtendedMetadata}
 						editAccessRole="ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"
+						formikRef={formikRef}
 					/>
 				)}
 				{page === 2 && <EventDetailsPublicationTab eventId={eventId} />}
@@ -251,12 +256,16 @@ const EventDetails = ({
 					/>
 				)}
 				{page === 4 && !isLoadingScheduling && (
-					<EventDetailsSchedulingTab eventId={eventId} />
+					<EventDetailsSchedulingTab
+					eventId={eventId}
+					formikRef={formikRef}
+					/>
 				)}
 				{page === EventDetailsPage.Workflow &&
 					((workflowTabHierarchy === "entry" && (
 						<EventDetailsWorkflowTab
 							eventId={eventId}
+							formikRef={formikRef}
 						/>
 					)) ||
 						(workflowTabHierarchy === "workflow-details" && (

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

@@ -6,6 +6,7 @@ import { removeNotificationWizardForm } from "../../../../slices/notificationSli
 import { getModalEvent } from "../../../../selectors/eventDetailsSelectors";
 import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlice";
 import { Modal, ModalHandle } from "../../../shared/modals/Modal";
+import { FormikProps } from "formik";
 
 /**
  * This component renders the modal for displaying event details
@@ -17,6 +18,7 @@ const EventDetailsModal = () => {
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
+	const formikRef = useRef<FormikProps<any>>(null);
 
 	const event = useAppSelector(state => getModalEvent(state))!;
 
@@ -30,7 +32,13 @@ const EventDetailsModal = () => {
 	};
 
 	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());
 			hideModal();
@@ -51,6 +59,7 @@ const EventDetailsModal = () => {
 				eventId={event.id}
 				policyChanged={policyChanged}
 				setPolicyChanged={(value) => setPolicyChanged(value)}
+				formikRef={formikRef}
 			/>
 		</Modal>
 	);