Merge branch 'typecheck-translation-strings' of Arnei/opencast-admin-interface into main

Pull request #1148

  Typecheck translation strings

Author: gregorydlogan

src/components/NavBar.tsx

@@ -10,6 +10,7 @@ import { setOffset } from "../slices/tableSlice";
 import NewResourceModal, { NewResource } from "./shared/NewResourceModal";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ModalHandle } from "./shared/modals/Modal";
+import { ParseKeys } from "i18next";
 
 /**
  * Component that renders the nav bar
@@ -18,18 +19,18 @@ type LinkType = {
 	path: string
 	accessRole: string
 	loadFn: (dispatch: AppDispatch) => void
-	text: string
+	text: ParseKeys
 }
 
 type CreateType = {
 	accessRole: string
 	onShowModal?: () => Promise<void>
 	onHideModal?: () => void
-	text: string
+	text: ParseKeys
 	isDisplay?: boolean
 	resource: NewResource
 	hotkeySequence?: string[]
-	hotkeyDescription?: string
+	hotkeyDescription?: ParseKeys
 }
 
 const NavBar = ({
@@ -41,7 +42,7 @@ const NavBar = ({
 	create,
 } : {
 	children?: React.ReactNode
-	navAriaLabel?: string
+	navAriaLabel?: ParseKeys
 	displayNavigation: boolean
 	setNavigation: React.Dispatch<React.SetStateAction<boolean>>
 	links: LinkType[]
@@ -73,7 +74,7 @@ const NavBar = ({
 	useHotkeys(
 		(create && create.hotkeySequence) ?? [],
 		() => showNewResourceModal(),
-		{ description: t((create && create.hotkeyDescription) ?? "") ?? undefined },
+		{ description: create && create.hotkeyDescription ? t(create.hotkeyDescription) : undefined },
 		[showNewResourceModal]
 	);
 

src/components/configuration/partials/wizard/NewThemeWizard.tsx

@@ -11,6 +11,7 @@ import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { NewThemeSchema } from "../../../../utils/validate";
 import { useAppDispatch } from "../../../../store";
 import { postNewTheme, ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
+import { ParseKeys } from "i18next";
 
 /**
  * This component manages the pages of the new theme wizard and the submission of values
@@ -34,7 +35,10 @@ const NewThemeWizard: React.FC<{
 	 } = usePageFunctions(0, initialValues);
 
 	// Caption of steps used by Stepper
-	const steps = [
+	const steps: {
+		name: string
+		translation: ParseKeys
+	}[] = [
 		{
 			name: "generalForm",
 			translation: "CONFIGURATION.THEMES.DETAILS.GENERAL.CAPTION",

src/components/configuration/partials/wizard/ThemeDetails.tsx

@@ -15,6 +15,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
 import { updateThemeDetails } from "../../../../slices/themeDetailsSlice";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import { ThemeDetailsInitialValues } from "../../../../slices/themeSlice";
+import { ParseKeys } from "i18next";
 
 /**
  * This component manages the pages of the theme details
@@ -41,7 +42,12 @@ const ThemeDetails = ({
 	};
 
 	// information about tabs
-	const tabs = [
+	const tabs: {
+		name: string
+		tabTranslation: ParseKeys
+		translation: ParseKeys
+		accessRole: string
+	}[] = [
 		{
 			name: "generalForm",
 			tabTranslation: "CONFIGURATION.THEMES.DETAILS.GENERAL.CAPTION",

src/components/events/partials/EventsNavigation.tsx

@@ -1,3 +1,4 @@
+import { ParseKeys } from "i18next";
 import { fetchEvents } from "../../../slices/eventSlice";
 import { fetchSeries } from "../../../slices/seriesSlice";
 import { fetchStats } from "../../../slices/tableFilterSlice";
@@ -27,7 +28,12 @@ export const loadSeries = (dispatch: AppDispatch) => {
 	dispatch(loadSeriesIntoTable());
 };
 
-export const eventsLinks = [
+export const eventsLinks: {
+	path: string,
+	accessRole: string,
+	loadFn: (dispatch: AppDispatch) => void,
+	text: ParseKeys
+}[] = [
 	{
 		path: "/events/events",
 		accessRole: "ROLE_UI_EVENTS_VIEW",

src/components/events/partials/EventsStatusCell.tsx

@@ -9,6 +9,7 @@ import {
 import { EventDetailsPage } from "./modals/EventDetails";
 import { hasScheduledStatus } from "../../../utils/eventDetailsUtils";
 import { IconButton } from "../../shared/IconButton";
+import { ParseKeys } from "i18next";
 
 /**
  * This component renders the status cells of events in the table view
@@ -46,7 +47,7 @@ const EventsStatusCell = ({
 			iconClassname={"crosslink"}
 			tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.STATUS"}
 		>
-			{t(row.displayable_status)}
+			{t(row.displayable_status as ParseKeys)}
 		</IconButton>
 	);
 };

src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx

@@ -16,6 +16,7 @@ import { MetadataCatalog } from "../../../../slices/eventSlice";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import RenderDate from "../../../shared/RenderDate";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
+import { ParseKeys } from "i18next";
 
 /**
  * This component renders metadata details of a certain event or series
@@ -35,7 +36,7 @@ const DetailsMetadataTab = ({
 		catalog: MetadataCatalog;
 	}, any> //(id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void,
 	editAccessRole: string,
-	header?: string
+	header?: ParseKeys
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -91,7 +92,7 @@ const DetailsMetadataTab = ({
 										/* Render table for each metadata catalog */
 										<div className="obj tbl-details" key={key}>
 											<header>
