From 16fda1b608e68c818810de6ead385bc1028dd77f Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Mon, 2 Dec 2024 17:02:33 +0000
Subject: [PATCH] Add navigate next/prev action shortcut

Also focuses on action's record button
---
 src/components/ActionDataSamplesCard.tsx |  4 ++++
 src/pages/DataSamplesPage.tsx            | 11 ++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/ActionDataSamplesCard.tsx b/src/components/ActionDataSamplesCard.tsx
index 04e018a84..73739e751 100644
--- a/src/components/ActionDataSamplesCard.tsx
+++ b/src/components/ActionDataSamplesCard.tsx
@@ -186,6 +186,9 @@ interface RecordingAreaProps extends BoxProps {
   onRecord: (recordingOptions: RecordingOptions) => void;
 }
 
+export const recordButtonId = (action: ActionData) =>
+  `record-button-${action.ID}`;
+
 const RecordingArea = ({
   action,
   selected,
@@ -198,6 +201,7 @@ const RecordingArea = ({
       <Menu>
         <ButtonGroup isAttached>
           <Button
+            id={recordButtonId(action)}
             pr={2}
             variant={selected ? "record" : "recordOutline"}
             borderRight="none"
diff --git a/src/pages/DataSamplesPage.tsx b/src/pages/DataSamplesPage.tsx
index 059f8883c..14a38c6e5 100644
--- a/src/pages/DataSamplesPage.tsx
+++ b/src/pages/DataSamplesPage.tsx
@@ -1,8 +1,10 @@
 import { Button, Flex, HStack, VStack } from "@chakra-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { RiAddLine, RiArrowRightLine } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router";
+import { recordButtonId } from "../components/ActionDataSamplesCard";
 import DataSamplesTable from "../components/DataSamplesTable";
 import DefaultPageLayout, {
   ProjectMenuItems,
@@ -10,12 +12,11 @@ import DefaultPageLayout, {
 } from "../components/DefaultPageLayout";
 import LiveGraphPanel from "../components/LiveGraphPanel";
 import TrainModelDialogs from "../components/TrainModelFlowDialogs";
+import { useConnectionStage } from "../connection-stage-hooks";
+import { globalShortcutConfig, keyboardShortcuts } from "../keyboard-shortcuts";
 import { useHasSufficientDataForTraining, useStore } from "../store";
 import { tourElClassname } from "../tours";
 import { createTestingModelPageUrl } from "../urls";
-import { useConnectionStage } from "../connection-stage-hooks";
-import { useHotkeys } from "react-hotkeys-hook";
-import { globalShortcutConfig, keyboardShortcuts } from "../keyboard-shortcuts";
 
 const DataSamplesPage = () => {
   const actions = useStore((s) => s.actions);
@@ -56,6 +57,10 @@ const DataSamplesPage = () => {
     (idx: number) => {
       if (idx >= 0 && idx < actions.length) {
         setSelectedActionIdx(idx);
+        const recordButton = document.getElementById(
+          recordButtonId(actions[idx])
+        );
+        recordButton?.focus();
       }
     },
     [actions]