Update frontend dependencies (#1125)

This updates most frontend dependencies (see commits for summary).

There are some omissions:
- `typescript`: versions >= 5.2.0 are not supported by
`@typescript-eslint/typescript-estree`
- `@opencast/eslint-config-ts-react` and
`@typescript-eslint/eslint-plugin`: there are some weird peer dependency
issues between these two
- `fork-ts-checker-webpack-plugin`: no update/upgrade bc eslint support
dropped in v7.0.0
- `paella-basic-plugins`: no update bc paella things should be done
separately
- `react-markdown`: no upgrade bc `inline` prop for `code` no longer
passed in newer versions (migration possible with some fiddling around)

frontend/package.json

@@ -23,23 +23,23 @@
     "not iOS < 15"
   ],
   "dependencies": {
-    "@babel/core": "^7.22.17",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@opencast/appkit": "^0.2.4",
     "@svgr/webpack": "^8.1.0",
     "babel-loader": "^9.1.3",
-    "babel-plugin-relay": "^15.0.0",
+    "babel-plugin-relay": "^16.2.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
-    "focus-trap-react": "^10.2.1",
+    "focus-trap-react": "^10.2.3",
     "graphql": "^16.8.1",
-    "hls.js": "^1.4.12",
-    "i18next": "^23.5.1",
-    "i18next-browser-languagedetector": "^7.1.0",
+    "hls.js": "^1.5.7",
+    "i18next": "^23.10.0",
+    "i18next-browser-languagedetector": "^7.2.0",
     "paella-basic-plugins": "1.44.4",
     "paella-core": "1.46.6",
     "paella-skins": "1.32.4",
@@ -50,39 +50,38 @@
     "react": "^18.2.0",
     "react-beforeunload": "^2.6.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.46.1",
-    "react-i18next": "^13.2.2",
-    "react-icons": "^4.11.0",
+    "react-hook-form": "^7.51.0",
+    "react-i18next": "^14.0.5",
+    "react-icons": "^4.12.0",
     "react-markdown": "^8.0.7",
-    "react-merge-refs": "^2.0.2",
-    "react-relay": "^15.0.0",
-    "react-select": "^5.7.4",
+    "react-merge-refs": "^2.1.1",
+    "react-relay": "^16.2.0",
+    "react-select": "^5.8.0",
     "react-transition-group": "^4.4.5",
-    "relay-compiler": "^15.0.0",
-    "relay-compiler-language-typescript": "^15.0.1",
+    "relay-compiler": "^16.2.0",
     "relay-config": "^12.0.1",
-    "webpack": "^5.88.2",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "yaml": "^2.3.2",
-    "yaml-loader": "^0.8.0"
+    "yaml": "^2.4.0",
+    "yaml-loader": "^0.8.1"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
-    "@opencast/eslint-config-ts-react": "^0.1.0",
-    "@playwright/test": "^1.40.1",
-    "@types/react": "^18.2.21",
-    "@types/react-beforeunload": "^2.1.1",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-relay": "^14.1.5",
-    "@types/react-transition-group": "^4.4.6",
-    "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-react": "^7.33.2",
+    "@opencast/eslint-config-ts-react": "^0.2.0",
+    "@playwright/test": "^1.42.1",
+    "@types/react": "^18.2.61",
+    "@types/react-beforeunload": "^2.1.5",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-relay": "^16.0.6",
+    "@types/react-transition-group": "^4.4.10",
+    "@types/webpack-env": "^1.18.4",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fork-ts-checker-webpack-plugin": "^6.5.3",
     "schema-dts": "^1.1.2",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.1.3"
+    "ts-node": "^10.9.2",
+    "typescript": "~5.1.6"
   }
 }

frontend/relay.config.js

