Unify Details Modal

Reduces duplicate code by creating a "DetailsModal" component for e.g. event details or user details. Functionality should be unchanged, but there may be some slight CSS changes.
opencast · Sep 11, 2024 · 3e12960 · 3e12960
1 parent eb117d4
commit 3e12960
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 360 deletions.
diff --git a/src/components/configuration/partials/ThemesActionsCell.tsx b/src/components/configuration/partials/ThemesActionsCell.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
-import ThemeDetailsModal from "./wizard/ThemeDetailsModal";
 import {
 	fetchThemeDetails,
 	fetchUsage,
@@ -11,6 +10,8 @@ import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { deleteTheme, ThemeDetailsType } from "../../../slices/themeSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import ThemeDetails from "./wizard/ThemeDetails";
+import DetailsModal from "../../shared/modals/DetailsModal";
 
 /**
  * This component renders the action cells of themes in the table view
@@ -60,10 +61,13 @@ const ThemesActionsCell = ({
 			)}
 
 			{displayThemeDetails && (
-				<ThemeDetailsModal
+				<DetailsModal
 					handleClose={hideThemeDetails}
-					themeName={row.name}
-				/>
+					title={row.name}
+					prefix={"CONFIGURATION.THEMES.DETAILS.EDITCAPTION"}
+				>
+					<ThemeDetails close={hideThemeDetails} />
+				</DetailsModal>
 			)}
 
 			{/* delete themes */}

