Changes in Query Tool, Debugger, and ERD Tool shortcuts to remove the use of Accesskey which will allow them to be customized. #7192

web/pgadmin/tools/debugger/__init__.py

@@ -20,8 +20,7 @@ from pgadmin.user_login_check import pga_login_required
 from werkzeug.user_agent import UserAgent
 
 from pgadmin.utils import PgAdminModule, \
-    SHORTCUT_FIELDS as shortcut_fields, \
-    ACCESSKEY_FIELDS as accesskey_fields
+    SHORTCUT_FIELDS as shortcut_fields
 from pgadmin.utils.ajax import bad_request
 from pgadmin.utils.ajax import make_json_response, \
     internal_server_error, gone
@@ -58,80 +57,98 @@ class DebuggerModule(PgAdminModule):
     def register_preferences(self):
         self.preference.register(
             'keyboard_shortcuts', 'btn_start',
-            gettext('Accesskey (Continue/Start)'), 'keyboardshortcut',
+            gettext('Continue/Start'), 'keyboardshortcut',
             {
+                'alt': True,
+                'shift': True,
+                'control': False,
                 'key': {
                     'key_code': 67,
                     'char': 'c'
                 }
             },
             category_label=PREF_LABEL_KEYBOARD_SHORTCUTS,
-            fields=accesskey_fields
+            fields=shortcut_fields
         )
 
         self.preference.register(
             'keyboard_shortcuts', 'btn_stop',
-            gettext('Accesskey (Stop)'), 'keyboardshortcut',
+            gettext('Stop'), 'keyboardshortcut',
             {
+                'alt': True,
+                'shift': True,
+                'control': False,
                 'key': {
                     'key_code': 83,
                     'char': 's'
                 }
             },
             category_label=PREF_LABEL_KEYBOARD_SHORTCUTS,
-            fields=accesskey_fields
+            fields=shortcut_fields
         )
 
         self.preference.register(
             'keyboard_shortcuts', 'btn_step_into',
-            gettext('Accesskey (Step into)'), 'keyboardshortcut',
+            gettext('Step into'), 'keyboardshortcut',
             {
+                'alt': True,
+                'shift': True,
+                'control': False,
                 'key': {
                     'key_code': 73,
                     'char': 'i'
                 }
             },
             category_label=PREF_LABEL_KEYBOARD_SHORTCUTS,
-            fields=accesskey_fields
+            fields=shortcut_fields
         )
 
         self.preference.register(
             'keyboard_shortcuts', 'btn_step_over',
-            gettext('Accesskey (Step over)'), 'keyboardshortcut',
+            gettext('Step over'), 'keyboardshortcut',
             {
+                'alt': True,
+                'shift': True,
+                'control': False,
                 'key': {
                     'key_code': 79,
                     'char': 'o'
                 }
             },
             category_label=PREF_LABEL_KEYBOARD_SHORTCUTS,
-            fields=accesskey_fields
+            fields=shortcut_fields
         )
 
         self.preference.register(
             'keyboard_shortcuts', 'btn_toggle_breakpoint',
-            gettext('Accesskey (Toggle breakpoint)'), 'keyboardshortcut',
+            gettext('Toggle breakpoint'), 'keyboardshortcut',
             {
+                'alt': True,
+                'shift': True,
+                'control': False,
                 'key': {
                     'key_code': 84,
                     'char': 't'
                 }
             },
             category_label=PREF_LABEL_KEYBOARD_SHORTCUTS,
-            fields=accesskey_fields
+            fields=shortcut_fields
         )
 
         self.preference.register(
             'keyboard_shortcuts', 'btn_clear_breakpoints',
-            gettext('Accesskey (Clear all breakpoints)'), 'keyboardshortcut',
+            gettext('Clear all breakpoints'), 'keyboardshortcut',
             {
+                'alt': True,
+                'shift': True,
+                'control': False,
                 'key': {
                     'key_code': 88,
                     'char': 'x'
                 }
             },
             category_label=PREF_LABEL_KEYBOARD_SHORTCUTS,
-            fields=accesskey_fields
+            fields=shortcut_fields
         )
 
         self.preference.register(

web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx

@@ -1083,6 +1083,7 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panelId,
       node_name: retrieveNodeName(selectedNodeInfo),
     },
     preferences: preferences,