-												<span>{t(header ? header : catalog.title)}</span>
+												<span>{t(header ? header : catalog.title as ParseKeys)}</span>
 											</header>
 											<div className="obj-container">
 												<table className="main-tbl">
@@ -101,7 +102,7 @@ const DetailsMetadataTab = ({
 															catalog.fields.map((field, index) => (
 																<tr key={index}>
 																	<td>
-																		<span>{t(field.label)}</span>
+																		<span>{t(field.label as ParseKeys)}</span>
 																		{field.required && (
 																			<i className="required">*</i>
 																		)}

src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx

@@ -243,7 +243,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 										{
 											reduceGroupEvents(Object.values(groupBy(formik.values.editedEvents, i => i.weekday))).map((groupedEvent, key) => (
 												<div className="obj tbl-details">
-													<header>{t("EVENTS.EVENTS.NEW.WEEKDAYSLONG." + groupedEvent.weekday)
+													<header>{t(`EVENTS.EVENTS.NEW.WEEKDAYSLONG.${groupedEvent.weekday}`)
 														+ " ("
 														+ t("BULK_ACTIONS.EDIT_EVENTS.EDIT.EVENTS")
 														+ " "
@@ -272,7 +272,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 																			disabled={false}
 																			title={"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.START_TIME"}
 																			hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
-																			minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTES"}
+																			minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE"}
 																			callbackHour={(value: string) => {
 																				for (const [i, entry] of formik.values.editedEvents.entries()) {
 																					if (entry.weekday === groupedEvent.weekday ) {
@@ -300,7 +300,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 																			disabled={false}
 																			title={"EVENTS.EVENTS.DETAILS.SOURCE.DATE_TIME.END_TIME"}
 																			hourPlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.HOUR"}
-																			minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTES"}
+																			minutePlaceholder={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.MINUTE"}
 																			callbackHour={(value: string) => {
 																				for (const [i, entry] of formik.values.editedEvents.entries()) {
 																					if (entry.weekday === groupedEvent.weekday ) {
@@ -329,9 +329,7 @@ const EditScheduledEventsEditPage = <T extends RequiredFormProps>({
 																			inputDevices={inputDevices}
 																			disabled={false}
 																			title={"EVENTS.EVENTS.DETAILS.SOURCE.PLACEHOLDER.LOCATION"}
-																			placeholder={`-- ${t(
-																						"SELECT_NO_OPTION_SELECTED"
-																					)} --`}
+																			placeholder={"SELECT_NO_OPTION_SELECTED"}
 																			callback={(value: string) => {
 																				for (const [i, entry] of formik.values.editedEvents.entries()) {
 																					if (entry.weekday === groupedEvent.weekday ) {

src/components/events/partials/ModalTabsAndPages/EditScheduledEventsGeneralPage.tsx

@@ -15,6 +15,7 @@ import { useAppSelector } from "../../../../store";
 import { FormikProps } from "formik";
 import { Event } from "../../../../slices/eventSlice";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
+import { ParseKeys } from "i18next";
 
 /**
  * This component renders the table overview of selected events in edit scheduled events bulk action
@@ -119,7 +120,7 @@ const EditScheduledEventsGeneralPage = <T extends RequiredFormProps>({
 												<td className="nowrap">
 													{event.series ? event.series.title : ""}
 												</td>
-												<td className="nowrap">{t(event.event_status)}</td>
+												<td className="nowrap">{t(event.event_status as ParseKeys)}</td>
 											</tr>
 										))}
 									</tbody>

src/components/events/partials/ModalTabsAndPages/EditScheduledEventsSummaryPage.tsx

@@ -6,6 +6,7 @@ import { getSchedulingSeriesOptions } from "../../../../selectors/eventSelectors
 import { useAppSelector } from "../../../../store";
 import { FormikProps } from "formik";
 import { EditedEvents } from "../../../../slices/eventSlice";
+import { ParseKeys } from "i18next";
 
 /**
  * This component renders the summary page of the edit scheduled bulk action
@@ -15,6 +16,16 @@ interface RequiredFormProps {
 	changedEvents: string[],
 }
 
+type Change = {
+	eventId: string,
+	title: string,
+	changes: {
+		type: ParseKeys,
+		previous: string,
+		next: string
+	}[]
+}
+
 const EditScheduledEventsSummaryPage = <T extends RequiredFormProps>({
 	previousPage,
 	formik,
@@ -25,7 +36,7 @@ const EditScheduledEventsSummaryPage = <T extends RequiredFormProps>({
 	const { t } = useTranslation();
 
 	// Changes applied to events
-	const [changes, setChanges] = useState<{eventId: string, title: string, changes: { type: string, previous: string, next: string }[]}[]>([]);
+	const [changes, setChanges] = useState<Change[]>([]);
 
 	const seriesOptions = useAppSelector(state => getSchedulingSeriesOptions(state));
 
@@ -36,11 +47,11 @@ const EditScheduledEventsSummaryPage = <T extends RequiredFormProps>({
 	}, []);
 
 	const checkForChanges = () => {
-		let changed: {eventId: string, title: string, changes: { type: string, previous: string, next: string }[]}[] = [];
+		let changed: Change[] = [];
 
 		// Loop through each event selected for editing and compare original values and changed values
 		for (const event of formik.values.editedEvents) {
-			let eventChanges : {eventId: string, title: string, changes: { type: string, previous: string, next: string }[]}= {
+			let eventChanges: Change = {
 				eventId: event.eventId,
 				title: event.title,
 				changes: [],
@@ -110,8 +121,8 @@ const EditScheduledEventsSummaryPage = <T extends RequiredFormProps>({
 			if (isChanged(event.weekday, event.changedWeekday)) {
 				eventChanges.changes.push({
 					type: "EVENTS.EVENTS.TABLE.WEEKDAY",
-					previous: t("EVENTS.EVENTS.NEW.WEEKDAYSLONG." + event.weekday),
-					next: t("EVENTS.EVENTS.NEW.WEEKDAYSLONG." + event.changedWeekday),
+					previous: t(`EVENTS.EVENTS.NEW.WEEKDAYSLONG.${event.weekday}`),
+					next: t(`EVENTS.EVENTS.NEW.WEEKDAYSLONG.${event.changedWeekday}`),
 				});
 			}
 

src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx

@@ -8,6 +8,7 @@ import {
 	saveAccessPolicies,
 } from "../../../../slices/eventDetailsSlice";
 import { useTranslation } from "react-i18next";
+import { ParseKeys } from "i18next";
 
 /**
  * This component manages the access policy tab of the event details modal
@@ -19,7 +20,7 @@ const EventDetailsAccessPolicyTab = ({
 	setPolicyChanged,
 }: {
 	eventId: string,
-	header: string,
+	header: ParseKeys,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
 }) => {