Add context menu into sidebar (#4044)

src/common/catalog-entities/kubernetes-cluster.ts

@@ -23,10 +23,11 @@ import { catalogCategoryRegistry } from "../catalog/catalog-category-registry";
 import { CatalogEntity, CatalogEntityActionContext, CatalogEntityContextMenuContext, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog";
 import { clusterActivateHandler, clusterDisconnectHandler } from "../cluster-ipc";
 import { ClusterStore } from "../cluster-store";
-import { requestMain } from "../ipc";
+import { broadcastMessage, requestMain } from "../ipc";
 import { CatalogCategory, CatalogCategorySpec } from "../catalog";
 import { app } from "electron";
 import type { CatalogEntitySpec } from "../catalog/catalog-entity";
+import { IpcRendererNavigationEvents } from "../../renderer/navigation/events";
 
 export interface KubernetesClusterPrometheusMetrics {
   address?: {
@@ -114,7 +115,10 @@ export class KubernetesCluster extends CatalogEntity<KubernetesClusterMetadata,
       context.menuItems.push({
         title: "Settings",
         icon: "edit",
-        onClick: () => context.navigate(`/entity/${this.metadata.uid}/settings`)
+        onClick: () => broadcastMessage(
+          IpcRendererNavigationEvents.NAVIGATE_IN_APP,
+          `/entity/${this.metadata.uid}/settings`,
+        ),
       });
     }
 

src/common/catalog/catalog-entity.ts

@@ -172,7 +172,10 @@ export interface CatalogEntitySettingsMenu {
 }
 
 export interface CatalogEntityContextMenuContext {
-  navigate: (url: string) => void;
+  /**
+   * Navigate to the specified pathname
+   */
+  navigate: (pathname: string) => void;
   menuItems: CatalogEntityContextMenu[];
 }
 

src/common/routes/cluster.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const clusterRoute: RouteProps = {
-  path: "/cluster"
+  path: "/overview"
 };
 
 export const clusterURL = buildURL(clusterRoute.path);

src/renderer/components/app.tsx

@@ -72,6 +72,7 @@ import type { ClusterId } from "../../common/cluster-types";
 import { watchHistoryState } from "../remote-helpers/history-updater";
 import { unmountComponentAtNode } from "react-dom";
 import { PortForwardDialog } from "../port-forward";
+import { DeleteClusterDialog } from "./delete-cluster-dialog";
 
 @observer
 export class App extends React.Component {
@@ -230,6 +231,7 @@ export class App extends React.Component {
           <ReplicaSetScaleDialog/>
           <CronJobTriggerDialog/>
           <PortForwardDialog/>
+          <DeleteClusterDialog/>
           <CommandContainer clusterId={App.clusterId}/>
         </ErrorBoundary>
       </Router>

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -44,20 +44,16 @@ interface Props extends DOMAttributes<HTMLElement> {
 
 @observer
 export class HotbarEntityIcon extends React.Component<Props> {
-  @observable private contextMenu: CatalogEntityContextMenuContext;
+  @observable private contextMenu: CatalogEntityContextMenuContext = {
+    menuItems: [],
+    navigate: (url: string) => navigate(url),
+  };
 
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
-  componentDidMount() {
-    this.contextMenu = {
-      menuItems: [],
-      navigate: (url: string) => navigate(url),
-    };
-  }
-
   get kindIcon() {
     const className = "badge";
     const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);

src/renderer/components/layout/sidebar.tsx

@@ -42,6 +42,9 @@ import * as routes from "../../../common/routes";
 import { Config } from "../+config";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
+import { makeObservable, observable } from "mobx";
+import type { CatalogEntityContextMenuContext } from "../../../common/catalog";
+import { HotbarStore } from "../../../common/hotbar-store";
 
 interface Props {
   className?: string;
@@ -50,6 +53,15 @@ interface Props {
 @observer
 export class Sidebar extends React.Component<Props> {
   static displayName = "Sidebar";
+  @observable private contextMenu: CatalogEntityContextMenuContext = {
+    menuItems: [],
+    navigate,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
 
   async componentDidMount() {
     crdStore.reloadAll();
@@ -194,6 +206,20 @@ export class Sidebar extends React.Component<Props> {
           src={spec.icon?.src}
           className="mr-5"
           onClick={() => navigate("/")}
+          menuItems={this.contextMenu.menuItems}
+          onMenuOpen={() => {
+            const hotbarStore = HotbarStore.getInstance();
+            const isAddedToActive = HotbarStore.getInstance().isAddedToActive(this.clusterEntity);
+            const title = isAddedToActive
+              ? "Remove from Hotbar"
+              : "Add to Hotbar";
+            const onClick = isAddedToActive
+              ? () => hotbarStore.removeFromHotbar(metadata.uid)
+              : () => hotbarStore.addToHotbar(this.clusterEntity);
+
+            this.contextMenu.menuItems = [{ title, onClick }];
+            this.clusterEntity.onContextMenuOpen(this.contextMenu);
+          }}
         />
         <div className={styles.clusterName}>
           {metadata.name}

src/renderer/navigation/events.ts

@@ -63,6 +63,7 @@ function bindClusterManagerRouteEvents() {
   ipcRendererOn(IpcRendererNavigationEvents.NAVIGATE_IN_APP, (event, url: string) => {
     logger.info(`[IPC]: navigate to ${url}`, { currentLocation: location.href });
     navigate(url);
+    window.focus(); // make sure that the main frame is focused
   });
 }