From f1de4a63b7bc0c14a984450b5dae8265f86733e8 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Thu, 25 Jul 2024 14:17:55 +0200
Subject: [PATCH 01/11] Add Tobira tab to event details modal

This adapts the Tobira details component from series details
to be usable in both series and event context.

Note that an Opencast patch (todo: link that patch)
is necessary for this to work.
---
 ...ailsTobiraTab.tsx => DetailsTobiraTab.tsx} | 52 +++++++------
 .../ModalTabsAndPages/NewTobiraPage.tsx       |  3 -
 .../events/partials/modals/EventDetails.tsx   | 72 +++++++-----------
 .../events/partials/modals/SeriesDetails.tsx  | 44 +++--------
 .../adminui/languages/lang-en_US.json         | 10 ++-
 src/selectors/eventDetailsSelectors.ts        |  5 ++
 src/slices/eventDetailsSlice.ts               | 74 +++++++++++++++++++
 src/slices/seriesDetailsSlice.ts              |  2 +-
 src/styles/views/modals/_event-series.scss    |  1 +
 9 files changed, 160 insertions(+), 103 deletions(-)
 rename src/components/events/partials/ModalTabsAndPages/{SeriesDetailsTobiraTab.tsx => DetailsTobiraTab.tsx} (67%)

diff --git a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsTobiraTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
similarity index 67%
rename from src/components/events/partials/ModalTabsAndPages/SeriesDetailsTobiraTab.tsx
rename to src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
index c7a7416642..dd012fb270 100644
--- a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsTobiraTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
@@ -4,22 +4,32 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
 import { getSeriesDetailsTobiraData, getSeriesDetailsTobiraDataError } from "../../../../selectors/seriesDetailsSelectors";
 import { addNotification } from "../../../../slices/notificationSlice";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
+import { getEventDetailsTobiraData, getEventDetailsTobiraDataError } from "../../../../selectors/eventDetailsSelectors";
 
 /**
- * This component renders the theme page for new series in the new series wizard.
+ * This component renders the Tobira tab for new series and events
+ * in their respective details modal.
  */
