Merge branch 'dont-render-series-modal-in-action-cells' of Arnei/opencast-admin-interface into r/17.x

Pull request #1435

  Don't render series modal in action cells

Author: gregorydlogan

src/components/events/Events.tsx

@@ -34,11 +34,11 @@ import {
 	setShowActions,
 } from "../../slices/eventSlice";
 import EventDetailsModal from "./partials/modals/EventDetailsModal";
-import { showModal } from "../../selectors/eventDetailsSelectors";
 import { eventsLinks } from "./partials/EventsNavigation";
 import { Modal, ModalHandle } from "../shared/modals/Modal";
 import TableActionDropdown from "../shared/TableActionDropdown";
 import { resetTableProperties } from "../../slices/tableSlice";
+import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
 
 /**
  * This component renders the table view of events
@@ -47,8 +47,6 @@ const Events = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const displayEventDetailsModal = useAppSelector(state => showModal(state));
-
 	const [displayNavigation, setNavigation] = useState(false);
 	const newEventModalRef = useRef<ModalHandle>(null);
 	const startTaskModalRef = useRef<ModalHandle>(null);
@@ -230,9 +228,8 @@ const Events = () => {
 				</div>
 
 				{/*Include table modal*/}
-				{displayEventDetailsModal &&
 					<EventDetailsModal />
-				}
+				<SeriesDetailsModal />
 
 				{/*Include table component*/}
 				{/* <Table templateMap={eventsTemplateMap} resourceType="events" /> */}

src/components/events/Series.tsx

@@ -28,13 +28,15 @@ import { Modal, ModalHandle } from "../shared/modals/Modal";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import TableActionDropdown from "../shared/TableActionDropdown";
 import { resetTableProperties } from "../../slices/tableSlice";
+import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
 
 /**
  * This component renders the table view of series
  */
 const Series = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
+
 	const [displayNavigation, setNavigation] = useState(false);
 	const newSeriesModalRef = useRef<ModalHandle>(null);
 	const deleteModalRef = useRef<ModalHandle>(null);
@@ -150,6 +152,10 @@ const Series = () => {
 					{/* Include table view */}
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: series })}</h4>
 				</div>
+
+				{/*Include table modal*/}
+				<SeriesDetailsModal />
+
 				<Table templateMap={seriesTemplateMap} />
 			</MainView>
 			<Footer />

src/components/events/partials/EventActionCell.tsx

@@ -3,21 +3,22 @@ import { useTranslation } from "react-i18next";
 import EmbeddingCodeModal from "./modals/EmbeddingCodeModal";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
-import SeriesDetailsModal from "./modals/SeriesDetailsModal";
 import { EventDetailsPage } from "./modals/EventDetails";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import {
 	fetchSeriesDetailsAcls,
 	fetchSeriesDetailsMetadata,
 	fetchSeriesDetailsTheme,
 	fetchSeriesDetailsThemeNames,
+	openModal as openSeriesModal,
 } from "../../../slices/seriesDetailsSlice";
 import { Event, deleteEvent } from "../../../slices/eventSlice";
 import { Tooltip } from "../../shared/Tooltip";
 import { openModal } from "../../../slices/eventDetailsSlice";
 import { ActionCellDelete } from "../../shared/ActionCellDelete";
 import { Modal, ModalHandle } from "../../shared/modals/Modal";
 import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
+import { SeriesDetailsPage } from "./modals/SeriesDetails";
 
 /**
  * This component renders the action cells of events in the table view
@@ -30,7 +31,6 @@ const EventActionCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const seriesDetailsModalRef = useRef<ModalHandle>(null);
 	const embeddingCodeModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
@@ -48,7 +48,7 @@ const EventActionCell = ({
 	};
 
 	const showSeriesDetailsModal = () => {
-		seriesDetailsModalRef.current?.open();
+		dispatch(openSeriesModal(SeriesDetailsPage.Metadata, row.series ? row.series : null));
 	};
 
 	const onClickSeriesDetails = async () => {
@@ -82,14 +82,6 @@ const EventActionCell = ({
 
 	return (
 		<>
-			{!!row.series && (
-				<SeriesDetailsModal
-					seriesId={row.series.id}
-					seriesTitle={row.series.title}
-					modalRef={seriesDetailsModalRef}
-				/>
-			)}
-
 			{/* Open event details */}
 			<ButtonLikeAnchor
 				onClick={onClickEventDetails}

