Fix navigation issues, delete modal not showing, and observability

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

src/renderer/components/app.tsx

@@ -75,6 +75,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 {
@@ -220,6 +221,7 @@ export class App extends React.Component {
               <Route component={Apps} {...routes.appsRoute}/>
               {this.renderExtensionTabLayoutRoutes()}
               {this.renderExtensionRoutes()}
+              <Redirect exact from="/cluster" to={this.startUrl}/>
               <Redirect exact from="/" to={this.startUrl}/>
               <Route component={NotFound}/>
             </Switch>
@@ -233,6 +235,7 @@ export class App extends React.Component {
           <ReplicaSetScaleDialog/>
           <CronJobTriggerDialog/>
           <PortForwardDialog/>
+          <DeleteClusterDialog/>
           <CommandContainer clusterId={App.clusterId}/>
         </ErrorBoundary>
       </Router>

src/renderer/components/layout/sidebar.tsx

@@ -42,9 +42,11 @@ import * as routes from "../../../common/routes";
 import { Config } from "../+config";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
-import { observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import type { CatalogEntityContextMenuContext } from "../../../common/catalog";
 import { HotbarStore } from "../../../common/hotbar-store";
+import { broadcastMessage } from "../../../common/ipc";
+import { IpcRendererNavigationEvents } from "../../navigation/events";
 
 interface Props {
   className?: string;
@@ -55,9 +57,22 @@ export class Sidebar extends React.Component<Props> {
   static displayName = "Sidebar";
   @observable private contextMenu: CatalogEntityContextMenuContext = {
     menuItems: [],
-    navigate: (url: string) => navigate(url),
+    navigate: (pathname: string) => {
+      if (pathname.startsWith("/cluster/")) {
+        // assume in-frame navigation
+        // FIXME: this is not entirely correct because of extension navigation rules
+        navigate(pathname);
+      } else {
+        broadcastMessage(IpcRendererNavigationEvents.NAVIGATE_IN_APP, pathname);
+      }
+    },
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     crdStore.reloadAll();
   }

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
   });
 }