Add notification for series creation

This utilizes the recently added notification context
to show a note "Series has been created" on the
series details page. The user will be redirected to that
page after a series has been freshly created.
The note will clear when the user navigates away from
that page.

backend/src/api/model/series.rs

@@ -158,9 +158,9 @@ impl Series {
             None => (None, None),
         };
 
-        let selection = Self::select();
+        let selection = Self::select().with_renamed_table("series", "all_series");
         let query = format!(
-            "insert into series (opencast_id, title, state, updated, read_roles, write_roles) \
+            "insert into all_series (opencast_id, title, state, updated, read_roles, write_roles) \
                 values ($1, $2, 'waiting', '-infinity', $3, $4) \
                 returning {selection}",
         );

frontend/src/i18n/locales/de.yaml

@@ -480,6 +480,7 @@ manage:
       title: Seriendetails
       referencing-pages-explanation: 'Diese Serie wird von den folgenden Seiten referenziert:'
       no-referencing-pages: Diese Serie wird von keiner Seite referenziert.
+      created-note: Serie wurde erstellt.
     delete-note: >
       In der Serie enthaltene Video werden nicht gelöschtund können einer anderen Serie
       zugeordnet werden.

frontend/src/i18n/locales/en.yaml

@@ -460,6 +460,7 @@ manage:
       title: Series details
       referencing-pages-explanation: 'This series is referenced on the following pages:'
       no-referencing-pages: No pages reference this series.
+      created-note: Series has been created.
     delete-note: >
       Videos in this series will not be deleted.
       They will remain in the system and can be added to another series.

frontend/src/routes/manage/Series/Create.tsx

@@ -20,6 +20,11 @@ import { ManageNav } from "..";
 import { PageTitle } from "../../../layout/header/ui";
 import { displayCommitError } from "../Realm/util";
 import { LuCheckCircle } from "react-icons/lu";
+import { useRouter } from "../../../router";
+import { keyOfId } from "../../../util";
+import { PATH as MANAGE_PATH } from ".";
+import { CreateSeriesMutation } from "./__generated__/CreateSeriesMutation.graphql";
+import { useNotification } from "../../../ui/NotificationContext";
 
 
 export const CREATE_SERIES_PATH = "/~manage/create-series";
@@ -71,24 +76,23 @@ type CreateSeriesPageProps = {
 
 const CreateSeriesPage: React.FC<CreateSeriesPageProps> = ({ knownRolesRef }) => {
     const user = useUser();
-    if (!isRealUser(user)) {
-        return unreachable();
-    }
-
+    const router = useRouter();
     const { t } = useTranslation();
     const titleFieldId = useId();
     const descriptionFieldId = useId();
     const knownRoles = useFragment(knownRolesFragment, knownRolesRef);
-    const [commit, inFlight] = useMutation(createSeriesMutation);
+    const [commit, inFlight] = useMutation<CreateSeriesMutation>(createSeriesMutation);
     const [success, setSuccess] = useState(false);
     const [commitError, setCommitError] = useState<JSX.Element | null>(null);
+    const { setNotification } = useNotification();
+
+    if (!isRealUser(user)) {
+        return unreachable();
+    }
 
     const defaultAcl = defaultAclMap(user);
     const {
-        register,
-        handleSubmit,
-        control,
-        reset,
+        register, handleSubmit, control,
         formState: { errors, isValid, isDirty },
     } = useForm<Metadata>({
         mode: "onChange",
@@ -107,9 +111,15 @@ const CreateSeriesPage: React.FC<CreateSeriesPageProps> = ({ knownRolesRef }) =>
                     })
                 ),
             },
-            onCompleted: () => {
+            onCompleted: response => {
+                const returnPath = `${MANAGE_PATH}/${keyOfId(response.createSeries.id)}`;
                 setSuccess(true);
-                reset();
+                setNotification({
+                    kind: "info",
+                    message: () => t("manage.my-series.details.created-note"),
+                    scope: returnPath,
+                });
+                router.goto(returnPath);
             },
             onError: error => setCommitError(displayCommitError(error)),
         });

frontend/src/routes/manage/Series/SeriesDetails.tsx

@@ -14,6 +14,7 @@ import {
     HostRealms,
 } from "../Shared/Details";
 import { Link } from "../../../router";
+import { useNotification } from "../../../ui/NotificationContext";
 
 
 const updateSeriesMetadata = graphql`
@@ -39,6 +40,7 @@ export const ManageSeriesDetailsRoute = makeManageSeriesRoute(
             link: ManageSeriesRoute.url,
         }}
         sections={series => [
+            <NotificationSection key="notification" />,
             <UpdatedCreatedInfo key="date-info" item={series} />,
             <SeriesButtonSection key="button-section" {...{ series }} />,
             <DirectLink key="direct-link" url={
@@ -56,6 +58,11 @@ export const ManageSeriesDetailsRoute = makeManageSeriesRoute(
     />,
 );
 
+const NotificationSection: React.FC = () => {
+    const { Notification } = useNotification();
+    return <Notification />;
+};
+
 const SeriesButtonSection: React.FC<{ series: Series }> = ({ series }) => {
     const { t } = useTranslation();
     const [commit] = useMutation(deleteSeriesMutation);

frontend/src/routes/manage/Series/index.tsx

@@ -27,7 +27,7 @@ import { CREATE_SERIES_PATH } from "./Create";
 import { LinkButton } from "../../../ui/LinkButton";
 
 
-const PATH = "/~manage/series" as const;
+export const PATH = "/~manage/series" as const;
 
 export const ManageSeriesRoute = makeRoute({
     url: PATH,

frontend/src/routes/manage/Shared/Details.tsx

@@ -62,9 +62,7 @@ export const DetailsPage = <T extends { title: string }>({
     return <>
         <Breadcrumbs path={breadcrumbs} tail={item.title} />
         <PageTitle title={t(pageTitle)} />
-        {sections(item).map((section, i) => (
-            <DetailsSection key={i}>{section}</DetailsSection>
-        ))}
+        {sections(item).map((section, i) => <DetailsSection key={i}>{section}</DetailsSection>)}
     </>;
 };
 

frontend/src/routes/manage/Shared/Table.tsx

@@ -19,7 +19,7 @@ import { ManageRoute } from "..";
 import { COLORS } from "../../../color";
 import { PageTitle } from "../../../layout/header/ui";
 import { Breadcrumbs } from "../../../ui/Breadcrumbs";
-import { Link, useRouter } from "../../../router";
+import { Link } from "../../../router";
 import { VideosSortColumn } from "../Video/__generated__/VideoManageQuery.graphql";
 import { SeriesSortColumn } from "../Series/__generated__/SeriesManageQuery.graphql";
 import { useNotification } from "../../../ui/NotificationContext";