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

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

@ -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.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}
</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}