Add keyboard shortcuts (#553)

- Add action: ["ctrl+shift+enter", "meta+shift+enter"],
- Save: ["ctrl+shift+s", "meta+shift+s"],
- Settings: ["ctrl+shift+p", "meta+shift+p"],
- Focus action below: ["down"],
- Focus action above: ["up"],
- Focus action name: ["left"],
- Focus record button: ["right"],
- Rename  renameAction: ["F2"],
- Connect: ["ctrl+shift+u", "meta+shift+u"],
- Disconnect: ["ctrl+shift+k", "meta+shift+k"],
- Edit in MakeCode: ["ctrl+shift+e", "meta+shift+e"],

Author: microbit-grace

package-lock.json

@@ -78,6 +78,7 @@
     "ml4f": "git://github.com/microsoft/ml4f#v1.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hotkeys-hook": "^4.6.1",
     "react-icons": "^4.12.0",
     "react-intl": "^6.6.8",
     "react-router": "^6.24.0",

package.json

@@ -3,14 +3,14 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { HStack, MenuDivider, useDisclosure } from "@chakra-ui/react";
+import { HStack, MenuDivider } from "@chakra-ui/react";
 import { ReactNode, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { useLocation } from "react-router";
+import { keyboardShortcuts, useShortcut } from "../../keyboard-shortcut-hooks";
 import { useStore } from "../../store";
 import AboutDialog from "../AboutDialog";
 import ConnectFirstDialog from "../ConnectFirstDialog";
-import FeedbackForm from "../FeedbackForm";
 import HelpMenu from "../HelpMenu";
 import HelpMenuItems, { tourMap } from "../HelpMenuItems";
 import { LanguageDialog } from "../LanguageDialog";
@@ -27,11 +27,16 @@ interface ItemsRightProps {
 
 const ItemsRight = ({ menuItems, toolbarItems }: ItemsRightProps) => {
   const intl = useIntl();
-  const languageDisclosure = useDisclosure();
-  const settingsDisclosure = useDisclosure();
-  const aboutDialogDisclosure = useDisclosure();
-  const feedbackDisclosure = useDisclosure();
-  const connectFirstDisclosure = useDisclosure();
+  const closeDialog = useStore((s) => s.closeDialog);
+  const languageDialogOnOpen = useStore((s) => s.languageDialogOnOpen);
+  const isLanguageDialogOpen = useStore((s) => s.isLanguageDialogOpen);
+  const settingsDialogOnOpen = useStore((s) => s.settingsDialogOnOpen);
+  const isSettingsDialogOpen = useStore((s) => s.isSettingsDialogOpen);
+  const aboutDialogOnOpen = useStore((s) => s.aboutDialogOnOpen);
+  const isAboutDialogOpen = useStore((s) => s.isAboutDialogOpen);
+  const feedbackOnOpen = useStore((s) => s.feedbackFormOnOpen);
+  const connectFirstDialogOnOpen = useStore((s) => s.connectFirstDialogOnOpen);
+  const isConnectFirstDialogOpen = useStore((s) => s.isConnectFirstDialogOpen);
   const setPostConnectTourTrigger = useStore(
     (s) => s.setPostConnectTourTrigger
   );
@@ -52,43 +57,31 @@ const ItemsRight = ({ menuItems, toolbarItems }: ItemsRightProps) => {
       }
     }
   }, [tourTriggerName]);
+  useShortcut(keyboardShortcuts.settings, settingsDialogOnOpen);
   return (
     <>
-      <LanguageDialog
-        isOpen={languageDisclosure.isOpen}
-        onClose={languageDisclosure.onClose}
-      />
-      <SettingsDialog
-        isOpen={settingsDisclosure.isOpen}
-        onClose={settingsDisclosure.onClose}
-      />
+      <LanguageDialog isOpen={isLanguageDialogOpen} onClose={closeDialog} />
+      <SettingsDialog isOpen={isSettingsDialogOpen} onClose={closeDialog} />
       <ConnectFirstDialog
-        isOpen={connectFirstDisclosure.isOpen}
-        onClose={connectFirstDisclosure.onClose}
+        isOpen={isConnectFirstDialogOpen}
+        onClose={closeDialog}
         onChooseConnect={() => setPostConnectTourTrigger(tourTrigger)}
         explanationTextId="connect-to-tour-body"
         options={{ postConnectTourTrigger: tourTrigger }}
       />
-      <AboutDialog
-        isOpen={aboutDialogDisclosure.isOpen}
-        onClose={aboutDialogDisclosure.onClose}
-      />
-      <FeedbackForm
-        isOpen={feedbackDisclosure.isOpen}
-        onClose={feedbackDisclosure.onClose}
-      />
+      <AboutDialog isOpen={isAboutDialogOpen} onClose={closeDialog} />
       <HStack spacing={3} display={{ base: "none", lg: "flex" }}>
         {toolbarItems}
         <SettingsMenu
-          onLanguageDialogOpen={languageDisclosure.onOpen}
-          onSettingsDialogOpen={settingsDisclosure.onOpen}
+          onLanguageDialogOpen={languageDialogOnOpen}
+          onSettingsDialogOpen={settingsDialogOnOpen}
         />
       </HStack>
       <HelpMenu
         display={{ base: "none", md: "block", lg: "block" }}
-        onAboutDialogOpen={aboutDialogDisclosure.onOpen}
-        onConnectFirstDialogOpen={connectFirstDisclosure.onOpen}
-        onFeedbackOpen={feedbackDisclosure.onOpen}
+        onAboutDialogOpen={aboutDialogOnOpen}
+        onConnectFirstDialogOpen={connectFirstDialogOnOpen}
+        onFeedbackOpen={feedbackOnOpen}
         tourTrigger={tourTrigger}
       />
       <ToolbarMenu
@@ -97,8 +90,8 @@ const ItemsRight = ({ menuItems, toolbarItems }: ItemsRightProps) => {
         label={intl.formatMessage({ id: "main-menu" })}
       >
         {menuItems}
-        <LanguageMenuItem onOpen={languageDisclosure.onOpen} />
-        <SettingsMenuItem onOpen={settingsDisclosure.onOpen} />
+        <LanguageMenuItem onOpen={languageDialogOnOpen} />
+        <SettingsMenuItem onOpen={settingsDialogOnOpen} />
       </ToolbarMenu>
       {/* Toolbar items when sm window size. */}
       <ToolbarMenu
@@ -107,13 +100,13 @@ const ItemsRight = ({ menuItems, toolbarItems }: ItemsRightProps) => {
         label={intl.formatMessage({ id: "main-menu" })}
       >
         {menuItems}
-        <LanguageMenuItem onOpen={languageDisclosure.onOpen} />
-        <SettingsMenuItem onOpen={settingsDisclosure.onOpen} />
+        <LanguageMenuItem onOpen={languageDialogOnOpen} />
+        <SettingsMenuItem onOpen={settingsDialogOnOpen} />
         <MenuDivider />
         <HelpMenuItems
-          onAboutDialogOpen={aboutDialogDisclosure.onOpen}
-          onConnectFirstDialogOpen={connectFirstDisclosure.onOpen}
-          onFeedbackOpen={feedbackDisclosure.onOpen}
+          onAboutDialogOpen={aboutDialogOnOpen}
+          onConnectFirstDialogOpen={connectFirstDialogOnOpen}
+          onFeedbackOpen={feedbackOnOpen}
           tourTrigger={tourTrigger}
         />
       </ToolbarMenu>

src/components/ActionBar/ActionBarItemsRight.tsx

@@ -191,6 +191,9 @@ interface RecordingAreaProps extends BoxProps {
   onRecord: (recordingOptions: RecordingOptions) => void;
 }
 
+export const recordButtonId = (action: ActionData) =>
+  `record-button-${action.ID}`;
+
 const RecordingArea = ({
   action,
   selected,
@@ -203,6 +206,7 @@ const RecordingArea = ({
       <Menu>
         <ButtonGroup isAttached>
           <Button
+            id={recordButtonId(action)}
             pr={2}
             variant={selected ? "record" : "recordOutline"}
             borderRight="none"

src/components/ActionDataSamplesCard.tsx

@@ -33,6 +33,9 @@ interface ActionNameCardProps {
 
 const actionNameMaxLength = 18;
 
+export const actionNameInputId = (action: Action) =>
+  `action-name-input-${action.ID}`;
+
 const ActionNameCard = ({
   value,
   onDeleteAction,
@@ -55,9 +58,13 @@ const ActionNameCard = ({
 
   const debouncedSetActionName = useMemo(
     () =>
-      debounce((id: ActionData["ID"], name: string) => {
-        setActionName(id, name);
-      }, 400),
+      debounce(
+        (id: ActionData["ID"], name: string) => {
+          setActionName(id, name);
+        },
+        400,
+        { leading: true }
+      ),
     [setActionName]
   );
 
@@ -134,6 +141,7 @@ const ActionNameCard = ({
             )}
           </HStack>
           <Input
+            id={actionNameInputId(value)}
             autoFocus={localName.length === 0}
             isTruncated
             readOnly={readOnly}

src/components/ActionNameCard.tsx

@@ -17,10 +17,7 @@ import {
 import { ComponentProps, useCallback, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { ConnectionStatus } from "../connect-status-hooks";
-import {
-  ConnectionFlowStep,
-  useConnectionStage,
-} from "../connection-stage-hooks";
+import { useConnectionStage } from "../connection-stage-hooks";
 import { ConnectOptions } from "../store";
 
 interface ConnectFirstDialogProps
@@ -35,12 +32,13 @@ const ConnectFirstDialog = ({
   options,
   onClose,
   onChooseConnect,
+  isOpen,
   ...rest
 }: ConnectFirstDialogProps) => {
   const {
     actions,
     status: connStatus,
-    stage: connStage,
+    isDialogOpen: isConnectionDialogOpen,
   } = useConnectionStage();
   const [isWaiting, setIsWaiting] = useState<boolean>(false);
 
@@ -86,15 +84,23 @@ const ConnectFirstDialog = ({
 
   useEffect(() => {
     if (
-      connStage.flowStep !== ConnectionFlowStep.None ||
-      (isWaiting && connStatus === ConnectionStatus.Connected)
+      isOpen &&
+      (isConnectionDialogOpen ||
+        (isWaiting && connStatus === ConnectionStatus.Connected))
     ) {
       // Close dialog if connection dialog is opened, or
       // once connected after waiting.
       handleOnClose();
       return;
     }
-  }, [connStage.flowStep, connStatus, handleOnClose, isWaiting, onClose]);
+  }, [
+    connStatus,
+    handleOnClose,
+    isConnectionDialogOpen,
+    isOpen,
+    isWaiting,
+    onClose,
+  ]);
 
   return (
     <Modal
@@ -103,6 +109,7 @@ const ConnectFirstDialog = ({
       size="md"
       isCentered
       onClose={handleOnClose}
+      isOpen={isOpen}
       {...rest}
     >
       <ModalOverlay>

src/components/ConnectFirstDialog.tsx

@@ -13,7 +13,6 @@ import {
   MenuList,
   Portal,
   Text,
-  useDisclosure,
 } from "@chakra-ui/react";
 import { useCallback } from "react";
 import { MdMoreVert } from "react-icons/md";
@@ -23,10 +22,6 @@ import {
   RiUpload2Line,
 } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
-import {
-  ConnectionFlowStep,
-  useConnectionStage,
-} from "../connection-stage-hooks";
 import { useLogging } from "../logging/logging-hooks";
 import { useStore } from "../store";
 import { getTotalNumSamples } from "../utils/actions";
@@ -41,9 +36,15 @@ const DataSamplesMenu = () => {
   const logging = useLogging();
   const actions = useStore((s) => s.actions);
   const downloadDataset = useStore((s) => s.downloadDataset);
-  const { stage } = useConnectionStage();
-  const deleteConfirmDisclosure = useDisclosure();
-  const nameProjectDialogDisclosure = useDisclosure();
+  const isDeleteAllActionsDialogOpen = useStore(
+    (s) => s.isDeleteAllActionsDialogOpen
+  );
+  const deleteAllActionsDialogOnOpen = useStore(
+    (s) => s.deleteAllActionsDialogOnOpen
+  );
+  const closeDialog = useStore((s) => s.closeDialog);
+  const isNameProjectDialogOpen = useStore((s) => s.isNameProjectDialogOpen);
+  const nameProjectDialogOnOpen = useStore((s) => s.nameProjectDialogOnOpen);
   const isUntitled = useProjectIsUntitled();
   const setProjectName = useStore((s) => s.setProjectName);
 
@@ -63,43 +64,37 @@ const DataSamplesMenu = () => {
       type: "dataset-delete",
     });
     deleteAllActions();
-    deleteConfirmDisclosure.onClose();
-  }, [deleteAllActions, deleteConfirmDisclosure, logging]);
+    closeDialog();
+  }, [closeDialog, deleteAllActions, logging]);
 
   const handleSave = useCallback(
     (newName?: string) => {
       if (newName) {
         setProjectName(newName);
       }
       download();
-      nameProjectDialogDisclosure.onClose();
+      closeDialog();
     },
-    [download, nameProjectDialogDisclosure, setProjectName]
+    [closeDialog, download, setProjectName]
   );
 
   const handleDownloadDataset = useCallback(() => {
     if (isUntitled) {
-      nameProjectDialogDisclosure.onOpen();
+      nameProjectDialogOnOpen();
     } else {
       download();
     }
-  }, [download, isUntitled, nameProjectDialogDisclosure]);
+  }, [download, isUntitled, nameProjectDialogOnOpen]);
 
   return (
     <>
       <NameProjectDialog
-        isOpen={
-          stage.flowStep === ConnectionFlowStep.None &&
-          nameProjectDialogDisclosure.isOpen
-        }
-        onClose={nameProjectDialogDisclosure.onClose}
+        isOpen={isNameProjectDialogOpen}
+        onClose={closeDialog}
         onSave={handleSave}
       />
       <ConfirmDialog
-        isOpen={
-          deleteConfirmDisclosure.isOpen &&
-          stage.flowStep === ConnectionFlowStep.None
-        }
+        isOpen={isDeleteAllActionsDialogOpen}
         heading={intl.formatMessage({
           id: "delete-data-samples-confirm-heading",
         })}
@@ -109,7 +104,7 @@ const DataSamplesMenu = () => {
           </Text>
         }
         onConfirm={handleDeleteAllActions}
-        onCancel={deleteConfirmDisclosure.onClose}
+        onCancel={closeDialog}
       />
       <Menu>
         <MenuButton
@@ -135,7 +130,7 @@ const DataSamplesMenu = () => {
             </MenuItem>
             <MenuItem
               icon={<RiDeleteBin2Line />}
-              onClick={deleteConfirmDisclosure.onOpen}
+              onClick={deleteAllActionsDialogOnOpen}
             >
               <FormattedMessage id="delete-data-samples-action" />
             </MenuItem>