Merge branch 'r/17.x' into r/18.x

Author: KatrinIhler

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

@@ -306,7 +306,7 @@ const EventDetailsSchedulingTab = ({
 															dateFormat="P"
 															popperClassName="datepicker-custom"
 															className="datepicker-custom-input"
-															portalId="root"
+															wrapperClassName="datepicker-custom-wrapper"
 															locale={currentLanguage?.dateLocale}
 															strictParsing
 														/>

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

@@ -24,7 +24,7 @@ import ModalContentTable from "../../../shared/modals/ModalContentTable";
  * This component renders the access page for new events and series in the wizards.
  */
 interface RequiredFormProps {
-	isPartOf: string,
+	'dublincore/episode_isPartOf': string,
 	policies: TransformedAcl[],
 	aclTemplate: string,
 	// theme: string,
@@ -76,14 +76,15 @@ const NewAccessPage = <T extends RequiredFormProps>({
 
 	// If we have to use series ACL, fetch it
 	useEffect(() => {
-		if (initEventAclWithSeriesAcl && formik.values.isPartOf) {
-			dispatch(fetchSeriesDetailsAcls(formik.values.isPartOf));
+		if (initEventAclWithSeriesAcl && formik.values['dublincore/episode_isPartOf']) {
+			dispatch(fetchSeriesDetailsAcls(formik.values['dublincore/episode_isPartOf']));
 		}
-	}, [formik.values.isPartOf, initEventAclWithSeriesAcl, dispatch]);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [formik.values['dublincore/episode_isPartOf'], initEventAclWithSeriesAcl, dispatch]);
 
 	// If we have to use series ACL, overwrite existing rules
 	useEffect(() => {
-		if (initEventAclWithSeriesAcl && formik.values.isPartOf && seriesAcl) {
+		if (initEventAclWithSeriesAcl && formik.values['dublincore/episode_isPartOf'] && seriesAcl) {
 			formik.setFieldValue("acls", seriesAcl);
 		}
 	// eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -322,7 +322,8 @@ const Upload = <T extends RequiredFormPropsUpload>({
 							{/* One row for each metadata field*/}
 							{sourceMetadata.UPLOAD && sourceMetadata.UPLOAD.metadata.map((field, key) => (
 								<tr key={key}>
-									<td>
+									{/* Set fixed width to prevent date picker from opening twice */}
+									<td style={{ width: "20%" }}>
 										<span>{t(field.label as ParseKeys)}</span>
 										{field.required && <i className="required">*</i>}
 									</td>
@@ -427,7 +428,7 @@ const Schedule = <T extends {
 									dateFormat="P"
 									popperClassName="datepicker-custom"
 									className="datepicker-custom-input"
-									portalId="root"
+									wrapperClassName="datepicker-custom-wrapper"
 									locale={currentLanguage?.dateLocale}
 									strictParsing
 								/>
@@ -458,7 +459,7 @@ const Schedule = <T extends {
 											dateFormat="P"
 											popperClassName="datepicker-custom"
 											className="datepicker-custom-input"
-											portalId="root"
+											wrapperClassName="datepicker-custom-wrapper"
 											locale={currentLanguage?.dateLocale}
 											strictParsing
 										/>

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";
@@ -218,8 +218,16 @@ const EventDetails = ({
 	];
 
 	const openTab = (tabNr: EventDetailsPage) => {
-		dispatch(removeNotificationWizardForm());
-		dispatch(openModalTab(tabNr, "workflow-details", "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, "workflow-details", "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";
@@ -113,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 (
@@ -139,6 +147,7 @@ const SeriesDetails = ({
 						metadata={[metadataFields]}
 						updateResource={updateSeriesMetadata}
 						editAccessRole="ROLE_UI_SERIES_DETAILS_METADATA_EDIT"
+						formikRef={formikRef}
 						header={tabs[page].tabNameTranslation}
 						formikRef={formikRef}
 					/>

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

@@ -4,6 +4,7 @@ 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";
 
 /**
@@ -25,18 +26,14 @@ const SeriesDetailsModal = ({
 	const [policyChanged, setPolicyChanged] = useState(false);
 	const formikRef = useRef<FormikProps<any>>(null);
 
-	const confirmUnsaved = () => {
-		return window.confirm(t("CONFIRMATIONS.WARNINGS.UNSAVED_CHANGES"));
-	};
-
 	const close = () => {
 		let isUnsavedChanges = false;
 		isUnsavedChanges = policyChanged;
 		if (formikRef.current && formikRef.current.dirty !== undefined && formikRef.current.dirty) {
 			isUnsavedChanges = true;
 		}
 
-		if (!isUnsavedChanges || confirmUnsaved()) {
+		if (!isUnsavedChanges || confirmUnsaved(t)) {
 			setPolicyChanged(false);
 			dispatch(removeNotificationWizardForm());
 			return true;

src/utils/utils.ts

@@ -146,4 +146,11 @@ 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"));
 };