Fix: Catalog's visibility columns menu -> Empty title for Icon (#4189)

* fix: Catalog -> Columns visibility menu -> Empty title for "Icon"

Signed-off-by: Roman <ixrock@gmail.com>

* moving entity-icon inside name column / fixes

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint

Signed-off-by: Roman <ixrock@gmail.com>

* added vertical alignment for texts in the name column

Signed-off-by: Roman <ixrock@gmail.com>

src/common/utils/makeCss.ts

@@ -1,30 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Function expands generic CSS Modules literal types and adds dictionary with arbitrary
- * indexes.
- * @param styles Styles imported from CSS Module having only literal types
- * @returns Passed style list with expanded typescript types
- */
-export function makeCss<T>(styles: T) {
-  return styles as typeof styles & { [key: string]: string };
-}

src/renderer/components/+catalog/catalog-entity-item.tsx

@@ -26,12 +26,9 @@ import type { ItemObject } from "../../../common/item.store";
 import { Badge } from "../badge";
 import { navigation } from "../../navigation";
 import { searchUrlParam } from "../input";
-import { makeCss } from "../../../common/utils/makeCss";
 import { KubeObject } from "../../../common/k8s-api/kube-object";
 import type { CatalogEntityRegistry } from "../../api/catalog-entity-registry";
 
-const css = makeCss(styles);
-
 export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
   constructor(public entity: T, private registry: CatalogEntityRegistry) {
     if (!(entity instanceof CatalogEntity)) {
@@ -79,7 +76,7 @@ export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
     return this.labels
       .map(label => (
         <Badge
-          className={css.badge}
+          className={styles.badge}
           key={label}
           label={label}
           title={label}

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

@@ -19,20 +19,52 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.list :global(.TableRow) {
+.Catalog {
+  :global(.TableHead) .entityName {
+    /* offset for icon to align texts in the column */
+    padding-left: calc(21px + var(--padding) * 2.5);
+  }
+
+  :global(.TableRow):hover .pinIcon {
+    display: block;
+  }
+}
+
 .entityName {
   position: relative;
-    width: min-content;
+  width: 100%;
   max-width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--padding);
+  padding-bottom: 0;
+  padding-right: 24px; // + reserved space for .pinIcon
+
+  > span {
     overflow: hidden;
     text-overflow: ellipsis;  
-    padding-right: 24px;
+    padding-left: var(--padding);
+  }
+
+  :global(.HotbarIcon){
+    align-self: center;
+
+    div {
+      /* icons with plain text */
+      font-size: var(--unit);
+    }
+
+    .Icon {
+      /* icons with font-icon */
+      font-size: var(--small-size);
+    }
+  }
 
   .pinIcon {
     position: absolute;
     right: 0;
-      opacity: 0;
     transition: none;
+    display: none;
 
     &:hover {
       /* Drop styles defined for <Icon/>  */
@@ -42,30 +74,14 @@
   }
 }
 
-  &:hover .pinIcon {
-    opacity: 1;
-  }
-}
-
-.iconCell {
-  @apply flex items-center max-w-[40px];
-}
-
-.iconCell > div * {
-  font-size: var(--unit);
-}
-
-.nameCell {
-}
-
 .sourceCell {
   max-width: 100px;
 }
 
 .statusCell {
   max-width: 100px;
-}
 
+  :global {
     .connected, .available {
       color: var(--colorSuccess);
     }
@@ -73,6 +89,8 @@
     .disconnected, .deleting, .unavailable {
       color: var(--halfGray);
     }
+  }
+}
 
 .labelsCell {
   overflow-x: scroll;

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

@@ -37,8 +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 { createStorage, cssNames, prevDefault } from "../../utils";
-import { makeCss } from "../../../common/utils/makeCss";
+import { createStorage, prevDefault } from "../../utils";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import { browseCatalogTab, catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
@@ -56,8 +55,6 @@ enum sortBy {
   status = "status",
 }
 
-const css = makeCss(styles);
-
 interface Props extends RouteComponentProps<CatalogViewRouteParam> {
   catalogEntityStore?: CatalogEntityStore;
 }
@@ -73,6 +70,7 @@ export class Catalog extends React.Component<Props> {
     makeObservable(this);
     this.catalogEntityStore = props.catalogEntityStore;
   }
+
   static defaultProps = {
     catalogEntityStore: new CatalogEntityStore(),
   };
@@ -214,23 +212,7 @@ export class Catalog extends React.Component<Props> {
     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 && "push_off"}
-          tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
-          onClick={prevDefault(() => isItemInHotbar ? this.removeFromHotbar(item) : this.addToHotbar(item))}
-        />
-      </div>
-    );
-  }
-
-  renderIcon(item: CatalogEntityItem<CatalogEntity>) {
-    return (
-      <RenderDelay>
+      <>
         <HotbarIcon
           uid={`catalog-icon-${item.getId()}`}
           title={item.getName()}
@@ -240,7 +222,16 @@ export class Catalog extends React.Component<Props> {
           background={item.entity.spec.icon?.background}
           size={24}
         />
-      </RenderDelay>
+        <span>{item.name}</span>
+        <Icon
+          small
+          className={styles.pinIcon}
+          material={!isItemInHotbar && "push_pin"}
+          svg={isItemInHotbar ? "push_off" : "push_pin"}
+          tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
+          onClick={prevDefault(() => isItemInHotbar ? this.removeFromHotbar(item) : this.addToHotbar(item))}
+        />
+      </>
     );
   }
 
@@ -254,11 +245,11 @@ export class Catalog extends React.Component<Props> {
 
     return (
       <ItemListLayout
+        className={styles.Catalog}
         tableId={tableId}
         renderHeaderTitle={activeCategory?.metadata.name || "Browse All"}
         isSelectable={false}
         isConfigurable={true}
-        className={styles.list}
         store={this.catalogEntityStore}
         sortingCallbacks={{
           [sortBy.name]: item => item.name,
@@ -270,23 +261,21 @@ export class Catalog extends React.Component<Props> {
           entity => entity.searchFields,
         ]}
         renderTableHeader={[
-          { title: "", className: css.iconCell, id: "icon" },
-          { title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" },
-          !activeCategory && { title: "Kind", className: css.kindCell, sortBy: sortBy.kind, id: "kind" },
-          { title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" },
-          { title: "Labels", className: css.labelsCell, id: "labels" },
-          { title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" },
+          { title: "Name", className: styles.entityName, sortBy: sortBy.name, id: "name" },
+          !activeCategory && { title: "Kind", sortBy: sortBy.kind, id: "kind" },
+          { title: "Source", className: styles.sourceCell, sortBy: sortBy.source, id: "source" },
+          { title: "Labels", className: styles.labelsCell, id: "labels" },
+          { title: "Status", className: styles.statusCell, sortBy: sortBy.status, id: "status" },
         ].filter(Boolean)}
         customizeTableRowProps={item => ({
           disabled: !item.enabled,
         })}
         renderTableContents={item => [
-          this.renderIcon(item),
           this.renderName(item),
           !activeCategory && item.kind,
           item.source,
           item.getLabelBadges(),
-          { title: item.phase, className: cssNames(css[item.phase]) },
+          <span key="phase" className={item.phase}>{item.phase}</span>,
         ].filter(Boolean)}
         onDetails={this.onDetails}
         renderItemMenu={this.renderItemMenu}