Port next/previous tab hotkeys

The old admin ui featured two hotkeys that would let you move forward and backward between the different steps in a create modal. This ports them over to our ui. Unfortunately, they are not that useful currently, as switching tabs almost always results in an element being autofocused that will eat our hotkey inputs (<input>, <select>, etc.). Not sure currently how to get hotkeys to work despite that in a general fashion.
opencast · Jul 12, 2024 · 70b2634 · 70b2634
1 parent 675dc70
commit 70b2634
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 8 deletions.
diff --git a/src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx
@@ -19,6 +19,8 @@ import { filterRoles, getAclTemplateText } from "../../../../utils/aclUtils";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { fetchSeriesDetailsAcls } from "../../../../slices/seriesDetailsSlice";
 import { getSeriesDetailsAcl } from "../../../../selectors/seriesDetailsSelectors";
+import { useHotkeys } from "react-hotkeys-hook";
+import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 
 /**
  * This component renders the access page for new events and series in the wizards.
@@ -97,6 +99,20 @@ const NewAccessPage = ({
 		await dispatch(checkAcls(formik.values.acls));
 	};
 
+	useHotkeys(
+		availableHotkeys.general.NEXT_TAB.sequence,
+		() => nextPage(formik.values),
+		{ description: t(availableHotkeys.general.NEXT_TAB.description) ?? undefined },
+		[nextPage],
+	);
+
+	useHotkeys(
+		availableHotkeys.general.PREVIOUS_TAB.sequence,
+		() => previousPage(formik.values),
+		{ description: t(availableHotkeys.general.PREVIOUS_TAB.description) ?? undefined },
+		[previousPage],
+	);
+
 	return (
 		<>
 			<div className="modal-content">

diff --git a/src/components/events/partials/ModalTabsAndPages/NewAssetUploadPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewAssetUploadPage.tsx
@@ -47,6 +47,7 @@ const NewAssetUploadPage = <T extends RequiredFormProps>({
 			formik.setFieldValue(assetId, e.target.files[0]);
 		}
 	};
+
 	return (
 		<>
 			<div className="modal-content">

diff --git a/src/components/events/partials/ModalTabsAndPages/NewProcessingPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewProcessingPage.tsx
@@ -8,6 +8,8 @@ import DropDown from "../../../shared/DropDown";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { fetchWorkflowDef } from "../../../../slices/workflowSlice";
 import { FormikProps } from "formik";
+import { useHotkeys } from "react-hotkeys-hook";
+import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 
 /**
  * This component renders the processing page for new events in the new event wizard.
@@ -57,6 +59,20 @@ const NewProcessingPage = <T extends RequiredFormProps>({
 		formik.setFieldValue("processingWorkflow", workflowId);
 	};
 
+	useHotkeys(
+		availableHotkeys.general.NEXT_TAB.sequence,
+		() => nextPage(formik.values),
+		{ description: t(availableHotkeys.general.NEXT_TAB.description) ?? undefined },
+		[nextPage],
+	);
+
+	useHotkeys(
+		availableHotkeys.general.PREVIOUS_TAB.sequence,
+		() => previousPage(formik.values),
+		{ description: t(availableHotkeys.general.PREVIOUS_TAB.description) ?? undefined },
+		[previousPage],
+	);
+
 	return (
 		<>
 			<div className="modal-content">

diff --git a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
@@ -42,6 +42,8 @@ import { Recording, fetchRecordings } from "../../../../slices/recordingSlice";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { parseISO } from "date-fns";
 import { checkConflicts } from "../../../../slices/eventSlice";
+import { useHotkeys } from "react-hotkeys-hook";
+import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 
 /**
  * This component renders the source page for new events in the new event wizard.
@@ -98,6 +100,20 @@ const NewSourcePage = <T extends RequiredFormProps>({
 		return inputDevices.length > 0 && hasAnyDeviceAccess(user, inputDevices);
 	};
 
+	useHotkeys(
+		availableHotkeys.general.NEXT_TAB.sequence,
+		() => nextPage(formik.values),
+		{ description: t(availableHotkeys.general.NEXT_TAB.description) ?? undefined },
+		[nextPage],
+	);
+
+	useHotkeys(
+		availableHotkeys.general.PREVIOUS_TAB.sequence,
+		() => previousPage(formik.values),
+		{ description: t(availableHotkeys.general.PREVIOUS_TAB.description) ?? undefined },
+		[previousPage],
+	);
+
 	return (
 		<>
 			<div className="modal-content">

diff --git a/src/components/events/partials/modals/EventDetailsModal.tsx b/src/components/events/partials/modals/EventDetailsModal.tsx
@@ -46,7 +46,6 @@ const EventDetailsModal = ({
   	);
 
 	return (
-		// todo: add hotkeys
 		<>
 			<div className="modal-animation modal-overlay" />
 			<section

diff --git a/src/components/events/partials/modals/SeriesDetailsModal.tsx b/src/components/events/partials/modals/SeriesDetailsModal.tsx
@@ -35,7 +35,6 @@ const SeriesDetailsModal = ({
 		[close],
   	);
 
-	// todo: add hotkeys
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />

diff --git a/src/components/recordings/partials/modal/RecordingDetailsModal.tsx b/src/components/recordings/partials/modal/RecordingDetailsModal.tsx
@@ -28,7 +28,6 @@ const RecordingDetailsModal = ({
 	};
 
 	return (
-		// todo: add hotkeys
 		<>
 			<div className="modal-animation modal-overlay" />
 			<section

diff --git a/src/components/shared/NewResourceModal.tsx b/src/components/shared/NewResourceModal.tsx
@@ -33,7 +33,6 @@ const NewResourceModal = ({
 	};
 
 	return (
-		// todo: add hotkeys
 		<>
 			<div className="modal-animation modal-overlay" />
 			<section

diff --git a/src/components/shared/wizard/WizardNavigationButtons.tsx b/src/components/shared/wizard/WizardNavigationButtons.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 import { FormikProps } from "formik";
+import { useHotkeys } from "react-hotkeys-hook";
+import { availableHotkeys } from "../../../configs/hotkeysConfig";
 
 const WizardNavigationButtons = <T,>({
 	isFirst,
@@ -29,6 +31,20 @@ const WizardNavigationButtons = <T,>({
 
 	const disabled = !(formik.dirty && formik.isValid);
 
+	useHotkeys(
+		availableHotkeys.general.NEXT_TAB.sequence,
+		() => nextPage && nextPage(formik.values),
+		{ description: t(availableHotkeys.general.NEXT_TAB.description) ?? undefined },
+		[nextPage],
+	);
+
+	useHotkeys(
+		availableHotkeys.general.PREVIOUS_TAB.sequence,
+		() => previousPage && previousPage(formik.values),
+		{ description: t(availableHotkeys.general.PREVIOUS_TAB.description) ?? undefined },
+		[previousPage],
+	);
+
 	return (
 		<>
 			<footer>

diff --git a/src/components/users/partials/modal/AclDetailsModal.tsx b/src/components/users/partials/modal/AclDetailsModal.tsx
@@ -33,7 +33,6 @@ const AclDetailsModal = ({
 	};
 
 	return (
-		// todo: add hotkeys
 		<>
 			<div className="modal-animation modal-overlay" />
 			<section

diff --git a/src/components/users/partials/modal/GroupDetailsModal.tsx b/src/components/users/partials/modal/GroupDetailsModal.tsx
@@ -33,7 +33,6 @@ const GroupDetailsModal = ({
 	};
 
 	return (
-		// todo: add hotkeys
 		<>
 			<div className="modal-animation modal-overlay" />
 			<section

diff --git a/src/components/users/partials/modal/UserDetailsModal.tsx b/src/components/users/partials/modal/UserDetailsModal.tsx
@@ -32,7 +32,6 @@ const UserDetailsModal = ({
 	};
 
 	return (
-		// todo: add hotkeys
 		<>
 			<div className="modal-animation modal-overlay" />
 			<section

diff --git a/src/configs/hotkeysConfig.ts b/src/configs/hotkeysConfig.ts
@@ -66,6 +66,16 @@ export const availableHotkeys: HotkeyMapType = {
 			name: "close_modal",
 			description: "HOTKEYS.DESCRIPTIONS.GENERAL.CLOSE_MODAL",
 			sequence: ["Esc"],
+		},
+		NEXT_TAB: {
+			name: "next_tab",
+			description: "HOTKEYS.DESCRIPTIONS.GENERAL.NEXT_TAB",
+			sequence: ["alt+enter"]
+		},
+		PREVIOUS_TAB: {
+			name: "previous_tab",
+			description: "HOTKEYS.DESCRIPTIONS.GENERAL.PREVIOUS_TAB",
+			sequence: ["alt+backspace"]
 		}
 	},
 };
diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -2112,7 +2112,9 @@
 				"NEW_EVENT": "Add event",
 				"NEW_SERIES": "Add series",
 				"CHEAT_SHEET": "Keyboard shortcuts",
-				"CLOSE_MODAL": "Close dialog"
+				"CLOSE_MODAL": "Close dialog",
+				"NEXT_TAB": "Switch to next tab",
+				"PREVIOUS_TAB": "Switch to previous tab"
 			}
 		}
 	},