Merge branch 'main' into cant-go-back-from-processing

Author: Arnei

.github/workflows/remove-test.yml

@@ -5,6 +5,9 @@ on:
     types:
       - closed
 
+env:
+  PR_NUMBER: ${{ github.event.pull_request.number }}
+
 jobs:
   delete_directory:
     runs-on: ubuntu-latest

src/components/About.tsx

@@ -47,13 +47,11 @@ const About = () => {
 					{
 						path: "/about/imprint",
 						accessRole: "ROLE_UI_USERS_VIEW",
-						loadFn: () => { },
 						text: "ABOUT.IMPRINT"
 					},
 					{
 						path: "/about/privacy",
 						accessRole: "ROLE_UI_GROUPS_VIEW",
-						loadFn: () => { },
 						text: "ABOUT.PRIVACY"
 					},
 				]}

src/components/Header.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router";
+import { useNavigate } from "react-router";
 import i18n from "../i18n/i18n";
 import languages from "../i18n/languages";
 import opencastLogo from "../img/opencast-white.svg?url";
 import { setSpecificServiceFilter } from "../slices/tableFilterSlice";
-import { loadServicesIntoTable } from "../thunks/tableThunks";
 import { getErrorCount, getHealthStatus } from "../selectors/healthSelectors";
 import {
 	getOrgProperties,
@@ -73,14 +72,6 @@ const Header = () => {
 		registrationModalRef.current?.open()
 	};
 
-	const redirectToServices = async () => {
-		// Load services into table
-		await dispatch(loadServicesIntoTable());
-
-		// set the action filter value of services to true
-		await dispatch(setSpecificServiceFilter({ filter: "actions", filterValue: "true" }));
-	};
-
 	const showHotKeyCheatSheet = () => {
 		hotKeyCheatSheetModalRef.current?.open()
 	};
@@ -216,7 +207,6 @@ const Header = () => {
 							{displayMenuNotify && (
 								<MenuNotify
 									healthStatus={healthStatus}
-									redirectToServices={redirectToServices}
 								/>
 							)}
 						</div>
@@ -302,20 +292,27 @@ const MenuLang = () => {
 
 const MenuNotify = ({
 	healthStatus,
-	redirectToServices
 }: {
 	healthStatus: HealthStatus[],
-	redirectToServices: () => Promise<void>,
 }) => {
+	const dispatch = useAppDispatch();
+	const navigate = useNavigate();
+
+	const redirectToServices = async () => {
+		// set the action filter value of services to true
+		await dispatch(setSpecificServiceFilter({ filter: "actions", filterValue: "true" }));
+		navigate("/systems/services");
+	};
+
 	return (
 		<ul className="dropdown-ul">
 			{/* For each service in the serviceList (Background Services) one list item */}
 			{healthStatus.map((service, key) => (
 				<li key={key}>
 					{!!service.status && (
-						<Link
-							to="/systems/services"
-							onClick={async () => await redirectToServices()}
+						<button
+							className="button-like-anchor"
+							onClick={() => redirectToServices()}
 						>
 							<span> {service.name} </span>
 							{service.error ? (
@@ -327,7 +324,7 @@ const MenuNotify = ({
 									{service.status}
 								</span>
 							)}
-						</Link>
+						</button>
 					)}
 				</li>
 			))}

src/components/NavBar.tsx

@@ -1,35 +1,28 @@
 import React, { useRef } from "react";
 import { Link, useLocation } from "react-router";
 import { hasAccess } from "../utils/utils";
-import { AppDispatch, useAppDispatch, useAppSelector } from "../store";
+import { useAppSelector } from "../store";
 import { getUserInformation } from "../selectors/userInfoSelectors";
 import cn from "classnames";
 import { useTranslation } from "react-i18next";
 import MainNav from "./shared/MainNav";
-import { setOffset } from "../slices/tableSlice";
 import NewResourceModal, { NewResource } from "./shared/NewResourceModal";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ModalHandle } from "./shared/modals/Modal";
+import { ParseKeys } from "i18next";
 
 /**
  * Component that renders the nav bar
  */
-type LinkType = {
-	path: string
-	accessRole: string
-	loadFn: (dispatch: AppDispatch) => void
-	text: string
-}
-
 type CreateType = {
 	accessRole: string
 	onShowModal?: () => Promise<void>
 	onHideModal?: () => void
-	text: string
+	text: ParseKeys
 	isDisplay?: boolean
 	resource: NewResource
 	hotkeySequence?: string[]
-	hotkeyDescription?: string
+	hotkeyDescription?: ParseKeys
 }
 
 const NavBar = ({
@@ -41,15 +34,17 @@ const NavBar = ({
 	create,
 } : {
 	children?: React.ReactNode
-	navAriaLabel?: string
+	navAriaLabel?: ParseKeys
 	displayNavigation: boolean
 	setNavigation: React.Dispatch<React.SetStateAction<boolean>>
-	links: LinkType[]
+	links: {
+		path: string
+		accessRole: string
+		text: ParseKeys
+	}[]
 	create?: CreateType
 }) => {
-
 	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
 	const location = useLocation();
 
 	const user = useAppSelector(state => getUserInformation(state));
@@ -73,7 +68,7 @@ const NavBar = ({
 	useHotkeys(
 		(create && create.hotkeySequence) ?? [],
 		() => showNewResourceModal(),
-		{ description: t((create && create.hotkeyDescription) ?? "") ?? undefined },
+		{ description: create && create.hotkeyDescription ? t(create.hotkeyDescription) : undefined },
 		[showNewResourceModal]
 	);
 
@@ -98,13 +93,6 @@ const NavBar = ({
 							key={index}
 							to={link.path}
 							className={cn({ active: location.pathname === link.path || (location.pathname === "/" && link.path === "/events/events") })}
-							onClick={() => {
-								if (location.pathname !== link.path) {
-									// Reset the current page to first page
-									dispatch(setOffset(0));
-								}
-								link.loadFn(dispatch)
-							}}
 						>
 							{t(link.text)}
 						</Link>

src/components/configuration/Themes.tsx

@@ -13,6 +13,7 @@ import MainView from "../MainView";
 import Footer from "../Footer";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchThemes } from "../../slices/themeSlice";
+import { resetTableProperties } from "../../slices/tableSlice";
 
 /**
  * This component renders the table view of events
@@ -25,27 +26,37 @@ const Themes = () => {
 
 	const themes = useAppSelector(state => getTotalThemes(state));
 
-	const loadThemes = async () => {
-		// Fetching themes from server
-		await dispatch(fetchThemes());
+	useEffect(() => {
+		// State variable for interrupting the load function
+		let allowLoadIntoTable = true;
 
-		// Load users into table
-		dispatch(loadThemesIntoTable());
-	};
+		// Clear table of previous data
+		dispatch(resetTableProperties());
 
-	useEffect(() => {
 		dispatch(fetchFilters("themes"));
 
 		// Reset text filter
 		dispatch(editTextFilter(""));
 
 		// Load themes on mount
+		const loadThemes = async () => {
+			// Fetching themes from server
+			await dispatch(fetchThemes());
+
+			// Load users into table
+			if (allowLoadIntoTable) {
+				dispatch(loadThemesIntoTable());
+			}
+		};
 		loadThemes();
 
 		// Fetch themes every minute
 		let fetchThemesInterval = setInterval(loadThemes, 5000);
 
-		return () => clearInterval(fetchThemesInterval);
+		return () => {
+			allowLoadIntoTable = false;
+			clearInterval(fetchThemesInterval);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -59,7 +70,6 @@ const Themes = () => {
 					{
 						path: "/configuration/themes",
 						accessRole: "ROLE_UI_THEMES_VIEW",
-						loadFn: loadThemes,
 						text: "CONFIGURATION.NAVIGATION.THEMES"
 					},
 				]}

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

@@ -11,6 +11,7 @@ import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { NewThemeSchema } from "../../../../utils/validate";
 import { useAppDispatch } from "../../../../store";
 import { postNewTheme, ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
+import { ParseKeys } from "i18next";
 
 /**
  * This component manages the pages of the new theme wizard and the submission of values
@@ -34,7 +35,10 @@ const NewThemeWizard: React.FC<{
 	 } = usePageFunctions(0, initialValues);
 
 	// Caption of steps used by Stepper
-	const steps = [
+	const steps: {
+		name: string
+		translation: ParseKeys
+	}[] = [
 		{
 			name: "generalForm",
 			translation: "CONFIGURATION.THEMES.DETAILS.GENERAL.CAPTION",

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

@@ -15,6 +15,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
 import { updateThemeDetails } from "../../../../slices/themeDetailsSlice";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import { ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
+import { ParseKeys } from "i18next";
 
 /**
  * This component manages the pages of the theme details
@@ -41,7 +42,12 @@ const ThemeDetails = ({
 	};
 
 	// information about tabs
-	const tabs = [
+	const tabs: {
+		name: string
+		tabTranslation: ParseKeys
+		translation: ParseKeys
+		accessRole: string
+	}[] = [
 		{
 			name: "generalForm",
 			tabTranslation: "CONFIGURATION.THEMES.DETAILS.GENERAL.CAPTION",

src/components/events/Events.tsx

@@ -36,8 +36,9 @@ import {
 } from "../../slices/eventSlice";
 import EventDetailsModal from "./partials/modals/EventDetailsModal";
 import { showModal } from "../../selectors/eventDetailsSelectors";
-import { eventsLinks, loadEvents } from "./partials/EventsNavigation";
+import { eventsLinks } from "./partials/EventsNavigation";
 import { Modal, ModalHandle } from "../shared/modals/Modal";
+import { resetTableProperties } from "../../slices/tableSlice";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -67,6 +68,12 @@ const Events = () => {
 	let location = useLocation();
 
 	useEffect(() => {
+		// State variable for interrupting the load function
+		let allowLoadIntoTable = true;
+
+		// Clear redux of previous table data
+		dispatch(resetTableProperties());
+
 		dispatch(fetchFilters("events"))
 
 		// Reset text filter
@@ -76,7 +83,17 @@ const Events = () => {
 		dispatch(setShowActions(false));
 
 		// Load events on mount
-		loadEvents(dispatch);
+		const loadEvents = async () => {
+			// Fetching events from server
+			await dispatch(fetchEvents());
+
+			// Load events into table
+			if (allowLoadIntoTable) {
+				dispatch(loadEventsIntoTable());
+			}
+		}
+		// call the function
+		loadEvents();
 
 		// Function for handling clicks outside of an open dropdown menu
 		const handleClickOutside = (e: MouseEvent) => {
@@ -89,12 +106,13 @@ const Events = () => {
 		};
 
 		// Fetch events every five seconds
-		let fetchEventsInterval = setInterval(() => loadEvents(dispatch), 5000);
+		let fetchEventsInterval = setInterval(() => loadEvents(), 5000);
 
 		// Event listener for handle a click outside of dropdown menu
 		window.addEventListener("mousedown", handleClickOutside);
 
 		return () => {
+			allowLoadIntoTable = false;
 			window.removeEventListener("mousedown", handleClickOutside);
 			clearInterval(fetchEventsInterval);
 		};