Feature Add next/previous tab hotkeys (#1447)

Feature Add next/previous tab hotkeys

Author: EnsiyehE

src/components/events/partials/modals/EventDetails.tsx

@@ -50,6 +50,8 @@ import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 import { unwrapResult } from "@reduxjs/toolkit";
 import { ParseKeys } from "i18next";
 import EventDetailsWorkflowSchedulingTab from "../ModalTabsAndPages/EventDetailsWorkflowSchedulingTab";
+import { useHotkeys } from "react-hotkeys-hook";
+import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 
 export enum EventDetailsPage {
 	Metadata,
@@ -229,6 +231,42 @@ const EventDetails = ({
 		        dispatch(openModalTab(tabNr, "workflow-details", "entry"));
 		}
 	};
+	const wizardTabs = tabs.filter(tab =>
+	  !tab.hidden,
+	);
+
+	const goNextStep = () => {
+	  const currentIndex = wizardTabs.findIndex(tab => tab.page === page);
+	  if (currentIndex === -1) { return; } // not in wizard, do nothing
+	  const nextIndex = currentIndex + 1;
+	  if (nextIndex >= wizardTabs.length) { return; } // already at last step (Comments)
+	  openTab(wizardTabs[nextIndex].page);
+	};
+
+	const goPrevStep = () => {
+	  const currentIndex = wizardTabs.findIndex(tab => tab.page === page);
+	  if (currentIndex <= 0) { return; }
+	  openTab(wizardTabs[currentIndex - 1].page);
+	};
+	// NEXT STEP
+	useHotkeys(
+		availableHotkeys.general.NEXT_PANEL.sequence,
+		() => {
+				goNextStep();
+		},
+		{ enableOnFormTags: ["INPUT", "TEXTAREA"] },
+		[goNextStep],
+	);
+
+	// PREVIOUS STEP
+	useHotkeys(
+		availableHotkeys.general.PREVIOUS_PANEL.sequence,
+		() => {
+				goPrevStep();
+		},
+		{ enableOnFormTags: ["INPUT", "TEXTAREA"] },
+		[goPrevStep],
+	);
 
 	return (
 		<>

src/components/shared/modals/ModalContentTable.tsx

@@ -14,8 +14,6 @@ const ModalContentTable = ({
 	modalBodyChildren?: React.ReactNode
 	children: React.ReactNode
 }) => {
-
-
   return (
 		<ModalContent
 			modalContentChildren={modalContentChildren}

src/configs/hotkeysConfig.ts

@@ -59,6 +59,16 @@ export const availableHotkeys: HotkeyMapType = {
             action: 'keyup',
             allowIn: ['INPUT', 'SELECT', 'TEXTAREA']
         },*/
+		NEXT_PANEL: {
+    		name: "next_step",
+    		description: "HOTKEYS.DESCRIPTIONS.GENERAL.NEXT_PANEL",
+    		sequence: ["alt+enter"], // Alt + Enter moves forward
+  		},
+  		PREVIOUS_PANEL: {
+    		name: "previous_step",
+    		description: "HOTKEYS.DESCRIPTIONS.GENERAL.PREVIOUS_PANEL",
+    		sequence: ["alt+backspace"], // Alt + Backspace moves backward
+  		},
 		REMOVE_FILTERS: {
 			name: "remove_filters",
 			description: "HOTKEYS.DESCRIPTIONS.GENERAL.REMOVE_FILTERS",

src/i18n/org/opencastproject/adminui/languages/lang-en_US.json

@@ -2087,6 +2087,8 @@
 				"SERIES_VIEW": "Series",
 				"NEW_EVENT": "Add event",
 				"NEW_SERIES": "Add series",
+				"NEXT_PANEL": "Go to next pane",
+        		"PREVIOUS_PANEL": "Go to previous pane",
 				"CHEAT_SHEET": "Keyboard shortcuts",
 				"CLOSE_MODAL": "Close dialog"
 			}