All metadata should be in the metadata step of the add event wizard

The “source” step of the add event wizard also contains metadata. This
doesn't really make sense since there is a whole step dedicated to
metadata. We should move “Start date” in there.

- The problem: This field should only be shown for a file upload. Not for a scheduled event.
- The solution: Make “Source” step 1 and metadata step 2. We then know
  if we need a start date once we are in the metadata tab.

This fixes #487

Author: lkiesow

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

@@ -5,17 +5,20 @@ import RenderField from "../../../shared/wizard/RenderField";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import RenderMultiField from "../../../shared/wizard/RenderMultiField";
 import { MetadataCatalog } from "../../../../slices/eventSlice";
+import { sourceMetadata } from "../../../../configs/sourceConfig";
 
 /**
  * This component renders the metadata page for new events and series in the wizards.
  */
 const NewMetadataPage = <T,>({
 	formik,
+  previousPage,
 	nextPage,
 	metadataFields,
 	header
 }: {
 	formik: FormikProps<T>,
+	previousPage: (values: T, twoPagesBack?: boolean) => void,
 	nextPage: (values: T) => void,
 	metadataFields: MetadataCatalog,
 	header: string
@@ -67,12 +70,41 @@ const NewMetadataPage = <T,>({
 								</table>
 							</div>
 						</div>
+              {formik.values.sourceMode === "UPLOAD" && (
+			<div className="obj list-obj">
+				<header className="no-expand">
+					{t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.RECORDING_METADATA")}
+				</header>
+				<div className="obj-container">
+					<table className="main-tbl">
+						<tbody>
+							{/* One row for each metadata field*/}
+							{sourceMetadata.UPLOAD && sourceMetadata.UPLOAD.metadata.map((field, key) => (
+								<tr key={key}>
+									<td>
+										<span>{t(field.label)}</span>
+										{field.required && <i className="required">*</i>}
+									</td>
+									<td className="editable">
+										<Field
+											name={field.id}
+											metadataField={field}
+											component={RenderField}
+										/>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			</div>
+              )}
 					</div>
 				</div>
 			</div>
 
 			{/* Button for navigation to next page */}
-			<WizardNavigationButtons isFirst formik={formik} nextPage={nextPage} />
+			<WizardNavigationButtons formik={formik} previousPage={previousPage} nextPage={nextPage} />
 		</>
 	);
 };

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

@@ -11,7 +11,6 @@ import {
 import { Field, FieldArray, FormikProps } from "formik";
 import RenderField from "../../../shared/wizard/RenderField";
 import { getRecordings } from "../../../../selectors/recordingSelectors";
-import { sourceMetadata } from "../../../../configs/sourceConfig";
 import { hours, minutes, weekdays } from "../../../../configs/modalConfig";
 import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import {
@@ -84,6 +83,7 @@ const NewSourcePage = <T extends RequiredFormProps>({
 		dispatch(fetchRecordings("inputs"));
 
 		// validate form because dependent default values need to be checked
+    console.info(formik);
 		formik.validateForm().then((r) => console.info(r));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
@@ -246,13 +246,6 @@ const NewSourcePage = <T extends RequiredFormProps>({
 				>
 					{t("WIZARD.NEXT_STEP")}
 				</button>
-				<button
-					className="cancel"
-					onClick={() => previousPage(formik.values, false)}
-					tabIndex={101}
-				>
-					{t("WIZARD.BACK")}
-				</button>
 			</footer>
 
 			<div className="btm-spacer" />
@@ -343,33 +336,6 @@ const Upload = ({ formik }) => {
 					</table>
 				</div>
 			</div>
-			<div className="obj list-obj">
-				<header className="no-expand">
-					{t("EVENTS.EVENTS.NEW.SOURCE.UPLOAD.RECORDING_METADATA")}
-				</header>
-				<div className="obj-container">
-					<table className="main-tbl">
-						<tbody>
-							{/* One row for each metadata field*/}
-							{sourceMetadata.UPLOAD && sourceMetadata.UPLOAD.metadata.map((field, key) => (
-								<tr key={key}>
-									<td>
-										<span>{t(field.label)}</span>
-										{field.required && <i className="required">*</i>}
-									</td>
-									<td className="editable">
-										<Field
-											name={field.id}
-											metadataField={field}
-											component={RenderField}
-										/>
-									</td>
-								</tr>
-							))}
-						</tbody>
-					</table>
-				</div>
-			</div>
 		</>
 	);
 };

src/components/events/partials/wizards/NewEventWizard.tsx

@@ -50,16 +50,6 @@ const NewEventWizard: React.FC<{
 
 	// Caption of steps used by Stepper
 	const steps = [
-		{
-			translation: "EVENTS.EVENTS.NEW.METADATA.CAPTION",
-			name: "metadata",
-			hidden: false,
-		},
-		{
-			translation: "EVENTS.EVENTS.DETAILS.TABS.EXTENDED-METADATA",
-			name: "metadata-extended",
-			hidden: !(!!extendedMetadata && extendedMetadata.length > 0),
-		},
 		{
 			translation: "EVENTS.EVENTS.NEW.SOURCE.CAPTION",
 			name: "source",
@@ -72,6 +62,16 @@ const NewEventWizard: React.FC<{
 				uploadAssetOptions.filter((asset) => asset.type !== "track").length ===
 				0,
 		},
+		{
+			translation: "EVENTS.EVENTS.NEW.METADATA.CAPTION",
+			name: "metadata",
+			hidden: false,
+		},
+		{
+			translation: "EVENTS.EVENTS.DETAILS.TABS.EXTENDED-METADATA",
+			name: "metadata-extended",
+			hidden: !(!!extendedMetadata && extendedMetadata.length > 0),
+		},
 		{
 			translation: "EVENTS.EVENTS.NEW.PROCESSING.CAPTION",
 			name: "processing",
@@ -151,33 +151,33 @@ const NewEventWizard: React.FC<{
 							/>
 							<div>
 								{page === 0 && (
-									<NewMetadataPage
+									<NewSourcePage
 										nextPage={nextPage}
 										formik={formik}
-										metadataFields={metadataFields}
-										header={steps[page].translation}
 									/>
 								)}
 								{page === 1 && (
-									<NewMetadataExtendedPage
+									<NewAssetUploadPage
 										previousPage={previousPage}
 										nextPage={nextPage}
 										formik={formik}
-										extendedMetadataFields={extendedMetadata}
 									/>
 								)}
 								{page === 2 && (
-									<NewSourcePage
+									<NewMetadataPage
 										previousPage={previousPage}
 										nextPage={nextPage}
 										formik={formik}
+										metadataFields={metadataFields}
+										header={steps[page].translation}
 									/>
 								)}
 								{page === 3 && (
-									<NewAssetUploadPage
+									<NewMetadataExtendedPage
 										previousPage={previousPage}
 										nextPage={nextPage}
 										formik={formik}
+										extendedMetadataFields={extendedMetadata}
 									/>
 								)}
 								{page === 4 && (

src/utils/validate.ts

@@ -9,10 +9,6 @@ today.setHours(0, 0, 0, 0);
 
 // Validation Schema used in new event wizard (each step has its own yup validation object)
 export const NewEventSchema = [
-	Yup.object().shape({
-		title: Yup.string().required("Required"),
-	}),
-	Yup.object().shape({}),
 	Yup.object().shape({
 		uploadAssetsTrack: Yup.array().when("sourceMode", {
 // @ts-expect-error TS(7006): Parameter 'value' implicitly has an 'any' type.
@@ -84,7 +80,11 @@ export const NewEventSchema = [
 		}),
 	}),
 	Yup.object().shape({
-		processingWorkflow: Yup.string().required("Required"),
+		title: Yup.string().required("Title is required"),
+	}),
+	Yup.object().shape({}),
+	Yup.object().shape({
+		processingWorkflow: Yup.string().required("Workflow is required"),
 	}),
 ];