Remove circular imports around the command pallet (#3544)

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

@@ -21,32 +21,15 @@
 
 
 import "./command-container.scss";
-import { action, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { Dialog } from "../dialog";
-import { EventEmitter } from "../../../common/event-emitter";
 import { ipcRendererOn } from "../../../common/ipc";
 import { CommandDialog } from "./command-dialog";
 import type { ClusterId } from "../../../common/cluster-types";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { CommandRegistration, CommandRegistry } from "../../../extensions/registries/command-registry";
-
-export type CommandDialogEvent = {
-  component: React.ReactElement
-};
-
-const commandDialogBus = new EventEmitter<[CommandDialogEvent]>();
-
-export class CommandOverlay {
-  static open(component: React.ReactElement) {
-    commandDialogBus.emit({ component });
-  }
-
-  static close() {
-    commandDialogBus.emit({ component: null });
-  }
-}
+import { CommandOverlay } from "./command-overlay";
 
 export interface CommandContainerProps {
   clusterId?: ClusterId;
@@ -54,25 +37,13 @@ export interface CommandContainerProps {
 
 @observer
 export class CommandContainer extends React.Component<CommandContainerProps> {
-  @observable.ref commandComponent: React.ReactNode;
-
-  constructor(props: CommandContainerProps) {
-    super(props);
-    makeObservable(this);
-  }
-
   private escHandler(event: KeyboardEvent) {
     if (event.key === "Escape") {
       event.stopPropagation();
-      this.closeDialog();
+      CommandOverlay.close();
     }
   }
 
-  @action
-  private closeDialog() {
-    this.commandComponent = null;
-  }
-
   private findCommandById(commandId: string) {
     return CommandRegistry.getInstance().getItems().find((command) => command.id === commandId);
   }
@@ -98,16 +69,18 @@ export class CommandContainer extends React.Component<CommandContainerProps> {
       });
     }
     window.addEventListener("keyup", (e) => this.escHandler(e), true);
-    commandDialogBus.addListener((event) => {
-      this.commandComponent = event.component;
-    });
   }
 
   render() {
     return (
-      <Dialog isOpen={!!this.commandComponent} animated={true} onClose={() => this.commandComponent = null} modal={false}>
+      <Dialog
+        isOpen={CommandOverlay.isOpen}
+        animated={true}
+        onClose={CommandOverlay.close}
+        modal={false}
+      >
         <div id="command-container">
-          {this.commandComponent}
+          {CommandOverlay.component}
         </div>
       </Dialog>
     );

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

@@ -25,7 +25,7 @@ import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { CommandRegistry } from "../../../extensions/registries/command-registry";
-import { CommandOverlay } from "./command-container";
+import { CommandOverlay } from "./command-overlay";
 import { broadcastMessage } from "../../../common/ipc";
 import { navigate } from "../../navigation";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";

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

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { observable } from "mobx";
+import React from "react";
+
+export class CommandOverlay {
+  static #component = observable.box<React.ReactElement | null>(null, { deep: false });
+
+  static get isOpen(): boolean {
+    return Boolean(CommandOverlay.#component.get());
+  }
+
+  static open(component: React.ReactElement) {
+    if (!React.isValidElement(component)) {
+      throw new TypeError("CommandOverlay.open must be passed a valid ReactElement");
+    }
+
+    CommandOverlay.#component.set(component);
+  }
+
+  static close() {
+    CommandOverlay.#component.set(null);
+  }
+
+  static get component(): React.ReactElement | null {
+    return CommandOverlay.#component.get();
+  }
+}

src/renderer/components/command-palette/index.ts

@@ -21,3 +21,4 @@
 
 export * from "./command-container";
 export * from "./command-dialog";
+export * from "./command-overlay";