Merge branch 'main' into properly-clear-modal-notifications

package.json

@@ -6,23 +6,22 @@
   "homepage": "/admin-ui",
   "dependencies": {
     "@hello-pangea/dnd": "^17.0.0",
-    "@mui/material": "^6.1.9",
+    "@mui/material": "^6.3.0",
     "@mui/x-date-pickers": "^7.23.1",
-    "@reduxjs/toolkit": "^2.2.6",
-    "@types/dompurify": "^3.0.5",
-    "@types/react-router-dom": "^5.3.3",
+    "@reduxjs/toolkit": "^2.5.0",
+    "@types/dompurify": "^3.2.0",
     "array-move": "^4.0.0",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "bourbon": "^7.3.0",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
-    "dompurify": "^3.1.7",
+    "dompurify": "^3.2.3",
     "font-awesome": "^4.7.0",
     "formik": "^2.4.6",
     "http-proxy-middleware": "^3.0.3",
-    "i18next": "^23.16.4",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.6.1",
+    "i18next": "^24.2.0",
+    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next-http-backend": "^3.0.1",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",
@@ -31,17 +30,17 @@
     "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-hotkeys-hook": "^4.6.1",
-    "react-i18next": "^15.1.3",
+    "react-i18next": "^15.4.0",
     "react-icons": "^5.3.0",
-    "react-redux": "^9.1.2",
-    "react-router-dom": "^6.27.0",
+    "react-redux": "^9.2.0",
+    "react-router": "^7.1.1",
     "react-select": "^5.8.0",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^3.1.0",
     "reselect": "^5.1.1",
     "styled-components": "^6.1.13",
-    "yup": "^1.4.0"
+    "yup": "^1.6.1"
   },
   "scripts": {
     "start": "vite",
@@ -76,8 +75,8 @@
     "eslint-config-react-app": "^7.0.1",
     "prop-types": "^15.8.1",
     "rollup-preserve-directives": "^1.1.3",
-    "sass": "^1.79.4",
-    "typescript": "^5.6.3",
+    "sass": "^1.83.0",
+    "typescript": "^5.7.2",
     "uuid": "^11.0.3",
     "vite": "^5.4.10",
     "vite-plugin-svgr": "^4.2.0",

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
+import { HashRouter, Navigate, Route, Routes } from "react-router";
 import "./App.scss";
 import Events from "./components/events/Events";
 import Recordings from "./components/recordings/Recordings";

src/components/About.tsx

@@ -4,7 +4,7 @@ import NavBar from "./NavBar";
 import Footer from "./Footer";
 import MainNav from "./shared/MainNav";
 import { useTranslation } from "react-i18next";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 import cn from "classnames";
 import axios from 'axios';
 import i18n from "../i18n/i18n";

src/components/Footer.tsx

@@ -4,7 +4,7 @@ import {
 	getUserInformation,
 } from "../selectors/userInfoSelectors";
 import { useAppSelector } from "../store";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "./shared/Tooltip";
 

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import i18n from "../i18n/i18n";
 import languages from "../i18n/languages";
 import opencastLogo from "../img/opencast-white.svg?url";

src/components/configuration/Themes.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import MainNav from "../shared/MainNav";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import cn from "classnames";
 import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";

src/components/events/Events.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 import TableFilters from "../shared/TableFilters";
 import MainNav from "../shared/MainNav";
 import Stats from "../shared/Stats";

src/components/events/Series.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import MainNav from "../shared/MainNav";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
 import Notifications from "../shared/Notifications";

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

@@ -16,7 +16,6 @@ import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils"
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { MetadataCatalog } from "../../../../slices/eventSlice";
 import { AsyncThunk } from "@reduxjs/toolkit";
-import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk";
 
 /**
  * This component renders metadata details of a certain event or series
@@ -34,7 +33,7 @@ const DetailsExtendedMetadataTab = ({
 		id: string;
 		values: { [key: string]: any; };
 		catalog: MetadataCatalog;
-	}, AsyncThunkConfig> //(id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
+	}, any> //(id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();

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

@@ -14,7 +14,6 @@ import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils"
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { MetadataCatalog } from "../../../../slices/eventSlice";
 import { AsyncThunk } from "@reduxjs/toolkit";
-import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk";
 
 /**
  * This component renders metadata details of a certain event or series
@@ -27,7 +26,7 @@ const DetailsMetadataTab = ({
 	editAccessRole,
 }: {
 	metadataFields: MetadataCatalog,
-	updateResource: AsyncThunk<void, { id: string; values: { [key: string]: any; }; }, AsyncThunkConfig>
+	updateResource: AsyncThunk<void, { id: string; values: { [key: string]: any; }; }, any>
 	resourceId: string,
 	header: string,
 	editAccessRole: string,

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import cn from "classnames";
 import _ from "lodash";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import DatePicker from "react-datepicker";
 import { Formik, FormikErrors, FormikProps } from "formik";
 import { Field } from "../../../shared/Field";
 import Notifications from "../../../shared/Notifications";
@@ -195,12 +195,12 @@ const EventDetailsSchedulingTab = ({
 			: [];
 
 		return {
-			scheduleStartDate: startDate.setHours(0, 0, 0).toString(),
+			scheduleStartDate: startDate.toString(),
 			scheduleStartHour: source.start.hour != null ? makeTwoDigits(source.start.hour) : "",
 			scheduleStartMinute: source.start.minute != null ? makeTwoDigits(source.start.minute) : "",
 			scheduleDurationHours: source.duration.hour != null ? makeTwoDigits(source.duration.hour) : "",
 			scheduleDurationMinutes: source.duration.minute != null ? makeTwoDigits(source.duration.minute): "",
-			scheduleEndDate: endDate.setHours(0, 0, 0).toString(),
+			scheduleEndDate: endDate.toString(),
 			scheduleEndHour: source.end.hour != null ? makeTwoDigits(source.end.hour): "",
 			scheduleEndMinute: source.end.minute != null ? makeTwoDigits(source.end.minute): "",
 			captureAgent: source.device.name,
@@ -286,8 +286,7 @@ const EventDetailsSchedulingTab = ({
 																/* date picker for start date */
 																<DatePicker
 																	name="scheduleStartDate"
-																	// tabIndex={1}
-																	value={new Date(formik.values.scheduleStartDate)}
+																	selected={new Date(formik.values.scheduleStartDate)}
 																	onChange={(value: Date | null) =>
 																		value && changeStartDate(
 																			value,
@@ -297,6 +296,14 @@ const EventDetailsSchedulingTab = ({
 																			checkConflictsWrapper
 																		)
 																	}
+																	showYearDropdown
+																	showMonthDropdown
+																	yearDropdownItemNumber={2}
+																	dateFormat="P"
+																	popperClassName="datepicker-custom"
+																	className="datepicker-custom-input"
+																	portalId="root"
+																	locale={currentLanguage?.dateLocale}
 																/>
 															) : (
 																<>

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 import Notifications from "../../../shared/Notifications";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import DatePicker from "react-datepicker";
 import {
 	getCurrentLanguageInformation,
 	getTimezoneOffset,
@@ -444,7 +444,7 @@ const Schedule = <T extends {
 							<td>
 								<DatePicker
 									name="scheduleStartDate"
-									value={typeof formik.values.scheduleStartDate === "string" ? parseISO(formik.values.scheduleStartDate): formik.values.scheduleStartDate}
+									selected={typeof formik.values.scheduleStartDate === "string" ? parseISO(formik.values.scheduleStartDate): formik.values.scheduleStartDate}
 									onChange={(value) => {
 										if (formik.values.sourceMode === "SCHEDULE_MULTIPLE") {
 											value && changeStartDateMultiple(
@@ -460,6 +460,14 @@ const Schedule = <T extends {
 											);
 										}
 									}}
+									showYearDropdown
+									showMonthDropdown
+									yearDropdownItemNumber={2}
+									dateFormat="P"
+									popperClassName="datepicker-custom"
+									className="datepicker-custom-input"
+									portalId="root"
+									locale={currentLanguage?.dateLocale}
 								/>
 							</td>
 						</tr>
@@ -474,14 +482,22 @@ const Schedule = <T extends {
 									<td>
 										<DatePicker
 											name="scheduleEndDate"
-											value={typeof formik.values.scheduleEndDate === "string" ? parseISO(formik.values.scheduleEndDate) : formik.values.scheduleEndDate}
+											selected={typeof formik.values.scheduleEndDate === "string" ? parseISO(formik.values.scheduleEndDate) : formik.values.scheduleEndDate}
 											onChange={(value) =>
 												value && changeEndDateMultiple(
 													value,
 													formik.values,
 													formik.setFieldValue
 												)
 											}
+											showYearDropdown
+											showMonthDropdown
+											yearDropdownItemNumber={2}
+											dateFormat="P"
+											popperClassName="datepicker-custom"
+											className="datepicker-custom-input"
+											portalId="root"
+											locale={currentLanguage?.dateLocale}
 										/>
 									</td>
 								</tr>

src/components/events/partials/SeriesTitleCell.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { setSpecificEventFilter } from "../../../slices/tableFilterSlice";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useAppDispatch } from "../../../store";
 import { Tooltip } from "../../shared/Tooltip";
 import { Series } from "../../../slices/seriesSlice";

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

@@ -26,6 +26,7 @@ import {
 	getModalWorkflowTabHierarchy,
 	getModalPage,
 	getEventDetailsTobiraDataError,
+	getEventDetailsTobiraStatus,
 } from "../../../../selectors/eventDetailsSelectors";
 import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import EventDetailsStatisticsTab from "../ModalTabsAndPages/EventDetailsStatisticsTab";
@@ -113,6 +114,7 @@ const EventDetails = ({
 		});
 
 
+		dispatch(fetchEventDetailsTobira(eventId));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -127,6 +129,7 @@ const EventDetails = ({
 	const hasStatistics = useAppSelector(state => getHasStatistics(state));
 	const isLoadingStatistics = useAppSelector(state => isFetchingStatistics(state));
 	const captureAgents = useAppSelector(state => getRecordings(state));
+	const tobiraStatus = useAppSelector(state => getEventDetailsTobiraStatus(state));
 	const tobiraError = useAppSelector(state => getEventDetailsTobiraDataError(state));
 
 	const tabs = [
@@ -193,7 +196,7 @@ const EventDetails = ({
 			accessRole: "ROLE_UI_EVENTS_DETAILS_COMMENTS_VIEW",
 			name: "tobira",
 			page: EventDetailsPage.Tobira,
-			hidden: tobiraError?.message?.includes("503"),
+			hidden: tobiraStatus === "failed" && tobiraError?.message?.includes("503"),
 		},
 		{
 			tabNameTranslation: "EVENTS.EVENTS.DETAILS.TABS.STATISTICS",
@@ -207,9 +210,6 @@ const EventDetails = ({
 
 	const openTab = (tabNr: EventDetailsPage) => {
 		dispatch(removeNotificationWizardForm());
-		if (tabNr === EventDetailsPage.Tobira) {
-			dispatch(fetchEventDetailsTobira(eventId));
-		}
 		dispatch(openModalTab(tabNr, "entry", "entry"))
 	};
 

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

@@ -8,6 +8,7 @@ import {
 	getSeriesDetailsTheme,
 	getSeriesDetailsThemeNames,
 	getSeriesDetailsTobiraDataError,
+	getSeriesDetailsTobiraStatus,
 	hasStatistics as seriesHasStatistics,
 } from "../../../../selectors/seriesDetailsSelectors";
 import { getOrgProperties, getUserInformation } from "../../../../selectors/userInfoSelectors";
@@ -20,6 +21,7 @@ import DetailsMetadataTab from "../ModalTabsAndPages/DetailsMetadataTab";
 import DetailsExtendedMetadataTab from "../ModalTabsAndPages/DetailsExtendedMetadataTab";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import {
+	fetchSeriesDetailsTobira,
 	fetchSeriesStatistics,
 	setTobiraTabHierarchy,
 	updateExtendedSeriesMetadata,
@@ -48,10 +50,12 @@ const SeriesDetails = ({
 	const theme = useAppSelector(state => getSeriesDetailsTheme(state));
 	const themeNames = useAppSelector(state => getSeriesDetailsThemeNames(state));
 	const hasStatistics = useAppSelector(state => seriesHasStatistics(state));
+	const tobiraStatus = useAppSelector(state => getSeriesDetailsTobiraStatus(state));
 	const tobiraError = useAppSelector(state => getSeriesDetailsTobiraDataError(state));
 
 	useEffect(() => {
 		dispatch(fetchSeriesStatistics(seriesId));
+		dispatch(fetchSeriesDetailsTobira(seriesId));
 		dispatch(setTobiraTabHierarchy("main"));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
@@ -90,7 +94,7 @@ const SeriesDetails = ({
 			tabNameTranslation: "EVENTS.SERIES.DETAILS.TABS.TOBIRA",
 			accessRole: "ROLE_UI_SERIES_DETAILS_TOBIRA_VIEW",
 			name: "tobira",
-			hidden: tobiraError?.message?.includes("503"),
+			hidden: tobiraStatus === "failed" && tobiraError?.message?.includes("503"),
 		},
 		{
 			tabNameTranslation: "EVENTS.SERIES.DETAILS.TABS.STATISTICS",