-const SeriesDetailsTobiraTab = ({
-	seriesId
-}: {
-	seriesId: string,
-}) => {
+type DetailsTobiraTabProps = {
+	kind: "series" | "event";
+	id: string;
+}
+const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const tobiraData = useAppSelector(state => getSeriesDetailsTobiraData(state));
-	const error = useAppSelector(state => getSeriesDetailsTobiraDataError(state));
+	const tobiraData = useAppSelector(state => kind === "series"
+		? getSeriesDetailsTobiraData(state)
+		: getEventDetailsTobiraData(state)
+	);
+	const error = useAppSelector(state => kind === "series"
+		? getSeriesDetailsTobiraDataError(state)
+		: getEventDetailsTobiraDataError(state)
+	);
 
-	const directTobiraLink = tobiraData.baseURL + '/!s/:' + seriesId;
+	const i18nKey = kind === "series" ? "SERIES" : "EVENTS";
+	const prefix = kind === "series" ? "s" : "v";
+	const directTobiraLink = tobiraData.baseURL + `/!${prefix}/:` + id;
 
 	const copyTobiraDirectLink = () => {
 		navigator.clipboard.writeText(directTobiraLink).then(function () {
@@ -49,30 +59,30 @@ const SeriesDetailsTobiraTab = ({
 				<div className="full-col">
 					<div className="obj list-obj">
 						<header>
-							{t("EVENTS.SERIES.DETAILS.TABS.TOBIRA")}
+							{t(`EVENTS.${i18nKey}.DETAILS.TABS.TOBIRA`)}
 						</header>
 						{ !error &&
 							<>
 								<div className="obj-container">
 									<a href={directTobiraLink}>
-										{t("EVENTS.SERIES.DETAILS.TOBIRA.DIRECT_LINK")}
+										{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.DIRECT_LINK`)}
 									</a>
 									<button
 										className="tobira-copy-direct-link"
 										onClick={() => copyTobiraDirectLink()}
-										aria-label={t('EVENTS.SERIES.DETAILS.TOBIRA.COPY_DIRECT_LINK')}
+										aria-label={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
 									>
 										<i
 											aria-hidden="true"
 											className="fa fa-copy"
-											title={t('EVENTS.SERIES.DETAILS.TOBIRA.COPY_DIRECT_LINK')}
+											title={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
 										/>
 									</button>
 								</div>
 								<div className="obj-container">
 									<div className="obj tbl-list">
 										<header>
-											{t("EVENTS.SERIES.DETAILS.TOBIRA.PAGES")}
+											{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}
 										</header>
 										<div className="obj-container">
 											<table className="main-tbl">
@@ -80,15 +90,15 @@ const SeriesDetailsTobiraTab = ({
 													{(!tobiraData.hostPages || tobiraData.hostPages.length === 0) &&
 														<tr>
 															<td className="tobira-not-mounted">
-															{t("EVENTS.SERIES.DETAILS.TOBIRA.NOT_MOUNTED")}
+															{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.NOT_MOUNTED`)}
 															</td>
 														</tr>
 													}
-													{ tobiraData.hostPages.map((hostPage) => (
+													{tobiraData.hostPages.map(hostPage => (
 														<tr key={hostPage.path}>
 															<td>
 																<a href={tobiraData.baseURL + hostPage.path}>
-																	{ hostPage.path !== '/' &&
+																	{hostPage.path !== '/' &&
 																		<div>
 																			<span className="tobira-page-separator">/</span>
 																			{ hostPage.ancestors.map((ancestor, key) => (
@@ -100,14 +110,14 @@ const SeriesDetailsTobiraTab = ({
 																		</div>
 																	}
 																	<span className="tobira-leaf-page">
-																		{ hostPage.path !== '/' &&
+																		{hostPage.path !== '/' &&
 																			<span>
 																				{hostPage.title}
 																			</span>
 																		}
-																		{ hostPage.path === '/' &&
+																		{hostPage.path === '/' &&
 																			<span>
-																				{t("EVENTS.SERIES.DETAILS.TOBIRA.HOMEPAGE")}
+																				{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.HOMEPAGE`)}
 																			</span>
 																		}
 																	</span>
@@ -129,4 +139,4 @@ const SeriesDetailsTobiraTab = ({
 	);
 }
 
-export default SeriesDetailsTobiraTab;
\ No newline at end of file
+export default DetailsTobiraTab;
diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index 9cb65e0e04..3f8bfbd413 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -304,9 +304,6 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 																									segment: e.target.value
 																								}
 
-																								console.log(newPage.path)
-																								console.log(e.target.value)
-
 																								formik.setFieldValue("selectedPage", newPage)
 
 																								return newPage;
diff --git a/src/components/events/partials/modals/EventDetails.tsx b/src/components/events/partials/modals/EventDetails.tsx
index 19d5ed136b..8d8e013141 100644
--- a/src/components/events/partials/modals/EventDetails.tsx
+++ b/src/components/events/partials/modals/EventDetails.tsx
@@ -39,8 +39,10 @@ import {
 	fetchSchedulingInfo,
 	fetchEventStatistics,
 	openModalTab,
+	fetchEventDetailsTobira,
 } from "../../../../slices/eventDetailsSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import DetailsTobiraTab from "../ModalTabsAndPages/DetailsTobiraTab";
 
 export enum EventDetailsPage {
 	Metadata,
@@ -51,6 +53,7 @@ export enum EventDetailsPage {
 	Workflow,
 	AccessPolicy,
 	Comments,
+	Tobira,
 	Statistics,
 }
 
@@ -80,6 +83,7 @@ const EventDetails = ({
 		dispatch(fetchSchedulingInfo(eventId)).then();
 		dispatch(fetchEventStatistics(eventId)).then();
 		dispatch(fetchAssetUploadOptions()).then();
+		dispatch(fetchEventDetailsTobira(eventId));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -153,6 +157,14 @@ const EventDetails = ({
 			name: "comments",
 			page: EventDetailsPage.Comments,
 		},
+		{
+			tabNameTranslation: "EVENTS.EVENTS.DETAILS.TABS.TOBIRA",
+			bodyHeaderTranslation: "EVENTS.EVENTS.DETAILS.TABS.TOBIRA",
+			accessRole: "ROLE_UI_EVENTS_DETAILS_COMMENTS_VIEW",
+			name: "tobira",
+			page: EventDetailsPage.Tobira,
+			hidden: false, // TODO: Set to true if there no tobira data
+		},
 		{
 			tabNameTranslation: "EVENTS.EVENTS.DETAILS.TABS.STATISTICS",
 			bodyHeaderTranslation: "EVENTS.EVENTS.DETAILS.STATISTICS.CAPTION",
@@ -171,52 +183,15 @@ const EventDetails = ({
 	return (
 		<>
 			<nav className="modal-nav" id="modal-nav">
-				{hasAccess(tabs[0].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[0].page })} onClick={() => openTab(tabs[0].page)}>
-						{t(tabs[0].tabNameTranslation)}
-					</button>
-				)}
-				{!tabs[1].hidden && hasAccess(tabs[1].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[1].page })} onClick={() => openTab(tabs[1].page)}>
-						{t(tabs[1].tabNameTranslation)}
-					</button>
-				)}
-				{hasAccess(tabs[2].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[2].page })} onClick={() => openTab(tabs[2].page)}>
-						{t(tabs[2].tabNameTranslation)}
-					</button>
-				)}
-				{hasAccess(tabs[3].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[3].page })} onClick={() => openTab(tabs[3].page)}>
-						{t(tabs[3].tabNameTranslation)}
+				{tabs.map((tab, index) => !tab.hidden && hasAccess(tab.accessRole, user) && (
+					<button
+						key={tab.name}
+						className={"button-like-anchor " + cn({ active: page === index })}
+						onClick={() => openTab(index)}
+					>
+						{t(tab.tabNameTranslation)}
 					</button>
-				)}
-				{!tabs[4].hidden && hasAccess(tabs[4].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[4].page })} onClick={() => openTab(tabs[4].page)}>
-						{t(tabs[4].tabNameTranslation)}
-					</button>
-				)}
-				{hasAccess(tabs[5].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[5].page })} onClick={() => openTab(tabs[5].page)}>
-						{t(tabs[5].tabNameTranslation)}
-					</button>
-				)}
-				{hasAccess(tabs[6].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[6].page })} onClick={() => openTab(tabs[6].page)}>
-						{t(tabs[6].tabNameTranslation)}
-					</button>
-				)}
-				{hasAccess(tabs[7].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[7].page })} onClick={() => openTab(tabs[7].page)}>
-						{t(tabs[7].tabNameTranslation)}
-					</button>
-				)}
-
-				{!tabs[8].hidden && hasAccess(tabs[8].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === tabs[8].page })} onClick={() => openTab(tabs[8].page)}>
-						{t(tabs[8].tabNameTranslation)}
-					</button>
-				)}
+				))}
 			</nav>
 			{/* Initialize overall modal */}
 			<div>
@@ -287,6 +262,13 @@ const EventDetails = ({
 						header={tabs[page].bodyHeaderTranslation ?? ""}
 					/>
 				)}
+				{page === EventDetailsPage.Tobira && (<>
+					<DetailsTobiraTab
+						kind="event"
+						id={eventId}
+					/>
+				</>
+				)}
 				{page === EventDetailsPage.Statistics && !isLoadingStatistics && (
 					<EventDetailsStatisticsTab
 						eventId={eventId}
diff --git a/src/components/events/partials/modals/SeriesDetails.tsx b/src/components/events/partials/modals/SeriesDetails.tsx
index 228d1212ef..77a38aa3c7 100644
--- a/src/components/events/partials/modals/SeriesDetails.tsx
+++ b/src/components/events/partials/modals/SeriesDetails.tsx
@@ -23,7 +23,7 @@ import {
 	updateExtendedSeriesMetadata,
 	updateSeriesMetadata,
 } from "../../../../slices/seriesDetailsSlice";
-import SeriesDetailsTobiraTab from "../ModalTabsAndPages/SeriesDetailsTobiraTab";
+import DetailsTobiraTab from "../ModalTabsAndPages/DetailsTobiraTab";
 
 /**
  * This component manages the tabs of the series details modal
@@ -104,36 +104,15 @@ const SeriesDetails = ({
 		<>
 			{/* navigation for navigating between tabs */}
 			<nav className="modal-nav" id="modal-nav">
-				{hasAccess(tabs[0].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === 0 })} onClick={() => openTab(0)}>
-						{t(tabs[0].tabNameTranslation)}
+				{tabs.map((tab, index) => !tab.hidden && hasAccess(tab.accessRole, user) && (
+					<button
+						key={tab.name}
+						className={"button-like-anchor " + cn({ active: page === index })}
+						onClick={() => openTab(index)}
+					>
+						{t(tab.tabNameTranslation)}
 					</button>
-				)}
-				{!tabs[1].hidden && hasAccess(tabs[1].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === 1 })} onClick={() => openTab(1)}>
-						{t(tabs[1].tabNameTranslation)}
-					</button>
-				)}
-				{hasAccess(tabs[2].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === 2 })} onClick={() => openTab(2)}>
-						{t(tabs[2].tabNameTranslation)}
-					</button>
-				)}
-				{!tabs[3].hidden && hasAccess(tabs[3].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === 3 })} onClick={() => openTab(3)}>
-						{t(tabs[3].tabNameTranslation)}
-					</button>
-				)}
-				{!tabs[4].hidden && hasAccess(tabs[4].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === 4 })} onClick={() => openTab(4)}>
-						{t(tabs[4].tabNameTranslation)}
-					</button>
-				)}
-				{!tabs[5].hidden && hasAccess(tabs[5].accessRole, user) && (
-					<button className={"button-like-anchor " + cn({ active: page === 5 })} onClick={() => openTab(5)}>
-						{t(tabs[5].tabNameTranslation)}
-					</button>
-				)}
+				))}
 				{feeds.length > 0 && (
 					<button className={"button-like-anchor " + cn({ active: page === 6 })} onClick={() => openTab(6)}>
 						{"Feeds"}
@@ -176,8 +155,9 @@ const SeriesDetails = ({
 					/>
 				)}
 				{page === 4 && (
-					<SeriesDetailsTobiraTab
-						seriesId={seriesId}
+					<DetailsTobiraTab
+						kind="series"
+						id={seriesId}
 					/>
 				)}
 				{page === 5 && (
diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
index badd93110f..387858c553 100644
--- a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
+++ b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -672,7 +672,8 @@
 					"WORKFLOWS": "Workflows",
 					"ACCESS": "Access policy",
 					"COMMENTS": "Comments",
-					"STATISTICS": "Statistics"
+					"STATISTICS": "Statistics",
+					"TOBIRA": "Tobira"
 				},
 				"PUBLICATIONS": {
 					"CAPTION": "Publications",
@@ -946,6 +947,13 @@
 						"RUNNING": "Editing metadata is not allowed when operations are running on an event"
 					}
 				},
+				"TOBIRA": {
+					"HOMEPAGE": "(Homepage)",
+					"DIRECT_LINK": "Direct link to event",
+					"COPY_DIRECT_LINK": "Copy to clipboard",
+					"NOT_MOUNTED": "This event is currently not included the page structure, and can only be reached using the direct link above.",
+					"PAGES": "Pages in Tobira that contain this event"
+				},
 				"SCHEDULING": {
 					"CAPTION": "Scheduling configuration",
 					"PLACEHOLDER": {
diff --git a/src/selectors/eventDetailsSelectors.ts b/src/selectors/eventDetailsSelectors.ts
index 402d24dc1a..50345efbc1 100644
--- a/src/selectors/eventDetailsSelectors.ts
+++ b/src/selectors/eventDetailsSelectors.ts
@@ -114,6 +114,11 @@ export const getWorkflowErrorDetails = (state: RootState) =>
 export const isFetchingWorkflowErrorDetails = (state: RootState) =>
 	state.eventDetails.statusWorkflowErrorDetails === 'loading';
 
+export const getEventDetailsTobiraData = (state: RootState) =>
+	state.eventDetails.tobiraData
+export const getEventDetailsTobiraDataError = (state: RootState) =>
+	state.eventDetails.errorTobiraData
+
 /* selectors for publications */
 export const getPublications = (state: RootState) => state.eventDetails.publications;
 
diff --git a/src/slices/eventDetailsSlice.ts b/src/slices/eventDetailsSlice.ts
index 7b628b5cef..ca1dc2c580 100644
--- a/src/slices/eventDetailsSlice.ts
+++ b/src/slices/eventDetailsSlice.ts
@@ -215,6 +215,8 @@ type EventDetailsState = {
 	errorStatistics: SerializedError | null,
 	statusStatisticsValue: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
 	errorStatisticsValue: SerializedError | null,
+	statusTobiraData: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
+	errorTobiraData: SerializedError | null,
 	eventId: string,
 	modal: EventDetailsModal,
 	metadata: MetadataCatalog,
@@ -374,6 +376,16 @@ type EventDetailsState = {
 	publications: Publication[],
 	statistics: Statistics[],
 	hasStatisticsError: boolean,
+	tobiraData: {
+		baseURL: string,
+		hostPages: {
+			title: string,
+			path: string,
+			ancestors: {
+				title: string,
+			}[],
+		}[],
+	},
 }
 
 // Initial state of event details in redux store
@@ -436,6 +448,8 @@ const initialState: EventDetailsState = {
 	errorStatistics: null,
 	statusStatisticsValue: 'uninitialized',
 	errorStatisticsValue: null,
+	statusTobiraData: 'uninitialized',
+	errorTobiraData: null,
 	eventId: "",
 	modal: {
 		show: false,
@@ -597,6 +611,10 @@ const initialState: EventDetailsState = {
 	publications: [],
 	statistics: [],
 	hasStatisticsError: false,
+	tobiraData: {
+		baseURL: "",
+		hostPages: [],
+	},
 };
 
 
@@ -964,6 +982,48 @@ export const fetchEventPublications = createAppAsyncThunk('eventDetails/fetchEve
 	return transformedPublications;
 });
 
+// fetch Tobira data of certain series from server
+export const fetchEventDetailsTobira = createAppAsyncThunk('eventDetails/fetchEventDetailsTobira', async (
+	id: string,
+	{ dispatch },
+) => {
+	const res = await axios.get(`/admin-ng/event/${id}/tobira/pages`)
+		.catch(response => {
+			console.error(response);
+			const data = response.response;
+
+			if (data.status === 500) {
+				dispatch(addNotification({
+					type: "error",
+					key: "TOBIRA_SERVER_ERROR",
+					duration: -1,
+					parameter: null,
+					context: NOTIFICATION_CONTEXT
+				}));
+
+				throw Error(response);
+			} else if (data.status === 404) {
+				dispatch(addNotification({
+					type: "warning",
+					key: "TOBIRA_NOT_FOUND",
+					duration: -1,
+					parameter: null,
+					context: NOTIFICATION_CONTEXT
+				}));
+
+				throw Error(response);
+			}
+			return undefined;
+		});
+
+	if (!res) {
+		throw Error;
+	}
+
+	const data = res.data;
+	return data;
+});
+
 export const saveComment = createAppAsyncThunk('eventDetails/saveComment', async (params: {
 	eventId: string,
 	commentText: string,
@@ -2532,6 +2592,20 @@ const eventDetailsSlice = createSlice({
 					state.workflowConfiguration = state.baseWorkflow;
 				}
 			})
+			// fetch Tobira data
+			.addCase(fetchEventDetailsTobira.pending, (state) => {
+				state.statusTobiraData = 'loading';
+			})
+			.addCase(fetchEventDetailsTobira.fulfilled, (state, action: PayloadAction<
+				EventDetailsState['tobiraData']
+			>) => {
+				state.statusTobiraData = 'succeeded';
+				state.tobiraData = action.payload;
+			})
+			.addCase(fetchEventDetailsTobira.rejected, (state, action) => {
+				state.statusTobiraData = 'failed';
+				state.errorTobiraData = action.error;
+			})
 	}
 });
 
diff --git a/src/slices/seriesDetailsSlice.ts b/src/slices/seriesDetailsSlice.ts
index a386363573..2adf86dfa5 100644
--- a/src/slices/seriesDetailsSlice.ts
+++ b/src/slices/seriesDetailsSlice.ts
@@ -409,7 +409,7 @@ export const updateSeriesTheme = createAppAsyncThunk('seriesDetails/updateSeries
     }
 });
 
-// fetch metadata of certain series from server
+// fetch Tobira data of certain series from server
 export const fetchSeriesDetailsTobira = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsTobira', async (id: string, {dispatch}) => {
 	const res = await axios.get(`/admin-ng/series/${id}/tobira/pages`)
 		.then((response) => {
diff --git a/src/styles/views/modals/_event-series.scss b/src/styles/views/modals/_event-series.scss
index eec24c59b4..b8dec84884 100644
--- a/src/styles/views/modals/_event-series.scss
+++ b/src/styles/views/modals/_event-series.scss
@@ -208,6 +208,7 @@
 }
 
 .tobira-copy-direct-link {
+    margin-left: 6px;
     @include btn(white);
     i {
         margin: 0;

From c182a860df6525d6df828437f73ff7c80bc010c1 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Sat, 10 Aug 2024 16:00:13 +0200
Subject: [PATCH 02/11] Add checkboxes to (de)select Tobira series path

This was requested by Bern. It is still possible to select
and deselect the path by clicking it's name, but next to that
a checkbox was added for visual clarity.

The checkbox is only shown when the path can be selected
(the page needs to be empty).
---
 .../partials/ModalTabsAndPages/NewTobiraPage.tsx   | 14 ++++++++++++++
 .../adminui/languages/lang-en_US.json              |  3 ++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index 3f8bfbd413..ee6cd863a0 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -226,6 +226,9 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 											<table className="main-tbl highlight-hover">
 											<thead>
 												<tr>
+													{currentPage.children.some(page => !page.blocks?.length)
+														&& <th className="small"/>
+													}
 													<th>
 														{
 															t(
@@ -247,12 +250,22 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 															) /* Subpages */
 														}
 													</th>
+													{editing && <th />}
 												</tr>
 											</thead>
 											<tbody>
 											{!!currentPage.children &&
 													currentPage.children.map((page, key) => (
 														<tr key={key}>
+															{currentPage.children.some(page => !page.blocks?.length) && <td>
+																{!page.blocks?.length && <input
+																	type="checkbox"
+																	checked={isValid && formik.values.selectedPage?.path
+																		=== currentPage.children[key].path
+																	}
+																	onChange={() => page.blocks?.length || select(page)}
+																/>}
+															</td>}
 															<td>
 																{!!page.new ? (
 																	<input
@@ -373,6 +386,7 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 												{t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED")}
 											</p>
 										)}
+										<p>{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}</p>
 									</div>
 								</>
 							)}
diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
index 387858c553..9a103d0027 100644
--- a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
+++ b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -1133,7 +1133,8 @@
 					"HOMEPAGE": "Homepage",
 					"SELECTED_PAGE": "Series will be mounted under the following path",
 					"NO_PAGE_SELECTED": "No page selected. Series will not be mounted in Tobira.",
-					"PATH": "Path"
+					"PATH": "Path",
+					"DIRECT_LINK": "A direct link will be available."
 				},
 				"SUMMARY": {
 					"CAPTION": "Summary"

From 0695129659e14f26cce2c14f413f69a6a63a059a Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Sun, 11 Aug 2024 13:22:12 +0200
Subject: [PATCH 03/11] Reformat/-factor some Tobira related files

This factors out some code and applies some (yet non-inforced)
linting rules, ES6 syntax and formatting to limit some indentation
levels and improve readability.
---
 .../ModalTabsAndPages/DetailsTobiraTab.tsx    | 167 ++++---
 .../ModalTabsAndPages/NewTobiraPage.tsx       | 460 ++++++++----------
 2 files changed, 291 insertions(+), 336 deletions(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
index dd012fb270..abc69cc183 100644
--- a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
@@ -51,92 +51,97 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 		});
 	}
 
-	return (
-		<div className="modal-content">
-			<div className="modal-body">
-				{/* Notifications */}
-				<Notifications context="not_corner" />
-				<div className="full-col">
-					<div className="obj list-obj">
-						<header>
-							{t(`EVENTS.${i18nKey}.DETAILS.TABS.TOBIRA`)}
-						</header>
-						{ !error &&
-							<>
+	return <div className="modal-content">
+		<div className="modal-body">
+			{/* Notifications */}
+			<Notifications context="not_corner" />
+			<div className="full-col">
+				<div className="obj list-obj">
+					<header>
+						{t(`EVENTS.${i18nKey}.DETAILS.TABS.TOBIRA`)}
+					</header>
+					{!error && <>
+						<div className="obj-container">
+							<a href={directTobiraLink}>
+								{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.DIRECT_LINK`)}
+							</a>
+							<button
+								className="tobira-copy-direct-link"
+								onClick={() => copyTobiraDirectLink()}
+								aria-label={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
+							>
+								<i
+									aria-hidden="true"
+									className="fa fa-copy"
+									title={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
+								/>
+							</button>
+						</div>
+						<div className="obj-container">
+							<div className="obj tbl-list">
+								<header>
+									{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}
+								</header>
 								<div className="obj-container">
-									<a href={directTobiraLink}>
-										{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.DIRECT_LINK`)}
-									</a>
-									<button
-										className="tobira-copy-direct-link"
-										onClick={() => copyTobiraDirectLink()}
-										aria-label={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
-									>
-										<i
-											aria-hidden="true"
-											className="fa fa-copy"
-											title={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
-										/>
-									</button>
+									<TobiraTable {...{ tobiraData, i18nKey }} />
 								</div>
-								<div className="obj-container">
-									<div className="obj tbl-list">
-										<header>
-											{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}
-										</header>
-										<div className="obj-container">
-											<table className="main-tbl">
-												<tbody>
-													{(!tobiraData.hostPages || tobiraData.hostPages.length === 0) &&
-														<tr>
-															<td className="tobira-not-mounted">
-															{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.NOT_MOUNTED`)}
-															</td>
-														</tr>
-													}
-													{tobiraData.hostPages.map(hostPage => (
-														<tr key={hostPage.path}>
-															<td>
-																<a href={tobiraData.baseURL + hostPage.path}>
-																	{hostPage.path !== '/' &&
-																		<div>
-																			<span className="tobira-page-separator">/</span>
-																			{ hostPage.ancestors.map((ancestor, key) => (
-																				<span key={key}>
-																					{ancestor.title}
-																					<span className="tobira-page-separator">/</span>
-																				</span>
-																			))}
-																		</div>
-																	}
-																	<span className="tobira-leaf-page">
-																		{hostPage.path !== '/' &&
-																			<span>
-																				{hostPage.title}
-																			</span>
-																		}
-																		{hostPage.path === '/' &&
-																			<span>
-																				{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.HOMEPAGE`)}
-																			</span>
-																		}
-																	</span>
-																</a>
-															</td>
-														</tr>
-													))}
-												</tbody>
-											</table>
-										</div>
-									</div>
-								</div>
-							</>
-						}
-					</div>
+							</div>
+						</div>
+					</>}
 				</div>
 			</div>
 		</div>
-	);
+	</div>;
+}
+
+type TobiraTableProps = {
+	tobiraData: {
+		baseURL: string,
+		hostPages: {
+			title: string,
+			path: string,
+			ancestors: {
+				title: string,
+			}[],
+		}[],
+	};
+	i18nKey: "SERIES" | "EVENTS";
+}
+
+const TobiraTable: React.FC<TobiraTableProps> = ({ tobiraData, i18nKey }) => {
+	const { t } = useTranslation();
+	return <table className="main-tbl">
+		<tbody>
+			{tobiraData.hostPages.length === 0 && <tr>
+				<td className="tobira-not-mounted">
+					{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.NOT_MOUNTED`)}
+				</td>
+			</tr>}
+			{tobiraData.hostPages.map(hostPage => <tr key={hostPage.path}>
+				<td>
+					<a href={tobiraData.baseURL + hostPage.path}>
+						{hostPage.path !== '/' && <>
+							<span className="tobira-page-separator">/</span>
+							{hostPage.ancestors.map((ancestor, key) => (
+								<span key={key}>
+									{ancestor.title}
+									<span className="tobira-page-separator">/</span>
+								</span>
+							))}
+						</>}
+						<span className="tobira-leaf-page">
+							{hostPage.path !== '/' && <span>
+								{hostPage.title}
+							</span>}
+							{hostPage.path === '/' && <span>
+								{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.HOMEPAGE`)}
+							</span>}
+						</span>
+					</a>
+				</td>
+			</tr>)}
+		</tbody>
+	</table>;
 }
 
 export default DetailsTobiraTab;
diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index ee6cd863a0..b0fd10ac2e 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -14,7 +14,7 @@ import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
  */
 type RequiredFormProps = {
 	breadcrumbs: TobiraPage[],
-	selectedPage: TobiraPage | undefined,
+	selectedPage?: TobiraPage,
 }
 
 const NewTobiraPage = <T extends RequiredFormProps>({
@@ -24,7 +24,7 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 }: {
 	formik: FormikProps<T>,
 	nextPage: (values: T) => void,
-	previousPage: any //(values: T) => void,
+	previousPage: (values: T) => void,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -43,7 +43,7 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 			context: OurNotification["context"],
 			callback: () => boolean
 		) {
-			var toggle = callback();
+			const toggle = callback();
 			if (toggle) {
 				dispatch(addNotification({
 					type: type,
@@ -54,7 +54,7 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 					noDuplicates: true,
 				}));
 			} else {
-				dispatch(removeNotificationByKey({key, context}));
+				dispatch(removeNotificationByKey({ key, context }));
 			}
 
 			if (toggle && type !== 'info') {
@@ -64,9 +64,9 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 			return true;
 		}
 
-		var valid = true;
+		let valid = true;
 
-		valid = valid && check('info', 'TOBIRA_OVERRIDE_NAME', NOTIFICATION_CONTEXT, function () {
+		valid = valid && check('info', 'TOBIRA_OVERRIDE_NAME', NOTIFICATION_CONTEXT, () => {
 			return !!formik.values.selectedPage && !!formik.values.selectedPage.title;
 		});
 
@@ -80,36 +80,30 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 			setIsValid(valid);
 			return;
 		}
-		var newPage = currentPage.children[currentPage.children.length - 1];
+		const newPage = currentPage.children[currentPage.children.length - 1];
 
-		valid = valid && check('warning', 'TOBIRA_NO_PATH_SEGMENT', NOTIFICATION_CONTEXT, function () {
-			return !newPage.segment;
-		});
+		valid = valid && check('warning', 'TOBIRA_NO_PATH_SEGMENT', NOTIFICATION_CONTEXT, () => !newPage.segment);
 
-		valid = valid && check('warning', 'TOBIRA_PATH_SEGMENT_INVALID', NOTIFICATION_CONTEXT, function () {
-			return !!newPage.segment && (newPage.segment.length <= 1 || [
+		valid = valid && check('warning', 'TOBIRA_PATH_SEGMENT_INVALID', NOTIFICATION_CONTEXT, () => (
+			newPage.segment.length <= 1 || [
 				// eslint-disable-next-line no-control-regex
 				/[\u0000-\u001F\u007F-\u009F]/u,
 				/[\u00A0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]/u,
 				/[<>"[\\\]^`{|}#%/?]/u,
 				/^[-+~@_!$&;:.,=*'()]/u
-			].some(function (regex) {
-				return regex.test(newPage.segment);
-			}));
-		});
+			].some(regex => regex.test(newPage.segment))
+		));
 
-		valid = valid && check('warning', 'TOBIRA_PATH_SEGMENT_UNIQUE', NOTIFICATION_CONTEXT, function () {
-			return currentPage.children.some(function (child) {
-				return child !== newPage && child.segment === newPage.segment;
-			});
-		});
+		valid = valid && check('warning', 'TOBIRA_PATH_SEGMENT_UNIQUE', NOTIFICATION_CONTEXT, () => (
+			currentPage.children.some(child => child !== newPage && child.segment === newPage.segment)
+		));
 
 		setIsValid(valid);
 	}, [currentPage.children, dispatch, editing, formik.values.selectedPage])
 
 	const back = (index: number) => {
 		goto(formik.values.breadcrumbs.splice(index)[0]);
-	}
+	};
 
 	const select = (page: TobiraPage | undefined) => {
 		if (!page || !page.new) {
@@ -120,53 +114,47 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 		} else {
 			formik.setFieldValue("selectedPage", page);
 		}
-	}
+	};
 
 	const updatePath = (page: TobiraPage, lastSegment: string) => {
 		return formik.values.breadcrumbs
-		.concat(page).map(function (page) {
-			return page.segment;
-		})
-		.join('/')
-		/* eslint-disable */
-		.replace(/([^\/]+$)/, lastSegment);
-	}
+			.concat(page)
+			.map(page => page.segment)
+			.join('/')
+			.replace(/([^\/]+$)/, lastSegment);
+	};
 
 	const goto = (page: TobiraPage) => {
-		function goto(page: TobiraPage) {
-			select(undefined);
-			// setCurrentPage(page);
-			dispatch(setTobiraPage(page));
-			formik.setFieldValue("breadcrumbs", [...formik.values.breadcrumbs, page]);
-		}
-
-		// clearNotifications('series-tobira');
 		dispatch(removeNotificationWizardForm());
 		setErrorTobiraPage(null);
 
 		if (page.new) {
-			goto(page)
+			select(undefined);
+			dispatch(setTobiraPage(page));
+			formik.setFieldValue("breadcrumbs", [...formik.values.breadcrumbs, page]);
 		} else {
 			//fetch tobira resource
 			dispatch(fetchSeriesDetailsTobiraNew(page.path))
 		}
-	}
+	};
 
 	useEffect(() => {
 		// After changing to another page
-		if ( formik.values.breadcrumbs.length === 0 ||
-			(formik.values.breadcrumbs.length > 0 &&
-			formik.values.breadcrumbs[formik.values.breadcrumbs.length - 1].path !== currentPage.path)
+		if (formik.values.breadcrumbs.length === 0
+			|| (formik.values.breadcrumbs.length > 0
+				&& formik.values.breadcrumbs[formik.values.breadcrumbs.length - 1].path !== currentPage.path
+			)
 		) {
 			select(undefined);
 			formik.setFieldValue("breadcrumbs", [...formik.values.breadcrumbs, currentPage]);
 		}
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [currentPage]);
 
 	const addChild = () => {
 		setEditing(true);
-		var newPage: TobiraPage = { new: true, children: [],
+		const newPage: TobiraPage = {
+			new: true,
+			children: [],
 			title: "",
 			path: "",
 			subpages: "",
@@ -175,7 +163,7 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 		};
 		dispatch(setTobiraPage({ ...currentPage, children: [...currentPage.children, newPage]}));
 		select(newPage);
-	}
+	};
 
 	const stopEditing = () => {
 		if (editing) {
@@ -187,223 +175,185 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 		setEditing(false);
 	};
 
-	return (
-		<>
-			<div className="modal-content">
-				<div className="modal-body">
-					{/* Notifications */}
-					<Notifications context="not_corner" />
-					<div className="full-col">
-						<div className="obj">
-							<header className="no-expand">
-								{t("EVENTS.SERIES.NEW.TOBIRA.CAPTION")}
-							</header>
+	const setPage = (
+		key: number,
+		e: React.ChangeEvent<HTMLInputElement>,
+		kind: "title" | "segment",
+	) => dispatch(setTobiraPage({
+		...currentPage,
+		children: currentPage.children.map((p, k) => {
+			if (k === key) {
+				const newPage = {
+					...p,
+					...kind === "title"
+						? { title: e.target.value }
+						: {
+							path: updatePath(p, e.target.value),
+							segment: e.target.value,
+						}
+				};
+
+				formik.setFieldValue("selectedPage", newPage);
+
+				return newPage;
+			}
+			return {...p};
+		})
+	}));
+
+	return <>
+		<div className="modal-content">
+			<div className="modal-body">
+				{/* Notifications */}
+				<Notifications context="not_corner" />
+				<div className="full-col">
+					<div className="obj">
+						<header className="no-expand">
+							{t("EVENTS.SERIES.NEW.TOBIRA.CAPTION")}
+						</header>
+						<div className="obj-container padded">
+							<ul>
+								<li>
+									<p>{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}</p>
+								</li>
+							</ul>
+						</div>
+						{!error && <>
 							<div className="obj-container padded">
-								<ul>
-									<li>
-										<p>{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}</p>
-										</li>
-								</ul>
-							</div>
-							{ !error && (
-								<>
-									<div className="obj-container padded">
-										<div className="obj">
-											<header>
-												<span>{t("EVENTS.SERIES.NEW.TOBIRA.SELECT_PAGE")}</span>
-											</header>
-											<div className="breadcrumb">
-												{!!formik.values.breadcrumbs && formik.values.breadcrumbs.map((breadcrumb, key) => (
+								<div className="obj">
+									<header>
+										<span>{t("EVENTS.SERIES.NEW.TOBIRA.SELECT_PAGE")}</span>
+									</header>
+									<div className="breadcrumb">
+										{formik.values.breadcrumbs.map((breadcrumb, key) => (
+											<button
+												key={key}
+												className="button-like-anchor breadcrumb-link"
+												onClick={() => back(key)}
+											>
+												{breadcrumb.segment === ''
+													? t('EVENTS.SERIES.NEW.TOBIRA.HOMEPAGE')
+													: breadcrumb.title
+												}
+											</button>
+										))}
+									</div>
+									<table className="main-tbl highlight-hover">
+										<thead>
+											<tr>
+												{currentPage.children.some(page => !page.blocks?.length)
+													&& <th className="small"/>
+												}
+												<th>
+													{t("EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE") /* Title */}
+												</th>
+												<th>
+													{t("EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT") /* Path segment */}
+												</th>
+												<th>
+													{t("EVENTS.SERIES.NEW.TOBIRA.SUBPAGES") /* Subpages */}
+												</th>
+												{editing && <th />}
+											</tr>
+										</thead>
+										<tbody>
+											{currentPage.children.map((page, key) => <tr key={key}>
+												{currentPage.children.some(page => !page.blocks?.length) && <td>
+													{!page.blocks?.length && <input
+														type="checkbox"
+														checked={isValid && formik.values.selectedPage?.path
+															=== currentPage.children[key].path
+														}
+														onChange={() => page.blocks?.length || select(page)}
+													/>}
+												</td>}
+												<td>
+													{!!page.new
+														? <input
+															placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE')}
+															value={page.title}
+															onChange={(e) => setPage(key, e, "title")}
+														/>
+														: <button
+															className={'button-like-anchor '
+																+ (!page.blocks?.length && 'tobira-selectable')}
+															onClick={() => page.blocks?.length || select(page)}
+														>{page.title}</button>
+													}
+												</td>
+												<td>
+													<code className="tobira-path">
+														{!!page.new
+															? <input
+																placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT')}
+																value={page.segment}
+																onChange={e => setPage(key, e, "segment")}
+															/>
+															: <span style={{ fontWeight: "inherit" }}>
+																{page.segment}
+															</span>
+														}
+													</code>
+												</td>
+												<td>
+													{((!page.new || isValid) && page.title) && <button
+														className="button-like-anchor details-link"
+														onClick={() => goto(page)}
+													>
+														{t("EVENTS.SERIES.NEW.TOBIRA.SUBPAGES")}
+													</button>}
+												</td>
+												{editing && <td>
+													{page.new && <button
+														onClick={() => select(undefined)}
+														title={t('EVENTS.SERIES.NEW.TOBIRA.CANCEL')}
+														className="button-like-anchor remove"
+													/>}
+												</td>}
+											</tr>)}
+											{!editing && <tr>
+												<td colSpan={4}>
 													<button
-														key={key}
-														className="button-like-anchor breadcrumb-link"
-														onClick={() => back(key)}
+														className={"button-like-anchor"}
+														onClick={() => addChild()}
 													>
-														{breadcrumb.segment === '' ? t('EVENTS.SERIES.NEW.TOBIRA.HOMEPAGE') : breadcrumb.title}
+														+ {t('EVENTS.SERIES.NEW.TOBIRA.ADD_SUBPAGE')}
 													</button>
-												))}
-											</div>
-											<table className="main-tbl highlight-hover">
-											<thead>
-												<tr>
-													{currentPage.children.some(page => !page.blocks?.length)
-														&& <th className="small"/>
-													}
-													<th>
-														{
-															t(
-																"EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE"
-															) /* Title */
-														}
-													</th>
-													<th>
-														{
-															t(
-																"EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT"
-															) /* Path segment */
-														}
-													</th>
-													<th>
-														{
-															t(
-																"EVENTS.SERIES.NEW.TOBIRA.SUBPAGES"
-															) /* Subpages */
-														}
-													</th>
-													{editing && <th />}
-												</tr>
-											</thead>
-											<tbody>
-											{!!currentPage.children &&
-													currentPage.children.map((page, key) => (
-														<tr key={key}>
-															{currentPage.children.some(page => !page.blocks?.length) && <td>
-																{!page.blocks?.length && <input
-																	type="checkbox"
-																	checked={isValid && formik.values.selectedPage?.path
-																		=== currentPage.children[key].path
-																	}
-																	onChange={() => page.blocks?.length || select(page)}
-																/>}
-															</td>}
-															<td>
-																{!!page.new ? (
-																	<input
-																		placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE')}
-																		value={page.title}
-																		onChange={(e) =>
-																			dispatch(setTobiraPage({
-																				...currentPage,
-																				children: currentPage.children.map((p, k) => {
-																								if (k === key) {
-																									let newPage = {
-																										...p,
-																										title: e.target.value,
-																									}
-
-																									formik.setFieldValue("selectedPage", newPage)
-
-																									return newPage;
-																								}
-																								return {...p};
-																							})
-																			}))
-																		}
-																	>
-																	</input>
-																) : (
-																	<button
-																		className={'button-like-anchor ' + (!page.blocks?.length && 'tobira-selectable')}
-																		onClick={() => { page.blocks?.length || select(page) }}
-																	>
-																		{page.title}
-																	</button>
-																)}
-															</td>
-															<td>
-																<code className="tobira-path">
-																	{!!page.new ? (
-																		<input
-																			placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT')}
-																			value={page.segment}
-																			onChange={(e) => {
-																				const payload = {
-																					...currentPage,
-																					children: currentPage.children.map((p, k) => {
-																							if (k === key) {
-																								let newPage = {
-																									...p,
-																									path: updatePath(p, e.target.value),
-																									segment: e.target.value
-																								}
-
-																								formik.setFieldValue("selectedPage", newPage)
-
-																								return newPage;
-																							}
-																							return {...p};
-																						})
-																				}
-																				dispatch(setTobiraPage(payload))
-																			}}
-																		></input>
-																	) : (
-																		<span style={{fontWeight: "inherit"}}>{page.segment}</span>
-																	)}
-																</code>
-															</td>
-															<td>
-																{((!page.new || isValid) && page.title) &&
-																<button
-																	className="button-like-anchor details-link"
-																	onClick={() => goto(page)}
-																>
-																		{t("EVENTS.SERIES.NEW.TOBIRA.SUBPAGES")}
-																</button>
-																}
-															</td>
-																{ editing &&
-																<td>
-																	{ page.new &&
-																		<button
-																			onClick={() => select(undefined)}
-																			title={t('EVENTS.SERIES.NEW.TOBIRA.CANCEL')}
-																			className="button-like-anchor remove"
-																		>
-																		</button>
-																	}
-																</td>
-																}
-														</tr>
-													))}
-													{ !editing &&
-														<tr>
-															<td colSpan={3}>
-																<button
-																	className={"button-like-anchor"}
-																	onClick={() => addChild()}
-																>
-																	+ {t('EVENTS.SERIES.NEW.TOBIRA.ADD_SUBPAGE')}
-																</button>
-															</td>
-														</tr>
-													}
-												</tbody>
-											</table>
-										</div>
-									</div>
+												</td>
+											</tr>}
+										</tbody>
+									</table>
+								</div>
+							</div>
 
-									<div className="obj-container padded">
-										{ (!!formik.values.selectedPage && isValid) ? (
-											<p>
-												{t('EVENTS.SERIES.NEW.TOBIRA.SELECTED_PAGE')}:
-												<code className="tobira-path">
-													{formik.values.selectedPage.path}
-												</code>
-											</p>
-										) : (
-											<p>
-												{t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED")}
-											</p>
-										)}
-										<p>{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}</p>
-									</div>
-								</>
-							)}
-						</div>
+							<div className="obj-container padded">
+								<p>
+									{(!!formik.values.selectedPage && isValid)
+										? <>
+											{t("EVENTS.SERIES.NEW.TOBIRA.SELECTED_PAGE")}:
+											<code className="tobira-path">
+												{formik.values.selectedPage.path}
+											</code>
+										</>
+										: t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED")
+									}
+								</p>
+								<p>{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}</p>
+							</div>
+						</>}
 					</div>
 				</div>
 			</div>
-
-			{/* Button for navigation to next page and previous page */}
-			<WizardNavigationButtons
-				formik={formik}
-				nextPage={nextPage}
-				previousPage={previousPage}
-				additionalValidation={!isValid}
-			/>
-		</>
-	);
+		</div>
+
+		{/* Button for navigation to next page and previous page */}
+		<WizardNavigationButtons
+			formik={formik}
+			nextPage={nextPage}
+			previousPage={previousPage}
+			additionalValidation={!isValid}
+		/>
+	</>;
 };
 
 export default NewTobiraPage;

From 1f016a250f95b41be32dec2849fdcf89a7c64993 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Sun, 11 Aug 2024 15:54:36 +0200
Subject: [PATCH 04/11] Make tobira series path editable

Another feature requested by Bern, this adds the necessary
API and UI functions/components to edit existing series paths.

Editing is only allowed if the page with that path has no
other blocks than that of the series.
---
 .../ModalTabsAndPages/DetailsTobiraTab.tsx    | 182 +++++++++++++-----
 .../ModalTabsAndPages/NewTobiraPage.tsx       |  43 ++++-
 .../events/partials/modals/SeriesDetails.tsx  |   2 +
 .../adminui/languages/lang-en_US.json         |   7 +-
 src/selectors/seriesDetailsSelectors.ts       |   2 +
 src/slices/eventDetailsSlice.ts               |  13 +-
 src/slices/seriesDetailsSlice.ts              |  79 ++++++--
 src/slices/seriesSlice.ts                     |  23 +--
 8 files changed, 253 insertions(+), 98 deletions(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
index abc69cc183..a1d948177c 100644
--- a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
@@ -1,10 +1,19 @@
 import { useTranslation } from "react-i18next";
 import Notifications from "../../../shared/Notifications";
 import { useAppDispatch, useAppSelector } from "../../../../store";
-import { getSeriesDetailsTobiraData, getSeriesDetailsTobiraDataError } from "../../../../selectors/seriesDetailsSelectors";
-import { addNotification } from "../../../../slices/notificationSlice";
+import { getSeriesDetailsTobiraData, getSeriesDetailsTobiraDataError, getTobiraTabHierarchy } from "../../../../selectors/seriesDetailsSelectors";
+import { addNotification, removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 import { getEventDetailsTobiraData, getEventDetailsTobiraDataError } from "../../../../selectors/eventDetailsSelectors";
+import { Formik } from "formik";
+import { useState } from "react";
+import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNavigation";
+import NewTobiraPage, { TobiraFormProps } from "./NewTobiraPage";
+import { fetchSeriesDetailsTobira, setTobiraTabHierarchy, TobiraData, updateSeriesTobiraPath } from "../../../../slices/seriesDetailsSlice";
+import { fetchSeriesDetailsTobiraNew, TobiraPage } from "../../../../slices/seriesSlice";
+
+
+export type TobiraTabHierarchy = "main" | "edit-path";
 
 /**
  * This component renders the Tobira tab for new series and events
@@ -17,6 +26,11 @@ type DetailsTobiraTabProps = {
 const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
+	const tabHierarchy = useAppSelector(state => getTobiraTabHierarchy(state));
+
+	const [initialValues, setInitialValues] = useState<TobiraFormProps>({
+		breadcrumbs: [],
+	});
 
 	const tobiraData = useAppSelector(state => kind === "series"
 		? getSeriesDetailsTobiraData(state)
@@ -31,6 +45,19 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 	const prefix = kind === "series" ? "s" : "v";
 	const directTobiraLink = tobiraData.baseURL + `/!${prefix}/:` + id;
 
+	const getBreadcrumbs = (currentPage: TobiraPage) => {
+		const homepage = {
+			title: undefined,
+			path: "/",
+			segment: "",
+			children: [],
+			ancestors: [],
+			blocks: [],
+		};
+
+		return [homepage, ...currentPage.ancestors, currentPage];
+	}
+
 	const copyTobiraDirectLink = () => {
 		navigator.clipboard.writeText(directTobiraLink).then(function () {
 			dispatch(addNotification({
@@ -51,64 +78,108 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 		});
 	}
 
-	return <div className="modal-content">
-		<div className="modal-body">
-			{/* Notifications */}
-			<Notifications context="not_corner" />
-			<div className="full-col">
-				<div className="obj list-obj">
-					<header>
-						{t(`EVENTS.${i18nKey}.DETAILS.TABS.TOBIRA`)}
-					</header>
-					{!error && <>
-						<div className="obj-container">
-							<a href={directTobiraLink}>
-								{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.DIRECT_LINK`)}
-							</a>
-							<button
-								className="tobira-copy-direct-link"
-								onClick={() => copyTobiraDirectLink()}
-								aria-label={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
-							>
-								<i
-									aria-hidden="true"
-									className="fa fa-copy"
-									title={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
-								/>
-							</button>
-						</div>
-						<div className="obj-container">
-							<div className="obj tbl-list">
-								<header>
-									{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}
-								</header>
-								<div className="obj-container">
-									<TobiraTable {...{ tobiraData, i18nKey }} />
+	const handleSubmit = async (values: TobiraFormProps) => {
+		await dispatch(updateSeriesTobiraPath({
+			seriesId: id,
+			currentPath: values.currentPath,
+			selectedPage: values.selectedPage,
+			breadcrumbs: values.breadcrumbs,
+		}));
+
+		if (values.selectedPage?.path) {
+			await dispatch(fetchSeriesDetailsTobira(id));
+		}
+		dispatch(setTobiraTabHierarchy("main"));
+	};
+
+	const openSubTab = async (tabType: TobiraTabHierarchy, currentPage?: TobiraPage) => {
+		if (!!currentPage) {
+			const breadcrumbs = getBreadcrumbs(currentPage);
+			setInitialValues({
+				...initialValues,
+				currentPath: currentPage.path,
+				breadcrumbs,
+			});
+			await dispatch(fetchSeriesDetailsTobiraNew(currentPage.path));
+		}
+
+		dispatch(setTobiraTabHierarchy(tabType));
+	};
+	return <>
+		<div className="modal-content">
+			{tabHierarchy === "edit-path" && <EventDetailsTabHierarchyNavigation
+				openSubTab={openSubTab}
+				hierarchyDepth={0}
+				translationKey0={"EVENTS.SERIES.DETAILS.TOBIRA.SHOW_PAGES"}
+				subTabArgument0={"main"}
+			/>}
+			{tabHierarchy === "main" && <div className="modal-body">
+				{/* Notifications */}
+				<Notifications context="not_corner" />
+				<div className="full-col">
+					<div className="obj list-obj">
+						<header>
+							{t(`EVENTS.${i18nKey}.DETAILS.TABS.TOBIRA`)}
+						</header>
+						{!error && <>
+							<div className="obj-container">
+								<a href={directTobiraLink}>
+									{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.DIRECT_LINK`)}
+								</a>
+								<button
+									className="tobira-copy-direct-link"
+									onClick={() => copyTobiraDirectLink()}
+									aria-label={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
+								>
+									<i
+										aria-hidden="true"
+										className="fa fa-copy"
+										title={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
+									/>
+								</button>
+							</div>
+							{kind === "series" && <div className="obj-container">
+								<p>{t("EVENTS.SERIES.DETAILS.TOBIRA.DESCRIPTION")}</p>
+							</div>}
+							<div className="obj-container">
+								<div className="obj tbl-list">
+									<header>
+										{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}
+									</header>
+									<div className="obj-container">
+										<TobiraTable {...{ tobiraData, i18nKey, openSubTab }} />
+									</div>
 								</div>
 							</div>
-						</div>
-					</>}
+						</>}
+					</div>
 				</div>
-			</div>
+			</div>}
 		</div>
-	</div>;
+		{tabHierarchy === "edit-path" && (
+			<Formik
+				initialValues={initialValues}
+				validationSchema={undefined}
+				onSubmit={values => handleSubmit(values)}
+			>
+				{formik => <NewTobiraPage
+					editMode
+					formik={formik}
+					nextPage={() => {}}
+					previousPage={() => {}}
+				/>}
+			</Formik>
+		)}
+	</>;
 }
 
 type TobiraTableProps = {
-	tobiraData: {
-		baseURL: string,
-		hostPages: {
-			title: string,
-			path: string,
-			ancestors: {
-				title: string,
-			}[],
-		}[],
-	};
+	tobiraData: TobiraData;
 	i18nKey: "SERIES" | "EVENTS";
-}
+	openSubTab: (tabType: TobiraTabHierarchy, currentPage: TobiraPage) => Promise<void>
+};
 
-const TobiraTable: React.FC<TobiraTableProps> = ({ tobiraData, i18nKey }) => {
+const TobiraTable: React.FC<TobiraTableProps> = ({ tobiraData, i18nKey, openSubTab }) => {
 	const { t } = useTranslation();
 	return <table className="main-tbl">
 		<tbody>
@@ -138,10 +209,17 @@ const TobiraTable: React.FC<TobiraTableProps> = ({ tobiraData, i18nKey }) => {
 							</span>}
 						</span>
 					</a>
+					{i18nKey === "SERIES" && hostPage.blocks?.length === 1 && <button
+						style={{ margin: 5 }}
+						className="button-like-anchor details-link pull-right"
+						onClick={() => openSubTab("edit-path", hostPage)}
+					>
+						{t("EVENTS.SERIES.DETAILS.TOBIRA.EDIT_PATH")}
+					</button>}
 				</td>
 			</tr>)}
 		</tbody>
 	</table>;
-}
+};
 
 export default DetailsTobiraTab;
diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index b0fd10ac2e..bcef049303 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -12,19 +12,22 @@ import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 /**
  * This component renders the theme page for new series in the new series wizard.
  */
-type RequiredFormProps = {
+export type TobiraFormProps = {
 	breadcrumbs: TobiraPage[],
 	selectedPage?: TobiraPage,
+	currentPath?: string,
 }
 
-const NewTobiraPage = <T extends RequiredFormProps>({
+const NewTobiraPage = <T extends TobiraFormProps>({
 	formik,
 	nextPage,
 	previousPage,
+	editMode,
 }: {
 	formik: FormikProps<T>,
 	nextPage: (values: T) => void,
-	previousPage: (values: T) => void,
+	previousPage:(values: T) => void,
+	editMode?: boolean,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -121,7 +124,7 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 			.concat(page)
 			.map(page => page.segment)
 			.join('/')
-			.replace(/([^\/]+$)/, lastSegment);
+			.replace(/([^/]+$)/, lastSegment);
 	};
 
 	const goto = (page: TobiraPage) => {
@@ -148,6 +151,7 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 			select(undefined);
 			formik.setFieldValue("breadcrumbs", [...formik.values.breadcrumbs, currentPage]);
 		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [currentPage]);
 
 	const addChild = () => {
@@ -155,6 +159,7 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 		const newPage: TobiraPage = {
 			new: true,
 			children: [],
+			ancestors: [],
 			title: "",
 			path: "",
 			subpages: "",
@@ -211,13 +216,13 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 						<header className="no-expand">
 							{t("EVENTS.SERIES.NEW.TOBIRA.CAPTION")}
 						</header>
-						<div className="obj-container padded">
+						{!editMode && <div className="obj-container padded">
 							<ul>
 								<li>
 									<p>{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}</p>
 								</li>
 							</ul>
-						</div>
+						</div>}
 						{!error && <>
 							<div className="obj-container padded">
 								<div className="obj">
@@ -341,18 +346,40 @@ const NewTobiraPage = <T extends RequiredFormProps>({
 								<p>{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}</p>
 							</div>
 						</>}
+						{/* Render buttons for saving or resetting updated path */}
+						{editMode && <footer style={{ padding: "0 15px" }}>
+							{formik.values.selectedPage !== undefined && <div className="pull-left">
+								<button
+									type="reset"
+									onClick={() => formik.setFieldValue("selectedPage", undefined)}
+									className="cancel"
+								>{t("CANCEL")}</button>
+							</div>}
+							<div className="pull-right">
+								<button
+									onClick={() => formik.handleSubmit()}
+									disabled={!isValid || formik.values.selectedPage === undefined}
+									className={`save green ${
+										(!isValid || formik.values.selectedPage === undefined)
+											? "disabled"
+											: ""
+										}`
+									}
+								>{t("SAVE")}</button>
+							</div>
+						</footer>}
 					</div>
 				</div>
 			</div>
 		</div>
 
 		{/* Button for navigation to next page and previous page */}
-		<WizardNavigationButtons
+		{!editMode && <WizardNavigationButtons
 			formik={formik}
 			nextPage={nextPage}
 			previousPage={previousPage}
 			additionalValidation={!isValid}
-		/>
+		/>}
 	</>;
 };
 
diff --git a/src/components/events/partials/modals/SeriesDetails.tsx b/src/components/events/partials/modals/SeriesDetails.tsx
index 77a38aa3c7..d869559f85 100644
--- a/src/components/events/partials/modals/SeriesDetails.tsx
+++ b/src/components/events/partials/modals/SeriesDetails.tsx
@@ -20,6 +20,7 @@ import DetailsExtendedMetadataTab from "../ModalTabsAndPages/DetailsExtendedMeta
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import {
 	fetchSeriesStatistics,
+	setTobiraTabHierarchy,
 	updateExtendedSeriesMetadata,
 	updateSeriesMetadata,
 } from "../../../../slices/seriesDetailsSlice";
@@ -49,6 +50,7 @@ const SeriesDetails = ({
 
 	useEffect(() => {
 		dispatch(fetchSeriesStatistics(seriesId));
+		dispatch(setTobiraTabHierarchy("main"));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
index 9a103d0027..2173e764a9 100644
--- a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
+++ b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -170,6 +170,8 @@
 		"GROUP_NOT_DELETED": "The group could not be deleted",
 		"SERIES_ADDED": "The series has been created",
 		"SERIES_NOT_SAVED": "The series could not be saved",
+		"SERIES_PATH_UPDATED": "The series path has been updated",
+		"SERIES_PATH_NOT_UPDATED": "The series path could not be updated",
 		"EVENTS_CREATED": "The event has been created",
 		"EVENTS_UPLOAD_STARTED": "The event is being uploaded… {{ progress }}%",
 		"EVENTS_NOT_CREATED": "The event could not be created",
@@ -1217,7 +1219,10 @@
 					"DIRECT_LINK": "Direct link to series",
 					"COPY_DIRECT_LINK": "Copy to clipboard",
 					"NOT_MOUNTED": "This series is currently not included the page structure, and can only be reached using the direct link above.",
-					"PAGES": "Pages in Tobira that contain this series"
+					"PAGES": "Pages in Tobira that contain this series",
+					"SHOW_PAGES": "Show all pages",
+					"EDIT_PATH" : "Edit path",
+					"DESCRIPTION": "You may edit the path of pages containing this series if the page has no other content."
 				},
 				"EVENTS": {
 					"TITLE": "Title",
diff --git a/src/selectors/seriesDetailsSelectors.ts b/src/selectors/seriesDetailsSelectors.ts
index 5b269ce0d5..edcddbeec3 100644
--- a/src/selectors/seriesDetailsSelectors.ts
+++ b/src/selectors/seriesDetailsSelectors.ts
@@ -15,6 +15,8 @@ export const getSeriesDetailsTobiraData = (state: RootState) =>
 	state.seriesDetails.tobiraData
 export const getSeriesDetailsTobiraDataError = (state: RootState) =>
 	state.seriesDetails.errorTobiraData
+export const getTobiraTabHierarchy = (state: RootState) =>
+	state.seriesDetails.tobiraTab;
 
 /* selectors for statistics */
 export const hasStatistics = (state: RootState) =>
diff --git a/src/slices/eventDetailsSlice.ts b/src/slices/eventDetailsSlice.ts
index ca1dc2c580..8e5d93ac83 100644
--- a/src/slices/eventDetailsSlice.ts
+++ b/src/slices/eventDetailsSlice.ts
@@ -37,6 +37,7 @@ import {
 } from "../components/events/partials/modals/EventDetails";
 import { AppDispatch } from "../store";
 import { Ace } from './aclSlice';
+import { setTobiraTabHierarchy, TobiraData } from './seriesDetailsSlice';
 
 // Contains the navigation logic for the modal
 type EventDetailsModal = {
@@ -376,16 +377,7 @@ type EventDetailsState = {
 	publications: Publication[],
 	statistics: Statistics[],
 	hasStatisticsError: boolean,
-	tobiraData: {
-		baseURL: string,
-		hostPages: {
-			title: string,
-			path: string,
-			ancestors: {
-				title: string,
-			}[],
-		}[],
-	},
+	tobiraData: TobiraData,
 }
 
 // Initial state of event details in redux store
@@ -1528,6 +1520,7 @@ export const openModal = (
 ) => (dispatch: AppDispatch) => {
 	dispatch(setModalEvent(event));
 	dispatch(setModalWorkflowId(workflowId));
+	dispatch(setTobiraTabHierarchy("main"));
 	dispatch(openModalTab(page, workflowTab, assetsTab))
 	dispatch(setShowModal(true));
 };
diff --git a/src/slices/seriesDetailsSlice.ts b/src/slices/seriesDetailsSlice.ts
index 2adf86dfa5..8ae939a2b6 100644
--- a/src/slices/seriesDetailsSlice.ts
+++ b/src/slices/seriesDetailsSlice.ts
@@ -20,6 +20,10 @@ import { Statistics, fetchStatistics, fetchStatisticsValueUpdate } from './stati
 import { Ace } from './aclSlice';
 import { TransformedAcl } from './aclDetailsSlice';
 import { MetadataCatalog } from './eventSlice';
+import { TobiraPage } from './seriesSlice';
+import { TobiraTabHierarchy } from '../components/events/partials/ModalTabsAndPages/DetailsTobiraTab';
+import { TobiraFormProps } from '../components/events/partials/ModalTabsAndPages/NewTobiraPage';
+
 
 /**
  * This file contains redux reducer for actions affecting the state of a series
@@ -30,6 +34,11 @@ export type Feed = {
 	version: string,
 }
 
+export type TobiraData = {
+	baseURL: string,
+	hostPages: TobiraPage[],
+};
+
 type SeriesDetailsState = {
 	statusMetadata: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
 	errorMetadata: SerializedError | null,
@@ -47,7 +56,7 @@ type SeriesDetailsState = {
 	errorStatisticsValue: SerializedError | null,
 	statusTobiraData: 'uninitialized' | 'loading' | 'succeeded' | 'failed',
 	errorTobiraData: SerializedError | null,
-  metadata: MetadataCatalog,
+  	metadata: MetadataCatalog,
 	extendedMetadata: MetadataCatalog[],
 	feeds: Feed[],
 	acl: TransformedAcl[],
@@ -56,16 +65,8 @@ type SeriesDetailsState = {
 	fetchingStatisticsInProgress: boolean,
 	statistics: Statistics[],
 	hasStatisticsError: boolean,
-	tobiraData: {
-		baseURL: string,
-		hostPages: {
-			title: string,
-			path: string,
-			ancestors: {
-				title: string,
-			}[],
-		}[],
-	},
+	tobiraTab: TobiraTabHierarchy,
+	tobiraData: TobiraData,
 }
 
 // Initial state of series details in redux store
@@ -99,6 +100,7 @@ const initialState: SeriesDetailsState = {
 	fetchingStatisticsInProgress: false,
 	statistics: [],
 	hasStatisticsError: false,
+	tobiraTab: "main",
 	tobiraData: {
 		baseURL: "",
 		hostPages: [],
@@ -451,6 +453,55 @@ export const fetchSeriesDetailsTobira = createAppAsyncThunk('seriesDetails/fetch
 	return data;
 });
 
+export const updateSeriesTobiraPath = createAppAsyncThunk('series/updateSeriesTobiraData', async (
+	params: TobiraFormProps & { seriesId: string },
+	{ dispatch },
+) => {
+	const tobiraParams = new URLSearchParams();
+	
+	const pathComponents = params.breadcrumbs.slice(1).map(crumb => ({
+		name: crumb.title,
+		pathSegment: crumb.segment,
+	}));
+
+	if (params.currentPath && params.selectedPage) {
+		pathComponents.push({
+			// Passing a dummy value here so Tobira won't freak out.
+			name: params.selectedPage.title ?? "dummy",
+			pathSegment: params.selectedPage.segment,
+		});
+		
+		tobiraParams.append("pathComponents", JSON.stringify(pathComponents));
+		tobiraParams.append("targetPath", params.selectedPage.path);
+		tobiraParams.append("currentPath", params.currentPath);
+	}
+
+	try {
+		const response = await axios.post(`/admin-ng/series/${params.seriesId}/tobira/path`, tobiraParams.toString(), {
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded',
+			},
+		});
+  
+		console.info(response);
+		dispatch(addNotification({
+			type: 'success',
+			key: 'SERIES_PATH_UPDATED',
+			context: NOTIFICATION_CONTEXT
+		}));
+		
+		return response.data;
+	} catch (error) {
+		console.error(error);
+		dispatch(addNotification({
+			type: 'error',
+			key: 'SERIES_PATH_NOT_UPDATED',
+			context: NOTIFICATION_CONTEXT
+		}));
+		throw error;
+	}}
+);
+
 // thunks for statistics
 export const fetchSeriesStatistics = createAppAsyncThunk('seriesDetails/fetchSeriesStatistics', async (seriesId: string, {getState}) => {
 	// get prior statistics
@@ -524,6 +575,11 @@ const seriesDetailsSlice = createSlice({
 		>) {
 			state.statistics = action.payload;
 		},
+		setTobiraTabHierarchy(state, action: PayloadAction<
+			SeriesDetailsState["tobiraTab"]
+		>) {
+			state.tobiraTab = action.payload;
+		},
 		setDoNothing(state) {
 
 		}
@@ -654,6 +710,7 @@ export const {
 	setSeriesDetailsExtendedMetadata,
 	setSeriesStatisticsError,
 	setSeriesStatistics,
+	setTobiraTabHierarchy,
 	setDoNothing,
 } = seriesDetailsSlice.actions;
 
diff --git a/src/slices/seriesSlice.ts b/src/slices/seriesSlice.ts
index 3974e0d54c..4f746b7ecf 100644
--- a/src/slices/seriesSlice.ts
+++ b/src/slices/seriesSlice.ts
@@ -41,29 +41,18 @@ type Theme = {
 	name: string,
 }
 
-export interface TobiraPageChild {
-	title: string | undefined,
-	path: string,
-	segment: string,
-	blocks: {
-		id: string,
-	}[],
-	subpages?: string,  // not returned by endpoint
-	new?: boolean,      // not returned by endpoint
-	children?: TobiraPageChild[],
-}
-
 export interface TobiraPage {
 	title: string | undefined,
 	path: string,
 	segment: string,
 	children: TobiraPage[],
+	ancestors: TobiraPage[]
 
 	subpages?: string,  // not returned by endpoint
 	new?: boolean,      // not returned by endpoint
-	blocks?: {
+	blocks: {
 		id: string,
-	}[],    // not returned by endpoint, only in children. has "id"
+	}[],
 }
 
 type SeriesState = {
@@ -77,12 +66,12 @@ type SeriesState = {
 	errorTobiraPage: SerializedError | null,
 	results: Series[],
 	columns: TableConfig["columns"],
-  showActions: boolean,
+	showActions: boolean,
 	total: number,
 	count: number,
 	offset: number,
 	limit: number,
-  metadata: MetadataCatalog,
+	metadata: MetadataCatalog,
 	extendedMetadata: MetadataCatalog[],
 	themes: Theme[],
 	deletionAllowed: boolean,
@@ -127,6 +116,8 @@ const initialState: SeriesState = {
 		path: "/",
 		segment: "",
 		children: [],
+		ancestors: [],
+		blocks: [],
 	},
 };
 

From f171db9c6800343fed0f3dacb80c2f5dcaea55e4 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Sun, 11 Aug 2024 16:42:33 +0200
Subject: [PATCH 05/11] Factor out some "save edit" footer code

This pulls the code into a component to limit duplication.
The component can be used when "cancel" and "save" buttons
are needed in modal tabs that allow editing things like
access policies.

This makes it easier to reuse and limits duplicated code.
---
 .../EventDetailsAccessPolicyTab.tsx           |  1 -
 .../ModalTabsAndPages/NewTobiraPage.tsx       | 28 ++++----------
 .../SeriesDetailsAccessTab.tsx                |  1 -
 src/components/shared/SaveEditFooter.tsx      | 38 +++++++++++++++++++
 .../modals/ResourceDetailsAccessPolicyTab.tsx | 37 ++++--------------
 5 files changed, 53 insertions(+), 52 deletions(-)
 create mode 100644 src/components/shared/SaveEditFooter.tsx

diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx
index 69a6e6a373..cb6718b56e 100644
--- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx
@@ -32,7 +32,6 @@ const EventDetailsAccessPolicyTab = ({
 			resourceId={eventId}
 			header={header}
 			buttonText={"EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.LABEL"}
-			saveButtonText={"SAVE"}
 			policies={policies}
 			fetchAccessPolicies={fetchAccessPolicies}
 			fetchHasActiveTransactions={fetchHasActiveTransactions}
diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index bcef049303..3f27824302 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -8,6 +8,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
 import { TobiraPage, fetchSeriesDetailsTobiraNew, setErrorTobiraPage, setTobiraPage } from "../../../../slices/seriesSlice";
 import { getSeriesTobiraPage, getSeriesTobiraPageError } from "../../../../selectors/seriesSeletctor";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
+import { SaveEditFooter } from "../../../shared/SaveEditFooter";
 
 /**
  * This component renders the theme page for new series in the new series wizard.
@@ -347,27 +348,12 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 							</div>
 						</>}
 						{/* Render buttons for saving or resetting updated path */}
-						{editMode && <footer style={{ padding: "0 15px" }}>
-							{formik.values.selectedPage !== undefined && <div className="pull-left">
-								<button
-									type="reset"
-									onClick={() => formik.setFieldValue("selectedPage", undefined)}
-									className="cancel"
-								>{t("CANCEL")}</button>
-							</div>}
-							<div className="pull-right">
-								<button
-									onClick={() => formik.handleSubmit()}
-									disabled={!isValid || formik.values.selectedPage === undefined}
-									className={`save green ${
-										(!isValid || formik.values.selectedPage === undefined)
-											? "disabled"
-											: ""
-										}`
-									}
-								>{t("SAVE")}</button>
-							</div>
-						</footer>}
+						{editMode && <SaveEditFooter
+							active={formik.values.selectedPage !== undefined}
+							reset={() => formik.setFieldValue("selectedPage", undefined)}
+							submit={() => formik.handleSubmit()}
+							{...{ isValid }}
+						/>}
 					</div>
 				</div>
 			</div>
diff --git a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx b/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx
index ff908e3198..a8afb4c2b6 100644
--- a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx
@@ -38,7 +38,6 @@ const SeriesDetailsAccessTab = ({
 			resourceId={seriesId}
 			header={header}
 			buttonText={"EVENTS.SERIES.DETAILS.ACCESS.ACCESS_POLICY.LABEL"}
-			saveButtonText={"SAVE"}
 			descriptionText={t("EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.DESCRIPTION")}
 			policies={policies}
 			fetchAccessPolicies={fetchSeriesDetailsAcls}
diff --git a/src/components/shared/SaveEditFooter.tsx b/src/components/shared/SaveEditFooter.tsx
new file mode 100644
index 0000000000..57a382e334
--- /dev/null
+++ b/src/components/shared/SaveEditFooter.tsx
@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next"
+
+type SaveEditFooterProps = {
+    active: boolean;
+    reset: () => void;
+    submit: () => void;
+    isValid?: boolean;
+}
+
+export const SaveEditFooter: React.FC<SaveEditFooterProps> = ({
+    active,
+    reset,
+    submit,
+    isValid,
+}) => {
+    const { t } = useTranslation();
+
+    return <footer style={{ padding: "0 15px" }}>
+        {active && isValid && (
+            <div className="pull-left">
+                <button
+                    type="reset"
+                    onClick={reset}
+                    className="cancel"
+                >{t("CANCEL")}</button>
+            </div>
+        )}
+        <div className="pull-right">
+            <button
+                onClick={submit}
+                disabled={!isValid || !active}
+                className={`save green ${
+                    !isValid || !active ? "disabled" : ""
+                }`}
+            >{t("SAVE")}</button>
+        </div>
+    </footer>;
+}
\ No newline at end of file
diff --git a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx
index 2cca6fda1a..3583664285 100644
--- a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx
+++ b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx
@@ -26,6 +26,8 @@ import { useTranslation } from "react-i18next";
 import { TransformedAcl } from "../../../slices/aclDetailsSlice";
 import { AsyncThunk, unwrapResult } from "@reduxjs/toolkit";
 import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk";
+import { SaveEditFooter } from "../SaveEditFooter";
+
 
 /**
  * This component manages the access policy tab of resource details modals
@@ -39,7 +41,6 @@ const ResourceDetailsAccessPolicyTab = ({
 	saveNewAccessPolicies,
 	descriptionText,
 	buttonText,
-	saveButtonText,
 	editAccessRole,
 	policyChanged,
 	setPolicyChanged,
@@ -52,7 +53,6 @@ const ResourceDetailsAccessPolicyTab = ({
 	saveNewAccessPolicies:  AsyncThunk<boolean, { id: string, policies: { acl: Acl } }, AsyncThunkConfig>
 	descriptionText: string,
 	buttonText: string,
-	saveButtonText: string,
 	editAccessRole: string,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
@@ -597,33 +597,12 @@ const ResourceDetailsAccessPolicyTab = ({
 											</div>
 
 											{/* Save and cancel buttons */}
-											{!transactions.read_only && (
-												<footer style={{ padding: "0 15px" }}>
-													{policyChanged &&
-														formik.dirty && (
-														<div className="pull-left">
-															<button
-																type="reset"
-																onClick={() => resetPolicies(formik.resetForm)}
-																className="cancel"
-															>
-																{t("CANCEL") /* Cancel */}
-															</button>
-														</div>
-													)}
-													<div className="pull-right">
-														<button
-															onClick={() => saveAccess(formik.values)}
-															disabled={!formik.isValid || !(policyChanged && formik.dirty)}
-															className={`save green  ${
-																!formik.isValid || !(policyChanged && formik.dirty) ? "disabled" : ""
-															}`}
-														>
-															{t(saveButtonText) /* Save */}
-														</button>
-													</div>
-												</footer>
-												)}
+											{!transactions.read_only && <SaveEditFooter
+												active={policyChanged && formik.dirty}
+												reset={() => resetPolicies(formik.resetForm)}
+												submit={() => saveAccess(formik.values)}
+												isValid={formik.isValid}
+											/>}
 										</div>
 									)}
 								</Formik>

From 63bf77631093472b61ee3d0e1e6638bab4246fc1 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Mon, 12 Aug 2024 14:27:35 +0200
Subject: [PATCH 06/11] Adjust some typings

Most notably the series title (in Tobira context)
was made optional, so we don't have to pass an empty
string to Tobira when it's not specified.
---
 .../events/partials/ModalTabsAndPages/NewTobiraPage.tsx       | 3 +--
 src/components/events/partials/wizards/NewSeriesSummary.tsx   | 2 +-
 src/components/events/partials/wizards/NewSeriesWizard.tsx    | 4 ++--
 src/configs/modalConfig.ts                                    | 2 +-
 src/slices/seriesSlice.ts                                     | 2 +-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index 3f27824302..57bc10292d 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -109,7 +109,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 		goto(formik.values.breadcrumbs.splice(index)[0]);
 	};
 
-	const select = (page: TobiraPage | undefined) => {
+	const select = (page?: TobiraPage) => {
 		if (!page || !page.new) {
 			stopEditing();
 		}
@@ -161,7 +161,6 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 			new: true,
 			children: [],
 			ancestors: [],
-			title: "",
 			path: "",
 			subpages: "",
 			blocks: [],
diff --git a/src/components/events/partials/wizards/NewSeriesSummary.tsx b/src/components/events/partials/wizards/NewSeriesSummary.tsx
index 9ce1e703ff..fc45bf15a5 100644
--- a/src/components/events/partials/wizards/NewSeriesSummary.tsx
+++ b/src/components/events/partials/wizards/NewSeriesSummary.tsx
@@ -20,7 +20,7 @@ import { TobiraPage } from "../../../../slices/seriesSlice";
 interface RequiredFormProps {
 	theme: string,
 	acls: TransformedAcl[],
-	selectedPage: TobiraPage | undefined,
+	selectedPage?: TobiraPage,
 }
 
 const NewSeriesSummary = <T extends RequiredFormProps>({
diff --git a/src/components/events/partials/wizards/NewSeriesWizard.tsx b/src/components/events/partials/wizards/NewSeriesWizard.tsx
index b65270363d..ffe49d02be 100644
--- a/src/components/events/partials/wizards/NewSeriesWizard.tsx
+++ b/src/components/events/partials/wizards/NewSeriesWizard.tsx
@@ -93,7 +93,7 @@ const NewSeriesWizard: React.FC<{
 			acls: TransformedAcl[];
 			theme: string;
 			breadcrumbs: TobiraPage[];
-			selectedPage: TobiraPage | undefined;
+			selectedPage?: TobiraPage;
 		}
 	) => {
 		setSnapshot(values);
@@ -115,7 +115,7 @@ const NewSeriesWizard: React.FC<{
 			acls: TransformedAcl[];
 			theme: string;
 			breadcrumbs: TobiraPage[];
-			selectedPage: TobiraPage | undefined;
+			selectedPage?: TobiraPage;
 		},
 		twoPagesBack?: boolean
 	) => {
diff --git a/src/configs/modalConfig.ts b/src/configs/modalConfig.ts
index 1f155f8352..c85eee4fa4 100644
--- a/src/configs/modalConfig.ts
+++ b/src/configs/modalConfig.ts
@@ -95,7 +95,7 @@ export const initialFormValuesNewSeries: {
 	theme: string,
 
 	breadcrumbs: TobiraPage[],
-	selectedPage: TobiraPage | undefined,
+	selectedPage?: TobiraPage,
 	[key: string]: any,  // Metadata fields that are getting added later
 } = {
 	acls: [
diff --git a/src/slices/seriesSlice.ts b/src/slices/seriesSlice.ts
index 4f746b7ecf..33515e5d3e 100644
--- a/src/slices/seriesSlice.ts
+++ b/src/slices/seriesSlice.ts
@@ -42,7 +42,7 @@ type Theme = {
 }
 
 export interface TobiraPage {
-	title: string | undefined,
+	title?: string,
 	path: string,
 	segment: string,
 	children: TobiraPage[],

From 18f9078329fcad7ad23875e407b5e6ddfc57913e Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Tue, 13 Aug 2024 19:09:22 +0200
Subject: [PATCH 07/11] Adjust markup to be less matryoschka-like

This came up and was suggested in the technical meeting.
It does however mean that the Tobira tab will not really
follow the examplary design-"principles" of the other tabs.
---
 .../ModalTabsAndPages/DetailsTobiraTab.tsx    |  64 ++---
 .../ModalTabsAndPages/NewTobiraPage.tsx       | 265 +++++++++---------
 2 files changed, 154 insertions(+), 175 deletions(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
index a1d948177c..bb8e1f821d 100644
--- a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
@@ -105,6 +105,7 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 
 		dispatch(setTobiraTabHierarchy(tabType));
 	};
+
 	return <>
 		<div className="modal-content">
 			{tabHierarchy === "edit-path" && <EventDetailsTabHierarchyNavigation
@@ -116,44 +117,37 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 			{tabHierarchy === "main" && <div className="modal-body">
 				{/* Notifications */}
 				<Notifications context="not_corner" />
-				<div className="full-col">
-					<div className="obj list-obj">
-						<header>
-							{t(`EVENTS.${i18nKey}.DETAILS.TABS.TOBIRA`)}
-						</header>
-						{!error && <>
-							<div className="obj-container">
-								<a href={directTobiraLink}>
-									{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.DIRECT_LINK`)}
-								</a>
-								<button
-									className="tobira-copy-direct-link"
-									onClick={() => copyTobiraDirectLink()}
-									aria-label={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
-								>
-									<i
-										aria-hidden="true"
-										className="fa fa-copy"
-										title={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
-									/>
-								</button>
-							</div>
-							{kind === "series" && <div className="obj-container">
-								<p>{t("EVENTS.SERIES.DETAILS.TOBIRA.DESCRIPTION")}</p>
-							</div>}
+				{!error && <>
+					<div className="tab-description">
+						<a href={directTobiraLink}>
+							{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.DIRECT_LINK`)}
+						</a>
+						<button
+							className="tobira-copy-direct-link"
+							onClick={() => copyTobiraDirectLink()}
+							aria-label={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
+						>
+							<i
+								aria-hidden="true"
+								className="fa fa-copy"
+								title={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
+							/>
+						</button>
+					</div>
+					{kind === "series" && <p className="tab-description">
+						{t("EVENTS.SERIES.DETAILS.TOBIRA.DESCRIPTION")}
+					</p>}
+					<div className="obj-container">
+						<div className="obj tbl-list">
+							<header>
+								{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}
+							</header>
 							<div className="obj-container">
-								<div className="obj tbl-list">
-									<header>
-										{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}
-									</header>
-									<div className="obj-container">
-										<TobiraTable {...{ tobiraData, i18nKey, openSubTab }} />
-									</div>
-								</div>
+								<TobiraTable {...{ tobiraData, i18nKey, openSubTab }} />
 							</div>
-						</>}
+						</div>
 					</div>
-				</div>
+				</>}
 			</div>}
 		</div>
 		{tabHierarchy === "edit-path" && (
diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index 57bc10292d..de74a923f2 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -211,151 +211,136 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 			<div className="modal-body">
 				{/* Notifications */}
 				<Notifications context="not_corner" />
-				<div className="full-col">
-					<div className="obj">
-						<header className="no-expand">
-							{t("EVENTS.SERIES.NEW.TOBIRA.CAPTION")}
-						</header>
-						{!editMode && <div className="obj-container padded">
-							<ul>
-								<li>
-									<p>{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}</p>
-								</li>
-							</ul>
-						</div>}
-						{!error && <>
-							<div className="obj-container padded">
-								<div className="obj">
-									<header>
-										<span>{t("EVENTS.SERIES.NEW.TOBIRA.SELECT_PAGE")}</span>
-									</header>
-									<div className="breadcrumb">
-										{formik.values.breadcrumbs.map((breadcrumb, key) => (
-											<button
-												key={key}
-												className="button-like-anchor breadcrumb-link"
-												onClick={() => back(key)}
-											>
-												{breadcrumb.segment === ''
-													? t('EVENTS.SERIES.NEW.TOBIRA.HOMEPAGE')
-													: breadcrumb.title
-												}
-											</button>
-										))}
-									</div>
-									<table className="main-tbl highlight-hover">
-										<thead>
-											<tr>
-												{currentPage.children.some(page => !page.blocks?.length)
-													&& <th className="small"/>
-												}
-												<th>
-													{t("EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE") /* Title */}
-												</th>
-												<th>
-													{t("EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT") /* Path segment */}
-												</th>
-												<th>
-													{t("EVENTS.SERIES.NEW.TOBIRA.SUBPAGES") /* Subpages */}
-												</th>
-												{editing && <th />}
-											</tr>
-										</thead>
-										<tbody>
-											{currentPage.children.map((page, key) => <tr key={key}>
-												{currentPage.children.some(page => !page.blocks?.length) && <td>
-													{!page.blocks?.length && <input
-														type="checkbox"
-														checked={isValid && formik.values.selectedPage?.path
-															=== currentPage.children[key].path
-														}
-														onChange={() => page.blocks?.length || select(page)}
-													/>}
-												</td>}
-												<td>
-													{!!page.new
-														? <input
-															placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE')}
-															value={page.title}
-															onChange={(e) => setPage(key, e, "title")}
-														/>
-														: <button
-															className={'button-like-anchor '
-																+ (!page.blocks?.length && 'tobira-selectable')}
-															onClick={() => page.blocks?.length || select(page)}
-														>{page.title}</button>
-													}
-												</td>
-												<td>
-													<code className="tobira-path">
-														{!!page.new
-															? <input
-																placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT')}
-																value={page.segment}
-																onChange={e => setPage(key, e, "segment")}
-															/>
-															: <span style={{ fontWeight: "inherit" }}>
-																{page.segment}
-															</span>
-														}
-													</code>
-												</td>
-												<td>
-													{((!page.new || isValid) && page.title) && <button
-														className="button-like-anchor details-link"
-														onClick={() => goto(page)}
-													>
-														{t("EVENTS.SERIES.NEW.TOBIRA.SUBPAGES")}
-													</button>}
-												</td>
-												{editing && <td>
-													{page.new && <button
-														onClick={() => select(undefined)}
-														title={t('EVENTS.SERIES.NEW.TOBIRA.CANCEL')}
-														className="button-like-anchor remove"
-													/>}
-												</td>}
-											</tr>)}
-											{!editing && <tr>
-												<td colSpan={4}>
-													<button
-														className={"button-like-anchor"}
-														onClick={() => addChild()}
-													>
-														+ {t('EVENTS.SERIES.NEW.TOBIRA.ADD_SUBPAGE')}
-													</button>
-												</td>
-											</tr>}
-										</tbody>
-									</table>
-								</div>
+				{!editMode && <p className="tab-description">{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}</p>}
+				{!error && <>
+					<div className="obj-container padded">
+						<div className="obj">
+							<header>
+								<span>{t("EVENTS.SERIES.NEW.TOBIRA.SELECT_PAGE")}</span>
+							</header>
+							<div className="breadcrumb">
+								{formik.values.breadcrumbs.map((breadcrumb, key) => (
+									<button
+										key={key}
+										className="button-like-anchor breadcrumb-link"
+										onClick={() => back(key)}
+									>
+										{breadcrumb.segment === ''
+											? t('EVENTS.SERIES.NEW.TOBIRA.HOMEPAGE')
+											: breadcrumb.title
+										}
+									</button>
+								))}
 							</div>
-
-							<div className="obj-container padded">
-								<p>
-									{(!!formik.values.selectedPage && isValid)
-										? <>
-											{t("EVENTS.SERIES.NEW.TOBIRA.SELECTED_PAGE")}:
+							<table className="main-tbl highlight-hover">
+								<thead>
+									<tr>
+										{currentPage.children.some(page => !page.blocks?.length)
+											&& <th className="small"/>
+										}
+										<th>
+											{t("EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE") /* Title */}
+										</th>
+										<th>
+											{t("EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT") /* Path segment */}
+										</th>
+										<th>
+											{t("EVENTS.SERIES.NEW.TOBIRA.SUBPAGES") /* Subpages */}
+										</th>
+										{editing && <th />}
+									</tr>
+								</thead>
+								<tbody>
+									{currentPage.children.map((page, key) => <tr key={key}>
+										{currentPage.children.some(page => !page.blocks?.length) && <td>
+											{!page.blocks?.length && <input
+												type="checkbox"
+												checked={isValid && formik.values.selectedPage?.path
+													=== currentPage.children[key].path
+												}
+												onChange={() => page.blocks?.length || select(page)}
+											/>}
+										</td>}
+										<td>
+											{!!page.new
+												? <input
+													placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE')}
+													value={page.title}
+													onChange={(e) => setPage(key, e, "title")}
+												/>
+												: <button
+													className={'button-like-anchor '
+														+ (!page.blocks?.length && 'tobira-selectable')}
+													onClick={() => page.blocks?.length || select(page)}
+												>{page.title}</button>
+											}
+										</td>
+										<td>
 											<code className="tobira-path">
-												{formik.values.selectedPage.path}
+												{!!page.new
+													? <input
+														placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT')}
+														value={page.segment}
+														onChange={e => setPage(key, e, "segment")}
+													/>
+													: <span style={{ fontWeight: "inherit" }}>
+														{page.segment}
+													</span>
+												}
 											</code>
-										</>
-										: t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED")
-									}
-								</p>
-								<p>{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}</p>
-							</div>
-						</>}
-						{/* Render buttons for saving or resetting updated path */}
-						{editMode && <SaveEditFooter
-							active={formik.values.selectedPage !== undefined}
-							reset={() => formik.setFieldValue("selectedPage", undefined)}
-							submit={() => formik.handleSubmit()}
-							{...{ isValid }}
-						/>}
+										</td>
+										<td>
+											{((!page.new || isValid) && page.title) && <button
+												className="button-like-anchor details-link"
+												onClick={() => goto(page)}
+											>
+												{t("EVENTS.SERIES.NEW.TOBIRA.SUBPAGES")}
+											</button>}
+										</td>
+										{editing && <td>
+											{page.new && <button
+												onClick={() => select(undefined)}
+												title={t('EVENTS.SERIES.NEW.TOBIRA.CANCEL')}
+												className="button-like-anchor remove"
+											/>}
+										</td>}
+									</tr>)}
+									{!editing && <tr>
+										<td colSpan={4}>
+											<button
+												className={"button-like-anchor"}
+												onClick={() => addChild()}
+											>
+												+ {t('EVENTS.SERIES.NEW.TOBIRA.ADD_SUBPAGE')}
+											</button>
+										</td>
+									</tr>}
+								</tbody>
+							</table>
+						</div>
 					</div>
-				</div>
+
+					<p style={{ margin: "12px 0", fontSize: 12 }}>
+						{(!!formik.values.selectedPage && isValid)
+							? <>
+								{t("EVENTS.SERIES.NEW.TOBIRA.SELECTED_PAGE")}:
+								<code className="tobira-path">
+									{formik.values.selectedPage.path}
+								</code>
+							</>
+							: t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED")
+						}
+					</p>
+					<p style={{ fontSize: 12 }}>{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}</p>
+				</>}
 			</div>
+			{/* Render buttons for saving or resetting updated path */}
+			{editMode && <SaveEditFooter
+				active={formik.values.selectedPage !== undefined}
+				reset={() => formik.setFieldValue("selectedPage", undefined)}
+				submit={() => formik.handleSubmit()}
+				{...{ isValid }}
+			/>}
 		</div>
 
 		{/* Button for navigation to next page and previous page */}

From 3b81870f1d6c023fd9e07d34890e575af0555629 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Wed, 14 Aug 2024 12:43:13 +0200
Subject: [PATCH 08/11] Allow mounting previously unmounted series

---
 .../partials/ModalTabsAndPages/DetailsTobiraTab.tsx | 13 ++++++++++++-
 .../adminui/languages/lang-en_US.json               |  1 +
 src/slices/seriesDetailsSlice.ts                    |  5 ++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
index bb8e1f821d..4ec4afba78 100644
--- a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
@@ -101,6 +101,8 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 				breadcrumbs,
 			});
 			await dispatch(fetchSeriesDetailsTobiraNew(currentPage.path));
+		} else {
+			await dispatch(fetchSeriesDetailsTobiraNew("/"));
 		}
 
 		dispatch(setTobiraTabHierarchy(tabType));
@@ -170,7 +172,7 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 type TobiraTableProps = {
 	tobiraData: TobiraData;
 	i18nKey: "SERIES" | "EVENTS";
-	openSubTab: (tabType: TobiraTabHierarchy, currentPage: TobiraPage) => Promise<void>
+	openSubTab: (tabType: TobiraTabHierarchy, currentPage?: TobiraPage) => Promise<void>
 };
 
 const TobiraTable: React.FC<TobiraTableProps> = ({ tobiraData, i18nKey, openSubTab }) => {
@@ -180,6 +182,15 @@ const TobiraTable: React.FC<TobiraTableProps> = ({ tobiraData, i18nKey, openSubT
 			{tobiraData.hostPages.length === 0 && <tr>
 				<td className="tobira-not-mounted">
 					{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.NOT_MOUNTED`)}
+					{i18nKey === "SERIES" && (
+						<button
+							style={{ margin: 5 }}
+							className="button-like-anchor details-link pull-right"
+							onClick={() => openSubTab("edit-path")}
+						>
+							{t("EVENTS.SERIES.DETAILS.TOBIRA.MOUNT_SERIES")}
+						</button>
+					)}
 				</td>
 			</tr>}
 			{tobiraData.hostPages.map(hostPage => <tr key={hostPage.path}>
diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
index 2173e764a9..c06e42fdcd 100644
--- a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
+++ b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -1222,6 +1222,7 @@
 					"PAGES": "Pages in Tobira that contain this series",
 					"SHOW_PAGES": "Show all pages",
 					"EDIT_PATH" : "Edit path",
+					"MOUNT_SERIES": "Mount series",
 					"DESCRIPTION": "You may edit the path of pages containing this series if the page has no other content."
 				},
 				"EVENTS": {
diff --git a/src/slices/seriesDetailsSlice.ts b/src/slices/seriesDetailsSlice.ts
index 8ae939a2b6..bce0e36a6e 100644
--- a/src/slices/seriesDetailsSlice.ts
+++ b/src/slices/seriesDetailsSlice.ts
@@ -464,7 +464,7 @@ export const updateSeriesTobiraPath = createAppAsyncThunk('series/updateSeriesTo
 		pathSegment: crumb.segment,
 	}));
 
-	if (params.currentPath && params.selectedPage) {
+	if (params.selectedPage) {
 		pathComponents.push({
 			// Passing a dummy value here so Tobira won't freak out.
 			name: params.selectedPage.title ?? "dummy",
@@ -473,6 +473,9 @@ export const updateSeriesTobiraPath = createAppAsyncThunk('series/updateSeriesTo
 		
 		tobiraParams.append("pathComponents", JSON.stringify(pathComponents));
 		tobiraParams.append("targetPath", params.selectedPage.path);
+	}
+	
+	if (params.currentPath) {
 		tobiraParams.append("currentPath", params.currentPath);
 	}
 

From f0e4df65f4b1486583b28ff5f28800024d40559d Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Wed, 14 Aug 2024 17:35:56 +0200
Subject: [PATCH 09/11] Always show checkboxes

Previously I had them hidden if they couldn't be checked.
After some feedback from Bern we decided to show them anyway, but
add a tooltip to explain why they can't be checked. The disabled
style isn't really that striking or self explanatory.
I hope this will prevent at least some confusion.
---
 .../ModalTabsAndPages/NewTobiraPage.tsx       | 39 ++++++++++++-------
 .../adminui/languages/lang-en_US.json         |  3 +-
 .../views/modals/_new-event-series.scss       |  6 +++
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index de74a923f2..0f60f09ec5 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -9,6 +9,7 @@ import { TobiraPage, fetchSeriesDetailsTobiraNew, setErrorTobiraPage, setTobiraP
 import { getSeriesTobiraPage, getSeriesTobiraPageError } from "../../../../selectors/seriesSeletctor";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 import { SaveEditFooter } from "../../../shared/SaveEditFooter";
+import { Tooltip } from "../../../shared/Tooltip";
 
 /**
  * This component renders the theme page for new series in the new series wizard.
@@ -235,9 +236,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 							<table className="main-tbl highlight-hover">
 								<thead>
 									<tr>
-										{currentPage.children.some(page => !page.blocks?.length)
-											&& <th className="small"/>
-										}
+										<th className="small"/>
 										<th>
 											{t("EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE") /* Title */}
 										</th>
@@ -252,15 +251,22 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 								</thead>
 								<tbody>
 									{currentPage.children.map((page, key) => <tr key={key}>
-										{currentPage.children.some(page => !page.blocks?.length) && <td>
-											{!page.blocks?.length && <input
-												type="checkbox"
-												checked={isValid && formik.values.selectedPage?.path
-													=== currentPage.children[key].path
-												}
-												onChange={() => page.blocks?.length || select(page)}
-											/>}
-										</td>}
+										<Tooltip
+											title={t("EVENTS.SERIES.NEW.TOBIRA.MOUNT_DISCLAIMER")}
+											active={!!page.blocks?.length}
+											placement="left"
+										>
+											<td>
+												<input
+													type="checkbox"
+													checked={isValid && formik.values.selectedPage?.path
+														=== currentPage.children[key].path
+													}
+													disabled={!!page.blocks?.length}
+													onChange={() => page.blocks?.length || select(page)}
+												/>
+											</td>
+										</Tooltip>
 										<td>
 											{!!page.new
 												? <input
@@ -269,8 +275,13 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 													onChange={(e) => setPage(key, e, "title")}
 												/>
 												: <button
-													className={'button-like-anchor '
-														+ (!page.blocks?.length && 'tobira-selectable')}
+													className={"button-like-anchor "
+														+ (!page.blocks?.length
+															? "tobira-selectable"
+															: "tobira-button-disabled"
+														)
+													}
+													disabled={!!page.blocks?.length}
 													onClick={() => page.blocks?.length || select(page)}
 												>{page.title}</button>
 											}
diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
index c06e42fdcd..8f787851a1 100644
--- a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
+++ b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -1136,7 +1136,8 @@
 					"SELECTED_PAGE": "Series will be mounted under the following path",
 					"NO_PAGE_SELECTED": "No page selected. Series will not be mounted in Tobira.",
 					"PATH": "Path",
-					"DIRECT_LINK": "A direct link will be available."
+					"DIRECT_LINK": "A direct link will be available.",
+					"MOUNT_DISCLAIMER": "Series can only be mounted in empty pages"
 				},
 				"SUMMARY": {
 					"CAPTION": "Summary"
diff --git a/src/styles/views/modals/_new-event-series.scss b/src/styles/views/modals/_new-event-series.scss
index bc734a3b7e..abdea9075b 100644
--- a/src/styles/views/modals/_new-event-series.scss
+++ b/src/styles/views/modals/_new-event-series.scss
@@ -74,6 +74,12 @@
     font-weight: bold;
 }
 
+td > button.tobira-button-disabled {
+    cursor: default;
+    opacity: .8;
+    color: #666666;
+}
+
 .tobira-path {
     font-family: monospace;
 }

From 823a8e3b21bbd18ca91430feb853e8958dc0a770 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Wed, 14 Aug 2024 23:38:21 +0200
Subject: [PATCH 10/11] Adjust http error handling and notifications

503 errors mean that Tobira either isn't configured, or not
configured correcty in Opencast. Unfortunately, it doesn't
distinguish between the two.
Since it might very well be the former, I think we shouldn't
show the error as a notification in the UI.
Instead there will be an info in console saying "Tobira isn't
configured (correctly)" and the Tobira tab will be hidden.
This solution isn't optimal but I think it's the best we
can do for now.

The other errors (404, 500) will trigger notifications that
are shown in the respective Tobira tab.
---
 .../ModalTabsAndPages/DetailsTobiraTab.tsx    |  4 +-
 .../ModalTabsAndPages/NewTobiraPage.tsx       | 18 ++---
 .../events/partials/modals/EventDetails.tsx   |  8 ++-
 .../events/partials/modals/SeriesDetails.tsx  |  4 +-
 .../partials/wizards/NewSeriesWizard.tsx      |  6 +-
 src/components/shared/Notifications.tsx       | 31 ++++----
 src/configs/modalConfig.ts                    |  3 +
 .../adminui/languages/lang-en_US.json         | 13 +++-
 src/selectors/eventDetailsSelectors.ts        |  6 +-
 src/selectors/seriesDetailsSelectors.ts       |  4 +-
 src/slices/eventDetailsSlice.ts               | 31 +-------
 src/slices/notificationSlice.ts               |  2 +-
 src/slices/seriesDetailsSlice.ts              | 43 +++---------
 src/slices/seriesSlice.ts                     | 35 +---------
 src/slices/shared/tobiraErrors.ts             | 70 +++++++++++++++++++
 15 files changed, 145 insertions(+), 133 deletions(-)
 create mode 100644 src/slices/shared/tobiraErrors.ts

diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
index 4ec4afba78..8c9a3c11b7 100644
--- a/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import Notifications from "../../../shared/Notifications";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { getSeriesDetailsTobiraData, getSeriesDetailsTobiraDataError, getTobiraTabHierarchy } from "../../../../selectors/seriesDetailsSelectors";
-import { addNotification, removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { addNotification } from "../../../../slices/notificationSlice";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 import { getEventDetailsTobiraData, getEventDetailsTobiraDataError } from "../../../../selectors/eventDetailsSelectors";
 import { Formik } from "formik";
@@ -118,7 +118,7 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
 			/>}
 			{tabHierarchy === "main" && <div className="modal-body">
 				{/* Notifications */}
-				<Notifications context="not_corner" />
+				<Notifications context="tobira" />
 				{!error && <>
 					<div className="tab-description">
 						<a href={directTobiraLink}>
diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index 0f60f09ec5..9bb8884054 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -7,7 +7,7 @@ import { OurNotification, addNotification, removeNotificationByKey, removeNotifi
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { TobiraPage, fetchSeriesDetailsTobiraNew, setErrorTobiraPage, setTobiraPage } from "../../../../slices/seriesSlice";
 import { getSeriesTobiraPage, getSeriesTobiraPageError } from "../../../../selectors/seriesSeletctor";
-import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
+import { NOTIFICATION_CONTEXT_TOBIRA } from "../../../../configs/modalConfig";
 import { SaveEditFooter } from "../../../shared/SaveEditFooter";
 import { Tooltip } from "../../../shared/Tooltip";
 
@@ -71,7 +71,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 
 		let valid = true;
 
-		valid = valid && check('info', 'TOBIRA_OVERRIDE_NAME', NOTIFICATION_CONTEXT, () => {
+		valid = valid && check('info', 'TOBIRA_OVERRIDE_NAME', NOTIFICATION_CONTEXT_TOBIRA, () => {
 			return !!formik.values.selectedPage && !!formik.values.selectedPage.title;
 		});
 
@@ -87,9 +87,9 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 		}
 		const newPage = currentPage.children[currentPage.children.length - 1];
 
-		valid = valid && check('warning', 'TOBIRA_NO_PATH_SEGMENT', NOTIFICATION_CONTEXT, () => !newPage.segment);
+		valid = valid && check('warning', 'TOBIRA_NO_PATH_SEGMENT', NOTIFICATION_CONTEXT_TOBIRA, () => !newPage.segment);
 
-		valid = valid && check('warning', 'TOBIRA_PATH_SEGMENT_INVALID', NOTIFICATION_CONTEXT, () => (
+		valid = valid && check('warning', 'TOBIRA_PATH_SEGMENT_INVALID', NOTIFICATION_CONTEXT_TOBIRA, () => (
 			newPage.segment.length <= 1 || [
 				// eslint-disable-next-line no-control-regex
 				/[\u0000-\u001F\u007F-\u009F]/u,
@@ -99,7 +99,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 			].some(regex => regex.test(newPage.segment))
 		));
 
-		valid = valid && check('warning', 'TOBIRA_PATH_SEGMENT_UNIQUE', NOTIFICATION_CONTEXT, () => (
+		valid = valid && check('warning', 'TOBIRA_PATH_SEGMENT_UNIQUE', NOTIFICATION_CONTEXT_TOBIRA, () => (
 			currentPage.children.some(child => child !== newPage && child.segment === newPage.segment)
 		));
 
@@ -211,7 +211,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 		<div className="modal-content">
 			<div className="modal-body">
 				{/* Notifications */}
-				<Notifications context="not_corner" />
+				<Notifications context="tobira" />
 				{!editMode && <p className="tab-description">{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}</p>}
 				{!error && <>
 					<div className="obj-container padded">
@@ -271,8 +271,8 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 											{!!page.new
 												? <input
 													placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE')}
-													value={page.title}
-													onChange={(e) => setPage(key, e, "title")}
+													value={page.title ?? ""}
+													onChange={e => setPage(key, e, "title")}
 												/>
 												: <button
 													className={"button-like-anchor "
@@ -291,7 +291,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 												{!!page.new
 													? <input
 														placeholder={t('EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT')}
-														value={page.segment}
+														value={page.segment ?? ""}
 														onChange={e => setPage(key, e, "segment")}
 													/>
 													: <span style={{ fontWeight: "inherit" }}>
diff --git a/src/components/events/partials/modals/EventDetails.tsx b/src/components/events/partials/modals/EventDetails.tsx
index 8d8e013141..7fa1ecbb63 100644
--- a/src/components/events/partials/modals/EventDetails.tsx
+++ b/src/components/events/partials/modals/EventDetails.tsx
@@ -25,6 +25,7 @@ import {
 	isFetchingStatistics,
 	getModalWorkflowTabHierarchy,
 	getModalPage,
+	getEventDetailsTobiraDataError,
 } from "../../../../selectors/eventDetailsSelectors";
 import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import EventDetailsStatisticsTab from "../ModalTabsAndPages/EventDetailsStatisticsTab";
@@ -83,7 +84,6 @@ const EventDetails = ({
 		dispatch(fetchSchedulingInfo(eventId)).then();
 		dispatch(fetchEventStatistics(eventId)).then();
 		dispatch(fetchAssetUploadOptions()).then();
-		dispatch(fetchEventDetailsTobira(eventId));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -98,6 +98,7 @@ const EventDetails = ({
 	const hasStatistics = useAppSelector(state => getHasStatistics(state));
 	const isLoadingStatistics = useAppSelector(state => isFetchingStatistics(state));
 	const captureAgents = useAppSelector(state => getRecordings(state));
+	const tobiraError = useAppSelector(state => getEventDetailsTobiraDataError(state));
 
 	const tabs = [
 		{
@@ -163,7 +164,7 @@ const EventDetails = ({
 			accessRole: "ROLE_UI_EVENTS_DETAILS_COMMENTS_VIEW",
 			name: "tobira",
 			page: EventDetailsPage.Tobira,
-			hidden: false, // TODO: Set to true if there no tobira data
+			hidden: tobiraError?.message?.includes("503"),
 		},
 		{
 			tabNameTranslation: "EVENTS.EVENTS.DETAILS.TABS.STATISTICS",
@@ -177,6 +178,9 @@ const EventDetails = ({
 
 	const openTab = (tabNr: EventDetailsPage) => {
 		dispatch(removeNotificationWizardForm());
+		if (tabNr === EventDetailsPage.Tobira) {
+			dispatch(fetchEventDetailsTobira(eventId));
+		}
 		dispatch(openModalTab(tabNr, "entry", "entry"))
 	};
 
diff --git a/src/components/events/partials/modals/SeriesDetails.tsx b/src/components/events/partials/modals/SeriesDetails.tsx
index d869559f85..7f76be77ee 100644
--- a/src/components/events/partials/modals/SeriesDetails.tsx
+++ b/src/components/events/partials/modals/SeriesDetails.tsx
@@ -7,6 +7,7 @@ import {
 	getSeriesDetailsMetadata,
 	getSeriesDetailsTheme,
 	getSeriesDetailsThemeNames,
+	getSeriesDetailsTobiraDataError,
 	hasStatistics as seriesHasStatistics,
 } from "../../../../selectors/seriesDetailsSelectors";
 import { getOrgProperties, getUserInformation } from "../../../../selectors/userInfoSelectors";
@@ -47,6 +48,7 @@ const SeriesDetails = ({
 	const theme = useAppSelector(state => getSeriesDetailsTheme(state));
 	const themeNames = useAppSelector(state => getSeriesDetailsThemeNames(state));
 	const hasStatistics = useAppSelector(state => seriesHasStatistics(state));
+	const tobiraError = useAppSelector(state => getSeriesDetailsTobiraDataError(state));
 
 	useEffect(() => {
 		dispatch(fetchSeriesStatistics(seriesId));
@@ -88,7 +90,7 @@ const SeriesDetails = ({
 			tabNameTranslation: "EVENTS.SERIES.DETAILS.TABS.TOBIRA",
 			accessRole: "ROLE_UI_SERIES_DETAILS_TOBIRA_VIEW",
 			name: "tobira",
-			hidden: false, // TODO: Set to true if there no tobira data
+			hidden: tobiraError?.message?.includes("503"),
 		},
 		{
 			tabNameTranslation: "EVENTS.SERIES.DETAILS.TABS.STATISTICS",
diff --git a/src/components/events/partials/wizards/NewSeriesWizard.tsx b/src/components/events/partials/wizards/NewSeriesWizard.tsx
index ffe49d02be..d1d1712569 100644
--- a/src/components/events/partials/wizards/NewSeriesWizard.tsx
+++ b/src/components/events/partials/wizards/NewSeriesWizard.tsx
@@ -3,9 +3,9 @@ import { Formik } from "formik";
 import NewThemePage from "../ModalTabsAndPages/NewThemePage";
 import NewSeriesSummary from "./NewSeriesSummary";
 import {
-	getSeriesTobiraPageStatus,
 	getSeriesExtendedMetadata,
 	getSeriesMetadata,
+	getSeriesTobiraPageError,
 } from "../../../../selectors/seriesSeletctor";
 import NewMetadataPage from "../ModalTabsAndPages/NewMetadataPage";
 import NewMetadataExtendedPage from "../ModalTabsAndPages/NewMetadataExtendedPage";
@@ -34,7 +34,7 @@ const NewSeriesWizard: React.FC<{
 
 	const metadataFields = useAppSelector(state => getSeriesMetadata(state));
 	const extendedMetadata = useAppSelector(state => getSeriesExtendedMetadata(state));
-	const statusTobiraPage = useAppSelector(state => getSeriesTobiraPageStatus(state));
+	const tobiraError = useAppSelector(state => getSeriesTobiraPageError(state));
 	const user = useAppSelector(state => getUserInformation(state));
 	const orgProperties = useAppSelector(state => getOrgProperties(state));
 
@@ -71,7 +71,7 @@ const NewSeriesWizard: React.FC<{
 		{
 			translation: "EVENTS.SERIES.NEW.TOBIRA.CAPTION",
 			name: "tobira",
-			hidden: statusTobiraPage !== "succeeded",  // TODO: Figure out condition for this to be true
+			hidden: !!tobiraError?.message?.includes("503"),
 		},
 		{
 			translation: "EVENTS.SERIES.NEW.SUMMARY.CAPTION",
diff --git a/src/components/shared/Notifications.tsx b/src/components/shared/Notifications.tsx
index 0ee274b780..106ae59de6 100644
--- a/src/components/shared/Notifications.tsx
+++ b/src/components/shared/Notifications.tsx
@@ -8,6 +8,7 @@ import cn from "classnames";
 import {
 	NOTIFICATION_CONTEXT,
 	NOTIFICATION_CONTEXT_ACCESS,
+	NOTIFICATION_CONTEXT_TOBIRA,
 } from "../../configs/modalConfig";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { OurNotification, setHidden } from "../../slices/notificationSlice";
@@ -15,19 +16,15 @@ import { OurNotification, setHidden } from "../../slices/notificationSlice";
 /**
  * This component renders notifications about occurred errors, warnings and info
  */
-const Notifications : React.FC<{
-  context?: string,
-}> = ({
-	context,
-}) => {
+const Notifications : React.FC<{ context?: string }> = ({ context }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-const notifications = useAppSelector(state => getNotifications(state))
-const globalPosition = useAppSelector(state => getGlobalPositions(state))
+	const notifications = useAppSelector(state => getNotifications(state));
+	const globalPosition = useAppSelector(state => getGlobalPositions(state));
 
 	const closeNotification = (id: number) => {
-		dispatch(setHidden({id: id, isHidden: true}));
+		dispatch(setHidden({ id: id, isHidden: true}));
 	};
 
 	const renderNotification = (notification: OurNotification, key: number) => (
@@ -46,13 +43,17 @@ const globalPosition = useAppSelector(state => getGlobalPositions(state))
 		// if context is not_corner then render notification without consider global notification position
 		context === "not_corner" ? (
 			<ul>
-				{notifications.map(
-					(notification, key) =>
-						!notification.hidden &&
-						(notification.context === NOTIFICATION_CONTEXT ||
-							notification.context === NOTIFICATION_CONTEXT_ACCESS) &&
-						renderNotification(notification, key)
-				)}
+				{notifications.map((notification, key) => !notification.hidden && (
+					notification.context === NOTIFICATION_CONTEXT
+						|| notification.context === NOTIFICATION_CONTEXT_ACCESS
+						|| notification.context === NOTIFICATION_CONTEXT_TOBIRA
+				) && renderNotification(notification, key))}
+			</ul>
+		) : context === "tobira" ? (
+			<ul>
+				{notifications.map((notification, key) => !notification.hidden && (
+					notification.context === NOTIFICATION_CONTEXT_TOBIRA
+				) && renderNotification(notification, key))}
 			</ul>
 		) : context === "above_table" ? (
 			<ul>
diff --git a/src/configs/modalConfig.ts b/src/configs/modalConfig.ts
index c85eee4fa4..a9c4ba1901 100644
--- a/src/configs/modalConfig.ts
+++ b/src/configs/modalConfig.ts
@@ -12,6 +12,9 @@ export const NOTIFICATION_CONTEXT = "modal-form";
 // Context for notifications shown in wizard access page
 export const NOTIFICATION_CONTEXT_ACCESS = "wizard-access";
 
+// Context for notifications shown in tobira tabs.
+export const NOTIFICATION_CONTEXT_TOBIRA = "tobira";
+
 export const initialFormValuesNewEvents: {
 	sourceMode: string,
 	scheduleStartDate: string,
diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
index 8f787851a1..9ca41a06e7 100644
--- a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
+++ b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -227,7 +227,18 @@
 			"NO_EVENTS_UPDATED": "All updates failed.",
 			"SOME_EVENTS_NOT_UPDATED": "Some events could not be updated."
 		},
-		"PROBLEM_ON_START": "A error occurred on start up. Please contact your Opencast admin"
+		"PROBLEM_ON_START": "An error occurred on start up. Please contact your Opencast admin",
+		"TOBIRA_OVERRIDE_NAME": "The title of the selected page will be overridden with the title of the series.",
+		"TOBIRA_NO_PATH_SEGMENT": "Page needs a path segment.",
+		"TOBIRA_NOT_MOUNTED": "Series could not be mounted in Tobira.",
+		"TOBIRA_PATH_SEGMENT_INVALID": "Path segment is invalid. A valid path segment is at least 2 characters long, does not contain any whitespace or control characters, none of the characters '<>\"[\\]^`{|}#%\/?]', and doesn't start with any of the characters '-+~@_!$&;:.,=*'()'.",
+		"TOBIRA_PATH_SEGMENT_UNIQUE": "The path segment of a page must be unique among all its sibling pages.",
+		"TOBIRA_PAGE_NOT_FOUND": "The page you tried to navigate to does not or no longer exist. Maybe try starting from the beginning.",
+		"TOBIRA_SERVER_ERROR":" Error talking to Tobira. Contact your system administrator and/or try again later.",
+		"TOBIRA_COPIED_DIRECT_LINK": "Copied link to clipboard.",
+		"TOBIRA_FAILED_COPYING_DIRECT_LINK": "Couldn't copy link to clipboard.",
+		"TOBIRA_NOT_FOUND": "Tobira doesn't know about this series or event (yet). Try again in a few minutes or contact your system administrator.",
+		"TOBIRA_NOT_CONFIGURED": "Tobira is not configured (correctly)."
 	},
 	"BULK_ACTIONS": {
 		"CAPTION": "Actions",
diff --git a/src/selectors/eventDetailsSelectors.ts b/src/selectors/eventDetailsSelectors.ts
index 50345efbc1..a2d564621e 100644
--- a/src/selectors/eventDetailsSelectors.ts
+++ b/src/selectors/eventDetailsSelectors.ts
@@ -115,9 +115,11 @@ export const isFetchingWorkflowErrorDetails = (state: RootState) =>
 	state.eventDetails.statusWorkflowErrorDetails === 'loading';
 
 export const getEventDetailsTobiraData = (state: RootState) =>
-	state.eventDetails.tobiraData
+	state.eventDetails.tobiraData;
 export const getEventDetailsTobiraDataError = (state: RootState) =>
-	state.eventDetails.errorTobiraData
+	state.eventDetails.errorTobiraData;
+export const getEventDetailsTobiraStatus = (state: RootState) =>
+	state.eventDetails.statusTobiraData;
 
 /* selectors for publications */
 export const getPublications = (state: RootState) => state.eventDetails.publications;
diff --git a/src/selectors/seriesDetailsSelectors.ts b/src/selectors/seriesDetailsSelectors.ts
index edcddbeec3..b5af556e4d 100644
--- a/src/selectors/seriesDetailsSelectors.ts
+++ b/src/selectors/seriesDetailsSelectors.ts
@@ -12,9 +12,9 @@ export const getSeriesDetailsThemeNames = (state: RootState) =>
 	state.seriesDetails.themeNames;
 
 export const getSeriesDetailsTobiraData = (state: RootState) =>
-	state.seriesDetails.tobiraData
+	state.seriesDetails.tobiraData;
 export const getSeriesDetailsTobiraDataError = (state: RootState) =>
-	state.seriesDetails.errorTobiraData
+	state.seriesDetails.errorTobiraData;
 export const getTobiraTabHierarchy = (state: RootState) =>
 	state.seriesDetails.tobiraTab;
 
diff --git a/src/slices/eventDetailsSlice.ts b/src/slices/eventDetailsSlice.ts
index 8e5d93ac83..b3f3f8a741 100644
--- a/src/slices/eventDetailsSlice.ts
+++ b/src/slices/eventDetailsSlice.ts
@@ -38,6 +38,7 @@ import {
 import { AppDispatch } from "../store";
 import { Ace } from './aclSlice';
 import { setTobiraTabHierarchy, TobiraData } from './seriesDetailsSlice';
+import { handleTobiraError } from './shared/tobiraErrors';
 
 // Contains the navigation logic for the modal
 type EventDetailsModal = {
@@ -980,33 +981,7 @@ export const fetchEventDetailsTobira = createAppAsyncThunk('eventDetails/fetchEv
 	{ dispatch },
 ) => {
 	const res = await axios.get(`/admin-ng/event/${id}/tobira/pages`)
-		.catch(response => {
-			console.error(response);
-			const data = response.response;
-
-			if (data.status === 500) {
-				dispatch(addNotification({
-					type: "error",
-					key: "TOBIRA_SERVER_ERROR",
-					duration: -1,
-					parameter: null,
-					context: NOTIFICATION_CONTEXT
-				}));
-
-				throw Error(response);
-			} else if (data.status === 404) {
-				dispatch(addNotification({
-					type: "warning",
-					key: "TOBIRA_NOT_FOUND",
-					duration: -1,
-					parameter: null,
-					context: NOTIFICATION_CONTEXT
-				}));
-
-				throw Error(response);
-			}
-			return undefined;
-		});
+		.catch(response => handleTobiraError(response, dispatch));
 
 	if (!res) {
 		throw Error;
@@ -1520,7 +1495,6 @@ export const openModal = (
 ) => (dispatch: AppDispatch) => {
 	dispatch(setModalEvent(event));
 	dispatch(setModalWorkflowId(workflowId));
-	dispatch(setTobiraTabHierarchy("main"));
 	dispatch(openModalTab(page, workflowTab, assetsTab))
 	dispatch(setShowModal(true));
 };
@@ -1531,6 +1505,7 @@ export const openModalTab = (
 	assetsTab: AssetTabHierarchy
 ) => (dispatch: AppDispatch) => {
 	dispatch(setModalPage(page));
+	dispatch(setTobiraTabHierarchy("main"));
 	dispatch(setModalWorkflowTabHierarchy(workflowTab));
 	dispatch(setModalAssetsTabHierarchy(assetsTab));
 };
diff --git a/src/slices/notificationSlice.ts b/src/slices/notificationSlice.ts
index 2ff7e26e87..6438401bb2 100644
--- a/src/slices/notificationSlice.ts
+++ b/src/slices/notificationSlice.ts
@@ -183,7 +183,7 @@ const notificationSlice = createSlice({
 		},
 		removeNotificationWizardForm(state) {
 			state.notifications = state.notifications.filter(
-				(notification) => notification.context !== NOTIFICATION_CONTEXT
+				(notification) => notification.context === NOTIFICATION_CONTEXT
 			)
 		},
 		removeNotificationWizardAccess(state) {
diff --git a/src/slices/seriesDetailsSlice.ts b/src/slices/seriesDetailsSlice.ts
index bce0e36a6e..58634eeed4 100644
--- a/src/slices/seriesDetailsSlice.ts
+++ b/src/slices/seriesDetailsSlice.ts
@@ -14,7 +14,7 @@ import {
 	transformMetadataForUpdate,
 } from "../utils/resourceUtils";
 import { transformToIdValueArray } from "../utils/utils";
-import { NOTIFICATION_CONTEXT } from "../configs/modalConfig";
+import { NOTIFICATION_CONTEXT, NOTIFICATION_CONTEXT_TOBIRA } from "../configs/modalConfig";
 import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
 import { Statistics, fetchStatistics, fetchStatisticsValueUpdate } from './statisticsSlice';
 import { Ace } from './aclSlice';
@@ -23,6 +23,7 @@ import { MetadataCatalog } from './eventSlice';
 import { TobiraPage } from './seriesSlice';
 import { TobiraTabHierarchy } from '../components/events/partials/ModalTabsAndPages/DetailsTobiraTab';
 import { TobiraFormProps } from '../components/events/partials/ModalTabsAndPages/NewTobiraPage';
+import { handleTobiraError } from './shared/tobiraErrors';
 
 
 /**
@@ -412,38 +413,12 @@ export const updateSeriesTheme = createAppAsyncThunk('seriesDetails/updateSeries
 });
 
 // fetch Tobira data of certain series from server
-export const fetchSeriesDetailsTobira = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsTobira', async (id: string, {dispatch}) => {
+export const fetchSeriesDetailsTobira = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsTobira', async (
+	id: string,
+	{ dispatch }
+) => {
 	const res = await axios.get(`/admin-ng/series/${id}/tobira/pages`)
-		.then((response) => {
-			return response;
-		})
-		.catch((response) => {
-			console.error(response);
-			const data = response.response;
-
-			if (data.status === 500) {
-				dispatch(addNotification({
-					type: "error",
-					key: "TOBIRA_SERVER_ERROR",
-					duration: -1,
-					parameter: undefined,
-					context: NOTIFICATION_CONTEXT
-				}));
-
-				throw Error(response);
-			} else if (data.status === 404) {
-				dispatch(addNotification({
-					type: "warning",
-					key: "TOBIRA_NOT_FOUND",
-					duration: -1,
-					parameter: undefined,
-					context: NOTIFICATION_CONTEXT
-				}));
-
-				throw Error(response);
-			}
-			return undefined;
-		});
+		.catch(response => handleTobiraError(response, dispatch));
 
 	if (!res) {
 		throw Error;
@@ -490,7 +465,7 @@ export const updateSeriesTobiraPath = createAppAsyncThunk('series/updateSeriesTo
 		dispatch(addNotification({
 			type: 'success',
 			key: 'SERIES_PATH_UPDATED',
-			context: NOTIFICATION_CONTEXT
+			context: NOTIFICATION_CONTEXT_TOBIRA
 		}));
 		
 		return response.data;
@@ -499,7 +474,7 @@ export const updateSeriesTobiraPath = createAppAsyncThunk('series/updateSeriesTo
 		dispatch(addNotification({
 			type: 'error',
 			key: 'SERIES_PATH_NOT_UPDATED',
-			context: NOTIFICATION_CONTEXT
+			context: NOTIFICATION_CONTEXT_TOBIRA
 		}));
 		throw error;
 	}}
diff --git a/src/slices/seriesSlice.ts b/src/slices/seriesSlice.ts
index 33515e5d3e..e0f528998d 100644
--- a/src/slices/seriesSlice.ts
+++ b/src/slices/seriesSlice.ts
@@ -14,10 +14,10 @@ import {
 } from "../utils/utils";
 import { addNotification } from './notificationSlice';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
-import { NOTIFICATION_CONTEXT } from '../configs/modalConfig';
 import { TransformedAcl } from './aclDetailsSlice';
 import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
 import { MetadataCatalog } from './eventSlice';
+import { handleTobiraError } from './shared/tobiraErrors';
 
 /**
  * This file contains redux reducer for actions affecting the state of series
@@ -352,38 +352,7 @@ export const deleteMultipleSeries = createAppAsyncThunk('series/deleteMultipleSe
 // fetch metadata of certain series from server
 export const fetchSeriesDetailsTobiraNew = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsTobiraNew', async (path: TobiraPage["path"], {dispatch}) => {
 	const res = await axios.get(`/admin-ng/series/new/tobira/page?path=` + path)
-		.then((response) => {
-			return response;
-		})
-		.catch((response) => {
-			console.error(response);
-			const data = response.response;
-
-			if (data.status === 404) {
-				dispatch(addNotification({
-					type: "warning",
-					key: "TOBIRA_PAGE_NOT_FOUND",
-					duration: -1,
-					parameter: undefined,
-					context: NOTIFICATION_CONTEXT
-				}));
-
-				throw Error(response);
-			} else {
-				// Add notification back once we can properly specify which tab of the modal it should be shown on
-				console.info("Could not fetch tobira page information.")
-				console.info(response)
-				// dispatch(addNotification({
-				//  type: "error",
-				//  key: "TOBIRA_SERVER_ERROR",
-				//  duration: -1,
-				//  parameter: null,
-				//  context: NOTIFICATION_CONTEXT
-				// }));
-
-				throw Error(response);
-			}
-		});
+		.catch(response => handleTobiraError(response, dispatch));
 
 	if (!res) {
 		throw Error;
diff --git a/src/slices/shared/tobiraErrors.ts b/src/slices/shared/tobiraErrors.ts
new file mode 100644
index 0000000000..130a45e1c9
--- /dev/null
+++ b/src/slices/shared/tobiraErrors.ts
@@ -0,0 +1,70 @@
+import { NOTIFICATION_CONTEXT_TOBIRA } from "../../configs/modalConfig";
+import { AppDispatch } from "../../store";
+import { addNotification } from "../notificationSlice";
+
+type AxiosErrorResponse = {
+    stack: string;
+    message: string;
+    name: string;
+    code: string;
+    config: Record<string, any>;
+    request: XMLHttpRequest;
+    response: {
+        data?: any;
+        status: number;
+        statusText: string;
+        headers: Record<string, string>;
+        config: Record<string, any>;
+        request: XMLHttpRequest;
+    };
+};
+
+// All Tobira fetch endpoints are using the same return codes which are handled in the same way.
+// So this should be fine to reuse. In the case of `503` I decided not to log the complete error,
+// as it isn't really helpful and might not even be considered as one (see TODO comment below).
+export const handleTobiraError = (response: AxiosErrorResponse, dispatch: AppDispatch) => {
+    const data = response.response;
+    console.info(response.message);
+
+    if (data.status === 503) {
+        // TODO: figure out what to do:
+        // 503 means Tobira is not configured or there is an error in the configuration.
+        // Opencast unfortunately doesn't know the difference.
+        // If it's not configured, we don't want to show a notification, but if it is and there's
+        // an error, we obviously should. For now this just throws the error, logs the presumed reason
+        // and hides the Tobira tab.
+
+        // dispatch(addNotification({
+        //     type: "warning",
+        //     key: "TOBIRA_NOT_CONFIGURED",
+        //     duration: -1,
+        //     parameter: null,
+        //     context: NOTIFICATION_CONTEXT,
+        // }));
+
+        console.info(data.data);
+        throw Error(response.message);
+    } else if (data.status === 500) {
+        dispatch(addNotification({
+            type: "error",
+            key: "TOBIRA_SERVER_ERROR",
+            duration: -1,
+            context: NOTIFICATION_CONTEXT_TOBIRA,
+            noDuplicates: true,
+        }));
+
+        console.error(response);
+        throw Error(response.message);
+    } else if (data.status === 404) {
+        dispatch(addNotification({
+            type: "warning",
+            key: "TOBIRA_NOT_FOUND",
+            duration: -1,
+            context: NOTIFICATION_CONTEXT_TOBIRA,
+            noDuplicates: true,
+        }));
+
+        console.error(response);
+        throw Error(response.message);
+    }
+};

From 45814db0ca578c2e973231ec75f2d66b56590554 Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Wed, 6 Nov 2024 15:42:54 +0100
Subject: [PATCH 11/11] Hopefully fix a crash provoking bug

Something was causing a crash when using the breadcrumb links
to navigate to another page in the path editing menu while
being in "edit mode" (i.e. in the process of adding a new page).
This resulted in a "Maximum update depth exceeded" error, crashing
the interface. The error hints at circular rendering dependendies,
but unfortunately I couldn't reproduce this myself.

But by attempting to do that I noticed another bug that may or
may not be related: The list of children was missing an entry.
I removed the code doing that, since it didn't seem to be necessary
anyway - this also removed a state setting call that might have
caused too many rerenders.
---
 .../partials/ModalTabsAndPages/NewTobiraPage.tsx     | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
index 9bb8884054..dd8119a95f 100644
--- a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
+++ b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -112,7 +112,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 
 	const select = (page?: TobiraPage) => {
 		if (!page || !page.new) {
-			stopEditing();
+			setEditing(false);
 		}
 		if (!page || formik.values.selectedPage === page) {
 			formik.setFieldValue("selectedPage", undefined);
@@ -171,16 +171,6 @@ const NewTobiraPage = <T extends TobiraFormProps>({
 		select(newPage);
 	};
 
-	const stopEditing = () => {
-		if (editing) {
-			dispatch(setTobiraPage({
-				...currentPage,
-				children: currentPage.children.filter((_, idx) => idx !== currentPage.children.length - 1)
-			}));
-		}
-		setEditing(false);
-	};
-
 	const setPage = (
 		key: number,
 		e: React.ChangeEvent<HTMLInputElement>,