Avoid rendering "Invalid date"

We've got multiple issues with people complaining about
"Invalid date". Often enough, that string is simply rendered
because there (rightly) is no date available. Expected behaviour
is to render the empty string, so this does that in a bunch of places.

src/components/events/partials/EventsDateCell.tsx

@@ -6,6 +6,7 @@ import { getFilters } from "../../../selectors/tableFilterSelectors";
 import { connect } from "react-redux";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 /**
  * This component renders the start date cells of events in the table view
@@ -39,7 +40,7 @@ const EventsDateCell = ({
 			title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}
 			onClick={() => addFilter(row.date)}
 		>
-			{t("dateFormats.date.short", { date: new Date(row.date) })}
+			{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
 		</button>
 	);
 };

src/components/events/partials/EventsTechnicalDateCell.tsx

@@ -6,6 +6,7 @@ import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { connect } from "react-redux";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 /**
  * This component renders the technical date cells of events in the table view
@@ -40,7 +41,7 @@ const EventsTechnicalDateCell = ({
 // @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
 			onClick={() => addFilter()}
 		>
-			{t("dateFormats.date.short", { date: new Date(row.technical_start) })}
+			{t("dateFormats.date.short", { date: renderValidDate(row.technical_start) })}
 		</button>
 	);
 };

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

@@ -17,6 +17,7 @@ import {
 	deleteComment as deleteOneComment,
 	deleteCommentReply,
 } from "../../../../slices/eventDetailsSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the comment tab of the event details modal
@@ -133,7 +134,7 @@ const EventDetailsCommentsTab = ({
 											{/* details about the comment */}
 											<div className="date">
 												{t("dateFormats.dateTime.short", {
-													dateTime: new Date(comment.creationDate),
+													dateTime: renderValidDate(comment.creationDate),
 												}) || ""}
 											</div>
 											<h4>{comment.author.name}</h4>
@@ -188,7 +189,7 @@ const EventDetailsCommentsTab = ({
 														{/* details about the reply and reply text */}
 														<div className="date">
 															{t("dateFormats.dateTime.short", {
-																dateTime: new Date(reply.creationDate),
+																dateTime: renderValidDate(reply.creationDate),
 															}) || ""}
 														</div>
 														<h4>{reply.author.name}</h4>

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

@@ -28,6 +28,7 @@ import {
 	changeStartHour,
 	changeStartMinute,
 	makeDate,
+	renderValidDate,
 } from "../../../../utils/dateUtils";
 import { hours, minutes } from "../../../../configs/modalConfig";
 import {
@@ -225,12 +226,12 @@ const EventDetailsSchedulingTab = ({
 											<td>{conflict.title}</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(conflict.start),
+													dateTime: renderValidDate(conflict.start),
 												})}
 											</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(conflict.end),
+													dateTime: renderValidDate(conflict.end),
 												})}
 											</td>
 										</tr>

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

@@ -14,6 +14,7 @@ import {
 	fetchWorkflowOperations,
 } from "../../../../slices/eventDetailsSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflow details for the workflows tab of the event details modal