@@ -7,7 +7,7 @@ module.exports = {
     src: APP_PATH,
     schema: path.join(APP_PATH, "schema.graphql"),
     language: "typescript",
-    customScalars: {
+    customScalarTypes: {
         "DateTimeUtc": "string",
         "Cursor": "string",
         "ExtraMetadata": "Record<string, Record<string, string[]>>",

frontend/src/layout/Navigation.tsx

@@ -53,7 +53,7 @@ export const Nav: React.FC<Props> = ({ fragRef }) => {
             isMainRoot: true,
         }
         : realm.parent;
-    const hasRealmParent = parent !== null;
+    const hasRealmParent = parent != null;
 
     // We expect all production instances to have more than the root realm. So
     // we print this information instead of an empty div to avoid confusion.

frontend/src/relay/index.ts

@@ -1,5 +1,5 @@
 import { loadQuery as relayLoadQuery, LoadQueryOptions } from "react-relay";
-import type { PreloadableConcreteRequest, PreloadedQuery } from "react-relay";
+import type { PreloadedQuery } from "react-relay";
 import { Environment, Store, RecordSource, Network } from "relay-runtime";
 import type {
     GraphQLSingularResponse,
@@ -49,7 +49,7 @@ export const environment = new Environment({
 
 /** Like `loadQuery` from relay, but using our environment */
 export function loadQuery<TQuery extends OperationType>(
-    preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
+    preloadableRequest: GraphQLTaggedNode,
     variables: VariablesOf<TQuery>,
     options?: LoadQueryOptions,
 ): PreloadedQuery<TQuery> {

frontend/src/routes/Search.tsx

@@ -340,7 +340,7 @@ const SearchEvent: React.FC<SearchEventProps> = ({
 type SearchRealmProps = {
     id: string;
     name: string | null;
-    ancestorNames: readonly (string | null)[];
+    ancestorNames: readonly (string | null | undefined)[];
     fullPath: string;
 };
 

frontend/src/routes/Series.tsx

@@ -97,12 +97,12 @@ const fragment = graphql`
 `;
 
 type SeriesPageProps = {
-    seriesFrag: SeriesRouteData$key | null;
+    seriesFrag?: SeriesRouteData$key | null;
 };
 
 const SeriesPage: React.FC<SeriesPageProps> = ({ seriesFrag }) => {
     const { t } = useTranslation();
-    const series = useFragment(fragment, seriesFrag);
+    const series = useFragment(fragment, seriesFrag ?? null);
 
     if (!series) {
         return <NotFound kind="series" />;

frontend/src/routes/Video.tsx

@@ -201,7 +201,7 @@ export const DirectOpencastVideoRoute = makeRoute({
 interface DirectRouteQuery extends OperationType {
     response: UserData$key & {
         realm: VideoPageRealmData$key & NavigationData$key;
-        event: VideoPageEventData$key | null;
+        event?: VideoPageEventData$key | null;
     };
 }
 

frontend/src/routes/manage/Realm/Content/Edit/EditMode/Video.tsx

@@ -158,7 +158,7 @@ const EventSelector: React.FC<EventSelectorProps> = ({ onChange, onBlur, default
                     // starting with `ev`.
                     id: item.id.replace(/^es/, "ev"),
                     syncedData: item,
-                    series: item.seriesTitle === null ? null : { title: item.seriesTitle },
+                    series: item.seriesTitle == null ? null : { title: item.seriesTitle },
                 })));
             },
             start: () => {},
@@ -186,7 +186,7 @@ const formatOption = (event: Option, t: TFunction) => (
                 css={{ width: 120, minWidth: 120 }}
                 event={{
                     ...event,
-                    syncedData: {
+                    syncedData: event.syncedData && {
                         ...event.syncedData,
                         audioOnly: false, // TODO
                     },

frontend/src/routes/manage/Realm/General.tsx

@@ -72,7 +72,7 @@ export const General: React.FC<Props> = ({ fragRef }) => {
     }
 
     const { nameSource, ...rest } = realm;
-    if (nameSource === null) {
+    if (nameSource == null) {
         return bug("name source is null for non-root realm");
     }
 

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

@@ -89,7 +89,7 @@ const query = graphql`
 `;
 
 type Props = {
-    realm: Exclude<RealmManageQuery$data["realm"], null>;
+    realm: NonNullable<RealmManageQuery$data["realm"]>;
     data: RealmManageQuery$data;
 };
 

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

@@ -52,7 +52,7 @@ export const makeManageVideoRoute = (
                         <ManageVideoNav key={2} event={data.event} active={page} />,
                     ]}
                     render={data => {
-                        if (data.event === null) {
+                        if (data.event == null) {
                             return <NotFound kind="video" />;
                         }
                         if (data.event.__typename !== "AuthorizedEvent" || !data.event.canWrite) {
@@ -129,7 +129,7 @@ type ManageVideoNavProps = {
 const ManageVideoNav: React.FC<ManageVideoNavProps> = ({ event, active }) => {
     const { t } = useTranslation();
 
-    if (event === null) {
+    if (event == null) {
         return null;
     }
     if (event.__typename !== "AuthorizedEvent" || !event.canWrite) {

frontend/src/routes/manage/Video/TechnicalDetails.tsx

@@ -24,7 +24,7 @@ type Props = {
 
 type TrackInfoProps = {
     event: {
-        syncedData: null | {
+        syncedData?: null | {
             tracks: NonNullable<AuthorizedEvent["syncedData"]>["tracks"];
         };
     };
@@ -80,8 +80,8 @@ const OpencastId: React.FC<Props> = ({ event }) => {
 };
 
 type SingleTrackInfo = {
-    resolution: readonly number[] | null;
-    mimetype: string | null;
+    resolution?: readonly number[] | null;
+    mimetype?: string | null;
     uri: string;
 };
 
@@ -169,7 +169,7 @@ const FurtherInfo: React.FC<Props> = ({ event }) => {
     const { t, i18n } = useTranslation();
 
     const boolToYesNo = (v: boolean) => v ? t("general.yes") : t("general.no");
-    const printDate = (date: string | null): string => {
+    const printDate = (date?: string | null): string => {
         if (date == null) {
             return "-";
         }

frontend/src/routes/util.tsx

@@ -22,13 +22,13 @@ type RealmSortOrder = "ALPHABETIC_ASC" | "ALPHABETIC_DESC" | "BY_INDEX" | string
  * only sorted for `ALPHABETIC*` values of `sortOrder`. For `BY_INDEX`, the
  * original array is returned as it is assumed it is already ordered by index.
  */
-export const sortRealms = <T extends { readonly name: string | null }>(
+export const sortRealms = <T extends { readonly name?: string | null }>(
     realms: readonly T[],
     sortOrder: RealmSortOrder,
     language: string,
 ): readonly T[] => {
     const collator = new Intl.Collator(language);
-    const compare = (a: string | null, b: string | null) => {
+    const compare = (a?: string | null, b?: string | null) => {
         if (a == null && b == null) {
             return 0;
         }

frontend/src/ui/Access.tsx

@@ -51,12 +51,12 @@ import { PermissionLevel, PermissionLevels } from "../util/permissionLevels";
 
 export type Acl = Map<string, {
     actions: Set<string>;
-    info: RoleInfo | null;
+    info?: RoleInfo | null;
 }>;
 
 export type RoleInfo = {
     label: TranslatedLabel;
-    implies: readonly string[] | null;
+    implies?: readonly string[] | null;
     large: boolean;
 };
 

frontend/src/ui/Blocks/Series.tsx

@@ -88,7 +88,7 @@ type FromBlockProps = SharedProps & {
 export const SeriesBlockFromBlock: React.FC<FromBlockProps> = ({ fragRef, ...rest }) => {
     const { t } = useTranslation();
     const { series, ...block } = useFragment(blockFragment, fragRef);
-    return series === null
+    return series == null
         ? <Card kind="error">{t("series.deleted-series-block")}</Card>
         : <SeriesBlockFromSeries fragRef={series} {...rest} {...block} />;
 };

frontend/src/ui/Blocks/Video.tsx

@@ -46,7 +46,7 @@ export const VideoBlock: React.FC<Props> = ({ fragRef, basePath }) => {
         }
     `, fragRef);
 
-    if (event === null) {
+    if (event == null) {
         return <Card kind="error">{t("video.deleted-video-block")}</Card>;
     }
 

frontend/src/ui/SearchableSelect.tsx

@@ -126,7 +126,7 @@ type SeriesOption = {
     readonly id: string;
     readonly opencastId: string;
     readonly title: string;
-    readonly description: string | null;
+    readonly description?: string | null;
 };
 
 export const SeriesSelector: React.FC<SeriesSelectorProps> = ({

frontend/src/ui/Video.tsx

@@ -12,14 +12,14 @@ type ThumbnailProps = JSX.IntrinsicElements["div"] & {
         title: string;
         isLive: boolean;
         created: string;
-        syncedData: {
+        syncedData?: {
             duration: number;
-            thumbnail: string | null;
-            startTime: string | null;
-            endTime: string | null;
+            thumbnail?: string | null;
+            startTime?: string | null;
+            endTime?: string | null;
         } & (
             {
-                tracks: readonly { resolution: readonly number[] | null }[];
+                tracks: readonly { resolution?: readonly number[] | null }[];
             } | {
                 audioOnly: boolean;
             }

frontend/src/ui/metadata.tsx

@@ -33,7 +33,7 @@ export const InputContainer: React.FC<{ children: ReactNode }> = ({ children })
 );
 
 type SmallDescriptionProps = {
-    text: string | null;
+    text?: string | null;
     lines?: number;
     className?: string;
 };
@@ -73,7 +73,7 @@ export const SmallDescription: React.FC<SmallDescriptionProps> = ({
 
 
 type DescriptionProps = {
-    text: string | null;
+    text?: string | null;
     className?: string;
 };
 
@@ -120,7 +120,7 @@ export const Description = forwardRef<HTMLDivElement, DescriptionProps>(
 
 type CollapsibleDescriptionProps = {
     type: "series" | "video";
-    description: string | null;
+    description?: string | null;
     creators?: readonly string[];
     bottomPadding: number;
 }

frontend/src/ui/player/Paella.tsx

@@ -21,9 +21,9 @@ type PaellaPlayerProps = {
     tracks: readonly Track[];
     captions: readonly Caption[];
     isLive: boolean;
-    startTime: string | null;
-    endTime: string | null;
-    previewImage: string | null;
+    startTime?: string | null;
+    endTime?: string | null;
+    previewImage?: string | null;
 };
 
 export type PaellaState = {