diff --git a/src/common/__tests__/hotbar-store.test.ts b/src/common/__tests__/hotbar-store.test.ts index 8207aaafac..1e3264f6fe 100644 --- a/src/common/__tests__/hotbar-store.test.ts +++ b/src/common/__tests__/hotbar-store.test.ts @@ -324,6 +324,15 @@ describe("HotbarStore", () => { console.error = error; console.warn = warn; }); + + it("checks if entity already pinned to hotbar", () => { + const hotbarStore = HotbarStore.getInstance(); + + hotbarStore.addToHotbar(testCluster); + + expect(hotbarStore.entityPinnedToHotbar(testCluster)).toBeTruthy(); + expect(hotbarStore.entityPinnedToHotbar(awsCluster)).toBeFalsy(); + }); }); describe("pre beta-5 migrations", () => { diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts index 5bfb1ac73a..07f6b7c841 100644 --- a/src/common/hotbar-store.ts +++ b/src/common/hotbar-store.ts @@ -171,7 +171,7 @@ export class HotbarStore extends BaseStore { }}; - if (hotbar.items.find(i => i?.entity.uid === uid)) { + if (this.entityPinnedToHotbar(item)) { return; } @@ -274,6 +274,14 @@ export class HotbarStore extends BaseStore { hotbarStore.activeHotbarId = hotbarStore.hotbars[index].id; } + + /** + * Checks if entity already pinned to hotbar + * @returns boolean + */ + entityPinnedToHotbar(entity: CatalogEntity) { + return !!this.getActive().items.find(item => item?.entity.uid === entity.metadata.uid); + } } /** diff --git a/src/renderer/components/+catalog/catalog.module.css b/src/renderer/components/+catalog/catalog.module.css index fd730ae1e7..fa2c4438d3 100644 --- a/src/renderer/components/+catalog/catalog.module.css +++ b/src/renderer/components/+catalog/catalog.module.css @@ -44,6 +44,10 @@ &:hover .pinIcon { opacity: 1; + + &:global(.disabled) { + opacity: 0.3; + } } } diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 67851ed064..db7288e5be 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -188,13 +188,21 @@ export class Catalog extends React.Component { }; renderName(item: CatalogEntityItem) { + const disabledIcon = HotbarStore.getInstance().entityPinnedToHotbar(item.entity); + return (
{item.name} - { - event.stopPropagation(); - this.addToHotbar(item); - }}/> + { + event.stopPropagation(); + this.addToHotbar(item); + }}/>
); }