@@ -117,7 +118,7 @@ const EventDetailsWorkflowDetails = ({
 												</td>
 												<td>
 													{t("dateFormats.dateTime.medium", {
-														dateTime: new Date(workflowData.submittedAt),
+														dateTime: renderValidDate(workflowData.submittedAt),
 													})}
 												</td>
 											</tr>

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

@@ -8,6 +8,7 @@ import { error_detail_style } from "../../../../utils/eventDetailsUtils";
 import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNavigation";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflow error details for the workflows tab of the event details modal
@@ -112,7 +113,7 @@ const EventDetailsWorkflowErrorDetails = ({
 											</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(errorDetails.timestamp),
+													dateTime: renderValidDate(errorDetails.timestamp),
 												})}
 											</td>
 										</tr>

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

@@ -9,6 +9,7 @@ import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNaviga
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { fetchWorkflowErrorDetails } from "../../../../slices/eventDetailsSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflow errors for the workflows tab of the event details modal
@@ -119,7 +120,7 @@ const EventDetailsWorkflowErrors = ({
 														</td>
 														<td>
 															{t("dateFormats.dateTime.medium", {
-																dateTime: new Date(item.timestamp),
+																dateTime: renderValidDate(item.timestamp),
 															})}
 														</td>
 														<td>{item.title}</td>

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

@@ -7,6 +7,7 @@ import {
 import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNavigation";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflow operation details for the workflows tab of the event details modal
@@ -132,7 +133,7 @@ const EventDetailsWorkflowOperationDetails = ({
 											</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(operationDetails.started),
+													dateTime: renderValidDate(operationDetails.started),
 												})}
 											</td>
 										</tr>
@@ -146,7 +147,7 @@ const EventDetailsWorkflowOperationDetails = ({
 											</td>
 											<td>
 												{t("dateFormats.dateTime.medium", {
-													dateTime: new Date(operationDetails.completed),
+													dateTime: renderValidDate(operationDetails.completed),
 												})}
 											</td>
 										</tr>

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

@@ -26,6 +26,7 @@ import {
 	updateWorkflow,
 } from "../../../../slices/eventDetailsSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component manages the workflows tab of the event details modal
@@ -213,7 +214,7 @@ const EventDetailsWorkflowTab = ({
 															<td>{item.submitter}</td>
 															<td>
 																{t("dateFormats.dateTime.medium", {
-																	dateTime: new Date(item.submitted),
+																	dateTime: renderValidDate(item.submitted),
 																})}
 															</td>
 															<td>{t(item.status)}</td>

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

@@ -35,6 +35,7 @@ import {
 	changeStartHourMultiple,
 	changeStartMinute,
 	changeStartMinuteMultiple,
+	renderValidDate,
 } from "../../../../utils/dateUtils";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { Recording, fetchRecordings } from "../../../../slices/recordingSlice";
@@ -115,12 +116,12 @@ const NewSourcePage = <T extends RequiredFormProps>({
                         <td>{conflict.title}</td>
                         <td>
                           {t("dateFormats.dateTime.medium", {
-                            dateTime: new Date(conflict.start),
+                            dateTime: renderValidDate(conflict.start),
                           })}
                         </td>
                         <td>
                           {t("dateFormats.dateTime.medium", {
-                            dateTime: new Date(conflict.end),
+                            dateTime: renderValidDate(conflict.end),
                           })}
                         </td>
                       </tr>

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

@@ -14,6 +14,7 @@ import { translateOverrideFallback } from "../../../../utils/utils";
 import { useAppSelector } from "../../../../store";
 import { FormikProps } from "formik";
 import { TransformedAcl } from "../../../../slices/aclDetailsSlice";
+import { renderValidDate } from "../../../../utils/dateUtils";
 
 /**
  * This component renders the summary page for new events in the new event wizard.
@@ -181,7 +182,7 @@ const NewEventSummary = <T extends RequiredFormProps>({
 												</td>
 												<td>
 													{t("dateFormats.date.short", {
-														date: new Date(formik.values.startDate),
+														date: renderValidDate(formik.values.startDate),
 													})}
 												</td>
 											</tr>

src/components/shared/RenderDate.tsx

@@ -1,8 +1,9 @@
 import { useTranslation } from "react-i18next";
+import { renderValidDate } from "../../utils/dateUtils";
 
 const RenderDate: React.FC<{ date: string }> = ({ date }) => {
     const { t } = useTranslation();
-    return <>{t("dateFormats.dateTime.short", { dateTime: new Date(date) })}</>;
+    return <>{t("dateFormats.dateTime.short", { dateTime: renderValidDate(date) })}</>;
 };
 
 export default RenderDate;

src/components/shared/TableFilters.tsx

@@ -24,6 +24,7 @@ import { getResourceType } from "../../selectors/tableSelectors";
 import { useHotkeys } from "react-hotkeys-hook";
 import moment from "moment";
 import { useAppDispatch, useAppSelector } from "../../store";
+import { renderValidDate } from "../../utils/dateUtils";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -309,11 +310,11 @@ const TableFilters = ({
 														<span>
 															{t(filter.label).substr(0, 40)}:
 															{t("dateFormats.date.short", {
-																date: new Date(filter.value.split("/")[0]),
+																date: renderValidDate(filter.value.split("/")[0]),
 															})}
 															-
 															{t("dateFormats.date.short", {
-																date: new Date(filter.value.split("/")[1]),
+																date: renderValidDate(filter.value.split("/")[1]),
 															})}
 														</span>
 													</span>

src/components/shared/wizard/RenderField.tsx

@@ -10,6 +10,7 @@ import RenderDate from "../RenderDate";
 import { parseISO } from "date-fns";
 import { FieldProps } from "formik";
 import { MetadataField } from "../../../slices/eventSlice";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 const childRef = React.createRef<HTMLDivElement>();
 /**
@@ -420,7 +421,7 @@ const EditableSingleValueTime = ({
 	) : (
 		<div onClick={() => setEditMode(true)} className="show-edit">
 			<span className="editable preserve-newlines">
-				{t("dateFormats.dateTime.short", { dateTime: new Date(text) }) || ""}
+				{t("dateFormats.dateTime.short", { dateTime: renderValidDate(text) }) || ""}
 			</span>
 			<div>
 				<i className="edit fa fa-pencil-square" />

src/components/systems/partials/JobsSubmittedCell.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 /**
  * This component renders the submitted date cells of jobs in the table view
@@ -11,7 +12,7 @@ const JobsSubmittedCell = ({
 
 	return (
 		<span>
-			{t("dateFormats.dateTime.short", { dateTime: new Date(row.submitted) })}
+			{t("dateFormats.dateTime.short", { dateTime: renderValidDate(row.submitted) })}
 		</span>
 	);
 };

src/components/systems/partials/MeanRunTimeCell.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { renderValidDate } from "../../../utils/dateUtils";
 
 /**
  * This component renders the mean run time cells of systems in the table view
@@ -11,7 +12,7 @@ const MeanRunTimeCell = ({
 
 	return (
 		<span>
-			{t("dateFormats.time.medium", { time: new Date(row.meanRunTime) })}
+			{t("dateFormats.time.medium", { time: renderValidDate(row.meanRunTime) })}
 		</span>
 	);
 };