Added support for customizing keyboard shortcuts in the Query Tool's Edit menu. #2659

Author: pravesh-sharma

web/pgadmin/static/js/components/ReactCodeMirror/index.jsx

@@ -12,6 +12,8 @@ import { styled } from '@mui/material/styles';
 import FileCopyRoundedIcon from '@mui/icons-material/FileCopyRounded';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import PropTypes from 'prop-types';
+import { startCompletion } from '@codemirror/autocomplete';
+import { format } from 'sql-formatter';
 
 import gettext from 'sources/gettext';
 import { PgIconButton } from '../Buttons';
@@ -22,6 +24,8 @@ import Editor from './components/Editor';
 import CustomPropTypes from '../../custom_prop_types';
 import FindDialog from './components/FindDialog';
 import GotoDialog from './components/GotoDialog';
+import usePreferences from '../../../../preferences/static/js/store';
+import { toCodeMirrorKey } from '../../utils';
 
 const Root = styled('div')(() => ({
   position: 'relative',
@@ -64,25 +68,71 @@ export default function CodeMirror({className, currEditor, showCopyBtn=false, cu
   const [[showFind, isReplace, findKey], setShowFind] = useState([false, false, false]);
   const [showGoto, setShowGoto] = useState(false);
   const [showCopy, setShowCopy] = useState(false);
+  const preferences = usePreferences().getPreferencesForModule('sqleditor');
+
+  const formatSQL = (view)=>{
+    let selection = true, sql = view.getSelection();
+    /* New library does not support capitalize casing
+      so if a user has set capitalize casing we will
+      use preserve casing which is default for the library.
+    */
+    let formatPrefs = {
+      language: 'postgresql',
+      keywordCase: preferences.keyword_case === 'capitalize' ? 'preserve' : preferences.keyword_case,
+      identifierCase: preferences.identifier_case === 'capitalize' ? 'preserve' : preferences.identifier_case,
+      dataTypeCase: preferences.data_type_case,
+      functionCase: preferences.function_case,
+      logicalOperatorNewline: preferences.logical_operator_new_line,
+      expressionWidth: preferences.expression_width,
+      linesBetweenQueries: preferences.lines_between_queries,
+      tabWidth: preferences.tab_size,
+      useTabs: !preferences.use_spaces,
+      denseOperators: !preferences.spaces_around_operators,
+      newlineBeforeSemicolon: preferences.new_line_before_semicolon
+    };
+    if(sql == '') {
+      sql = view.getValue();
+      selection = false;
+    }
+    let formattedSql = format(sql,formatPrefs);
+    if(selection) {
+      view.replaceSelection(formattedSql);
+    } else {
+      view.setValue(formattedSql);
+    }
+  };
 
   const finalCustomKeyMap = useMemo(()=>[{
-    key: 'Mod-f', run: () => {
+    key: toCodeMirrorKey(preferences.find), run: () => {
       setShowFind(prevVal => [true, false, !prevVal[2]]);
     },
     preventDefault: true,
     stopPropagation: true,
   }, {
-    key: 'Mod-Alt-f', run: () => {
+    key: toCodeMirrorKey(preferences.replace), run: () => {
       setShowFind(prevVal => [true, true, !prevVal[2]]);
     },
     preventDefault: true,
     stopPropagation: true,
   }, {
-    key: 'Mod-l', run: () => {
+    key: toCodeMirrorKey(preferences.goto_line_col), run: () => {
       setShowGoto(true);
     },
     preventDefault: true,
     stopPropagation: true,
+  }, {
+    key: toCodeMirrorKey(preferences.comment), run: () => {
+      editor.current?.execCommand('toggleComment');
+    },
+    preventDefault: true,
+    stopPropagation: true,
+  },{
+    key: toCodeMirrorKey(preferences.format_sql), run: formatSQL,
+    preventDefault: true,
+    stopPropagation: true,
+  },{
+    key: toCodeMirrorKey(preferences.autocomplete), run: startCompletion,
+    preventDefault: true,
   },
   ...customKeyMap], [customKeyMap]);
 
@@ -148,5 +198,5 @@ CodeMirror.propTypes = {
   className: CustomPropTypes.className,
   showCopyBtn: PropTypes.bool,
   customKeyMap: PropTypes.array,
-  onTextSelect:PropTypes.func
+  onTextSelect:PropTypes.func,
 };

web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx

@@ -92,36 +92,6 @@ function setPanelTitle(docker, panelId, title, qtState, dirty=false) {
 }
 
 const FIXED_PREF = {
-  find: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 70,
-      'char': 'F',
-    },
-  },
-  replace: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': true,
-    'key': {
-      'key_code': 70,
-      'char': 'F',
-    },
-  },
-  gotolinecol: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 76,
-      'char': 'L',
-    },
-  },
   indent: {
     'control': false,
     'shift': false,
@@ -140,26 +110,6 @@ const FIXED_PREF = {
       'char': 'Tab',
     },
   },
-  comment: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 191,
-      'char': '/',
-    },
-  },
-  format_sql: {
-    'control': true,
-    ctrl_is_meta: true,
-    'shift': false,
-    'alt': false,
-    'key': {
-      'key_code': 75,
-      'char': 'k',
-    },
-  },
 };
 
 export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedNodeInfo, qtPanelDocker, qtPanelId, eventBusObj}) {

web/pgadmin/tools/sqleditor/static/js/components/QueryToolConstants.js

@@ -26,7 +26,6 @@ export const QUERY_TOOL_EVENTS = {
   TRIGGER_INCLUDE_EXCLUDE_FILTER: 'TRIGGER_INCLUDE_EXCLUDE_FILTER',
   TRIGGER_REMOVE_FILTER: 'TRIGGER_REMOVE_FILTER',
   TRIGGER_SET_LIMIT: 'TRIGGER_SET_LIMIT',
-  TRIGGER_FORMAT_SQL: 'TRIGGER_FORMAT_SQL',
   TRIGGER_GRAPH_VISUALISER: 'TRIGGER_GRAPH_VISUALISER',
   TRIGGER_SELECT_ALL: 'TRIGGER_SELECT_ALL',
   TRIGGER_SAVE_QUERY_TOOL_DATA: 'TRIGGER_SAVE_QUERY_TOOL_DATA',

web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx

@@ -291,9 +291,6 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddT
     setLimit(e.target.value);
     eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_SET_LIMIT,e.target.value);
   };
