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

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,43 +19,45 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.list :global(.TableRow) {
+.Catalog {}
-  .entityName {
-    position: relative;
-    width: min-content;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: 24px;
 
-    .pinIcon {
+.entityName {
-      position: absolute;
+  position: relative;
-      right: 0;
+  width: min-content;
-      opacity: 0;
+  max-width: 100%;
-      transition: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 24px;
 
-      &:hover {
+  .pinIcon {
-        /* Drop styles defined for <Icon/> */
+    position: absolute;
-        background-color: transparent;
+    right: 0;
-        box-shadow: none;
+    opacity: 0;
-      }
+    transition: none;
+
+    &:hover {
+      /* Drop styles defined for <Icon/> */
+      background-color: transparent;
+      box-shadow: none;
     }
   }
-
-  &:hover .pinIcon {
-    opacity: 1;
-  }
 }
 
 .iconCell {
-  @apply flex items-center max-w-[40px];
+  padding-top: calc(var(--padding) / 2);
-}
+  flex: 0 0 40px !important;
 
-.iconCell > div * {
+  :global(.content) {
-  font-size: var(--unit);
+    display: none; /* hide "Icon" text in the header */
-}
+  }
 
-.nameCell {
+  div * {
+    font-size: var(--unit); /* icon's with plain text */
+  }
+
+  :global(.Icon) {
+    font-size: var(--small-size) !important;
+  }
 }
 
 .sourceCell {
@@ -64,14 +66,16 @@
 
 .statusCell {
   max-width: 100px;
-}
 
-.connected, .available {
+  :global {
-  color: var(--colorSuccess);
+    .connected, .available {
-}
+      color: var(--colorSuccess);
+    }
 
-.disconnected, .deleting, .unavailable {
+    .disconnected, .deleting, .unavailable {
-  color: var(--halfGray);
+      color: var(--halfGray);
+    }
+  }
 }
 
 .labelsCell {

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 { createStorage, 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";
@@ -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(),
   };
@@ -254,11 +252,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,12 +268,12 @@ export class Catalog extends React.Component<Props> {
           entity => entity.searchFields,
         ]}
         renderTableHeader={[
-          { title: "", className: css.iconCell, id: "icon" },
+          { title: "Icon", className: styles.iconCell, id: "icon" },
-          { title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" },
+          { title: "Name", sortBy: sortBy.name, id: "name" },
-          !activeCategory && { title: "Kind", className: css.kindCell, sortBy: sortBy.kind, id: "kind" },
+          !activeCategory && { title: "Kind", sortBy: sortBy.kind, id: "kind" },
-          { title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" },
+          { title: "Source", className: styles.sourceCell, sortBy: sortBy.source, id: "source" },
-          { title: "Labels", className: css.labelsCell, id: "labels" },
+          { title: "Labels", className: styles.labelsCell, id: "labels" },
-          { title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" },
+          { title: "Status", className: styles.statusCell, sortBy: sortBy.status, id: "status" },
         ].filter(Boolean)}
         customizeTableRowProps={item => ({
           disabled: !item.enabled,
@@ -286,7 +284,7 @@ export class Catalog extends React.Component<Props> {
           !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}
@@ -302,7 +300,7 @@ export class Catalog extends React.Component<Props> {
     return (
       <MainLayout sidebar={this.renderNavigation()}>
         <div className="p-6 h-full">
-          { this.renderList() }
+          {this.renderList()}
         </div>
         {
           this.catalogEntityStore.selectedItem