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

Signed-off-by: Roman <ixrock@gmail.com>
lensapp · Oct 29, 2021 · 621c303 · 621c303
1 parent 6c59955
commit 621c303
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 83 deletions.
diff --git a/src/common/utils/makeCss.ts b/src/common/utils/makeCss.ts
diff --git a/src/renderer/components/+catalog/catalog-entity-item.tsx b/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}

diff --git a/src/renderer/components/+catalog/catalog.module.css b/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) {
-  .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;
-      }
+.Catalog {}
+
+.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 {
-  @apply flex items-center max-w-[40px];
-}
+  padding-top: calc(var(--padding) / 2);
+  flex: 0 0 40px !important;
 
-.iconCell > div * {
-  font-size: var(--unit);
-}
+  :global(.content) {
+    display: none; /* hide "Icon" text in the header */
+  }
+
+  div * {
+    font-size: var(--unit); /* icon's with plain text */
+  }
 
-.nameCell {
+  :global(.Icon) {
+    font-size: var(--small-size) !important;
+  }
 }
 
 .sourceCell {
@@ -64,14 +66,16 @@
 
 .statusCell {
   max-width: 100px;
-}
 
-.connected, .available {
-  color: var(--colorSuccess);
-}
+  :global {
+    .connected, .available {
+      color: var(--colorSuccess);
+    }
 
-.disconnected, .deleting, .unavailable {
-  color: var(--halfGray);
+    .disconnected, .deleting, .unavailable {
+      color: var(--halfGray);
+    }
+  }
 }
 
 .labelsCell {

diff --git a/src/renderer/components/+catalog/catalog.tsx b/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(),
   };
@@ -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: "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: "Icon", className: styles.iconCell, id: "icon" },
+          { title: "Name", 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,
@@ -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 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