Merge branch 'jumpy-dropdowns' of Arnei/opencast-admin-interface into r/19.x

Pull request #1559
Fixes #1506
  Fix dropdown resetting focus

Author: gregorydlogan

src/components/shared/Table.tsx

@@ -23,6 +23,7 @@ import {
 	selectRowIds,
 	selectRowById,
 	rowsSelectors,
+	resetTableProperties,
 } from "../../slices/tableSlice";
 import {
 	changeAllSelected,
@@ -35,12 +36,14 @@ import cn from "classnames";
 import EditTableViewModal from "../shared/EditTableViewModal";
 
 import Notifications from "./Notifications";
-import { useAppDispatch, useAppSelector } from "../../store";
+import { AppThunk, useAppDispatch, useAppSelector } from "../../store";
 import { TableColumn } from "../../configs/tableConfigs/aclsTableConfig";
 import ButtonLikeAnchor from "./ButtonLikeAnchor";
 import { ModalHandle } from "./modals/Modal";
 import { ParseKeys } from "i18next";
 import { LuChevronDown, LuChevronLeft, LuChevronRight, LuChevronUp } from "react-icons/lu";
+import { AsyncThunk } from "@reduxjs/toolkit";
+import { useLocation } from "react-router";
 
 const containerPageSize = React.createRef<HTMLDivElement>();
 
@@ -53,15 +56,49 @@ export type TemplateMap = {
  */
 const Table = ({
 	templateMap,
+	fetchResource,
+	loadResourceIntoTable,
 }: {
 	templateMap: TemplateMap
+	fetchResource: AsyncThunk<any, void, any>,
+	loadResourceIntoTable: () => AppThunk,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
+	const location = useLocation();
 
 	const editTableViewModalRef = useRef<ModalHandle>(null);
 	const selectAllCheckboxRef = useRef<HTMLInputElement>(null);
 
+	useEffect(() => {
+		// State variable for interrupting the load function
+		let allowLoadIntoTable = true;
+
+		// Clear table of previous data
+		dispatch(resetTableProperties());
+
+		// Load resource on mount
+		const loadResource = async () => {
+			// Fetching resources from server
+			await dispatch(fetchResource());
+
+			// Load resources into table
+			if (allowLoadIntoTable) {
+				dispatch(loadResourceIntoTable());
+			}
+		};
+		loadResource();
+
+		// Fetch resources every minute
+		const fetchResourceInterval = setInterval(loadResource, 5000);
+
+		return () => {
+			allowLoadIntoTable = false;
+			clearInterval(fetchResourceInterval);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [location.hash]);
+
 	const forceDeselectAll = () => {
 		dispatch(changeAllSelected(false));
 		if (selectAllCheckboxRef.current?.checked) {

src/components/shared/TableFilters.tsx

@@ -9,6 +9,7 @@ import {
 	FilterData,
 	editFilterValue,
 	editTextFilter,
+	fetchFilters,
 	removeTextFilter,
 	resetFilterValues,
 } from "../../slices/tableFilterSlice";
@@ -30,6 +31,7 @@ import SearchContainer from "./SearchContainer";
 import { Resource } from "../../slices/tableSlice";
 import { HiFunnel } from "react-icons/hi2";
 import { LuSettings, LuX } from "react-icons/lu";
+import { useLocation } from "react-router";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -45,6 +47,7 @@ const TableFilters = ({
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
+	const location = useLocation();
 
 	const filterMap = useAppSelector(state => getFilters(state, resource));
 	const [selectedFilter, setSelectedFilter] = useState("");
@@ -63,6 +66,11 @@ const TableFilters = ({
 
 	const filter = filterMap.find(({ name }) => name === selectedFilter);
 
+	useEffect(() => {
+		dispatch(fetchFilters(resource));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [location.hash]);
+
 	// Remove all selected filters, no filter should be "active" anymore
 	const removeFilters = async () => {
 		// Clear state

src/components/shared/TablePage.tsx

@@ -1,15 +1,13 @@
-import { ReactNode, useEffect } from "react";
+import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import TableFilters from "../shared/TableFilters";
 import Table, { TemplateMap } from "../shared/Table";
 import Notifications from "../shared/Notifications";
-import { fetchFilters } from "../../slices/tableFilterSlice";
 import { CreateType, NavBarLink } from "../NavBar";
-import { AppThunk, RootState, useAppDispatch, useAppSelector } from "../../store";
-import { resetTableProperties, Resource } from "../../slices/tableSlice";
+import { AppThunk, RootState, useAppSelector } from "../../store";
+import { Resource } from "../../slices/tableSlice";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import { ParseKeys } from "i18next";
-import { useLocation } from "react-router";
 import MainPage from "./MainPage";
 
 /**
@@ -39,43 +37,9 @@ const TablePage = ({
 	children?: ReactNode
 }) => {
 	const { t } = useTranslation();
-	const dispatch = useAppDispatch();
-
-	const location = useLocation();
 
 	const numberOfRows = useAppSelector(state => getTotalResources(state));
 
-	useEffect(() => {
-		// State variable for interrupting the load function
-		let allowLoadIntoTable = true;
-
-		// Clear table of previous data
-		dispatch(resetTableProperties());
-
-		dispatch(fetchFilters(resource));
-
-		// Load resource on mount
-		const loadResource = async () => {
-			// Fetching resources from server
-			await dispatch(fetchResource());
-
-			// Load resources into table
-			if (allowLoadIntoTable) {
-				dispatch(loadResourceIntoTable());
-			}
-		};
-		loadResource();
-
-		// Fetch resources every minute
-		const fetchResourceInterval = setInterval(loadResource, 5000);
-
-		return () => {
-			allowLoadIntoTable = false;
-			clearInterval(fetchResourceInterval);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [location.hash]);
-
 	return (
 		<MainPage
 			navBarLinks={navBarLinks}
@@ -100,7 +64,11 @@ const TablePage = ({
 					<h4>{t("TABLE_SUMMARY", { numberOfRows })}</h4>
 				</div>
 				{/* Include table component */}
-				<Table templateMap={templateMap} />
+				<Table
+					templateMap={templateMap}
+					fetchResource={fetchResource}
+					loadResourceIntoTable={loadResourceIntoTable}
+				/>
 		</MainPage>
 	);
 };

src/hooks/useTableFilterStateValidation.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "../store";
+import store, { useAppDispatch } from "../store";
 import { resetCorruptedState } from "../slices/tableFilterSlice";
 
 /**
@@ -9,10 +9,11 @@ import { resetCorruptedState } from "../slices/tableFilterSlice";
  */
 export const useTableFilterStateValidation = () => {
 	const dispatch = useAppDispatch();
-	const tableFilters = useAppSelector(state => state.tableFilters);
 
 	useEffect(() => {
 		// Check for corrupted state and dispatch reset action if needed
+		const tableFilters = store.getState().tableFilters;
+
 		const hasCorruption =
 			!Array.isArray(tableFilters.data) ||
 			!Array.isArray(tableFilters.textFilter) ||
@@ -22,6 +23,5 @@ export const useTableFilterStateValidation = () => {
 			console.warn("Detected corrupted table filter state, resetting to defaults");
 			dispatch(resetCorruptedState());
 		}
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [dispatch]);
 };