diff --git a/src/renderer/components/+catalog/catalog.route.ts b/src/renderer/components/+catalog/catalog.route.ts index 39ad958650..b7bbe8c993 100644 --- a/src/renderer/components/+catalog/catalog.route.ts +++ b/src/renderer/components/+catalog/catalog.route.ts @@ -22,8 +22,12 @@ import type { RouteProps } from "react-router"; import { buildURL } from "../../../common/utils/buildUrl"; +export interface ICatalogViewRouteParam { + group?: string; + kind?: string; +} export const catalogRoute: RouteProps = { - path: "/catalog" + path: "/catalog/:group?/:kind?" }; -export const catalogURL = buildURL(catalogRoute.path); +export const catalogURL = buildURL(catalogRoute.path); diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 63239eb5d1..5211e034c2 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -23,7 +23,7 @@ import "./catalog.scss"; import React from "react"; import { disposeOnUnmount, observer } from "mobx-react"; import { ItemListLayout } from "../item-object-list"; -import { action, observable, reaction } from "mobx"; +import { action, observable, reaction, when } from "mobx"; import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store"; import { navigate } from "../../navigation"; import { kebabCase } from "lodash"; @@ -37,18 +37,33 @@ import { ConfirmDialog } from "../confirm-dialog"; import { Tab, Tabs } from "../tabs"; 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"; enum sortBy { name = "name", source = "source", status = "status" } + +interface Props extends RouteComponentProps {} @observer -export class Catalog extends React.Component { +export class Catalog extends React.Component { @observable private catalogEntityStore?: CatalogEntityStore; @observable.deep private contextMenu: CatalogEntityContextMenuContext; @observable activeTab?: string; + get routeActiveTab(): string | undefined { + const { group, kind } = this.props.match.params ?? {}; + + if (group && kind) { + return `${group}/${kind}`; + } + + return undefined; + } + async componentDidMount() { this.contextMenu = { menuItems: [], @@ -57,12 +72,22 @@ export class Catalog extends React.Component { this.catalogEntityStore = new CatalogEntityStore(); disposeOnUnmount(this, [ this.catalogEntityStore.watch(), + when(() => catalogCategoryRegistry.items.length > 0, () => { + const item = catalogCategoryRegistry.items.find(i => i.getId() === this.routeActiveTab); + + if (item || this.routeActiveTab === undefined) { + this.activeTab = this.routeActiveTab; + this.catalogEntityStore.activeCategory = item; + } else { + Notifications.error(

Unknown category: {this.routeActiveTab}

); + } + }), reaction(() => catalogCategoryRegistry.items, (items) => { if (!this.activeTab && items.length > 0) { this.activeTab = items[0].getId(); this.catalogEntityStore.activeCategory = items[0]; } - }, { fireImmediately: true }) + }), ]); } diff --git a/src/renderer/protocol-handler/app-handlers.ts b/src/renderer/protocol-handler/app-handlers.ts index 0e5e2f3ee6..bbd91ab19b 100644 --- a/src/renderer/protocol-handler/app-handlers.ts +++ b/src/renderer/protocol-handler/app-handlers.ts @@ -43,6 +43,13 @@ export function bindProtocolAddRouteHandlers() { .addInternalHandler("/landing", () => { navigate(catalogURL()); }) + .addInternalHandler("/landing/view/:group/:kind", ({ pathname: { group, kind } }) => { + navigate(catalogURL({ + params: { + group, kind + } + })); + }) .addInternalHandler("/cluster", () => { navigate(addClusterURL()); })