Merge branch 'main' into unused-stuff

Author: JulianKniephoff

package-lock.json

@@ -35,6 +35,7 @@
     "react-redux": "^9.2.0",
     "react-router": "^7.4.1",
     "react-select": "^5.10.1",
+    "react-textarea-autosize": "^8.5.7",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^3.1.0",
@@ -69,7 +70,6 @@
     "@vitejs/plugin-react-swc": "^3.8.1",
     "eslint": "^9.23.0",
     "prop-types": "^15.8.1",
-    "rollup-preserve-directives": "^1.1.3",
     "sass": "^1.86.1",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.29.0",

package.json

@@ -19,6 +19,10 @@ import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButt
 import { ParseKeys } from "i18next";
 import ModalContentTable from "../../../shared/modals/ModalContentTable";
 
+type InitialValues = {
+	[key: string]: string | string[];
+}
+
 /**
  * This component renders metadata details of a certain event or series
  */
@@ -27,6 +31,7 @@ const DetailsMetadataTab = ({
 	metadata,
 	updateResource,
 	editAccessRole,
+	formikRef,
 	header,
 }: {
 	resourceId: string,
@@ -37,6 +42,7 @@ const DetailsMetadataTab = ({
 		catalog: MetadataCatalog;
 	}, any> //(id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
 	editAccessRole: string,
+	formikRef?: React.RefObject<FormikProps<InitialValues> | null>
 	header?: ParseKeys
 }) => {
 	const { t } = useTranslation();
@@ -81,11 +87,12 @@ const DetailsMetadataTab = ({
 					metadata.length > 0 &&
 					metadata.map((catalog, key) => (
 						// initialize form
-						<Formik
+						<Formik<InitialValues>
 							key={key}
 							enableReinitialize
 							initialValues={getInitialValues(catalog)}
 							onSubmit={(values) => handleSubmit(values, catalog)}
+							innerRef={formikRef}
 						>
 							{(formik) => (
 								/* Render table for each metadata catalog */
@@ -127,13 +134,15 @@ const DetailsMetadataTab = ({
 																			name={field.id}
 																			fieldInfo={field}
 																			showCheck
+																			isFirstField={index === 0}
 																			component={RenderMultiField}
 																		/>
 																	) : (
 																		<Field
 																			name={field.id}
 																			metadataField={field}
 																			showCheck
+																			isFirstField={index === 0}
 																			component={RenderField}
 																		/>
 																	)}

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

@@ -54,13 +54,28 @@ import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts";
 import { ParseKeys } from "i18next";
 import ModalContentTable from "../../../shared/modals/ModalContentTable";
 
-/**../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> | null>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -234,10 +249,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/EventDetailsSchedulingTab.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Formik } from "formik";
+import { Formik, FormikProps } from "formik";
 import {
 	deletingWorkflow as getDeletingWorkflow,
 	getBaseWorkflow,
@@ -32,13 +32,22 @@ import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 import { formatWorkflowsForDropdown } from "../../../../utils/dropDownUtils";
 import { ParseKeys } from "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> | null>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -280,10 +289,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/ModalTabsAndPages/EventDetailsWorkflowTab.tsx

@@ -30,12 +30,6 @@ const NewAssetUploadPage = <T extends RequiredFormProps>({
 
 	const uploadAssetOptions = useAppSelector(state => getAssetUploadOptions(state));
 
-	// if user not chose upload in step before, the skip this step
-	if (formik.values.sourceMode !== "UPLOAD") {
-		nextPage(formik.values);
-		return null;
-	}
-
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>, assetId: string) => {
 		if (e.target.files) {
 			if (e.target.files.length === 0) {

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

@@ -45,6 +45,7 @@ import {
 } from "../../../../slices/eventDetailsSlice";
 import { addNotification, removeNotificationByKey, removeNotificationWizardForm, removeNotificationWizardTobira } from "../../../../slices/notificationSlice";
 import DetailsTobiraTab from "../ModalTabsAndPages/DetailsTobiraTab";
+import { FormikProps } from "formik";
 import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 import { unwrapResult } from "@reduxjs/toolkit";
@@ -73,10 +74,12 @@ const EventDetails = ({
 	eventId,
 	policyChanged,
 	setPolicyChanged,
+	formikRef,
 }: {
 	eventId: string,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
+	formikRef: React.RefObject<FormikProps<any> | null>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -241,6 +244,7 @@ const EventDetails = ({
 						metadata={[metadata]}
 						updateResource={updateMetadata}
 						editAccessRole="ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"
+						formikRef={formikRef}
 						header={tabs[page].bodyHeaderTranslation}
 					/>
 				)}
@@ -250,6 +254,7 @@ const EventDetails = ({
 						metadata={extendedMetadata}
 						updateResource={updateExtendedMetadata}
 						editAccessRole="ROLE_UI_EVENTS_DETAILS_METADATA_EDIT"
+						formikRef={formikRef}
 					/>
 				)}
 				{page === EventDetailsPage.Publication && <EventDetailsPublicationTab eventId={eventId} />}
@@ -259,12 +264,16 @@ const EventDetails = ({
 					/>
 				)}
 				{page === EventDetailsPage.Scheduling && !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/EventDetails.tsx

@@ -6,6 +6,7 @@ import { removeNotificationWizardForm } from "../../../../slices/notificationSli
 import { getModalEvent } from "../../../../selectors/eventDetailsSelectors";
 import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlice";
 import { Modal } from "../../../shared/modals/Modal";
+import { FormikProps } from "formik";
 
 /**
  * This component renders the modal for displaying event details
@@ -16,6 +17,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))!;
 
@@ -29,7 +31,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();
@@ -49,6 +57,7 @@ const EventDetailsModal = () => {
 				eventId={event.id}
 				policyChanged={policyChanged}
 				setPolicyChanged={(value) => setPolicyChanged(value)}
+				formikRef={formikRef}
 			/>
 		</Modal>
 	);

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

@@ -128,6 +128,10 @@ const NewEventWizard: React.FC<{
 		let newPage = page;
 		do {
 			newPage = newPage + 1;
+			// Skip asset upload step when scheduling
+			if (steps[newPage].name === "upload-asset" && values.sourceMode !== "UPLOAD") {
+				newPage = newPage + 1;
+			}
 		} while(steps[newPage] && steps[newPage].hidden);
 		if (steps[newPage]) {
 			setPage(newPage)
@@ -140,6 +144,10 @@ const NewEventWizard: React.FC<{
 		let newPage = page;
 		do {
 			newPage = newPage - 1;
+			// Skip asset upload step when scheduling
+			if (steps[newPage].name === "upload-asset" && values.sourceMode !== "UPLOAD") {
+				newPage = newPage - 1;
+			}
 		} while(steps[newPage] && steps[newPage].hidden);
 		if (steps[newPage]) {
 			setPage(newPage)