From d1272515b863b5a302269c4db072f62c971dba29 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Mon, 3 May 2021 08:39:04 -0400
Subject: [PATCH] Add browse all tab to catalog page (#2629)

---
 .../+catalog/catalog-entity.store.ts          |  6 ++-
 src/renderer/components/+catalog/catalog.tsx  | 50 +++++++++++--------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/+catalog/catalog-entity.store.ts b/src/renderer/components/+catalog/catalog-entity.store.ts
index 5a9652eb4f..bb77ea7224 100644
--- a/src/renderer/components/+catalog/catalog-entity.store.ts
+++ b/src/renderer/components/+catalog/catalog-entity.store.ts
@@ -65,10 +65,12 @@ export class CatalogEntityItem implements ItemObject {
 
 @autobind()
 export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
-  @observable activeCategory: CatalogCategory;
+  @observable activeCategory?: CatalogCategory;
 
   @computed get entities() {
-    if (!this.activeCategory) return [];
+    if (!this.activeCategory) {
+      return catalogEntityRegistry.items.map(entity => new CatalogEntityItem(entity));
+    }
 
     return catalogEntityRegistry.getItemsForCategory(this.activeCategory).map(entity => new CatalogEntityItem(entity));
   }
diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index e748f27b64..1db5d2d2c6 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@@ -27,7 +27,7 @@ enum sortBy {
 export class Catalog extends React.Component {
   @observable private catalogEntityStore?: CatalogEntityStore;
   @observable.deep private contextMenu: CatalogEntityContextMenuContext;
-  @observable activeTab: string;
+  @observable activeTab?: string;
 
   async componentDidMount() {
     this.contextMenu = {
@@ -76,14 +76,11 @@ export class Catalog extends React.Component {
   }
 
   @action
-  onTabChange = (tabId: string) => {
-    this.activeTab = tabId;
+  onTabChange = (tabId: string | null) => {
+    const activeCategory = this.categories.find(category => category.getId() === tabId);
 
-    const activeCategory = this.categories.find((category) => category.getId() === tabId);
-
-    if (activeCategory) {
-      this.catalogEntityStore.activeCategory = activeCategory;
-    }
+    this.catalogEntityStore.activeCategory = activeCategory;
+    this.activeTab = activeCategory?.getId();
   };
 
   renderNavigation() {
@@ -91,9 +88,22 @@ export class Catalog extends React.Component {
       <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
         <div className="sidebarHeader">Catalog</div>
         <div className="sidebarTabs">
-          { this.categories.map((category, index) => {
-            return <Tab value={category.getId()} key={index} label={category.metadata.name} data-testid={`${category.getId()}-tab`} />;
-          })}
+          <Tab
+            value={undefined}
+            key="*"
+            label="Browse"
+            data-testid="*-tab"
+          />
+          {
+            this.categories.map(category => (
+              <Tab
+                value={category.getId()}
+                key={category.getId()}
+                label={category.metadata.name}
+                data-testid={`${category.getId()}-tab`}
+              />
+            ))
+          }
         </div>
       </Tabs>
     );
@@ -102,27 +112,23 @@ export class Catalog extends React.Component {
   @autobind()
   renderItemMenu(item: CatalogEntityItem) {
     const menuItems = this.contextMenu.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === item.entity.metadata.source);
-    const onOpen = async () => {
-      await item.onContextMenuOpen(this.contextMenu);
-    };
 
     return (
-      <MenuActions onOpen={() => onOpen()}>
+      <MenuActions onOpen={() => item.onContextMenuOpen(this.contextMenu)}>
         <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item) }>
           <Icon material="add" small interactive={true} title="Add to hotbar"/> Add to Hotbar
         </MenuItem>
-        { menuItems.map((menuItem, index) => {
-          return (
+        {
+          menuItems.map((menuItem, index) => (
             <MenuItem key={index} onClick={() => this.onMenuItemClick(menuItem)}>
-              <Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
+              <Icon material={menuItem.icon} small interactive={true} title={menuItem.title} /> {menuItem.title}
             </MenuItem>
-          );
-        })}
+          ))
+        }
       </MenuActions>
     );
   }
 
-
   render() {
     if (!this.catalogEntityStore) {
       return null;
@@ -135,7 +141,7 @@ export class Catalog extends React.Component {
         provideBackButtonNavigation={false}
         contentGaps={false}>
         <ItemListLayout
-          renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name}
+          renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name ?? "Browse All"}
           isClusterScoped
           isSearchable={true}
           isSelectable={false}