Fix navigation issues, delete modal not showing, and observability

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

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/apps.ts

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

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: "/cluster/overview"
 };
 
 export const clusterURL = buildURL(clusterRoute.path);

src/common/routes/config-maps.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const configMapsRoute: RouteProps = {
-  path: "/configmaps"
+  path: "/cluster/configmaps"
 };
 
 export interface ConfigMapsRouteParams {

src/common/routes/crd.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const crdRoute: RouteProps = {
-  path: "/crd"
+  path: "/cluster/crd"
 };
 
 export const crdDefinitionsRoute: RouteProps = {

src/common/routes/endpoints.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const endpointRoute: RouteProps = {
-  path: "/endpoints"
+  path: "/cluster/endpoints"
 };
 
 export interface EndpointRouteParams {

src/common/routes/events.ts

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

src/common/routes/hpa.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const hpaRoute: RouteProps = {
-  path: "/hpa"
+  path: "/cluster/hpa"
 };
 
 export interface HpaRouteParams {

src/common/routes/ingresses.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const ingressRoute: RouteProps = {
-  path: "/ingresses"
+  path: "/cluster/ingresses"
 };
 
 export interface IngressRouteParams {

src/common/routes/limit-ranges.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const limitRangesRoute: RouteProps = {
-  path: "/limitranges"
+  path: "/cluster/limitranges"
 };
 
 export interface LimitRangeRouteParams {

src/common/routes/namespaces.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const namespacesRoute: RouteProps = {
-  path: "/namespaces"
+  path: "/cluster/namespaces"
 };
 
 export interface NamespacesRouteParams {

src/common/routes/network-policies.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const networkPoliciesRoute: RouteProps = {
-  path: "/network-policies"
+  path: "/cluster/network-policies"
 };
 
 export interface NetworkPoliciesRouteParams {

src/common/routes/nodes.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const nodesRoute: RouteProps = {
-  path: "/nodes"
+  path: "/cluster/nodes"
 };
 
 export interface NodesRouteParams {

src/common/routes/pod-disruption-budgets.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const pdbRoute: RouteProps = {
-  path: "/poddisruptionbudgets"
+  path: "/cluster/poddisruptionbudgets"
 };
 
 export interface PodDisruptionBudgetsRouteParams {

src/common/routes/port-forwards.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const portForwardsRoute: RouteProps = {
-  path: "/port-forwards"
+  path: "/cluster/port-forwards"
 };
 
 export interface PortForwardsRouteParams {

src/common/routes/resource-quotas.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const resourceQuotaRoute: RouteProps = {
-  path: "/resourcequotas"
+  path: "/cluster/resourcequotas"
 };
 
 export interface ResourceQuotaRouteParams {

src/common/routes/secrets.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const secretsRoute: RouteProps = {
-  path: "/secrets"
+  path: "/cluster/secrets"
 };
 
 export interface SecretsRouteParams {

src/common/routes/services.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const servicesRoute: RouteProps = {
-  path: "/services"
+  path: "/cluster/services"
 };
 
 export interface ServicesRouteParams {

src/common/routes/storage-classes.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const storageClassesRoute: RouteProps = {
-  path: "/storage-classes"
+  path: "/cluster/storage-classes"
 };
 
 export interface StorageClassesRouteParams {

src/common/routes/user-management.ts

@@ -24,22 +24,22 @@ import { buildURL, URLParams } from "../utils/buildUrl";
 
 // Routes
 export const serviceAccountsRoute: RouteProps = {
-  path: "/service-accounts"
+  path: "/cluster/service-accounts"
 };
 export const podSecurityPoliciesRoute: RouteProps = {
-  path: "/pod-security-policies"
+  path: "/cluster/pod-security-policies"
 };
 export const rolesRoute: RouteProps = {
-  path: "/roles"
+  path: "/cluster/roles"
 };
 export const clusterRolesRoute: RouteProps = {
-  path: "/cluster-roles"
+  path: "/cluster/cluster-roles"
 };
 export const roleBindingsRoute: RouteProps = {
-  path: "/role-bindings"
+  path: "/cluster/role-bindings"
 };
 export const clusterRoleBindingsRoute: RouteProps = {
-  path: "/cluster-role-bindings"
+  path: "/cluster/cluster-role-bindings"
 };
 
 export const usersManagementRoute: RouteProps = {

src/common/routes/volume-claims.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const volumeClaimsRoute: RouteProps = {
-  path: "/persistent-volume-claims"
+  path: "/cluster/persistent-volume-claims"
 };
 
 export interface VolumeClaimsRouteParams {

src/common/routes/volumes.ts

@@ -23,7 +23,7 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../utils/buildUrl";
 
 export const volumesRoute: RouteProps = {
-  path: "/persistent-volumes"
+  path: "/cluster/persistent-volumes"
 };
 
 export interface VolumesRouteParams {

src/common/routes/workloads.ts

@@ -25,28 +25,28 @@ import type { KubeResource } from "../rbac";
 
 // Routes
 export const overviewRoute: RouteProps = {
-  path: "/workloads"
+  path: "/cluster/workloads"
 };
 export const podsRoute: RouteProps = {
-  path: "/pods"
+  path: "/cluster/pods"
 };
 export const deploymentsRoute: RouteProps = {
-  path: "/deployments"
+  path: "/cluster/deployments"
 };
 export const daemonSetsRoute: RouteProps = {
-  path: "/daemonsets"
+  path: "/cluster/daemonsets"
 };
 export const statefulSetsRoute: RouteProps = {
-  path: "/statefulsets"
+  path: "/cluster/statefulsets"
 };
 export const replicaSetsRoute: RouteProps = {
-  path: "/replicasets"
+  path: "/cluster/replicasets"
 };
 export const jobsRoute: RouteProps = {
-  path: "/jobs"
+  path: "/cluster/jobs"
 };
 export const cronJobsRoute: RouteProps = {
-  path: "/cronjobs"
+  path: "/cluster/cronjobs"
 };
 
 export const workloadsRoute: RouteProps = {

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