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

@@ -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>

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>