From 3ca089ada0fabda19573a8c61dd9f6e5764d73ca Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Wed, 14 Aug 2024 23:38:21 +0200
Subject: [PATCH] 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             | 72 +++++++++++++++++++
 15 files changed, 147 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 cabd57e33e..7230b75a1e 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";
@@ -112,7 +112,7 @@ const DetailsTobiraTab: React.FC<DetailsTobiraTabProps> = ({ kind, id }) => {
 			/>}
 			{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 54093d9d57..9921b9a7a5 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 64ad24f8de..4c816f4071 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 f80bf36d96..288b0533e8 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 c777a15133..de0493726a 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 b23752dd47..c9ebb92fb7 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: 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;
@@ -487,7 +462,7 @@ export const updateSeriesTobiraData = createAppAsyncThunk('series/updateSeriesTo
 		dispatch(addNotification({
 			type: 'success',
 			key: 'SERIES_PATH_UPDATED',
-			context: NOTIFICATION_CONTEXT
+			context: NOTIFICATION_CONTEXT_TOBIRA
 		}));
 		
 		return response.data;
@@ -496,7 +471,7 @@ export const updateSeriesTobiraData = 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 8faec7e80e..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: null,
-					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..00670aa8eb
--- /dev/null
+++ b/src/slices/shared/tobiraErrors.ts
@@ -0,0 +1,72 @@
+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,
+            parameter: null,
+            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,
+            parameter: null,
+            context: NOTIFICATION_CONTEXT_TOBIRA,
+            noDuplicates: true,
+        }));
+
+        console.error(response);
+        throw Error(response.message);
+    }
+};