Enable deep navigation/routing to catalog (#2818)

* Enable route-based navigation to catalog items

Signed-off-by: Alex Culliere <alozhkin@mirantis.com>
Co-authored-by: Sebastian Malton <sebastian@malton.name>

* Enable custom protocol handle to process routing in catalog

Signed-off-by: Alex Culliere <alozhkin@mirantis.com>
Co-authored-by: Sebastian Malton <sebastian@malton.name>

* Fix type imports

Signed-off-by: Alex Culliere <alozhkin@mirantis.com>

Co-authored-by: Alex Culliere <alozhkin@mirantis.com>

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<ICatalogViewRouteParam>(catalogRoute.path);

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<ICatalogViewRouteParam> {}
 @observer
-export class Catalog extends React.Component {
+export class Catalog extends React.Component<Props> {
   @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(<p>Unknown category: {this.routeActiveTab}</p>);
+        }
+      }),
       reaction(() => catalogCategoryRegistry.items, (items) => {
         if (!this.activeTab && items.length > 0) {
           this.activeTab = items[0].getId();
           this.catalogEntityStore.activeCategory = items[0];
         }
-      }, { fireImmediately: true })
+      }),
     ]);
   }
 

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());
     })