Fix open CommandDialog (#5818)

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/command-palette/command-container-cluster-frame-child-component.injectable.ts

@@ -9,15 +9,11 @@ import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-f
 
 const commandContainerClusterFrameChildComponentInjectable = getInjectable({
   id: "command-container-cluster-frame-child-component",
-
   instantiate: () => ({
     id: "command-container",
     shouldRender: computed(() => true),
     Component: CommandContainer,
   }),
-
-  causesSideEffects: true,
-
   injectionToken: clusterFrameChildComponentInjectionToken,
 });
 

src/renderer/components/command-palette/command-container-root-frame-child-component.injectable.ts

@@ -9,15 +9,11 @@ import { CommandContainer } from "./command-container";
 
 const commandContainerRootFrameChildComponentInjectable = getInjectable({
   id: "command-container-root-frame-child-component",
-
   instantiate: () => ({
     id: "command-container",
     shouldRender: computed(() => true),
     Component: CommandContainer,
   }),
-
-  causesSideEffects: true,
-
   injectionToken: rootFrameChildComponentInjectionToken,
 });
 

src/renderer/components/command-palette/command-container.module.scss

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-#command-container {
+.CommandContainer {
   position: absolute;
   top: 20px;
   left: 0;
@@ -17,7 +17,7 @@
   color: var(--settingsColor);
   transition: all 0.3s;
 
-  .Input {
+  :global(.Input) {
     label {
       caret-color: var(--blue);
       color: var(--settingsColor);
@@ -33,20 +33,20 @@
     }
   }
 
-  .hint {
+  :global(.hint) {
     padding: 8px;
     display: block;
   }
 
-  .errors {
+  :global(.errors) {
     padding: 8px;
   }
 
-  .Select__menu {
+  :global(.Select__menu) {
     position: relative;
   }
 
-  .Select__control {
+  :global(.Select__control) {
     padding: var(--padding);
     box-shadow: none;
     border-bottom: 1px solid var(--borderFaintColor);
@@ -58,17 +58,17 @@
     }
   }
 
-  .Select__menu {
+  :global(.Select__menu) {
     box-shadow: none;
     background: transparent;
     margin: 0;
   }
 
-  .Select__menu-list {
+  :global(.Select__menu-list) {
     padding: 0;
   }
 
-  .Select__option {
+  :global(.Select__option) {
     background-color: transparent;
     padding: 10px 18px;
 
@@ -78,14 +78,14 @@
       padding-left: 14px;
     }
 
-    &.Select__option--is-focused {
+    &:global(.Select__option--is-focused) {
       background-color: var(--menuSelectedOptionBgc);
       border-left: 4px solid var(--blue);
       padding-left: 14px;
     }
   }
 
-  .Select__menu-notice--no-options {
+  :global(.Select__menu-notice--no-options) {
     padding: 12px;
   }
 }

src/renderer/components/command-palette/command-container.tsx

@@ -4,7 +4,7 @@
  */
 
 
-import "./command-container.scss";
+import styles from "./command-container.module.scss";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
 import { Dialog } from "../dialog";
@@ -22,6 +22,7 @@ import matchedClusterIdInjectable from "../../navigation/matched-cluster-id.inje
 import hostedClusterIdInjectable from "../../cluster-frame-context/hosted-cluster-id.injectable";
 import isMacInjectable from "../../../common/vars/is-mac.injectable";
 import legacyOnChannelListenInjectable from "../../ipc/legacy-channel-listen.injectable";
+import { onKeyboardShortcut } from "../../utils/on-keyboard-shortcut";
 
 interface Dependencies {
   addWindowEventListener: AddWindowEventListener;
@@ -34,47 +35,38 @@ interface Dependencies {
 
 @observer
 class NonInjectedCommandContainer extends React.Component<Dependencies> {
-  private escHandler = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      event.stopPropagation();
-      this.props.commandOverlay.close();
-    }
-  };
-
-  handleCommandPalette = () => {
-    const matchedClusterId = this.props.matchedClusterId.get();
-
-    if (matchedClusterId !== undefined) {
-      broadcastMessage(`command-palette:${matchedClusterId}:open`);
-    } else {
-      this.props.commandOverlay.open(<CommandDialog />);
-    }
-  };
-
-  onKeyboardShortcut(action: () => void) {
-    return ({ key, shiftKey, ctrlKey, altKey, metaKey }: KeyboardEvent) => {
-      const ctrlOrCmd = this.props.isMac ? metaKey && !ctrlKey : !metaKey && ctrlKey;
-
-      if (key === "p" && shiftKey && ctrlOrCmd && !altKey) {
-        action();
-      }
-    };
-  }
-
   componentDidMount() {
-    const { clusterId, addWindowEventListener, commandOverlay } = this.props;
+    const { clusterId, addWindowEventListener, commandOverlay, matchedClusterId, isMac } = this.props;
 
     const action = clusterId
       ? () => commandOverlay.open(<CommandDialog />)
-      : this.handleCommandPalette;
+      : () => {
+        const matchedId = matchedClusterId.get();
+
+        if (matchedId) {
+          broadcastMessage(`command-palette:${matchedClusterId}:open`);
+        } else {
+          commandOverlay.open(<CommandDialog />);
+        }
+      };
     const ipcChannel = clusterId
       ? `command-palette:${clusterId}:open`
       : "command-palette:open";
 
     disposeOnUnmount(this, [
       this.props.legacyOnChannelListen(ipcChannel, action),
-      addWindowEventListener("keydown", this.onKeyboardShortcut(action)),
-      addWindowEventListener("keyup", this.escHandler, true),
+      addWindowEventListener("keydown", onKeyboardShortcut(
+        isMac
+          ? "Shift+Cmd+P"
+          : "Shift+Ctrl+P",
+        action,
+      )),
+      addWindowEventListener("keydown", (event) => {
+        if (event.code === "Escape") {
+          event.stopPropagation();
+          this.props.commandOverlay.close();
+        }
+      }),
     ]);
   }
 
@@ -84,11 +76,11 @@ class NonInjectedCommandContainer extends React.Component<Dependencies> {
     return (
       <Dialog
         isOpen={commandOverlay.isOpen}
-        animated={true}
+        animated={false}
         onClose={commandOverlay.close}
         modal={false}
       >
-        <div id="command-container">
+        <div className={styles.CommandContainer} data-testid="command-container">
           {commandOverlay.component}
         </div>
       </Dialog>

src/renderer/components/command-palette/command-overlay.injectable.ts

@@ -4,7 +4,7 @@
  */
 
 import { getInjectable } from "@ogre-tools/injectable";
-import { observable } from "mobx";
+import { action, observable } from "mobx";
 import React from "react";
 
 export class CommandOverlay {
@@ -14,17 +14,17 @@ export class CommandOverlay {
     return Boolean(this.#component.get());
   }
 
-  open = (component: React.ReactElement) => {
+  open = action((component: React.ReactElement) => {
     if (!React.isValidElement(component)) {
       throw new TypeError("CommandOverlay.open must be passed a valid ReactElement");
     }
 
     this.#component.set(component);
-  };
+  });
 
-  close = () => {
+  close = action(() => {
     this.#component.set(null);
-  };
+  });
 
   get component(): React.ReactElement | null {
     return this.#component.get();

src/renderer/components/command-palette/registered-commands/get-entity-setting-commands.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { RegisteredEntitySetting } from "../../../../extensions/registries";
+import { EntitySettingRegistry } from "../../../../extensions/registries";
+
+export type GetEntitySettingCommands = (kind: string, apiVersion: string, source?: string) => RegisteredEntitySetting[];
+
+const getEntitySettingCommandsInjectable = getInjectable({
+  id: "get-entity-setting-commands",
+  instantiate: (): GetEntitySettingCommands => {
+    const reg = EntitySettingRegistry.getInstance();
+
+    return (kind, apiVersion, source) => reg.getItemsForKind(kind, apiVersion, source);
+  },
+  causesSideEffects: true,
+});
+
+export default getEntitySettingCommandsInjectable;

src/renderer/components/command-palette/registered-commands/internal-commands.injectable.tsx

@@ -5,7 +5,6 @@
 
 import React from "react";
 import type { RegisteredEntitySetting } from "../../../../extensions/registries";
-import { EntitySettingRegistry } from "../../../../extensions/registries";
 import { HotbarAddCommand } from "../../hotbar/hotbar-add-command";
 import { HotbarRemoveCommand } from "../../hotbar/hotbar-remove-command";
 import { HotbarSwitchCommand } from "../../hotbar/hotbar-switch-command";
@@ -38,6 +37,7 @@ import navigateToJobsInjectable from "../../../../common/front-end-routing/route
 import navigateToCronJobsInjectable from "../../../../common/front-end-routing/routes/cluster/workloads/cron-jobs/navigate-to-cron-jobs.injectable";
 import navigateToCustomResourcesInjectable from "../../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable";
 import navigateToEntitySettingsInjectable from "../../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
+import getEntitySettingCommandsInjectable from "./get-entity-setting-commands.injectable";
 
 export function isKubernetesClusterActive(context: CommandContext): boolean {
   return context.entity?.kind === "KubernetesCluster";
@@ -247,9 +247,7 @@ const internalCommandsInjectable = getInjectable({
 
   instantiate: (di) => getInternalCommands({
     openCommandDialog: di.inject(commandOverlayInjectable).open,
-    getEntitySettingItems: EntitySettingRegistry
-      .getInstance()
-      .getItemsForKind,
+    getEntitySettingItems: di.inject(getEntitySettingCommandsInjectable),
     createTerminalTab: di.inject(createTerminalTabInjectable),
     navigateToPreferences: di.inject(navigateToPreferencesInjectable),
     navigateToHelmCharts: di.inject(navigateToHelmChartsInjectable),