From 329a1c93c423e249d3486131e5dfe91d6bc60030 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 15 Sep 2021 14:34:10 +0300
Subject: [PATCH] Dim disabled pin icon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/common/__tests__/hotbar-store.test.ts        |  9 +++++++++
 src/common/hotbar-store.ts                       | 10 +++++++++-
 .../components/+catalog/catalog.module.css       |  4 ++++
 src/renderer/components/+catalog/catalog.tsx     | 16 ++++++++++++----
 4 files changed, 34 insertions(+), 5 deletions(-)

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<HotbarStoreModel> {
     }};
 
 
-    if (hotbar.items.find(i => i?.entity.uid === uid)) {
+    if (this.entityPinnedToHotbar(item)) {
       return;
     }
 
@@ -274,6 +274,14 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
 
     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<Props> {
   };
 
   renderName(item: CatalogEntityItem<CatalogEntity>) {
+    const disabledIcon = HotbarStore.getInstance().entityPinnedToHotbar(item.entity);
+
     return (
       <div className={styles.entityName}>
         {item.name}
-        <Icon className={styles.pinIcon} material="push_pin" small tooltip="Pin to Hotbar" onClick={(event) => {
-          event.stopPropagation();
-          this.addToHotbar(item);
-        }}/>
+        <Icon
+          small
+          disabled={disabledIcon}
+          className={styles.pinIcon}
+          material="push_pin"
+          tooltip={disabledIcon ? "" : "Pin to Hotbar"}
+          onClick={(event) => {
+            event.stopPropagation();
+            this.addToHotbar(item);
+          }}/>
       </div>
     );
   }