From f4426c9e72f41527f746d05dffb4d85a1e5d4027 Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 5 Jun 2024 10:56:39 +0200 Subject: [PATCH 1/2] 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 | 3 ++- src/components/events/partials/EventsTechnicalDateCell.tsx | 3 ++- .../partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx | 5 +++-- .../partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx | 5 +++-- .../ModalTabsAndPages/EventDetailsWorkflowDetails.tsx | 3 ++- .../ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx | 3 ++- .../ModalTabsAndPages/EventDetailsWorkflowErrors.tsx | 3 ++- .../EventDetailsWorkflowOperationDetails.tsx | 5 +++-- .../partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx | 3 ++- .../events/partials/ModalTabsAndPages/NewSourcePage.tsx | 5 +++-- src/components/events/partials/wizards/NewEventSummary.tsx | 3 ++- src/components/shared/RenderDate.tsx | 3 ++- src/components/shared/TableFilters.tsx | 5 +++-- src/components/shared/wizard/RenderField.tsx | 3 ++- src/components/systems/partials/JobsSubmittedCell.tsx | 3 ++- src/components/systems/partials/MeanRunTimeCell.tsx | 3 ++- 16 files changed, 37 insertions(+), 21 deletions(-) diff --git a/src/components/events/partials/EventsDateCell.tsx b/src/components/events/partials/EventsDateCell.tsx index 5dba355426..76d6c5ef9b 100644 --- a/src/components/events/partials/EventsDateCell.tsx +++ b/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) })} ); }; diff --git a/src/components/events/partials/EventsTechnicalDateCell.tsx b/src/components/events/partials/EventsTechnicalDateCell.tsx index 18871b86db..7ed2b9f73d 100644 --- a/src/components/events/partials/EventsTechnicalDateCell.tsx +++ b/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) })} ); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx index 04cd70a269..482d0f3689 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx +++ b/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 */}
{t("dateFormats.dateTime.short", { - dateTime: new Date(comment.creationDate), + dateTime: renderValidDate(comment.creationDate), }) || ""}

{comment.author.name}

