From dcd9ebbea64db721e7a64f9c5e1abc1c11668434 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Mon, 2 Dec 2024 17:19:59 +0000
Subject: [PATCH] Add F2 shortcut for editing action name

Additionally, focus on action name input when there is no record button to focus on when switching row focus via up/down keys.
---
 src/components/ActionNameCard.tsx |  4 ++++
 src/pages/DataSamplesPage.tsx     | 22 ++++++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/ActionNameCard.tsx b/src/components/ActionNameCard.tsx
index 3e3974876..caece10a9 100644
--- a/src/components/ActionNameCard.tsx
+++ b/src/components/ActionNameCard.tsx
@@ -28,6 +28,9 @@ interface ActionNameCardProps {
 
 const actionNameMaxLength = 18;
 
+export const actionNameInputId = (action: Action) =>
+  `action-name-input-${action.ID}`;
+
 const ActionNameCard = ({
   value,
   onDeleteAction,
@@ -129,6 +132,7 @@ const ActionNameCard = ({
             )}
           </HStack>
           <Input
+            id={actionNameInputId(value)}
             autoFocus={localName.length === 0}
             isTruncated
             readOnly={readOnly}
diff --git a/src/pages/DataSamplesPage.tsx b/src/pages/DataSamplesPage.tsx
index 14a38c6e5..a6500714e 100644
--- a/src/pages/DataSamplesPage.tsx
+++ b/src/pages/DataSamplesPage.tsx
@@ -5,6 +5,7 @@ import { RiAddLine, RiArrowRightLine } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router";
 import { recordButtonId } from "../components/ActionDataSamplesCard";
+import { actionNameInputId } from "../components/ActionNameCard";
 import DataSamplesTable from "../components/DataSamplesTable";
 import DefaultPageLayout, {
   ProjectMenuItems,
@@ -53,6 +54,14 @@ const DataSamplesPage = () => {
     handleAddNewAction,
     globalShortcutConfig
   );
+  const focusActionNameInput = useCallback(
+    (actionIdx: number) => {
+      const inputId = actionNameInputId(actions[actionIdx]);
+      const actionNameInputEl = document.getElementById(inputId);
+      actionNameInputEl?.focus();
+    },
+    [actions]
+  );
   const focusAction = useCallback(
     (idx: number) => {
       if (idx >= 0 && idx < actions.length) {
@@ -60,10 +69,14 @@ const DataSamplesPage = () => {
         const recordButton = document.getElementById(
           recordButtonId(actions[idx])
         );
-        recordButton?.focus();
+        if (recordButton) {
+          recordButton?.focus();
+        } else {
+          focusActionNameInput(idx);
+        }
       }
     },
-    [actions]
+    [actions, focusActionNameInput]
   );
   useHotkeys(
     keyboardShortcuts.nextAction,
@@ -75,6 +88,11 @@ const DataSamplesPage = () => {
     () => focusAction(selectedActionIdx - 1),
     globalShortcutConfig
   );
+  useHotkeys(
+    keyboardShortcuts.renameAction,
+    () => focusActionNameInput(selectedActionIdx),
+    globalShortcutConfig
+  );
   const intl = useIntl();
   return (
     <>