Fix finding the current route component

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

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -25,6 +25,10 @@
     grid-area: menu;
   }
 
+  .error {
+    z-index: 1;
+  }
+
   #lens-views {
     position: absolute;
     left: 0;

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -21,12 +21,14 @@ import { buildURL } from "../../../common/utils/buildUrl";
 import type { StorageLayer } from "../../utils";
 import type { WatchForGeneralEntityNavigation } from "../../api/helpers/watch-for-general-entity-navigation.injectable";
 import watchForGeneralEntityNavigationInjectable from "../../api/helpers/watch-for-general-entity-navigation.injectable";
+import currentPathInjectable from "../../routes/current-path.injectable";
 
 interface Dependencies {
   catalogPreviousActiveTabStorage: StorageLayer<string | null>;
   currentRouteComponent: IComputedValue<React.ElementType | undefined>;
   welcomeUrl: string;
   watchForGeneralEntityNavigation: WatchForGeneralEntityNavigation;
+  currentPath: IComputedValue<string>;
 }
 
 @observer
@@ -37,19 +39,40 @@ class NonInjectedClusterManager extends React.Component<Dependencies> {
     ]);
   }
 
-  render() {
+  renderMainComponent() {
     const Component = this.props.currentRouteComponent.get();
 
-    if (!Component) {
+    if (Component) {
+      return <Component />;
+    }
+
+    const currentPath = this.props.currentPath.get();
+
+    if (currentPath !== this.props.welcomeUrl) {
       return <Redirect exact to={this.props.welcomeUrl} />;
     }
 
+    return (
+      <div className="error">
+        <h2>ERROR!!</h2>
+        <p>
+          No matching route for the current path:
+          {" "}
+          <code>{currentPath}</code>
+          {" "}
+          which is the welcomeUrl. This is a bug.
+        </p>
+      </div>
+    );
+  }
+
+  render() {
     return (
       <div className="ClusterManager">
         <TopBar />
         <main>
           <div id="lens-views" />
-          <Component />
+          {this.renderMainComponent()}
         </main>
         <HotbarMenu />
         <StatusBar />
@@ -65,5 +88,6 @@ export const ClusterManager = withInjectables<Dependencies>(NonInjectedClusterMa
     currentRouteComponent: di.inject(currentRouteComponentInjectable),
     welcomeUrl: buildURL(di.inject(welcomeRouteInjectable).path),
     watchForGeneralEntityNavigation: di.inject(watchForGeneralEntityNavigationInjectable),
+    currentPath: di.inject(currentPathInjectable),
   }),
 });

src/renderer/routes/current-route-component.injectable.ts

@@ -4,7 +4,6 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
-import { matches } from "lodash/fp";
 import { computed } from "mobx";
 import currentRouteInjectable from "./current-route.injectable";
 import { routeSpecificComponentInjectionToken } from "./route-specific-component-injection-token";
@@ -24,11 +23,13 @@ const currentRouteComponentInjectable = getInjectable({
         return undefined;
       }
 
-      const routeSpecificComponent = routeComponents
+      return routeComponents
         .get()
-        .find(matches({ route: currentRoute }));
-
-      return routeSpecificComponent?.Component;
+        .find(({ route }) => (
+          route.path === currentRoute.path
+          && route.clusterFrame === currentRoute.clusterFrame
+        ))
+        ?.Component;
     });
   },
 });