Pin icon for Catalog list items (#3810)

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.isAddedToActive(testCluster)).toBeTruthy();
+      expect(hotbarStore.isAddedToActive(awsCluster)).toBeFalsy();
+    });
   });
 
   describe("pre beta-5 migrations", () => {

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.isAddedToActive(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
+   */
+  isAddedToActive(entity: CatalogEntity) {
+    return !!this.getActive().items.find(item => item?.entity.uid === entity.metadata.uid);
+  }
 }
 
 /**

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

@@ -28,9 +28,9 @@ import { makeObservable, observable } from "mobx";
 import { navigate } from "../../navigation";
 import { MenuItem } from "../menu";
 import { ConfirmDialog } from "../confirm-dialog";
-import { HotbarStore } from "../../../common/hotbar-store";
 import { Icon } from "../icon";
 import type { CatalogEntityItem } from "./catalog-entity-item";
+import { HotbarToggleMenuItem } from "./hotbar-toggle-menu-item";
 
 export interface CatalogEntityDrawerMenuProps<T extends CatalogEntity> extends MenuActionsProps {
   item: CatalogEntityItem<T> | null | undefined;
@@ -70,10 +70,6 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
     }
   }
 
-  addToHotbar(entity: CatalogEntity): void {
-    HotbarStore.getInstance().addToHotbar(entity);
-  }
-
   getMenuItems(entity: T): React.ReactChild[] {
     if (!entity) {
       return [];
@@ -99,9 +95,12 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
     }
 
     items.push(
-      <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(entity) }>
-        <Icon material="playlist_add" small tooltip="Add to Hotbar" />
-      </MenuItem>
+      <HotbarToggleMenuItem
+        key="hotbar-toggle"
+        entity={entity}
+        addContent={<Icon material="push_pin" small tooltip={"Add to Hotbar"}/>}
+        removeContent={<Icon svg="unpin" small tooltip={"Remove from Hotbar"}/>}
+      />
     );
 
     return items;
@@ -109,7 +108,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
 
   render() {
     const { className, item: entity, ...menuProps } = this.props;
-    
+
     if (!this.contextMenu || !entity.enabled) {
       return null;
     }

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

@@ -19,10 +19,36 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+.list :global(.TableRow) {
+  .entityName {
+    position: relative;
+    width: min-content;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 24px;
+
+    .pinIcon {
+      position: absolute;
+      right: 0;
+      opacity: 0;
+      transition: none;
+
+      &:hover {
+        /* Drop styles defined for <Icon/> */
+        background-color: transparent;
+        box-shadow: none;
+      }
+    }
+  }
+
+  &:hover .pinIcon {
+    opacity: 1;
+  }
+}
+
 .iconCell {
-  max-width: 40px;
-  display: flex;
-  align-items: center;
+  @apply flex items-center max-w-[40px];
 }
 
 .iconCell > div * {

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

@@ -46,6 +46,12 @@ jest.mock("@electron/remote", () => {
   };
 });
 
+jest.mock("./hotbar-toggle-menu-item", () => {
+  return {
+    HotbarToggleMenuItem: () => <div>menu item</div>
+  };
+});
+
 class MockCatalogEntity extends CatalogEntity {
   public apiVersion = "api";
   public kind = "kind";

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

@@ -37,13 +37,15 @@ 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";
 import { CatalogMenu } from "./catalog-menu";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 import { RenderDelay } from "../render-delay/render-delay";
+import { Icon } from "../icon";
+import { HotbarToggleMenuItem } from "./hotbar-toggle-menu-item";
 
 export const previousActiveTab = createAppStorage("catalog-previous-active-tab", browseCatalogTab);
 
@@ -129,6 +131,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;
@@ -194,13 +200,34 @@ export class Catalog extends React.Component<Props> {
             </MenuItem>
           ))
         }
-        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item)}>
-          Pin to Hotbar
-        </MenuItem>
+        <HotbarToggleMenuItem
+          key="hotbar-toggle"
+          entity={item.entity}
+          addContent="Add to Hotbar"
+          removeContent="Remove from Hotbar"
+        />
       </MenuActions>
     );
   };
 
+  renderName(item: CatalogEntityItem<CatalogEntity>) {
+    const isItemInHotbar = HotbarStore.getInstance().isAddedToActive(item.entity);
+
+    return (
+      <div className={styles.entityName}>
+        {item.name}
+        <Icon
+          small
+          className={styles.pinIcon}
+          material={!isItemInHotbar && "push_pin"}
+          svg={isItemInHotbar && "unpin"}
+          tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
+          onClick={prevDefault(() => isItemInHotbar ? this.removeFromHotbar(item) : this.addToHotbar(item))}
+        />
+      </div>
+    );
+  }
+
   renderIcon(item: CatalogEntityItem<CatalogEntity>) {
     return (
       <RenderDelay>
@@ -231,7 +258,7 @@ export class Catalog extends React.Component<Props> {
         renderHeaderTitle={activeCategory?.metadata.name || "Browse All"}
         isSelectable={false}
         isConfigurable={true}
-        className="CatalogItemList"
+        className={styles.list}
         store={this.catalogEntityStore}
         sortingCallbacks={{
           [sortBy.name]: item => item.name,
@@ -255,7 +282,7 @@ export class Catalog extends React.Component<Props> {
         })}
         renderTableContents={item => [
           this.renderIcon(item),
-          item.name,
+          this.renderName(item),
           !activeCategory && item.kind,
           item.source,
           item.getLabelBadges(),

src/renderer/components/+catalog/hotbar-toggle-menu-item.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import React, { ReactNode, useState } from "react";
+
+import { HotbarStore } from "../../../common/hotbar-store";
+import { MenuItem } from "../menu";
+
+import type { CatalogEntity } from "../../api/catalog-entity";
+
+export function HotbarToggleMenuItem(props: { entity: CatalogEntity, addContent: ReactNode, removeContent: ReactNode }) {
+  const store = HotbarStore.getInstance(false);
+  const add = () => store.addToHotbar(props.entity);
+  const remove = () => store.removeFromHotbar(props.entity.getId());
+  const [itemInHotbar, setItemInHotbar] = useState(store.isAddedToActive(props.entity));
+
+  return (
+    <MenuItem onClick={() => {
+      itemInHotbar ? remove() : add();
+      setItemInHotbar(!itemInHotbar);
+    }}>
+      {itemInHotbar ? props.removeContent : props.addContent }
+    </MenuItem>
+  );
+}

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";
 import { LensKubernetesClusterStatus } from "../../../common/catalog-entities/kubernetes-cluster";
 
 interface Props extends DOMAttributes<HTMLElement> {
@@ -88,10 +87,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;
@@ -107,21 +102,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({
-          title: "Pin to Hotbar",
-          onClick: () => add(entity, index)
-        });
-      } else {
-        menuItems.unshift({
-          title: "Unpin from Hotbar",
-          onClick: () => remove(entity.metadata.uid)
-        });
-      }
+      menuItems.unshift({
+        title: "Remove 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)
                               }
                             ]}

src/renderer/components/icon/unpin.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path d="M12.6,12.1V2H7C6.5,2,6,2.5,6,3s0.5,1,1,1h1v5c0,1.7-1.3,3-3,3v2h6v7l1,1l1-1v-7h6v-1.9H12.6z"/>
+<polygon points="23.6,3.7 21.9,2 19.4,4.5 16.9,2 15.2,3.7 17.7,6.2 15.2,8.7 16.9,10.4 19.4,7.9 21.9,10.4 23.6,8.7 21.1,6.2 "/>
+</svg>