src/components/events/partials/SeriesActionsCell.tsx

@@ -1,12 +1,12 @@
 import React, { useRef } from "react";
 import ConfirmModal from "../../shared/ConfirmModal";
-import SeriesDetailsModal from "./modals/SeriesDetailsModal";
 import {
 	fetchSeriesDetailsThemeNames,
 	fetchSeriesDetailsAcls,
 	fetchSeriesDetailsMetadata,
 	fetchSeriesDetailsTheme,
 	fetchSeriesDetailsTobira,
+	openModal,
 } from "../../../slices/seriesDetailsSlice";
 import {
 	getSeriesHasEvents,
@@ -20,6 +20,7 @@ import {
 } from "../../../slices/seriesSlice";
 import { ModalHandle } from "../../shared/modals/Modal";
 import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
+import { SeriesDetailsPage } from "./modals/SeriesDetails";
 
 /**
  * This component renders the action cells of series in the table view
@@ -32,7 +33,6 @@ const SeriesActionsCell = ({
 	const dispatch = useAppDispatch();
 
 	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
-	const detailsModalRef = useRef<ModalHandle>(null);
 
 	const hasEvents = useAppSelector(state => getSeriesHasEvents(state));
 	const deleteAllowed = useAppSelector(state => isSeriesDeleteAllowed(state));
@@ -60,7 +60,7 @@ const SeriesActionsCell = ({
 			dispatch(fetchSeriesDetailsTobira(row.id)),
 		]);
 
-		detailsModalRef.current?.open();
+		dispatch(openModal(SeriesDetailsPage.Metadata, row));
 	};
 
 	return (
@@ -73,12 +73,6 @@ const SeriesActionsCell = ({
 				// tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
 			/>
 
-			<SeriesDetailsModal
-				seriesId={row.id}
-				seriesTitle={row.title}
-				modalRef={detailsModalRef}
-			/>
-
 			{/* delete series */}
 			<ButtonLikeAnchor
 				onClick={() => showDeleteConfirmation()}

src/components/events/partials/modals/EventDetailsModal.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import EventDetails from "./EventDetails";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
-import { getModalEvent } from "../../../../selectors/eventDetailsSelectors";
+import { getModalEvent, showModal } from "../../../../selectors/eventDetailsSelectors";
 import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlice";
 import { Modal } from "../../../shared/modals/Modal";
 import { FormikProps } from "formik";
