Merge branch 'main' into buttonlikeanchor

package.json

@@ -5,15 +5,16 @@
   "private": true,
   "homepage": "/admin-ui",
   "dependencies": {
-    "@hello-pangea/dnd": "^17.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "@mui/material": "^6.4.2",
     "@mui/x-date-pickers": "^7.25.0",
     "@reduxjs/toolkit": "^2.5.1",
     "array-move": "^4.0.0",
     "axios": "^1.7.9",
-    "bourbon": "^7.3.0",
     "classnames": "^2.5.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "dompurify": "^3.2.4",
     "font-awesome": "^4.7.0",
     "formik": "^2.4.6",
@@ -24,10 +25,10 @@
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.47",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
-    "react-datepicker": "^7.6.0",
-    "react-dom": "^18.3.1",
+    "react-datepicker": "^8.0.0",
+    "react-dom": "^19.0.0",
     "react-hotkeys-hook": "^4.6.1",
     "react-i18next": "^15.4.0",
     "react-icons": "^5.4.0",
@@ -38,7 +39,6 @@
     "redux-persist": "^6.0.0",
     "redux-thunk": "^3.1.0",
     "reselect": "^5.1.1",
-    "styled-components": "^6.1.14",
     "yup": "^1.6.1"
   },
   "scripts": {
@@ -66,7 +66,7 @@
     "@redux-devtools/extension": "^3.3.0",
     "@types/lodash": "^4.17.15",
     "@types/node": "^22.13.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^19.0.0",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@vitejs/plugin-react-swc": "^3.7.2",
@@ -77,7 +77,7 @@
     "sass": "^1.83.4",
     "typescript": "^5.7.3",
     "uuid": "^11.0.5",
-    "vite": "^5.4.10",
+    "vite": "^6.2.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.4"

src/components/Header.tsx

@@ -179,7 +179,7 @@ const Header = () => {
 										}
 										target="_blank" rel="noreferrer"
 									>
-										<span className="fa fa-play-circle" />
+										<i className="fa fa-play-circle" />
 									</a>
 								</Tooltip>
 							</div>
@@ -190,7 +190,7 @@ const Header = () => {
 						<div className="nav-dd">
 							<Tooltip  title={t("STUDIO")}>
 								<a href={studioURL} target="_blank" rel="noreferrer">
-									<span className="fa fa-video-camera" />
+									<i className="fa fa-video-camera" />
 								</a>
 							</Tooltip>
 						</div>

src/components/configuration/Themes.tsx

@@ -11,7 +11,6 @@ import Header from "../Header";
 import NavBar from "../NavBar";
 import MainView from "../MainView";
 import Footer from "../Footer";
-import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchThemes } from "../../slices/themeSlice";
 
@@ -22,8 +21,6 @@ const Themes = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
-
 	const [displayNavigation, setNavigation] = useState(false);
 
 	const themes = useAppSelector(state => getTotalThemes(state));
@@ -37,9 +34,7 @@ const Themes = () => {
 	};
 
 	useEffect(() => {
-		if ("themes" !== currentFilterType) {
-			dispatch(fetchFilters("themes"));
-		}
+		dispatch(fetchFilters("themes"));
 
 		// Reset text filter
 		dispatch(editTextFilter(""));

src/components/configuration/partials/wizard/TitleSlidePage.tsx

@@ -36,7 +36,6 @@ const TitleSlidePage = <T extends RequiredFormProps>({
 							{t("CONFIGURATION.THEMES.DETAILS.TITLE.DESCRIPTION")}
 						</p>
 					</div>
-					{/*todo: Notification*/}
 					<div className="obj">
 						<header>{t("CONFIGURATION.THEMES.DETAILS.TITLE.ACTIVE")}</header>
 						<div className="obj-container content-list padded">

src/components/events/Events.tsx

@@ -27,7 +27,6 @@ import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
-import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { fetchAssetUploadOptions } from "../../thunks/assetsThunks";
 import { useAppDispatch, useAppSelector } from "../../store";
 import {
@@ -51,7 +50,6 @@ const Events = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
 	const displayEventDetailsModal = useAppSelector(state => showModal(state));
 
 	const [displayActionMenu, setActionMenu] = useState(false);
@@ -70,9 +68,7 @@ const Events = () => {
 	let location = useLocation();
 
 	useEffect(() => {
-		if ("events" !== currentFilterType) {
-			dispatch(fetchFilters("events"))
-		}
+		dispatch(fetchFilters("events"))
 
 		// Reset text filter
 		dispatch(editTextFilter(""));

src/components/events/Series.tsx

@@ -18,7 +18,6 @@ import MainView from "../MainView";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
-import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
 import {
 	fetchSeries,
@@ -46,18 +45,15 @@ const Series = () => {
 	const newSeriesModalRef = useRef<ModalHandle>(null);
 	const deleteModalRef = useRef<ModalHandle>(null);
 
-	const user = useAppSelector(state => getUserInformation(state));
-	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
+  const user = useAppSelector(state => getUserInformation(state));
 
 	let location = useLocation();
 
 	const series = useAppSelector(state => getTotalSeries(state));
 	const showActions = useAppSelector(state => isShowActions(state));
 
 	useEffect(() => {
-		if ("series" !== currentFilterType) {
-			dispatch(fetchFilters("series"))
-		}
+		dispatch(fetchFilters("series"))
 
 		// Reset text filer
 		dispatch(editTextFilter(""));

src/components/events/partials/EventActionCell.tsx

@@ -109,7 +109,6 @@ const EventActionCell = ({
 			)}
 
 			{/* Delete an event */}
-			{/*TODO: needs to be checked if event is published */}
 			<ActionCellDelete
 				editAccessRole={"ROLE_UI_EVENTS_DELETE"}
 				tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DELETE"}

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

@@ -42,7 +42,7 @@ const EventDetailsCommentsTab = ({
 	const isSavingCommentReply = useAppSelector(state => getIsSavingCommentReply(state));
 
 	useEffect(() => {
-		dispatch(fetchComments(eventId)).then((r: any) => console.info(r));
+		dispatch(fetchComments(eventId));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

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

@@ -4,9 +4,10 @@ import {
 	hasStatisticsError,
 } from "../../../../selectors/eventDetailsSelectors";
 import TimeSeriesStatistics from "../../../shared/TimeSeriesStatistics";
-import { useAppDispatch, useAppSelector } from "../../../../store";
+import { useAppSelector } from "../../../../store";
 import { fetchEventStatisticsValueUpdate } from "../../../../slices/eventDetailsSlice";
 import { useTranslation } from "react-i18next";
+import { createChartOptions } from "../../../../utils/statisticsUtils";
 
 /**
  * This component manages the statistics tab of the event details modal
@@ -19,16 +20,10 @@ const EventDetailsStatisticsTab = ({
 	header: string,
 }) => {
 	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
 
 	const statistics = useAppSelector(state => getStatistics(state));
 	const hasError = useAppSelector(state => hasStatisticsError(state));
 
-	// TODO: Get rid of the wrappers when modernizing redux is done
-	const fetchEventStatisticsValueUpdateWrapper = (eventId: any, providerId: any, from: any, to: any, dataResolution: any, timeMode: any) => {
-		dispatch(fetchEventStatisticsValueUpdate({eventId, providerId, from, to, dataResolution, timeMode}));
-	}
-
 	/* generates file name for download-link for a statistic */
 	const statisticsCsvFileName = (statsTitle: string) => {
 		const sanitizedStatsTitle = statsTitle
@@ -68,13 +63,13 @@ const EventDetailsStatisticsTab = ({
 											timeMode={stat.timeMode}
 											dataResolution={stat.dataResolution}
 											statDescription={stat.description}
-											onChange={fetchEventStatisticsValueUpdateWrapper}
+											onChange={fetchEventStatisticsValueUpdate}
 											exportUrl={stat.csvUrl}
 											exportFileName={statisticsCsvFileName}
 											totalValue={stat.totalValue}
 											sourceData={stat.values}
 											chartLabels={stat.labels}
-											chartOptions={stat.options}
+											chartOptions={createChartOptions(stat.timeMode, stat.dataResolution)}
 										/>
 									</div>
 								) : (

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

@@ -311,7 +311,6 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																			</tr>
 																		)}
 
-																		{/*Todo: show only if user has role ROLE_UI_SERIES_DETAILS_ACL_EDIT */}
 																		{hasAccess(editAccessRole, user) && (
 																			<tr>
 																				{/*Add additional policy row*/}

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

@@ -6,7 +6,8 @@ import {
 } from "../../../../selectors/seriesDetailsSelectors";
 import { fetchSeriesStatisticsValueUpdate } from "../../../../slices/seriesDetailsSlice";
 import TimeSeriesStatistics from "../../../shared/TimeSeriesStatistics";
-import { useAppDispatch, useAppSelector } from "../../../../store";
+import { useAppSelector } from "../../../../store";
+import { createChartOptions } from "../../../../utils/statisticsUtils";
 
 const SeriesDetailsStatisticTab = ({
 	seriesId,
@@ -16,16 +17,10 @@ const SeriesDetailsStatisticTab = ({
 	header: string,
 }) => {
 	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
 
 	const statistics = useAppSelector(state => getStatistics(state));
 	const hasError = useAppSelector(state => hasStatisticsError(state));
 
-		// TODO: Get rid of the wrappers when modernizing redux is done
-		const fetchSeriesStatisticsValueUpdateWrapper = (seriesId: any, providerId: any, from: any, to: any, dataResolution: any, timeMode: any) => {
-			dispatch(fetchSeriesStatisticsValueUpdate({seriesId, providerId, from, to, dataResolution, timeMode}));
-		}
-
 	/* generates file name for download-link for a statistic */
 	const statisticsCsvFileName = (statsTitle: string) => {
 		const sanitizedStatsTitle = statsTitle
@@ -65,13 +60,13 @@ const SeriesDetailsStatisticTab = ({
 											timeMode={stat.timeMode}
 											dataResolution={stat.dataResolution}
 											statDescription={stat.description}
-											onChange={fetchSeriesStatisticsValueUpdateWrapper}
+											onChange={fetchSeriesStatisticsValueUpdate}
 											exportUrl={stat.csvUrl}
 											exportFileName={statisticsCsvFileName}
 											totalValue={stat.totalValue}
 											sourceData={stat.values}
 											chartLabels={stat.labels}
-											chartOptions={stat.options}
+											chartOptions={createChartOptions(stat.timeMode, stat.dataResolution)}
 										/>
 									</div>
 								) : (

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

@@ -74,10 +74,6 @@ const DeleteEventsModal = ({
 								<p>{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE1")}</p>
 								<p>{t("BULK_ACTIONS.DELETE_EVENTS_WARNING_LINE2")}</p>
 							</div>
-							{/*todo: only show if scheduling Authorized*/}
-							<div>
-								<p>{t("BULK_ACTIONS.DELETE.EVENTS.UNAUTHORIZED")}</p>
-							</div>
 
 							<div className="full-col">
 								<div className="obj">

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

@@ -15,7 +15,7 @@ const SeriesDetailsModal = ({
 }: {
 	seriesTitle: string
 	seriesId: string
-	modalRef: React.RefObject<ModalHandle>
+	modalRef: React.RefObject<ModalHandle | null>
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();

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

@@ -287,7 +287,7 @@ const getInitialValues = (
 	if (!!uploadAssetOptions) {
 		initialValues.uploadAssetsTrack = [];
 		// Sort by displayOrder
-		uploadAssetOptions = uploadAssetOptions.slice().sort((a: any, b: any) => a.displayOrder - b.displayOrder)
+		uploadAssetOptions = uploadAssetOptions.slice().sort((a, b) => a.displayOrder - b.displayOrder)
 		// initial value of upload asset needs to be null, because object (file) is saved there
 		for (const option of uploadAssetOptions) {
 			if (option.type === "track") {

src/components/recordings/Recordings.tsx

@@ -11,7 +11,6 @@ import Header from "../Header";
 import NavBar from "../NavBar";
 import MainView from "../MainView";
 import Footer from "../Footer";
-import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchRecordings } from "../../slices/recordingSlice";
 import { AsyncThunk } from "@reduxjs/toolkit";
@@ -24,7 +23,6 @@ const Recordings = () => {
 	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 
-	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
 	const recordings = useAppSelector(state => getTotalRecordings(state));
 
 	const loadRecordings = async () => {
@@ -36,9 +34,7 @@ const Recordings = () => {
 	};
 
 	useEffect(() => {
-		if ("recordings" !== currentFilterType) {
-			dispatch(fetchFilters("recordings"));
-		}
+		dispatch(fetchFilters("recordings"));
 
 		// Reset text filter
 		dispatch(editTextFilter(""));

src/components/recordings/partials/modal/RecordingDetailsModal.tsx

@@ -11,7 +11,7 @@ const RecordingDetailsModal = ({
 	modalRef,
 }: {
 	recordingId: string,
-	modalRef: React.RefObject<ModalHandle>
+	modalRef: React.RefObject<ModalHandle | null>
 }) => {
 	const { t } = useTranslation();