Improving Hotkeys for query input

Graylog2 · Jan 13, 2025 · b811657 · b811657
1 parent a0f8ece
commit b811657
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/graylog2-web-interface/src/components/hotkeys/HotkeyCollectionSection.tsx b/graylog2-web-interface/src/components/hotkeys/HotkeyCollectionSection.tsx
@@ -53,6 +53,9 @@ const KeySeparator = styled.div`
 const keyMapper = (key: string, isMacOS: boolean) => {
   const keyMap = {
     mod: isMacOS ? '⌘' : 'Ctrl',
+    alt: isMacOS ? '⌥' : 'Alt',
+    ctrl: isMacOS ? '⌃' : 'Ctrl',
+    meta: isMacOS ? '⌘' : 'Win',
   };
 
   return keyMap[key] || key;

diff --git a/graylog2-web-interface/src/contexts/HotkeysProvider.tsx b/graylog2-web-interface/src/contexts/HotkeysProvider.tsx
@@ -25,6 +25,7 @@ import Immutable from 'immutable';
 
 import type { ScopeName, ActiveHotkeys, HotkeyCollections, Options } from 'contexts/HotkeysContext';
 import HotkeysContext from 'contexts/HotkeysContext';
+import { isMacOS } from 'util/OSUtils';
 
 const viewActions = {
   undo: { keys: 'mod+shift+z', description: 'Undo last action' },
@@ -68,7 +69,7 @@ export const hotKeysCollections: HotkeyCollections = {
       'submit-search': { keys: 'return', description: 'Execute the search' },
       'insert-newline': { keys: 'shift+return', description: 'Create a new line' },
       'create-search-filter': { keys: 'alt+return', description: 'Create search filter based on current query' },
-      'show-suggestions': { keys: 'alt+space', description: 'Show suggestions, displays query history when input is empty' },
+      'show-suggestions': { keys: isMacOS() ? 'alt+space' : 'mod+space', description: 'Show suggestions, displays query history when input is empty' },
       'show-history': { keys: 'alt+shift+h', description: 'View your search query history' },
     },
   },

diff --git a/graylog2-web-interface/src/util/OSUtils.ts b/graylog2-web-interface/src/util/OSUtils.ts
@@ -16,4 +16,4 @@
  */
 
 // eslint-disable-next-line import/prefer-default-export
-export const isMacOS = () => navigator.userAgent.indexOf('Mac OS X') !== -1;
+export const isMacOS = () => /Macintosh|MacIntel/.test(navigator.userAgent);
diff --git a/graylog2-web-interface/src/views/components/searchbar/queryinput/QueryInput.tsx b/graylog2-web-interface/src/views/components/searchbar/queryinput/QueryInput.tsx
@@ -255,7 +255,7 @@ const QueryInput = React.forwardRef<Editor, Props>(({
     },
     {
       name: 'Show completions',
-      bindKey: { win: 'Alt-Space', mac: 'Alt-Space' },
+      bindKey: { win: 'Ctrl-Space', mac: 'Alt-Space' },
       exec: async (editor: Editor) => {
         if (editor.getValue()) {
           startAutocomplete(editor);