diff --git a/src/components/configuration/partials/wizard/ThemeDetails.tsx b/src/components/configuration/partials/wizard/ThemeDetails.tsx
@@ -20,10 +20,10 @@ import { ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
 /**
  * This component manages the pages of the theme details
  */
-const ThemeDetails : React.FC<{
+const ThemeDetails = ({
+	close,
+}: {
 	close: () => void,
-}> = ({
-  close,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();

diff --git a/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx b/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx
diff --git a/src/components/events/partials/modals/EventDetailsModal.tsx b/src/components/events/partials/modals/EventDetailsModal.tsx
@@ -3,10 +3,9 @@ import { useTranslation } from "react-i18next";
 import EventDetails from "./EventDetails";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { getModalEvent } from "../../../../selectors/eventDetailsSelectors";
 import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlice";
+import DetailsModal from "../../../shared/modals/DetailsModal";
 
 /**
  * This component renders the modal for displaying event details
@@ -37,40 +36,18 @@ const EventDetailsModal = () => {
 		}
 	};
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
 	return (
-		// todo: add hotkeys
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section
-				id="event-details-modal"
-				tabIndex={0}
-				className="modal wizard modal-animation"
-			>
-				<header>
-					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
-					<h2>
-						{
-							t("EVENTS.EVENTS.DETAILS.HEADER", {
-								resourceId: event.title,
-							}) /*Event details - {resourceTitle}*/
-						}
-					</h2>
-				</header>
-
-				<EventDetails
-					eventId={event.id}
-					policyChanged={policyChanged}
-					setPolicyChanged={(value) => setPolicyChanged(value)}
-				/>
-			</section>
-		</>
+		<DetailsModal
+			handleClose={close}
+			prefix={"EVENTS.EVENTS.DETAILS.HEADER"}
+			title={event.title}
+		>
+			<EventDetails
+				eventId={event.id}
+				policyChanged={policyChanged}
+				setPolicyChanged={(value) => setPolicyChanged(value)}
+			/>
+		</DetailsModal>
 	)
 };
 

diff --git a/src/components/events/partials/modals/SeriesDetailsModal.tsx b/src/components/events/partials/modals/SeriesDetailsModal.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import SeriesDetails from "./SeriesDetails";
-import { useHotkeys } from "react-hotkeys-hook";
-import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import DetailsModal from "../../../shared/modals/DetailsModal";
 
 /**
  * This component renders the modal for displaying series details
@@ -32,32 +31,18 @@ const SeriesDetailsModal = ({
 		}
 	};
 
-	useHotkeys(
-		availableHotkeys.general.CLOSE_MODAL.sequence,
-		() => close(),
-		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
-		[close],
-  	);
-
-	// todo: add hotkeys
 	return (
-		<>
-			<div className="modal-animation modal-overlay" />
-			<section className="modal modal-animation" id="series-details-modal">
-				<header>
-					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
-					<h2>
-						{t("EVENTS.SERIES.DETAILS.HEADER", { resourceId: seriesTitle })}
-					</h2>
-				</header>
-
+		<DetailsModal
+			handleClose={close}
+			prefix={"EVENTS.SERIES.DETAILS.HEADER"}
+			title={seriesTitle}
+		>
 				<SeriesDetails
 					seriesId={seriesId}
 					policyChanged={policyChanged}
 					setPolicyChanged={(value) => setPolicyChanged(value)}
 				/>
-			</section>
-		</>
+		</DetailsModal>
 	);
 };
 

diff --git a/src/components/recordings/partials/RecordingsActionCell.tsx b/src/components/recordings/partials/RecordingsActionCell.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
-import RecordingDetailsModal from "./modal/RecordingDetailsModal";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { Recording, deleteRecording } from "../../../slices/recordingSlice";
 import { fetchRecordingDetails } from "../../../slices/recordingDetailsSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import DetailsModal from "../../shared/modals/DetailsModal";
+import RecordingsDetails from "./modal/RecordingsDetails";
 
 /**
  * This component renders the action cells of recordings in the table view
@@ -56,10 +57,13 @@ const RecordingsActionCell = ({
 			)}
 
 			{displayRecordingDetails && (
-				<RecordingDetailsModal
-					close={hideRecordingDetails}
-					recordingId={row.name}
-				/>
+				<DetailsModal
+					handleClose={hideRecordingDetails}
+					title={row.name}
+					prefix={"RECORDINGS.RECORDINGS.DETAILS.HEADER"}
+				>
+					<RecordingsDetails/>
+				</DetailsModal>
 			)}
 
 			{/* delete location/recording */}

diff --git a/src/components/recordings/partials/modal/RecordingDetailsModal.tsx b/src/components/recordings/partials/modal/RecordingDetailsModal.tsx
diff --git a/src/components/shared/modals/DetailsModal.tsx b/src/components/shared/modals/DetailsModal.tsx
@@ -0,0 +1,48 @@
+import React, { PropsWithChildren } from "react";
+import { useTranslation } from "react-i18next";
+import { useHotkeys } from "react-hotkeys-hook";
+import { availableHotkeys } from "../../../configs/hotkeysConfig";
+
+/**
+ * This component renders the modal for displaying series details
+ */
+const DetailsModal = ({
+	handleClose,
+	prefix,
+	title,
+	children
+}: PropsWithChildren<{
+	handleClose: () => void
+	prefix: string
+	title: string
+}>) => {
+	const { t } = useTranslation();
+
+	const close = () => {
+		handleClose();
+	};
+
+	useHotkeys(
+		availableHotkeys.general.CLOSE_MODAL.sequence,
+		() => close(),
+		{ description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined },
+		[close],
+	);
+
+	return (
+		<>
+			<div className="modal-animation modal-overlay" />
+			<section className="modal wizard modal-animation" id="details-modal">
+				<header>
+					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
+					<h2>
+						{t(prefix, { name: title })}
+					</h2>
+				</header>
+					{children}
+			</section>
+		</>
+	);
+};
+
+export default DetailsModal;
diff --git a/src/components/users/partials/AclsActionsCell.tsx b/src/components/users/partials/AclsActionsCell.tsx
@@ -2,12 +2,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
 import { AclResult, deleteAcl } from "../../../slices/aclSlice";
-import AclDetailsModal from "./modal/AclDetailsModal";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchAclDetails } from "../../../slices/aclDetailsSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import DetailsModal from "../../shared/modals/DetailsModal";
+import AclDetails from "./modal/AclDetails";
 
 /**
  * This component renders the action cells of acls in the table view
@@ -56,7 +57,13 @@ const AclsActionsCell = ({
 			)}
 
 			{displayAclDetails && (
-				<AclDetailsModal close={hideAclDetails} aclName={row.name} />
+				<DetailsModal
+					handleClose={hideAclDetails}
+					title={row.name}
+					prefix={"USERS.ACLS.DETAILS.HEADER"}
+				>
+					<AclDetails close={hideAclDetails} />
+				</DetailsModal>
 			)}
 
 			{/* delete ACL */}