Merge remote-tracking branch 'origin/main' into to-redux-toolkit-table

eslint.config.js

@@ -0,0 +1,9 @@
+import { FlatCompat } from "@eslint/eslintrc";
+
+const config = [
+    { ignores: ["build"] },
+    ...new FlatCompat({ baseDirectory: import.meta.dirname })
+        .extends("eslint-config-react-app"),
+];
+
+export default config;

package.json

@@ -45,7 +45,7 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && eslint . --max-warnings=0 && vite build",
     "serve": "vite preview",
     "test": "vitest"
   },
@@ -62,13 +62,20 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.5.0",
     "@redux-devtools/extension": "^3.3.0",
     "@types/lodash": "^4.17.4",
     "@types/node": "^20.14.1",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
+    "eslint": "^8.57.0",
+    "eslint-config-react-app": "^7.0.1",
     "prop-types": "^15.8.1",
+    "rollup-preserve-directives": "^1.1.1",
     "sass": "^1.77.4",
     "typescript": "^5.4.5",
     "uuid": "^9.0.1",

src/components/Footer.tsx

@@ -22,7 +22,7 @@ const Footer: React.FC = () => {
 	const lastModified = user?.ocVersion?.['last-modified']
 		? new Date(user.ocVersion['last-modified']).toISOString().substring(0, 10)
 		: 'unknown';
-	const aboutEnabled = orgProperties['org.opencastproject.admin.display_about']?.toLowerCase() === 'true';
+	const aboutEnabled = (orgProperties['org.opencastproject.admin.display_about'] || 'false').toLowerCase() === 'true';
 
 	return (
 		<footer id="main-footer">

src/components/Header.tsx

@@ -13,8 +13,7 @@ import {
 } from "../selectors/userInfoSelectors";
 import { availableHotkeys } from "../configs/hotkeysConfig";
 import { studioURL } from "../configs/generalConfig";
-import { getCurrentLanguageInformation, hasAccess } from "../utils/utils";
-import { overflowStyle } from "../utils/componentStyles";
+import { hasAccess } from "../utils/utils";
 import RegistrationModal from "./shared/RegistrationModal";
 import HotKeyCheatSheet from "./shared/HotKeyCheatSheet";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -25,9 +24,6 @@ import { Tooltip } from "./shared/Tooltip";
 import { HiTranslate } from "react-icons/hi";
 import { IconContext } from "react-icons";
 
-// Get code, flag and name of the current language
-const currentLanguage = getCurrentLanguageInformation();
-
 // References for detecting a click outside of the container of the dropdown menus
 const containerLang = React.createRef<HTMLDivElement>();
 const containerHelp = React.createRef<HTMLDivElement>();
@@ -161,11 +157,11 @@ const Header = () => {
 					{/* Select language */}
 					<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
 						<Tooltip title={t("LANGUAGE")}>
-							<div className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
+							<button className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
 								<IconContext.Provider value={{ style: {fontSize: "20px"} }}>
 									<HiTranslate />
 								</IconContext.Provider>
-							</div>
+							</button>
 						</Tooltip>
 						{displayMenuLang && <MenuLang />}
 					</div>
@@ -176,8 +172,8 @@ const Header = () => {
                     otherwise the app crashes */}
 					{!!orgProperties &&
 						!!orgProperties["org.opencastproject.admin.mediamodule.url"] && (
-							<Tooltip  title={t("MEDIAMODULE")}>
-								<div className="nav-dd">
+							<div className="nav-dd">
+								<Tooltip  title={t("MEDIAMODULE")}>
 									<a
 										href={
 											orgProperties["org.opencastproject.admin.mediamodule.url"]
@@ -186,30 +182,30 @@ const Header = () => {
 									>
 										<span className="fa fa-play-circle" />
 									</a>
-								</div>
-							</Tooltip>
+								</Tooltip>
+							</div>
 						)}
 
 					{/* Opencast Studio */}
 					{hasAccess("ROLE_STUDIO", user) && (
-						<Tooltip  title="Studio">
-							<div className="nav-dd">
+						<div className="nav-dd">
+							<Tooltip  title={t("STUDIO")}>
 								<a href={studioURL} target="_blank" rel="noreferrer">
 									<span className="fa fa-video-camera" />
 								</a>
-							</div>
-						</Tooltip>
+							</Tooltip>
+						</div>
 					)}
 
 					{/* System warnings and notifications */}
 					{hasAccess("ROLE_ADMIN", user) && (
-						<Tooltip title={t("SYSTEM_NOTIFICATIONS")}>
-							<div
-								className="nav-dd info-dd"
-								id="info-dd"
-								ref={containerNotify}
-							>
-								<div onClick={() => setMenuNotify(!displayMenuNotify)}>
+						<div
+							className="nav-dd info-dd"
+							id="info-dd"
+							ref={containerNotify}
+						>
+							<Tooltip title={t("SYSTEM_NOTIFICATIONS")}>
+								<button onClick={() => setMenuNotify(!displayMenuNotify)}>
 									<i className="fa fa-bell" aria-hidden="true" />
 									{errorCounter !== 0 && (
 										<span id="error-count" className="badge">
@@ -223,9 +219,9 @@ const Header = () => {
 											redirectToServices={redirectToServices}
 										/>
 									)}
-								</div>
-							</div>
-						</Tooltip>
+								</button>
+							</Tooltip>
+						</div>
 					)}
 
 					{/* Help */}
@@ -239,39 +235,40 @@ const Header = () => {
 							!!orgProperties[
 								"org.opencastproject.admin.help.restdocs.url"
 							]) && (
-							<Tooltip title="Help">
-								<div
-									className="nav-dd"
-									id="help-dd"
-									ref={containerHelp}
-								>
-									<div
-										className="fa fa-question-circle"
+							<div
+								className="nav-dd"
+								id="help-dd"
+								ref={containerHelp}
+							>
+								<Tooltip title={t("HELP.HELP")}>
+									<button
 										onClick={() => setMenuHelp(!displayMenuHelp)}
+									>
+										<span className="fa fa-question-circle"></span>
+									</button>
+								</Tooltip>
+								{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
+								{displayMenuHelp && (
+									<MenuHelp
+										hideMenuHelp={hideMenuHelp}
+										showRegistrationModal={showRegistrationModal}
+										showHotKeyCheatSheet={showHotKeyCheatSheet}
+										orgProperties={orgProperties}
+										user={user}
 									/>
-									{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
-									{displayMenuHelp && (
-										<MenuHelp
-											hideMenuHelp={hideMenuHelp}
-											showRegistrationModal={showRegistrationModal}
-											showHotKeyCheatSheet={showHotKeyCheatSheet}
-											orgProperties={orgProperties}
-											user={user}
-										/>
-									)}
-								</div>
-							</Tooltip>
+								)}
+							</div>
 						)}
 
 					{/* Username */}
 					<div className="nav-dd user-dd" id="user-dd" ref={containerUser}>
-						<div
+						<button
 							className="h-nav"
 							onClick={() => setMenuUser(!displayMenuUser)}
 						>
 							{user.user.name || user.user.username}
 							<span className="dropdown-icon" />
-						</div>
+						</button>
 						{/* Click on username, a dropdown menu with the option to logout opens */}
 						{displayMenuUser && <MenuUser />}
 					</div>
@@ -370,7 +367,7 @@ const MenuHelp = ({
 
 	return (
 		<>
-			<ul style={overflowStyle} className="dropdown-ul">
+			<ul className="dropdown-ul">
 				{/* Show only if documentationUrl is set */}
 				{!!orgProperties[
 					"org.opencastproject.admin.help.documentation.url"

src/components/events/partials/EventActionCell.tsx

@@ -104,13 +104,14 @@ const EventActionCell = ({
 	return (
 		<>
 			{/* Display modal for editing table view if table edit button is clicked */}
-			<EventDetailsModal
-				showModal={displayEventDetailsModal}
-				handleClose={hideEventDetailsModal}
-				tabIndex={eventDetailsTabIndex}
-				eventTitle={row.title}
-				eventId={row.id}
-			/>
+			{displayEventDetailsModal &&
+				<EventDetailsModal
+					handleClose={hideEventDetailsModal}
+					tabIndex={eventDetailsTabIndex}
+					eventTitle={row.title}
+					eventId={row.id}
+				/>
+			}
 
 			{!!row.series && displaySeriesDetailsModal && (
 				<SeriesDetailsModal

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

@@ -14,38 +14,36 @@ import {
 } from "../../../../utils/utils";
 import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils";
 import { useAppSelector } from "../../../../store";
+import { MetadataCatalog } from "../../../../slices/eventDetailsSlice";
 
 /**
  * This component renders metadata details of a certain event or series
  */
-const DetailsExtendedMetadataTab: React.FC<{
-	resourceId: any,	//TODO: Type this
-	editAccessRole: any,	//TODO: Type this
-	metadata: any,	//TODO: Type this
-	updateResource: any,	//TODO: Type this
-}> = ({
+const DetailsExtendedMetadataTab = ({
 	resourceId,
 	editAccessRole,
 	metadata,
 	updateResource,
+}: {
+	resourceId: string,
+	editAccessRole: string,
+	metadata: MetadataCatalog[],
+	updateResource: (id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
 }) => {
 	const { t } = useTranslation();
 
 	const user = useAppSelector(state => getUserInformation(state));
 
-// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type.
-	const handleSubmit = (values, catalog) => {
+	const handleSubmit = (values: { [key: string]: any }, catalog: MetadataCatalog) => {
 		updateResource(resourceId, values, catalog);
 	};
 
 	// set current values of metadata fields as initial values
-// @ts-expect-error TS(7006): Parameter 'metadataCatalog' implicitly has an 'any... Remove this comment to see the full error message
-	const getInitialValues = (metadataCatalog) => {
+	const getInitialValues = (metadataCatalog: MetadataCatalog) => {
 		let initialValues = {};
 
 		// Transform metadata fields and their values provided by backend (saved in redux)
 		if (!!metadataCatalog.fields && metadataCatalog.fields.length > 0) {
-// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type.
 			metadataCatalog.fields.forEach((field) => {
 				let value = parseValueForBooleanStrings(field.value);
 // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
@@ -77,7 +75,6 @@ const DetailsExtendedMetadataTab: React.FC<{
 						//iterate through metadata catalogs
 						!!metadata &&
 							metadata.length > 0 &&
-// @ts-expect-error TS(7006): Parameter 'catalog' implicitly has an 'any' type.
 							metadata.map((catalog, key) => (
 								// initialize form
 								<Formik
@@ -96,7 +93,6 @@ const DetailsExtendedMetadataTab: React.FC<{
 													<tbody>
 														{/* Render table row for each metadata field depending on type */}
 														{!!catalog.fields &&
-// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type.
 															catalog.fields.map((field, index) => (
 																<tr key={index}>
 																	<td>

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

@@ -11,29 +11,29 @@ import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import { hasAccess, isJson } from "../../../../utils/utils";
 import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils";
 import { useAppSelector } from "../../../../store";
+import { MetadataCatalog } from "../../../../slices/eventDetailsSlice";
 
 /**
  * This component renders metadata details of a certain event or series
  */
-const DetailsMetadataTab: React.FC<{
-	metadataFields: any,	//TODO: Type this
-	updateResource: any,	//TODO: Type this
-	resourceId: any,	//TODO: Type this
-	header: any,	//TODO: Type this
-	editAccessRole: any,	//TODO: Type this
-}> = ({
+const DetailsMetadataTab = ({
 	metadataFields,
 	updateResource,
 	resourceId,
 	header,
 	editAccessRole,
+}: {
+	metadataFields: MetadataCatalog,
+	updateResource: (id: string, values: { [key: string]: any }) => void,
+	resourceId: string,
+	header: string,
+	editAccessRole: string,
 }) => {
 	const { t } = useTranslation();
 
 	const user = useAppSelector(state => getUserInformation(state));
 
-// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type.
-	const handleSubmit = (values) => {
+	const handleSubmit = (values: { [key: string]: any }) => {
 		updateResource(resourceId, values);
 	};
 
@@ -47,7 +47,6 @@ const DetailsMetadataTab: React.FC<{
 			!!metadataFields.fields &&
 			metadataFields.fields.length > 0
 		) {
-// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type.
 			metadataFields.fields.forEach((field) => {
 // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
 				initialValues[field.id] = field.value;
@@ -88,7 +87,6 @@ const DetailsMetadataTab: React.FC<{
 												{/* Render table row for each metadata field depending on type */}
 												{!!metadataFields &&
 													!!metadataFields.fields &&
-// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type.
 													metadataFields.fields.map((field, key) => (
 														<tr key={key}>
 															<td>
@@ -126,7 +124,7 @@ const DetailsMetadataTab: React.FC<{
 																) : (
 																	<td>{
 																		field.type === "time" || field.type === "date"
-																			? <RenderDate date={field.value} />
+																			? <RenderDate date={field.value as string} />
 																			: field.value
 																	}</td>
 																)