Merge branch 'main' into css-not-clearfixed

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,
@@ -23,6 +22,7 @@ import { UserInfoState } from "../slices/userInfoSlice";
 import { Tooltip } from "./shared/Tooltip";
 import { HiTranslate } from "react-icons/hi";
 import { IconContext } from "react-icons";
+import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
 import { ModalHandle } from "./shared/modals/Modal";
 
 // References for detecting a click outside of the container of the dropdown menus
@@ -73,14 +73,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 +208,6 @@ const Header = () => {
 							{displayMenuNotify && (
 								<MenuNotify
 									healthStatus={healthStatus}
-									redirectToServices={redirectToServices}
 								/>
 							)}
 						</div>
@@ -288,12 +279,12 @@ const MenuLang = () => {
 			{/* one list item for each available language */}
 			{languages.map((language, key) => (
 				<li key={key}>
-					<button
-						className={"button-like-anchor" + (i18n.language === language.code ? " selected" : "")}
+					<ButtonLikeAnchor
+						extraClassName={(i18n.language === language.code ? "selected" : "")}
 						onClick={() => changeLanguage(language.code)}
 					>
 						{language.long}
-					</button>
+					</ButtonLikeAnchor>
 				</li>
 			))}
 		</ul>
@@ -302,20 +293,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 +325,7 @@ const MenuNotify = ({
 									{service.status}
 								</span>
 							)}
-						</Link>
+						</button>
 					)}
 				</li>
 			))}
@@ -396,16 +394,16 @@ const MenuHelp = ({
 						</li>
 					)}
 				<li>
-					<button className="button-like-anchor" onClick={() => showHotKeys()}>
+					<ButtonLikeAnchor onClick={() => showHotKeys()}>
 						<span>{t("HELP.HOTKEY_CHEAT_SHEET")}</span>
-					</button>
+					</ButtonLikeAnchor>
 				</li>
 				{/* Adoter registration Modal */}
 				{user.isAdmin && (
 					<li>
-						<button className="button-like-anchor" onClick={() => showAdoptersRegistrationModal()}>
+						<ButtonLikeAnchor onClick={() => showAdoptersRegistrationModal()}>
 							<span>{t("HELP.ADOPTER_REGISTRATION")}</span>
-						</button>
+						</ButtonLikeAnchor>
 					</li>
 				)}
 			</ul>
@@ -418,9 +416,9 @@ const MenuUser = () => {
 	return (
 		<ul className="dropdown-ul">
 			<li>
-				<button className="button-like-anchor" onClick={() => logout()}>
+				<ButtonLikeAnchor onClick={() => logout()}>
 					<span className="logout-icon">{t("LOGOUT")}</span>
-				</button>
+				</ButtonLikeAnchor>
 			</li>
 		</ul>
 	);

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"
 					},
 				]}