Fix custom-resource navigation (#4831)

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

src/renderer/components/+custom-resources/route-tabs.injectable.ts

@@ -7,11 +7,9 @@ import { computed, IComputedValue } from "mobx";
 import type { CustomResourceDefinition } from "../../../common/k8s-api/endpoints";
 import { crdURL, crdDefinitionsRoute } from "../../../common/routes";
 import type { TabLayoutRoute } from "../layout/tab-layout";
-import { CrdList } from "./crd-list";
-import { CrdResources } from "./crd-resources";
 import groupedCustomResourceDefinitionsInjectable from "./grouped-custom-resources.injectable";
 
-export interface CustomResourceTabLayoutRoute extends TabLayoutRoute {
+export interface CustomResourceTabLayoutRoute extends Omit<TabLayoutRoute, "component"> {
   id: string;
 }
 
@@ -29,7 +27,6 @@ function getRouteTabs({ customResourcesDefinitions }: Dependencies) {
       {
         id: "definitions",
         title: "Definitions",
-        component: CrdList,
         url: crdURL(),
         routePath: String(crdDefinitionsRoute.path),
         exact: true,
@@ -41,12 +38,10 @@ function getRouteTabs({ customResourcesDefinitions }: Dependencies) {
         id: `crd-group:${group}`,
         title: group,
         routePath: crdURL({ query: { groups: group }}),
-        component: CrdResources,
         subRoutes: definitions.map(crd => ({
           id: `crd-resource:${crd.getResourceApiBase()}`,
           title: crd.getResourceKind(),
           routePath: crd.getResourceUrl(),
-          component: CrdResources,
         })),
       });
     }

src/renderer/components/+custom-resources/route.tsx

@@ -4,40 +4,18 @@
  */
 
 import React from "react";
-import { observer } from "mobx-react";
 import { Redirect, Route, Switch } from "react-router";
 import { TabLayout } from "../layout/tab-layout";
-import { crdURL } from "../../../common/routes";
-import type { IComputedValue } from "mobx";
-import type { CustomResourceGroupTabLayoutRoute } from "./route-tabs.injectable";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import customResourcesRouteTabsInjectable from "./route-tabs.injectable";
+import { crdDefinitionsRoute, crdResourcesRoute, crdURL } from "../../../common/routes";
+import { CrdList, CrdResources } from ".";
 
-interface Dependencies {
-  routes: IComputedValue<CustomResourceGroupTabLayoutRoute[]>;
-}
-
-const NonInjectedCustomResourcesRoute = observer(({ routes }: Dependencies) => (
+export const CustomResourcesRoute = () => (
   <TabLayout>
     <Switch>
-      {
-        routes.get().map(({ id, component, routePath, exact }) => (
-          <Route
-            key={id}
-            component={component}
-            path={routePath}
-            exact={exact}
-          />
-        ))
-      }
+      <Route component={CrdList} {...crdDefinitionsRoute} exact/>
+      <Route component={CrdResources} {...crdResourcesRoute}/>
       <Redirect to={crdURL()}/>
     </Switch>
   </TabLayout>
-));
+);
 
-export const CustomResourcesRoute = withInjectables<Dependencies>(NonInjectedCustomResourcesRoute, {
-  getProps: (di, props) => ({
-    routes: di.inject(customResourcesRouteTabsInjectable),
-    ...props,
-  }),
-});