diff --git a/src/common/catalog/catalog-category-registry.ts b/src/common/catalog/catalog-category-registry.ts index 077347e578..ee61429859 100644 --- a/src/common/catalog/catalog-category-registry.ts +++ b/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(group: string, kind: string): T | undefined { return this.groupKinds.get(group)?.get(kind) as T; } diff --git a/src/common/catalog/catalog-entity.ts b/src/common/catalog/catalog-entity.ts index fe488a291a..f30a392464 100644 --- a/src/common/catalog/catalog-entity.ts +++ b/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 getId(group: string, kind: string): string { - return `${group}--${kind}`; + static parseId(id = ""): { group?: string, kind?: string } { + const [group, kind] = id.split("/") ?? []; + + return { group, kind }; } public getId(): string { - return `${this.spec.group}--${this.spec.names.kind}`; + return `${this.spec.group}/${this.spec.names.kind}`; } } diff --git a/src/renderer/components/+catalog/catalog.route.ts b/src/renderer/components/+catalog/catalog.route.ts index c0cceb5c53..b7bbe8c993 100644 --- a/src/renderer/components/+catalog/catalog.route.ts +++ b/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(catalogRoute.path); diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 6988890780..520010af8e 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/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 { navigate: (url: string) => navigate(url), }; - get categoryId(): string | undefined { - return this.props.match.params?.categoryId; + get routeParams(): ICatalogViewRouteParam { + return this.props.match.params ?? {}; } - get activeCategory(): CatalogCategory { - return catalogCategoryRegistry.getById(this.props.match.params?.categoryId); + get activeCategory(): CatalogCategory | undefined { + const { group, kind } = this.routeParams; + + return catalogCategoryRegistry.getForGroupKind(group, kind); } @computed get categories(): CatalogCategory[] { @@ -86,17 +88,6 @@ export class Catalog extends React.Component { 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 { } } + onTabChange = (categoryId: string) => { + const { group, kind } = CatalogCategory.parseId(categoryId); + + if (group && kind) { + navigate(catalogURL({ params: { group, kind } })); + } else { + navigate(catalogURL()); + } + }; + renderNavigation() { return ( navigate(catalogURL({ params: { categoryId } }))} + value={this.activeCategory?.getId()} + onChange={this.onTabChange} >
Catalog
diff --git a/src/renderer/protocol-handler/app-handlers.ts b/src/renderer/protocol-handler/app-handlers.ts index 4da299c2db..bbd91ab19b 100644 --- a/src/renderer/protocol-handler/app-handlers.ts +++ b/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 } })); })