Restore (some) shareable links

src/components/events/Events.tsx

@@ -42,7 +42,9 @@ import {
 } from "../../slices/eventSlice";
 import { fetchSeries } from "../../slices/seriesSlice";
 import EventDetailsModal from "./partials/modals/EventDetailsModal";
-import { showModal } from "../../selectors/eventDetailsSelectors";
+import { showModal as showEventModal } from "../../selectors/eventDetailsSelectors";
+import { showModal as showSeriesModal } from "../../selectors/seriesDetailsSelectors";
+import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -55,7 +57,8 @@ const Events = () => {
 	const dispatch = useAppDispatch();
 
 	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
-	const displayEventDetailsModal = useAppSelector(state => showModal(state));
+	const displayEventDetailsModal = useAppSelector(state => showEventModal(state));
+	const displaySeriesDetailsModal = useAppSelector(state => showSeriesModal(state));
 
 	const [displayActionMenu, setActionMenu] = useState(false);
 	const [displayNavigation, setNavigation] = useState(false);
@@ -308,14 +311,17 @@ const Events = () => {
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: events })}</h4>
 				</div>
 
-				{/*Include table modal*/}
+				{/*Include table modals*/}
 				{displayEventDetailsModal &&
 					<EventDetailsModal />
 				}
+				{displaySeriesDetailsModal &&
+					<SeriesDetailsModal />
+				}
 
 				{/*Include table component*/}
 				{/* <Table templateMap={eventsTemplateMap} resourceType="events" /> */}
-        <Table templateMap={eventsTemplateMap} />
+				<Table templateMap={eventsTemplateMap} />
 			</MainView>
 			<Footer />
 		</>

src/components/events/Series.tsx

@@ -34,6 +34,8 @@ import {
 	showActionsSeries,
 } from "../../slices/seriesSlice";
 import { fetchSeriesDetailsTobiraNew } from "../../slices/seriesSlice";
+import { showModal } from "../../selectors/seriesDetailsSelectors";
+import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -51,6 +53,7 @@ const Series = () => {
 
   const user = useAppSelector(state => getUserInformation(state));
 	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
+	const displaySeriesDetailsModal = useAppSelector(state => showModal(state));
 
 	let location = useLocation();
 
@@ -142,11 +145,11 @@ const Series = () => {
 	};
 
 	useHotkeys(
-    availableHotkeys.general.NEW_SERIES.sequence,
-    () => showNewSeriesModal(),
+		availableHotkeys.general.NEW_SERIES.sequence,
+		() => showNewSeriesModal(),
 		{ description: t(availableHotkeys.general.NEW_SERIES.description) ?? undefined },
-    [showNewSeriesModal]
-  );
+		[showNewSeriesModal]
+	);
 
 	return (
 		<>
@@ -234,6 +237,11 @@ const Series = () => {
 					{/* Include table view */}
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: series })}</h4>
 				</div>
+
+				{displaySeriesDetailsModal &&
+					<SeriesDetailsModal />
+				}
+
 				<Table templateMap={seriesTemplateMap} />
 			</MainView>
 			<Footer />

src/components/events/partials/EventActionCell.tsx

@@ -4,19 +4,12 @@ import ConfirmModal from "../../shared/ConfirmModal";
 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,
-	fetchSeriesDetailsFeeds,
-	fetchSeriesDetailsMetadata,
-	fetchSeriesDetailsTheme,
-	fetchSeriesDetailsThemeNames,
-} from "../../../slices/seriesDetailsSlice";
+import { openModal as openSeriesModal } from "../../../slices/seriesDetailsSlice";
 import { Event, deleteEvent } from "../../../slices/eventSlice";
 import { Tooltip } from "../../shared/Tooltip";
