reverting splitted params for catalog's page route to "/catalog/:group?/:kind?"

Signed-off-by: Roman <ixrock@gmail.com>

src/common/catalog/catalog-category-registry.ts

@@ -51,10 +51,6 @@ export class CatalogCategoryRegistry {
     return Array.from(this.categories);
   }
 
-  getById(id: string): CatalogCategory{
-    return this.items.find(category => category.getId() === id);
-  }
-
   getForGroupKind<T extends CatalogCategory>(group: string, kind: string): T | undefined {
     return this.groupKinds.get(group)?.get(kind) as T;
   }

src/common/catalog/catalog-entity.ts

@@ -56,13 +56,14 @@ export abstract class CatalogCategory extends EventEmitter {
   };
   abstract spec: CatalogCategorySpec;
 
-  // Should be URL-compatible, otherwise "Uncaught TypeError: Expected "categoryId" to match "[^\/#\?]+?""
+  static parseId(id = ""): { group?: string, kind?: string } {
-  static getId(group: string, kind: string): string {
+    const [group, kind] = id.split("/") ?? [];
-    return `${group}--${kind}`;
+
+    return { group, kind };
   }
 
   public getId(): string {
-    return `${this.spec.group}--${this.spec.names.kind}`;
+    return `${this.spec.group}/${this.spec.names.kind}`;
   }
 }
 

src/renderer/components/+catalog/catalog.route.ts

@@ -23,10 +23,11 @@ import type { RouteProps } from "react-router";
 import { buildURL } from "../../../common/utils/buildUrl";
 
 export interface ICatalogViewRouteParam {
-  categoryId?: string;
+  group?: string;
+  kind?: string;
 }
 export const catalogRoute: RouteProps = {
-  path: "/catalog/:categoryId?" // `categoryId` == `${group}--${kind}`
+  path: "/catalog/:group?/:kind?"
 };
 
 export const catalogURL = buildURL<ICatalogViewRouteParam>(catalogRoute.path);

src/renderer/components/+catalog/catalog.tsx

@@ -23,9 +23,9 @@ import "./catalog.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list";
-import { computed, makeObservable, reaction, when } from "mobx";
+import { computed, makeObservable, reaction } from "mobx";
 import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
-import { navigate, navigation } from "../../navigation";
+import { navigate } from "../../navigation";
 import { kebabCase } from "lodash";
 import { PageLayout } from "../layout/page-layout";
 import { MenuActions, MenuItem } from "../menu";
@@ -64,12 +64,14 @@ export class Catalog extends React.Component<Props> {
     navigate: (url: string) => navigate(url),
   };
 
-  get categoryId(): string | undefined {
+  get routeParams(): ICatalogViewRouteParam {
-    return this.props.match.params?.categoryId;
+    return this.props.match.params ?? {};
   }
 
-  get activeCategory(): CatalogCategory {
+  get activeCategory(): CatalogCategory | undefined {
-    return catalogCategoryRegistry.getById(this.props.match.params?.categoryId);
+    const { group, kind } = this.routeParams;
+
+    return catalogCategoryRegistry.getForGroupKind(group, kind);
   }
 
   @computed get categories(): CatalogCategory[] {
@@ -86,17 +88,6 @@ export class Catalog extends React.Component<Props> {
       reaction(() => this.entities, items => this.catalogEntityStore.loadItems(items), {
         fireImmediately: true,
       }),
-
-      // select initial category if nothing yet selected (via url-params)
-      when(() => this.categories.length > 0, () => {
-        const { categoryId } = this;
-
-        if (!categoryId) {
-          navigation.replace(
-            catalogURL({ params: { categoryId } })
-          );
-        }
-      }),
     ]);
   }
 
@@ -125,13 +116,23 @@ export class Catalog extends React.Component<Props> {
     }
   }
 
+  onTabChange = (categoryId: string) => {
+    const { group, kind } = CatalogCategory.parseId(categoryId);
+
+    if (group && kind) {
+      navigate(catalogURL({ params: { group, kind } }));
+    } else {
+      navigate(catalogURL());
+    }
+  };
+
   renderNavigation() {
     return (
       <Tabs
         className="flex column"
         scrollable={false}
-        value={this.categoryId}
+        value={this.activeCategory?.getId()}
-        onChange={(categoryId: string) => navigate(catalogURL({ params: { categoryId } }))}
+        onChange={this.onTabChange}
       >
         <div className="sidebarHeader">Catalog</div>
         <div className="sidebarTabs">

src/renderer/protocol-handler/app-handlers.ts

@@ -30,7 +30,6 @@ import { entitySettingsURL } from "../components/+entity-settings";
 import { catalogEntityRegistry } from "../api/catalog-entity-registry";
 import { ClusterStore } from "../../common/cluster-store";
 import { EXTENSION_NAME_MATCH, EXTENSION_PUBLISHER_MATCH, LensProtocolRouter } from "../../common/protocol-handler";
-import { CatalogCategory } from "../../common/catalog";
 
 export function bindProtocolAddRouteHandlers() {
   LensProtocolRouterRenderer
@@ -47,7 +46,7 @@ export function bindProtocolAddRouteHandlers() {
     .addInternalHandler("/landing/view/:group/:kind", ({ pathname: { group, kind } }) => {
       navigate(catalogURL({
         params: {
-          categoryId: CatalogCategory.getId(group, kind),
+          group, kind
         }
       }));
     })