@@ -188,7 +189,7 @@ const EventDetailsCommentsTab = ({ {/* details about the reply and reply text */}
{t("dateFormats.dateTime.short", { - dateTime: new Date(reply.creationDate), + dateTime: renderValidDate(reply.creationDate), }) || ""}

{reply.author.name}

diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx index e6070b6c62..fb10b383aa 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx +++ b/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 = ({ {conflict.title} {t("dateFormats.dateTime.medium", { - dateTime: new Date(conflict.start), + dateTime: renderValidDate(conflict.start), })} {t("dateFormats.dateTime.medium", { - dateTime: new Date(conflict.end), + dateTime: renderValidDate(conflict.end), })} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx index 78bdd9f922..e4dd981f2d 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx +++ b/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 = ({ {t("dateFormats.dateTime.medium", { - dateTime: new Date(workflowData.submittedAt), + dateTime: renderValidDate(workflowData.submittedAt), })} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx index 581ad3770e..e6a4a4d4fe 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx +++ b/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 = ({ {t("dateFormats.dateTime.medium", { - dateTime: new Date(errorDetails.timestamp), + dateTime: renderValidDate(errorDetails.timestamp), })} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx index 9ed26c9d72..a245201577 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx +++ b/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 = ({ {t("dateFormats.dateTime.medium", { - dateTime: new Date(item.timestamp), + dateTime: renderValidDate(item.timestamp), })} {item.title} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx index 28b624b5af..a5d645a96c 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx +++ b/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 = ({ {t("dateFormats.dateTime.medium", { - dateTime: new Date(operationDetails.started), + dateTime: renderValidDate(operationDetails.started), })} @@ -146,7 +147,7 @@ const EventDetailsWorkflowOperationDetails = ({ {t("dateFormats.dateTime.medium", { - dateTime: new Date(operationDetails.completed), + dateTime: renderValidDate(operationDetails.completed), })} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx index bee90b8f4d..f126dea4db 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx +++ b/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 = ({ {item.submitter} {t("dateFormats.dateTime.medium", { - dateTime: new Date(item.submitted), + dateTime: renderValidDate(item.submitted), })} {t(item.status)} diff --git a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx index f245e08f04..c99b61cc35 100644 --- a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx +++ b/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 = ({ {conflict.title} {t("dateFormats.dateTime.medium", { - dateTime: new Date(conflict.start), + dateTime: renderValidDate(conflict.start), })} {t("dateFormats.dateTime.medium", { - dateTime: new Date(conflict.end), + dateTime: renderValidDate(conflict.end), })} diff --git a/src/components/events/partials/wizards/NewEventSummary.tsx b/src/components/events/partials/wizards/NewEventSummary.tsx index c352c61308..9cf80ada4f 100644 --- a/src/components/events/partials/wizards/NewEventSummary.tsx +++ b/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("dateFormats.date.short", { - date: new Date(formik.values.startDate), + date: renderValidDate(formik.values.startDate), })} diff --git a/src/components/shared/RenderDate.tsx b/src/components/shared/RenderDate.tsx index 7bb4afded3..4fa3ad55b4 100644 --- a/src/components/shared/RenderDate.tsx +++ b/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; diff --git a/src/components/shared/TableFilters.tsx b/src/components/shared/TableFilters.tsx index a6c81f433b..22e7de2d29 100644 --- a/src/components/shared/TableFilters.tsx +++ b/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 = ({ {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]), })} diff --git a/src/components/shared/wizard/RenderField.tsx b/src/components/shared/wizard/RenderField.tsx index 7780f36342..cf64864435 100644 --- a/src/components/shared/wizard/RenderField.tsx +++ b/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(); /** @@ -420,7 +421,7 @@ const EditableSingleValueTime = ({ ) : (
setEditMode(true)} className="show-edit"> - {t("dateFormats.dateTime.short", { dateTime: new Date(text) }) || ""} + {t("dateFormats.dateTime.short", { dateTime: renderValidDate(text) }) || ""}
diff --git a/src/components/systems/partials/JobsSubmittedCell.tsx b/src/components/systems/partials/JobsSubmittedCell.tsx index b560255aa5..5d148bc87f 100644 --- a/src/components/systems/partials/JobsSubmittedCell.tsx +++ b/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 ( - {t("dateFormats.dateTime.short", { dateTime: new Date(row.submitted) })} + {t("dateFormats.dateTime.short", { dateTime: renderValidDate(row.submitted) })} ); }; diff --git a/src/components/systems/partials/MeanRunTimeCell.tsx b/src/components/systems/partials/MeanRunTimeCell.tsx index 952b26c5ff..43a9193cb2 100644 --- a/src/components/systems/partials/MeanRunTimeCell.tsx +++ b/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 ( - {t("dateFormats.time.medium", { time: new Date(row.meanRunTime) })} + {t("dateFormats.time.medium", { time: renderValidDate(row.meanRunTime) })} ); }; From 01d86f1d8f64949d27d1fd7a99ecc0880f5d08b9 Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 5 Jun 2024 11:05:51 +0200 Subject: [PATCH 2/2] Fix type error Wrongly typed as number but is string --- .../events/partials/ModalTabsAndPages/NewSourcePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx index c99b61cc35..63a2c3fe37 100644 --- a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx +++ b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx @@ -77,7 +77,7 @@ const NewSourcePage = ({ const user = useAppSelector(state => getUserInformation(state)); const inputDevices = useAppSelector(state => getRecordings(state)); - const [conflicts, setConflicts] = useState<{title: string, start: number, end: number}[]>([]); + const [conflicts, setConflicts] = useState<{title: string, start: string, end: string}[]>([]); useEffect(() => { // Load recordings that can be used for input