-  const formatSQL=()=>{
-    eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_FORMAT_SQL);
-  };
   const toggleCase=()=>{
     eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_TOGGLE_CASE);
   };
@@ -444,12 +441,6 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddT
         callback: ()=>{clearQuery();}
       }
     },
-    {
-      shortcut: queryToolPref.format_sql,
-      options: {
-        callback: ()=>{formatSQL();}
-      }
-    },
   ], containerRef);
 
   /* Macro shortcuts */
@@ -598,7 +589,7 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddT
           onClick={()=>{eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_FIND_REPLACE, false);}}>{gettext('Find')}</PgMenuItem>
         <PgMenuItem shortcut={queryToolPref.replace}
           onClick={()=>{eventBus.fireEvent(QUERY_TOOL_EVENTS.EDITOR_FIND_REPLACE, true);}}>{gettext('Replace')}</PgMenuItem>
-        <PgMenuItem shortcut={queryToolPref.gotolinecol}
+        <PgMenuItem shortcut={queryToolPref.goto_line_col}
           onClick={()=>{executeCmd('gotoLineCol');}}>{gettext('Go to Line/Column')}</PgMenuItem>
         <PgMenuDivider />
         <PgMenuItem shortcut={queryToolPref.indent}
@@ -612,7 +603,7 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddT
         <PgMenuItem shortcut={queryToolPref.clear_query}
           onClick={clearQuery}>{gettext('Clear Query')}</PgMenuItem>
         <PgMenuDivider />
-        <PgMenuItem shortcut={queryToolPref.format_sql} onClick={formatSQL}>{gettext('Format SQL')}</PgMenuItem>
+        <PgMenuItem shortcut={queryToolPref.format_sql} onClick={()=>{executeCmd('formatSql');}}>{gettext('Format SQL')}</PgMenuItem>
       </PgMenu>
       <PgMenu
         anchorRef={filterMenuRef}