From a98a87292963eff0cc468923507db0ce744fb56d Mon Sep 17 00:00:00 2001
From: Kristina <kristina.durivage@grafana.com>
Date: Mon, 2 May 2022 08:22:33 -0500
Subject: [PATCH] Command Palette - use same focus overlay as modals, override
 monaco keybinding for prometheus (#48391)

* Command Palette - use same focus overlay as modals, override whatever captures command K in monaco

* Pass the key event out of monaco
---
 public/app/features/commandPalette/CommandPalette.tsx      | 7 +++++--
 .../components/monaco-query-field/MonacoQueryField.tsx     | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index fe17e292fb8..3b36c77c9af 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { FocusScope } from '@react-aria/focus';
 import {
   KBarAnimator,
   KBarPortal,
@@ -78,8 +79,10 @@ export const CommandPalette = () => {
     <KBarPortal>
       <KBarPositioner className={styles.positioner}>
         <KBarAnimator className={styles.animator}>
-          <KBarSearch className={styles.search} />
-          <RenderResults />
+          <FocusScope contain>
+            <KBarSearch className={styles.search} />
+            <RenderResults />
+          </FocusScope>
         </KBarAnimator>
       </KBarPositioner>
     </KBarPortal>
diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
index 7ad26256ea9..c7a1da136f7 100644
--- a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
@@ -199,6 +199,13 @@ const MonacoQueryField = (props: Props) => {
           editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => {
             onRunQueryRef.current(editor.getValue());
           });
+
+          /* Something in this configuration of monaco doesn't bubble up [mod]+K, which the 
+          command palette uses. Pass the event out of monaco manually
+          */
+          editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, function () {
+            global.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+          });
         }}
       />
     </div>