+    containerRef: containerRef,
   }), [preferences]);
 
   // Define the debugger layout components such as DebuggerEditor to show queries and

web/pgadmin/tools/debugger/static/js/components/DebuggerEditor.jsx

@@ -10,7 +10,7 @@
 import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
@@ -18,8 +18,9 @@ import url_for from 'sources/url_for';
 import getApiInstance from '../../../../../static/js/api_instance';
 import CodeMirror from '../../../../../static/js/components/ReactCodeMirror';
 import { DEBUGGER_EVENTS } from '../DebuggerConstants';
-import { DebuggerEventsContext } from './DebuggerComponent';
+import { DebuggerContext, DebuggerEventsContext } from './DebuggerComponent';
 import { usePgAdmin } from '../../../../../static/js/BrowserComponent';
+import { isShortcutValue, toCodeMirrorKey } from '../../../../../static/js/utils';
 
 
 const useStyles = makeStyles(() => ({
@@ -33,6 +34,8 @@ export default function DebuggerEditor({ getEditor, params }) {
   const editor = React.useRef();
   const eventBus = useContext(DebuggerEventsContext);
   const pgAdmin = usePgAdmin();
+  const debuggerCtx = useContext(DebuggerContext);
+  let preferences = debuggerCtx.preferences.debugger;
 
   const api = getApiInstance();
 
@@ -70,6 +73,29 @@ export default function DebuggerEditor({ getEditor, params }) {
     getEditor(editor.current);
   }, [editor.current]);
 
+  const shortcutOverrideKeys = useMemo(
+    ()=>{
+      return Object.values(preferences)
+        .filter((p)=>isShortcutValue(p))
+        .map((p)=>({
+          key: toCodeMirrorKey(p), run: (_v, e)=>{
+            debuggerCtx.containerRef?.current?.dispatchEvent(new KeyboardEvent('keydown', {
+              which: e.which,
+              keyCode: e.keyCode,
+              altKey: e.altKey,
+              shiftKey: e.shiftKey,
+              ctrlKey: e.ctrlKey,
+              metaKey: e.metaKey,
+            }));
+            return true;
+          },
+          preventDefault: true,
+          stopPropagation: true,
+        }));
+    },
+    [preferences]
+  );
+
   return (
     <CodeMirror
       currEditor={(obj) => {
@@ -81,6 +107,7 @@ export default function DebuggerEditor({ getEditor, params }) {
       }}
       className={classes.sql}
       readonly={true}
+      customKeyMap={shortcutOverrideKeys}
       breakpoint
     />);
 }

web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx

@@ -21,12 +21,12 @@ import HelpIcon from '@mui/icons-material/HelpRounded';
 import RotateLeftRoundedIcon from '@mui/icons-material/RotateLeftRounded';
 
 import gettext from 'sources/gettext';
-import { shortcut_key } from 'sources/keyboard_shortcuts';
 import url_for from 'sources/url_for';
 
 import { PgButtonGroup, PgIconButton } from '../../../../../static/js/components/Buttons';
 import { DebuggerContext, DebuggerEventsContext } from './DebuggerComponent';
 import { DEBUGGER_EVENTS, MENUS } from '../DebuggerConstants';
+import { useKeyboardShortcuts } from '../../../../../static/js/custom_hooks';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -120,27 +120,67 @@ export function ToolBar() {
   }, []);
 
 
+  /* Button shortcuts */
+  useKeyboardShortcuts([
+    {
+      shortcut: preferences.btn_step_into,
+      options: {
+        callback: ()=>{!buttonsDisabled[MENUS.STEPINTO] && stepInTODebugger();}
+      }
+    },
+    {
+      shortcut: preferences.btn_step_over,
+      options: {
+        callback: ()=>{!buttonsDisabled[MENUS.STEPOVER] && stepOverDebugger();}
+      }
+    },
+    {
+      shortcut: preferences.btn_start,
+      options: {
+        callback: ()=>{!buttonsDisabled[MENUS.START] && continueDebugger();}
+      }
+    },
+    {
+      shortcut: preferences.btn_toggle_breakpoint,
+      options: {
+        callback: ()=>{!buttonsDisabled[MENUS.TOGGLE_BREAKPOINT] && toggleBreakpoint();}
+      }
+    },
+    {
+      shortcut: preferences.btn_clear_breakpoints,
+      options: {
+        callback: ()=>{!buttonsDisabled[MENUS.CLEAR_ALL_BREAKPOINT] && clearAllBreakpoint();}
+      }
+    },
+    {
+      shortcut: preferences.btn_stop,
+      options: {
+        callback: ()=>{!buttonsDisabled[MENUS.STOP] && stop();}
+      }
+    }
+  ], debuggerCtx.containerRef);
+
   return (
     <Box className={classes.root}>
       <PgButtonGroup size="small">
         <PgIconButton data-test='step-in' title={gettext('Step into')} disabled={buttonsDisabled[MENUS.STEPINTO]} icon={<FormatIndentIncreaseIcon />} onClick={() => { stepInTODebugger(); }}
-          accesskey={shortcut_key(preferences?.btn_step_into)} />
+          shortcut={preferences?.btn_step_into} />
         <PgIconButton data-test='step-over' title={gettext('Step over')} disabled={buttonsDisabled[MENUS.STEPOVER]} icon={<FormatIndentDecreaseIcon />} onClick={() => { stepOverDebugger(); }}
-          accesskey={shortcut_key(preferences?.btn_step_over)} />
+          shortcut={preferences?.btn_step_over} />
         <PgIconButton data-test='debugger-contiue' title={gettext('Continue/Start')} disabled={buttonsDisabled[MENUS.START]} icon={<PlayCircleFilledWhiteIcon />} onClick={() => { continueDebugger(); }}
-          accesskey={shortcut_key(preferences?.btn_start)} />
+          shortcut={preferences?.btn_start} />
       </PgButtonGroup>
       <PgButtonGroup size="small">
         <PgIconButton data-test='toggle-breakpoint' title={gettext('Toggle breakpoint')} disabled={buttonsDisabled[MENUS.TOGGLE_BREAKPOINT]} icon={<FiberManualRecordIcon style={{height: '2rem'}} />}
-          accesskey={shortcut_key(preferences?.btn_toggle_breakpoint)} onClick={() => { toggleBreakpoint(); }} />
+          shortcut={preferences?.btn_toggle_breakpoint} onClick={() => { toggleBreakpoint(); }} />
         <PgIconButton data-test='clear-breakpoint' title={gettext('Clear all breakpoints')} disabled={buttonsDisabled[MENUS.CLEAR_ALL_BREAKPOINT]} icon={<NotInterestedIcon />}
-          accesskey={shortcut_key(preferences?.btn_clear_breakpoints)} onClick={() => {
+          shortcut={preferences?.btn_clear_breakpoints} onClick={() => {
             clearAllBreakpoint();
           }} />
       </PgButtonGroup>
       <PgButtonGroup size="small">
         <PgIconButton data-test='stop-debugger' title={gettext('Stop')} icon={<StopIcon style={{height: '2rem'}} />} disabled={buttonsDisabled[MENUS.STOP]} onClick={() => { stop(); }}
-          accesskey={shortcut_key(preferences?.btn_stop)} />
+          shortcut={preferences?.btn_stop} />
       </PgButtonGroup>
       <PgButtonGroup size="small">
         <PgIconButton data-test='debugger-help' title={gettext('Help')} icon={<HelpIcon />} onClick={onHelpClick} />
@@ -151,4 +191,4 @@ export function ToolBar() {
       </PgButtonGroup>
     </Box>
   );
-}
+}