Merge branch 'main' into reduce-api-requests

Author: Arnei

package-lock.json

@@ -7,13 +7,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@hello-pangea/dnd": "^17.0.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": "^4.1.0",
     "dompurify": "^3.2.4",
@@ -26,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": "^8.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-hotkeys-hook": "^4.6.1",
     "react-i18next": "^15.4.0",
     "react-icons": "^5.4.0",
@@ -67,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",
@@ -78,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"

package.json

@@ -169,7 +169,7 @@ const Header = () => {
 										}
 										target="_blank" rel="noreferrer"
 									>
-										<span className="fa fa-play-circle" />
+										<i className="fa fa-play-circle" />
 									</a>
 								</Tooltip>
 							</div>
@@ -180,7 +180,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/Header.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";
 import { resetTableContent } from "../../slices/tableSlice";
@@ -23,8 +22,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));
@@ -36,9 +33,7 @@ const Themes = () => {
 		// Clear table of previous data
 		dispatch(resetTableContent());
 
-		if ("themes" !== currentFilterType) {
-			dispatch(fetchFilters("themes"));
-		}
+		dispatch(fetchFilters("themes"));
 
 		// Reset text filter
 		dispatch(editTextFilter(""));

src/components/configuration/Themes.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/configuration/partials/wizard/TitleSlidePage.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);
@@ -76,9 +74,7 @@ const Events = () => {
 		// Clear redux of previous table data
 		dispatch(resetTableContent());
 
-		if ("events" !== currentFilterType) {
-			dispatch(fetchFilters("events"))
-		}
+		dispatch(fetchFilters("events"))
 
 		// Reset text filter
 		dispatch(editTextFilter(""));

src/components/events/Events.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,8 +45,7 @@ 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();
 
@@ -61,9 +59,7 @@ const Series = () => {
 		// Clear table of previous data
 		dispatch(resetTableContent());
 
-		if ("series" !== currentFilterType) {
-			dispatch(fetchFilters("series"))
-		}
+		dispatch(fetchFilters("series"))
 
 		// Reset text filer
 		dispatch(editTextFilter(""));

src/components/events/Series.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/EventActionCell.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/EventDetailsStatisticsTab.tsx

@@ -310,7 +310,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*/}