diff --git a/src/common/catalog/catalog-entity.ts b/src/common/catalog/catalog-entity.ts index b359501bdd..fe488a291a 100644 --- a/src/common/catalog/catalog-entity.ts +++ b/src/common/catalog/catalog-entity.ts @@ -56,8 +56,13 @@ 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}`; + } + public getId(): string { - return `${this.spec.group}/${this.spec.names.kind}`; + return `${this.spec.group}--${this.spec.names.kind}`; } } diff --git a/src/main/catalog-pusher.ts b/src/main/catalog-pusher.ts index c2d7267b92..e97dc07038 100644 --- a/src/main/catalog-pusher.ts +++ b/src/main/catalog-pusher.ts @@ -19,13 +19,14 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import { reaction, toJS } from "mobx"; +import { reaction } from "mobx"; import { broadcastMessage } from "../common/ipc"; -import type { CatalogEntityRegistry} from "./catalog"; +import type { CatalogEntityRegistry } from "./catalog"; import "../common/catalog-entities/kubernetes-cluster"; +import { toJS } from "../common/utils"; export function pushCatalogToRenderer(catalog: CatalogEntityRegistry) { - return reaction(() => toJS(catalog.items, { recurseEverything: true }), (items) => { + return reaction(() => toJS(catalog.items), (items) => { broadcastMessage("catalog:items", items); }, { fireImmediately: true, diff --git a/src/renderer/components/+catalog/catalog.route.ts b/src/renderer/components/+catalog/catalog.route.ts index b7bbe8c993..c0cceb5c53 100644 --- a/src/renderer/components/+catalog/catalog.route.ts +++ b/src/renderer/components/+catalog/catalog.route.ts @@ -23,11 +23,10 @@ import type { RouteProps } from "react-router"; import { buildURL } from "../../../common/utils/buildUrl"; export interface ICatalogViewRouteParam { - group?: string; - kind?: string; + categoryId?: string; } export const catalogRoute: RouteProps = { - path: "/catalog/:group?/:kind?" + path: "/catalog/:categoryId?" // `categoryId` == `${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 6785807f83..6988890780 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -23,12 +23,12 @@ import "./catalog.scss"; import React from "react"; import { disposeOnUnmount, observer } from "mobx-react"; import { ItemListLayout } from "../item-object-list"; -import { computed, makeObservable, observable, reaction, when } from "mobx"; +import { computed, makeObservable, reaction, when } from "mobx"; import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store"; -import { navigate } from "../../navigation"; +import { navigate, navigation } from "../../navigation"; import { kebabCase } from "lodash"; import { PageLayout } from "../layout/page-layout"; -import { MenuItem, MenuActions } from "../menu"; +import { MenuActions, MenuItem } from "../menu"; import { CatalogCategory, CatalogEntityContextMenu, CatalogEntityContextMenuContext, catalogEntityRunContext } from "../../api/catalog-entity"; import { Badge } from "../badge"; import { HotbarStore } from "../../../common/hotbar-store"; @@ -39,7 +39,7 @@ import { catalogCategoryRegistry } from "../../../common/catalog"; import { CatalogAddButton } from "./catalog-add-button"; import type { RouteComponentProps } from "react-router"; import type { ICatalogViewRouteParam } from "./catalog.route"; -import { Notifications } from "../notifications"; +import { catalogURL } from "./catalog.route"; enum sortBy { name = "name", @@ -64,45 +64,37 @@ export class Catalog extends React.Component { navigate: (url: string) => navigate(url), }; - @observable activeCategoryId = this.categories[0]?.getId(); + get categoryId(): string | undefined { + return this.props.match.params?.categoryId; + } - @computed get activeCategory(): CatalogCategory { - return catalogCategoryRegistry.getById(this.activeCategoryId); + get activeCategory(): CatalogCategory { + return catalogCategoryRegistry.getById(this.props.match.params?.categoryId); } @computed get categories(): CatalogCategory[] { return catalogCategoryRegistry.items; } - @computed get items(): CatalogEntityItem[] { + @computed get entities(): CatalogEntityItem[] { return this.catalogEntityStore.getEntities(this.activeCategory); } - get routeActiveTab(): string | undefined { - const { group, kind } = this.props.match.params ?? {}; - - if (group && kind) { - return `${group}/${kind}`; - } - - return undefined; - } - componentDidMount() { disposeOnUnmount(this, [ // autofill catalog entities into store - reaction(() => this.items, items => this.catalogEntityStore.loadItems(items), { + reaction(() => this.entities, items => this.catalogEntityStore.loadItems(items), { fireImmediately: true, }), - when(() => catalogCategoryRegistry.items.length > 0, () => { - const item = catalogCategoryRegistry.items.find(i => i.getId() === this.routeActiveTab); + // select initial category if nothing yet selected (via url-params) + when(() => this.categories.length > 0, () => { + const { categoryId } = this; - if (item || this.routeActiveTab === undefined) { - this.activeTab = this.routeActiveTab; - this.catalogEntityStore.activeCategory = item; - } else { - Notifications.error(

Unknown category: {this.routeActiveTab}

); + if (!categoryId) { + navigation.replace( + catalogURL({ params: { categoryId } }) + ); } }), ]); @@ -138,8 +130,8 @@ export class Catalog extends React.Component { this.activeCategoryId = categoryId} + value={this.categoryId} + onChange={(categoryId: string) => navigate(catalogURL({ params: { categoryId } }))} >
Catalog
@@ -177,7 +169,7 @@ export class Catalog extends React.Component { )) } - this.addToHotbar(item) }> + this.addToHotbar(item)}> Pin to Hotbar diff --git a/src/renderer/protocol-handler/app-handlers.ts b/src/renderer/protocol-handler/app-handlers.ts index bbd91ab19b..4da299c2db 100644 --- a/src/renderer/protocol-handler/app-handlers.ts +++ b/src/renderer/protocol-handler/app-handlers.ts @@ -30,6 +30,7 @@ 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 @@ -46,7 +47,7 @@ export function bindProtocolAddRouteHandlers() { .addInternalHandler("/landing/view/:group/:kind", ({ pathname: { group, kind } }) => { navigate(catalogURL({ params: { - group, kind + categoryId: CatalogCategory.getId(group, kind), } })); })