master-merge conflict fixes:

- proper handling and navigating into catalog's active category via URL-builder

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

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}`;
   }
 }
 

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,

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

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<Props> {
     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(<p>Unknown category: {this.routeActiveTab}</p>);
+        if (!categoryId) {
+          navigation.replace(
+            catalogURL({ params: { categoryId } })
+          );
         }
       }),
     ]);
@@ -138,8 +130,8 @@ export class Catalog extends React.Component<Props> {
       <Tabs
         className="flex column"
         scrollable={false}
-        value={this.activeCategoryId}
-        onChange={(categoryId: string) => this.activeCategoryId = categoryId}
+        value={this.categoryId}
+        onChange={(categoryId: string) => navigate(catalogURL({ params: { categoryId } }))}
       >
         <div className="sidebarHeader">Catalog</div>
         <div className="sidebarTabs">
@@ -177,7 +169,7 @@ export class Catalog extends React.Component<Props> {
             </MenuItem>
           ))
         }
-        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item) }>
+        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item)}>
           Pin to Hotbar
         </MenuItem>
       </MenuActions>

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