hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Add browse all tab to catalog page (#2629)

Browse Source
This commit is contained in:
Sebastian Malton 2021-05-03 08:39:04 -04:00 committed by GitHub
parent d08aeaa2e4
commit d1272515b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/+catalog/catalog-entity.store.ts
View File

@ -65,10 +65,12 @@ export class CatalogEntityItem implements ItemObject {
@autobind() @autobind()
export class CatalogEntityStore extends ItemStore<CatalogEntityItem> { export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
@observable activeCategory: CatalogCategory; @observable activeCategory?: CatalogCategory;
@computed get entities() { @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)); return catalogEntityRegistry.getItemsForCategory(this.activeCategory).map(entity => new CatalogEntityItem(entity));
} }

46
src/renderer/components/+catalog/catalog.tsx
View File

@ -27,7 +27,7 @@ enum sortBy {
export class Catalog extends React.Component { export class Catalog extends React.Component {
@observable private catalogEntityStore?: CatalogEntityStore; @observable private catalogEntityStore?: CatalogEntityStore;
@observable.deep private contextMenu: CatalogEntityContextMenuContext; @observable.deep private contextMenu: CatalogEntityContextMenuContext;
@observable activeTab: string; @observable activeTab?: string;
async componentDidMount() { async componentDidMount() {
this.contextMenu = { this.contextMenu = {
@ -76,14 +76,11 @@ export class Catalog extends React.Component {
} }
@action @action
onTabChange = (tabId: string) => { onTabChange = (tabId: string | null) => {
this.activeTab = tabId; 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() { renderNavigation() {
@ -91,9 +88,22 @@ export class Catalog extends React.Component {
<Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}> <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
<div className="sidebarHeader">Catalog</div> <div className="sidebarHeader">Catalog</div>
<div className="sidebarTabs"> <div className="sidebarTabs">
{ this.categories.map((category, index) => { <Tab
return <Tab value={category.getId()} key={index} label={category.metadata.name} data-testid={`${category.getId()}-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> </div>
</Tabs> </Tabs>
); );
@ -102,27 +112,23 @@ export class Catalog extends React.Component {
@autobind() @autobind()
renderItemMenu(item: CatalogEntityItem) { renderItemMenu(item: CatalogEntityItem) {
const menuItems = this.contextMenu.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === item.entity.metadata.source); const menuItems = this.contextMenu.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === item.entity.metadata.source);
const onOpen = async () => {
await item.onContextMenuOpen(this.contextMenu);
};
return ( return (
<MenuActions onOpen={() => onOpen()}> <MenuActions onOpen={() => item.onContextMenuOpen(this.contextMenu)}>
<MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item) }> <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item) }>
<Icon material="add" small interactive={true} title="Add to hotbar"/> Add to Hotbar <Icon material="add" small interactive={true} title="Add to hotbar"/> Add to Hotbar
</MenuItem> </MenuItem>
{ menuItems.map((menuItem, index) => { {
return ( menuItems.map((menuItem, index) => (
<MenuItem key={index} onClick={() => this.onMenuItemClick(menuItem)}> <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> </MenuItem>
); ))
})} }
</MenuActions> </MenuActions>
); );
} }
render() { render() {
if (!this.catalogEntityStore) { if (!this.catalogEntityStore) {
return null; return null;
@ -135,7 +141,7 @@ export class Catalog extends React.Component {
provideBackButtonNavigation={false} provideBackButtonNavigation={false}
contentGaps={false}> contentGaps={false}>
<ItemListLayout <ItemListLayout
renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name} renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name ?? "Browse All"}
isClusterScoped isClusterScoped
isSearchable={true} isSearchable={true}
isSelectable={false} isSelectable={false}