Pin icon for Catalog list items (#3810)

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