Toggle add/remove items to hotbar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/__tests__/hotbar-store.test.ts

@@ -330,8 +330,8 @@ describe("HotbarStore", () => {
 
       hotbarStore.addToHotbar(testCluster);
 
-      expect(hotbarStore.entityPinnedToHotbar(testCluster)).toBeTruthy();
+      expect(hotbarStore.isAddedToActive(testCluster)).toBeTruthy();
-      expect(hotbarStore.entityPinnedToHotbar(awsCluster)).toBeFalsy();
+      expect(hotbarStore.isAddedToActive(awsCluster)).toBeFalsy();
     });
   });
 

src/common/hotbar-store.ts

@@ -171,7 +171,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     }};
 
 
-    if (this.entityPinnedToHotbar(item)) {
+    if (this.isAddedToActive(item)) {
       return;
     }
 
@@ -279,7 +279,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
    * Checks if entity already pinned to hotbar
    * @returns boolean
    */
-  entityPinnedToHotbar(entity: CatalogEntity) {
+  isAddedToActive(entity: CatalogEntity) {
     return !!this.getActive().items.find(item => item?.entity.uid === entity.metadata.uid);
   }
 }

src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx

@@ -74,6 +74,10 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
     HotbarStore.getInstance().addToHotbar(entity);
   }
 
+  removeFromHotbar(item: CatalogEntity): void {
+    HotbarStore.getInstance().removeFromHotbar(item.getId());
+  }
+
   getMenuItems(entity: T): React.ReactChild[] {
     if (!entity) {
       return [];
@@ -98,11 +102,19 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
       );
     }
 
-    items.push(
+    if (!HotbarStore.getInstance().isAddedToActive(entity)) {
-      <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(entity) }>
+      items.push(
-        <Icon material="push_pin" small tooltip="Add to Hotbar" />
+        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(entity) }>
-      </MenuItem>
+          <Icon material="push_pin" small tooltip="Add to Hotbar" />
-    );
+        </MenuItem>
+      );
+    } else {
+      items.push(
+        <MenuItem key="remove-from-hotbar" onClick={() => this.removeFromHotbar(entity)}>
+          <Icon material="push_pin" small tooltip="Remove from Hotbar" />
+        </MenuItem>
+      );
+    }
 
     return items;
   }

src/renderer/components/+catalog/catalog.module.css

@@ -44,10 +44,6 @@
 
   &:hover .pinIcon {
     opacity: 1;
-
-    &:global(.disabled) {
-      opacity: 0.3;
-    }
   }
 }
 

src/renderer/components/+catalog/catalog.tsx

@@ -37,7 +37,7 @@ import { CatalogAddButton } from "./catalog-add-button";
 import type { RouteComponentProps } from "react-router";
 import { Notifications } from "../notifications";
 import { MainLayout } from "../layout/main-layout";
-import { createAppStorage, cssNames } from "../../utils";
+import { createAppStorage, cssNames, prevDefault } from "../../utils";
 import { makeCss } from "../../../common/utils/makeCss";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import { browseCatalogTab, catalogURL, CatalogViewRouteParam } from "../../../common/routes";
@@ -130,6 +130,10 @@ export class Catalog extends React.Component<Props> {
     HotbarStore.getInstance().addToHotbar(item.entity);
   }
 
+  removeFromHotbar(item: CatalogEntityItem<CatalogEntity>): void {
+    HotbarStore.getInstance().removeFromHotbar(item.getId());
+  }
+
   onDetails = (item: CatalogEntityItem<CatalogEntity>) => {
     if (this.catalogEntityStore.selectedItemId) {
       this.catalogEntityStore.selectedItemId = null;
@@ -177,6 +181,8 @@ export class Catalog extends React.Component<Props> {
   }
 
   renderItemMenu = (item: CatalogEntityItem<CatalogEntity>) => {
+    const isItemInHotbar = HotbarStore.getInstance().isAddedToActive(item.entity);
+
     const onOpen = () => {
       this.contextMenu.menuItems = [];
 
@@ -195,29 +201,32 @@ export class Catalog extends React.Component<Props> {
             </MenuItem>
           ))
         }
-        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item)}>
+        {!isItemInHotbar ? (
-          Pin to Hotbar
+          <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item)}>
-        </MenuItem>
+            Add to Hotbar
+          </MenuItem>
+        ) : (
+          <MenuItem key="remove-from-hotbar" onClick={() => this.removeFromHotbar(item)}>
+            Remove from Hotbar
+          </MenuItem>
+        )}
       </MenuActions>
     );
   };
 
   renderName(item: CatalogEntityItem<CatalogEntity>) {
-    const disabledIcon = HotbarStore.getInstance().entityPinnedToHotbar(item.entity);
+    const isItemInHotbar = HotbarStore.getInstance().isAddedToActive(item.entity);
 
     return (
       <div className={styles.entityName}>
         {item.name}
         <Icon
           small
-          disabled={disabledIcon}
           className={styles.pinIcon}
           material="push_pin"
-          tooltip={disabledIcon ? "" : "Pin to Hotbar"}
+          tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
-          onClick={(event) => {
+          onClick={prevDefault(() => isItemInHotbar ? this.removeFromHotbar(item) : this.addToHotbar(item))}
-            event.stopPropagation();
+        />
-            this.addToHotbar(item);
-          }}/>
       </div>
     );
   }

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -30,7 +30,6 @@ import { navigate } from "../../navigation";
 import { cssNames, IClassName } from "../../utils";
 import { Icon } from "../icon";
 import { HotbarIcon } from "./hotbar-icon";
-import { HotbarStore } from "../../../common/hotbar-store";
 
 interface Props extends DOMAttributes<HTMLElement> {
   entity: CatalogEntity;
@@ -87,10 +86,6 @@ export class HotbarEntityIcon extends React.Component<Props> {
     return catalogEntityRegistry.activeEntity?.metadata?.uid == item.getId();
   }
 
-  isPersisted(entity: CatalogEntity) {
-    return HotbarStore.getInstance().getActive().items.find((item) => item?.entity?.uid === entity.metadata.uid) !== undefined;
-  }
-
   render() {
     if (!this.contextMenu) {
       return null;
@@ -106,21 +101,13 @@ export class HotbarEntityIcon extends React.Component<Props> {
       disabled: !entity
     });
 
-    const isPersisted = this.isPersisted(entity);
     const onOpen = async () => {
       const menuItems: CatalogEntityContextMenu[] = [];
 
-      if (!isPersisted) {
+      menuItems.unshift({
-        menuItems.unshift({
+        title: "Remove from Hotbar",
-          title: "Pin to Hotbar",
+        onClick: () => remove(entity.metadata.uid)
-          onClick: () => add(entity, index)
+      });
-        });
-      } else {
-        menuItems.unshift({
-          title: "Unpin from Hotbar",
-          onClick: () => remove(entity.metadata.uid)
-        });
-      }
 
       this.contextMenu.menuItems = menuItems;
 

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -138,7 +138,7 @@ export class HotbarMenu extends React.Component<Props> {
                             tooltip={`${item.entity.name} (${item.entity.source})`}
                             menuItems={[
                               {
-                                title: "Unpin from Hotbar",
+                                title: "Remove from Hotbar",
                                 onClick: () => this.removeItem(item.entity.uid)
                               }
                             ]}