@@ -20,6 +20,7 @@ const EventDetailsModal = () => {
 	const [policyChanged, setPolicyChanged] = useState(false);
 	const formikRef = useRef<FormikProps<any>>(null);
 
+	const displayEventDetailsModal = useAppSelector(state => showModal(state));
 	const event = useAppSelector(state => getModalEvent(state))!;
 
 	const hideModal = () => {
@@ -44,19 +45,23 @@ const EventDetailsModal = () => {
 	};
 
 	return (
-		<Modal
-			open
-			closeCallback={close}
-			header={t("EVENTS.EVENTS.DETAILS.HEADER", { name: event.title })}
-			classId="details-modal"
-		>
-			<EventDetails
-				eventId={event.id}
-				policyChanged={policyChanged}
-				setPolicyChanged={(value) => setPolicyChanged(value)}
-				formikRef={formikRef}
-			/>
-		</Modal>
+		<>
+			{displayEventDetailsModal &&
+				<Modal
+					open
+					closeCallback={close}
+					header={t("EVENTS.EVENTS.DETAILS.HEADER", { name: event.title })}
+					classId="details-modal"
+				>
+					<EventDetails
+						eventId={event.id}
+						policyChanged={policyChanged}
+						setPolicyChanged={(value) => setPolicyChanged(value)}
+						formikRef={formikRef}
+					/>
+				</Modal>
+			}
+		</>
 	);
 }
 

src/components/events/partials/modals/SeriesDetails.tsx

@@ -30,6 +30,15 @@ import { removeNotificationWizardTobira } from "../../../../slices/notificationS
 import { ParseKeys } from "i18next";
 import { FormikProps } from "formik";
 
+export enum SeriesDetailsPage {
+	Metadata,
+	ExtendedMetadata,
+	AccessPolicy,
+	Theme,
+	Tobira,
+	Statistics,
+}
+
 /**
  * This component manages the tabs of the series details modal
  */

src/components/events/partials/modals/SeriesDetailsModal.tsx

@@ -2,30 +2,32 @@ import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import SeriesDetails from "./SeriesDetails";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
-import { useAppDispatch } from "../../../../store";
-import { Modal, ModalHandle } from "../../../shared/modals/Modal";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { Modal } from "../../../shared/modals/Modal";
 import { confirmUnsaved } from "../../../../utils/utils";
 import { FormikProps } from "formik";
+import { setModalSeries, setShowModal } from "../../../../slices/seriesDetailsSlice";
+import { getModalSeries, showModal } from "../../../../selectors/seriesDetailsSelectors";
 
 /**
  * This component renders the modal for displaying series details
  */
-const SeriesDetailsModal = ({
-	seriesTitle,
-	seriesId,
-	modalRef,
-}: {
-	seriesTitle: string
-	seriesId: string
-	modalRef: React.RefObject<ModalHandle | null>
-}) => {
+const SeriesDetailsModal = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
 	const formikRef = useRef<FormikProps<any>>(null);
 
+	const displaySeriesDetailsModal = useAppSelector(state => showModal(state));
+	const series = useAppSelector(state => getModalSeries(state))!;
+
+	const hideModal = () => {
+		dispatch(setModalSeries(null));
+		dispatch(setShowModal(false));
+	};
+
 	const close = () => {
 		let isUnsavedChanges = false
 		isUnsavedChanges = policyChanged
@@ -36,25 +38,30 @@ const SeriesDetailsModal = ({
 		if (!isUnsavedChanges || confirmUnsaved(t)) {
 			setPolicyChanged(false);
 			dispatch(removeNotificationWizardForm());
+			hideModal();
 			return true;
 		}
 		return false;
 	};
 
 	return (
-		<Modal
-			closeCallback={close}
-			header={t("EVENTS.SERIES.DETAILS.HEADER", { name: seriesTitle })}
-			classId="details-modal"
-			ref={modalRef}
-		>
-			<SeriesDetails
-				seriesId={seriesId}
-				policyChanged={policyChanged}
-				setPolicyChanged={(value) => setPolicyChanged(value)}
-				formikRef={formikRef}
-			/>
-		</Modal>
+		<>
+			{displaySeriesDetailsModal &&
+				<Modal
+					open
+					closeCallback={close}
+					header={t("EVENTS.SERIES.DETAILS.HEADER", { name: series.title })}
+					classId="details-modal"
+				>
+					<SeriesDetails
+						seriesId={series.id}
+						policyChanged={policyChanged}
+						setPolicyChanged={(value) => setPolicyChanged(value)}
+						formikRef={formikRef}
+					/>
+				</Modal>
+			}
+		</>
 	);
 };
 

src/selectors/seriesDetailsSelectors.ts

@@ -3,6 +3,11 @@ import { RootState } from "../store";
 /**
  * This file contains selectors regarding details of a certain series
  */
+/* selectors for modal */
+export const showModal = (state: RootState) => state.seriesDetails.modal.show;
+export const getModalPage = (state: RootState) => state.seriesDetails.modal.page;
+export const getModalSeries = (state: RootState) => state.seriesDetails.modal.series;
+
 export const getSeriesDetailsMetadata = (state: RootState) => state.seriesDetails.metadata;
 export const getSeriesDetailsExtendedMetadata = (state: RootState) => state.seriesDetails.extendedMetadata;
 export const getSeriesDetailsAcl = (state: RootState) => state.seriesDetails.acl;