-import { openModal } from "../../../slices/eventDetailsSlice";
+import { openModal as openEventModal } from "../../../slices/eventDetailsSlice";
 
 /**
  * This component renders the action cells of events in the table view
@@ -30,7 +23,6 @@ const EventActionCell = ({
 	const dispatch = useAppDispatch();
 
 	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
 	const [displayEmbeddingCodeModal, setEmbeddingCodeModal] = useState(false);
 
 	const user = useAppSelector(state => getUserInformation(state));
@@ -51,52 +43,30 @@ const EventActionCell = ({
 		setEmbeddingCodeModal(true);
 	};
 
-	const showSeriesDetailsModal = () => {
-		setSeriesDetailsModal(true);
-	};
-
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
 	const onClickSeriesDetails = async () => {
 		if (!!row.series) {
-			await dispatch(fetchSeriesDetailsMetadata(row.series.id));
-			await dispatch(fetchSeriesDetailsAcls(row.series.id));
-			await dispatch(fetchSeriesDetailsFeeds(row.series.id));
-			await dispatch(fetchSeriesDetailsTheme(row.series.id));
-			await dispatch(fetchSeriesDetailsThemeNames());
-
-			showSeriesDetailsModal();
+			await dispatch(openSeriesModal(row.series));
 		}
 	};
 
 	const onClickEventDetails = () => {
-		dispatch(openModal(EventDetailsPage.Metadata, row));
+		dispatch(openEventModal(EventDetailsPage.Metadata, row));
 	};
 
 	const onClickComments = () => {
-		dispatch(openModal(EventDetailsPage.Comments, row));
+		dispatch(openEventModal(EventDetailsPage.Comments, row));
 	};
 
 	const onClickWorkflow = () => {
-		dispatch(openModal(EventDetailsPage.Workflow, row));
+		dispatch(openEventModal(EventDetailsPage.Workflow, row));
 	};
 
 	const onClickAssets = () => {
-		dispatch(openModal(EventDetailsPage.Assets, row));
+		dispatch(openEventModal(EventDetailsPage.Assets, row));
 	};
 
 	return (
 		<>
-			{!!row.series && displaySeriesDetailsModal && (
-				<SeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
-					seriesId={row.series.id}
-					seriesTitle={row.series.title}
-				/>
-			)}
-
 			{/* Open event details */}
 			{hasAccess("ROLE_UI_EVENTS_DETAILS_VIEW", user) && (
 				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}>

src/components/events/partials/SeriesActionsCell.tsx

@@ -1,15 +1,7 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
-import SeriesDetailsModal from "./modals/SeriesDetailsModal";
-import {
-	fetchSeriesDetailsThemeNames,
-	fetchSeriesDetailsAcls,
-	fetchSeriesDetailsFeeds,
-	fetchSeriesDetailsMetadata,
-	fetchSeriesDetailsTheme,
-	fetchSeriesDetailsTobira,
-} from "../../../slices/seriesDetailsSlice";
+import { openModal } from "../../../slices/seriesDetailsSlice";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import {
@@ -37,7 +29,6 @@ const SeriesActionsCell = ({
 	const dispatch = useAppDispatch();
 
 	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const hasEvents = useAppSelector(state => getSeriesHasEvents(state));
@@ -57,41 +48,18 @@ const SeriesActionsCell = ({
 		dispatch(deleteSeries(id));
 	};
 
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
-	const showSeriesDetailsModal = async () => {
-		await dispatch(fetchSeriesDetailsMetadata(row.id));
-		await dispatch(fetchSeriesDetailsAcls(row.id));
-		await dispatch(fetchSeriesDetailsFeeds(row.id));
-		await dispatch(fetchSeriesDetailsTheme(row.id));
-		await dispatch(fetchSeriesDetailsThemeNames());
-		await dispatch(fetchSeriesDetailsTobira(row.id));
-
-		setSeriesDetailsModal(true);
-	};
-
 	return (
 		<>
 			{/* series details */}
 			{hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
 				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
 					<button
-						onClick={() => showSeriesDetailsModal()}
+						onClick={() => dispatch(openModal(row))}
 						className="button-like-anchor more-series"
 					/>
 				</Tooltip>
 			)}
 
-			{displaySeriesDetailsModal && (
-				<SeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
-					seriesId={row.id}
-					seriesTitle={row.title}
-				/>
-			)}
-
 			{/* delete series */}
 			{hasAccess("ROLE_UI_SERIES_DELETE", user) && (
 				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DELETE")}>

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

@@ -66,12 +66,10 @@ export type AssetTabHierarchy = "entry" | "add-asset" | "asset-attachments" | "a
  */
 const EventDetails = ({
 	eventId,
-	close,
 	policyChanged,
 	setPolicyChanged,
 }: {
 	eventId: string,
-	close?: () => void,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
 }) => {

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

@@ -1,12 +1,18 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 import {
+	getModalPage,
 	getSeriesDetailsExtendedMetadata,
 	getSeriesDetailsFeeds,
 	getSeriesDetailsMetadata,
 	getSeriesDetailsTheme,
 	getSeriesDetailsThemeNames,
+	isFetchingFeeds,
+	isFetchingMetadata,
+	isFetchingStatistics,
+	isFetchingThemes,
+	isFetchingTobiraData,
 	getSeriesDetailsTobiraDataError,
 	hasStatistics as seriesHasStatistics,
 } from "../../../../selectors/seriesDetailsSelectors";
@@ -20,10 +26,15 @@ import DetailsMetadataTab from "../ModalTabsAndPages/DetailsMetadataTab";
 import DetailsExtendedMetadataTab from "../ModalTabsAndPages/DetailsExtendedMetadataTab";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import {
+	setModalPage,
 	fetchSeriesStatistics,
-	setTobiraTabHierarchy,
 	updateExtendedSeriesMetadata,
 	updateSeriesMetadata,
+	fetchSeriesDetailsMetadata,
+	fetchSeriesDetailsTheme,
+	fetchSeriesDetailsThemeNames,
+	fetchSeriesDetailsFeeds,
+	fetchSeriesDetailsTobira,
 } from "../../../../slices/seriesDetailsSlice";
 import DetailsTobiraTab from "../ModalTabsAndPages/DetailsTobiraTab";
 
@@ -42,21 +53,30 @@ const SeriesDetails = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
+	const metadataFields = useAppSelector(state => getSeriesDetailsMetadata(state));
 	const extendedMetadata = useAppSelector(state => getSeriesDetailsExtendedMetadata(state));
+	const isLoadingMetadata = useAppSelector(state => isFetchingMetadata(state));
 	const feeds = useAppSelector(state => getSeriesDetailsFeeds(state));
-	const metadataFields = useAppSelector(state => getSeriesDetailsMetadata(state));
+	const isLoadingFeeds = useAppSelector(state => isFetchingFeeds(state));
 	const theme = useAppSelector(state => getSeriesDetailsTheme(state));
 	const themeNames = useAppSelector(state => getSeriesDetailsThemeNames(state));
+	const isLoadingThemes = useAppSelector(state => isFetchingThemes(state));
 	const hasStatistics = useAppSelector(state => seriesHasStatistics(state));
+	const isLoadingStatistics = useAppSelector(state => isFetchingStatistics(state));
 	const tobiraError = useAppSelector(state => getSeriesDetailsTobiraDataError(state));
+	const isLoadingTobiraData = useAppSelector(state => isFetchingTobiraData(state));
 
 	useEffect(() => {
+		dispatch(fetchSeriesDetailsMetadata(seriesId));
 		dispatch(fetchSeriesStatistics(seriesId));
-		dispatch(setTobiraTabHierarchy("main"));
+		dispatch(fetchSeriesDetailsTheme(seriesId));
+		dispatch(fetchSeriesDetailsFeeds(seriesId));
+		dispatch(fetchSeriesDetailsTobira(seriesId));
+		dispatch(fetchSeriesDetailsThemeNames());
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const [page, setPage] = useState(0);
+	const page = useAppSelector(state => getModalPage(state));
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const orgProperties = useAppSelector(state => getOrgProperties(state));
@@ -101,7 +121,7 @@ const SeriesDetails = ({
 	];
 
 	const openTab = (tabNr: number) => {
-		setPage(tabNr);
+		dispatch(setModalPage(tabNr));
 	};
 
 	return (
@@ -126,7 +146,7 @@ const SeriesDetails = ({
 
 			{/* render modal content depending on current page */}
 			<div>
-				{page === 0 && (
+				{page === 0 && !isLoadingMetadata && (
 					<DetailsMetadataTab
 						metadataFields={metadataFields}
 						resourceId={seriesId}
@@ -135,7 +155,7 @@ const SeriesDetails = ({
 						editAccessRole="ROLE_UI_SERIES_DETAILS_METADATA_EDIT"
 					/>
 				)}
-				{page === 1 && (
+				{page === 1 && !isLoadingMetadata && (
 					<DetailsExtendedMetadataTab
 						resourceId={seriesId}
 						metadata={extendedMetadata}
@@ -151,26 +171,28 @@ const SeriesDetails = ({
 						setPolicyChanged={setPolicyChanged}
 					/>
 				)}
-				{page === 3 && (
+				{page === 3 && !isLoadingThemes && (
 					<SeriesDetailsThemeTab
 						theme={theme}
 						themeNames={themeNames}
 						seriesId={seriesId}
 					/>
 				)}
-				{page === 4 && (
+				{page === 4 && !isLoadingTobiraData && (
 					<DetailsTobiraTab
 						kind="series"
 						id={seriesId}
 					/>
 				)}
-				{page === 5 && (
+				{page === 5 && !isLoadingStatistics && (
 					<SeriesDetailsStatisticTab
 						seriesId={seriesId}
 						header={tabs[page].tabNameTranslation}
 					/>
 				)}
-				{page === 6 && <SeriesDetailsFeedsTab feeds={feeds} />}
+				{page === 6 && !isLoadingFeeds && (
+					<SeriesDetailsFeedsTab feeds={feeds} />
+				)}
 			</div>
 		</>
 	);