fix: Fix command palette shortcuts

assets/src/components/commandpalette/CommandHotkeys.tsx

@@ -1,13 +1,18 @@
-import { useHotkeys } from '@saas-ui/use-hotkeys'
-
-import { CommandWithHotkeys } from './commands'
+import { UseHotkeysOptions, useHotkeys } from '@saas-ui/use-hotkeys'
+import merge from 'lodash/merge'
 
 export default function CommandHotkeys({
-  command,
+  hotkeys,
+  callback,
+  options,
+  deps,
 }: {
-  command: CommandWithHotkeys
+  hotkeys: string[] | string
+  callback: () => void
+  options?: UseHotkeysOptions
+  deps?: any[]
 }) {
-  useHotkeys(command.hotkeys, command.callback, command.options, command.deps)
+  useHotkeys(hotkeys, callback, merge({ targetElement: window }, options), deps)
 
   return undefined
 }

assets/src/components/commandpalette/CommandPalette.tsx

@@ -44,10 +44,11 @@ export default function CommandPalette({
           </span>
         </Command.Empty>
         {commands.map((group, i) => (
-          <>
+          <div key={i}>
             <Command.Group title={group.title}>
               {group.commands.map((command) => (
                 <Command.Item
+                  key={`${command.prefix}${command.label}`}
                   disabled={command.disabled}
                   onSelect={() => {
                     command.callback()
@@ -69,7 +70,7 @@ export default function CommandPalette({
               ))}
             </Command.Group>
             {i < commands.length - 1 && <Command.Separator />}
-          </>
+          </div>
         ))}
       </Command.List>
     </>

assets/src/components/commandpalette/CommandPaletteLauncher.tsx

@@ -2,7 +2,6 @@ import { Chip, SearchIcon } from '@pluralsh/design-system'
 import { useCallback, useState } from 'react'
 import { usePlatform } from 'components/hooks/usePlatform'
 import styled, { useTheme } from 'styled-components'
-
 import { useHotkeys } from '@saas-ui/use-hotkeys'
 
 import CommandPaletteDialog from './CommandPaletteDialog'
@@ -74,8 +73,14 @@ export default function CommandPaletteLauncher() {
         open={open}
         setOpen={setOpen}
       />
-      {commands.map((command) => (
-        <CommandHotkeys command={command} />
+      {commands.map(({ hotkeys, callback, options, deps }, i) => (
+        <CommandHotkeys
+          key={i}
+          hotkeys={hotkeys}
+          callback={callback}
+          options={options}
+          deps={deps}
+        />
       ))}
     </>
   )

assets/src/components/commandpalette/CommandPaletteShortcuts.tsx

@@ -23,6 +23,7 @@ export default function CommandPaletteShortcuts({
     >
       {chunks.map((chunk, i) => (
         <WrapWithIf
+          key={i}
           condition={!['or', 'then'].includes(chunk.toLowerCase())}
           wrapper={
             <div

assets/src/components/commandpalette/commands.ts

@@ -214,7 +214,6 @@ export function useCommands(): CommandGroup[] {
             prefix: 'CD > Clusters >',
             label: 'Pods',
             icon: PodContainerIcon,
-            // FIXME: Fix issue with callback.
             callback: () => {
               if (cluster?.id)
                 navigate(
@@ -259,7 +258,8 @@ export function useCommands(): CommandGroup[] {
             label: 'Open docs',
             icon: DocumentIcon,
             rightIcon: ArrowTopRightIcon,
-            callback: () => window.open('https://docs.plural.sh', '_blank'),
+            callback: () =>
+              window.open('https://docs.plural.sh', '_blank', 'noopener'),
             hotkeys: ['shift D'],
           },
           {