Add CatalogCategory filter to the extension API (#3718)

* Add CatalogCategory filter to the extension API.

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

* Fix test.

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

src/renderer/api/catalog-category-registry.ts

@@ -20,3 +20,4 @@
  */
 
 export { catalogCategoryRegistry } from "../../common/catalog";
+export type { CategoryFilter } from "../../common/catalog";

src/renderer/components/+catalog/catalog-menu.tsx

@@ -29,6 +29,7 @@ import { Icon } from "../icon";
 import { StylesProvider } from "@material-ui/core";
 import { cssNames } from "../../utils";
 import type { CatalogCategory } from "../../api/catalog-entity";
+import { observer } from "mobx-react";
 
 type Props = {
   activeItem: string;
@@ -36,7 +37,7 @@ type Props = {
 };
 
 function getCategories() {
-  return catalogCategoryRegistry.items;
+  return catalogCategoryRegistry.filteredItems;
 }
 
 function getCategoryIcon(category: CatalogCategory) {
@@ -53,7 +54,7 @@ function Item(props: TreeItemProps) {
   );
 }
 
-export function CatalogMenu(props: Props) {
+export const CatalogMenu = observer((props: Props) => {
   return (
     // Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4
     <StylesProvider injectFirst>
@@ -88,4 +89,4 @@ export function CatalogMenu(props: Props) {
       </div>
     </StylesProvider>
   );
-}
+});

src/renderer/components/+catalog/catalog.tsx

@@ -90,8 +90,8 @@ export class Catalog extends React.Component<Props> {
         previousActiveTab.set(this.routeActiveTab);
 
         try {
-          await when(() => (routeTab === "" || !!catalogCategoryRegistry.items.find(i => i.getId() === routeTab)), { timeout: 5_000 }); // we need to wait because extensions might take a while to load
-          const item = catalogCategoryRegistry.items.find(i => i.getId() === routeTab);
+          await when(() => (routeTab === "" || !!catalogCategoryRegistry.filteredItems.find(i => i.getId() === routeTab)), { timeout: 5_000 }); // we need to wait because extensions might take a while to load
+          const item = catalogCategoryRegistry.filteredItems.find(i => i.getId() === routeTab);
 
           runInAction(() => {
             this.activeTab = routeTab;
@@ -103,6 +103,20 @@ export class Catalog extends React.Component<Props> {
         }
       }, {fireImmediately: true}),
     ]);
+
+    // If active category is filtered out, automatically switch to the first category
+    disposeOnUnmount(this, reaction(() => catalogCategoryRegistry.filteredItems, () => {
+      if (!catalogCategoryRegistry.filteredItems.find(item => item.getId() === this.catalogEntityStore.activeCategory.getId())) {
+        const item = catalogCategoryRegistry.filteredItems[0];
+
+        runInAction(() => {
+          if (item) {
+            this.activeTab = item.getId();
+            this.catalogEntityStore.activeCategory = item;
+          }
+        });
+      }
+    }));
   }
   addToHotbar(item: CatalogEntityItem<CatalogEntity>): void {
     HotbarStore.getInstance().addToHotbar(item.entity);