Fix catalog & workloads table view (#7371)

* Fix catalog list table view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Wrap ingresses rules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Reduce Badge sizing

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Do not text-overflow:ellipsis in Pod names

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Save a room to table head cells

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Update snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

---------

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

packages/core/src/renderer/components/+catalog/catalog.module.scss

@@ -8,6 +8,10 @@
     opacity: 1;
   }
 
+  :global(.TableCell) {
+    padding: 6px 8px;
+  }
+
   flex-grow: 1;
 }
 

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

@@ -276,6 +276,9 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
         {...getCategoryColumns({ activeCategory })}
         onDetails={this.props.onCatalogEntityListClick}
         renderItemMenu={this.renderItemMenu}
+        tableProps={{
+          customRowHeights: () => 36, // Entity avatar size + padding
+        }}
         data-testid={`catalog-list-for-${activeCategory?.metadata.name ?? "browse-all"}`}
       />
     );

packages/core/src/renderer/components/+network-ingresses/ingresses.scss

@@ -12,7 +12,7 @@
     &.rules {
       flex-grow: 3.0;
       overflow-x: scroll;
-      text-overflow: unset;
+      flex-wrap: wrap;
 
       &::-webkit-scrollbar {
         display: none;
@@ -20,7 +20,6 @@
 
       .ingressRule {
         overflow: hidden;
-        text-overflow: ellipsis;
       }
 
       .ingressRule + .ingressRule {

packages/core/src/renderer/components/+workloads-pods/pods.tsx

@@ -29,6 +29,7 @@ import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.inject
 import eventStoreInjectable from "../+events/store.injectable";
 import podStoreInjectable from "./store.injectable";
 import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
+import { Tooltip } from "../tooltip";
 
 enum columnId {
   name = "name",
@@ -163,13 +164,14 @@ class NonInjectedPods extends React.Component<Dependencies> {
             { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
           ]}
           renderTableContents={pod => [
-            <Badge
-              flat
-              key="name"
-              label={pod.getName()}
-              tooltip={pod.getName()}
-              expandable={false}
-            />,
+            <>
+              <span id={`list-pod-${pod.getId()}`}>
+                {pod.getName()}
+              </span>
+              <Tooltip targetId={`list-pod-${pod.getId()}`}>
+                {pod.getName()}
+              </Tooltip>
+            </>,
             <KubeObjectStatusIcon key="icon" object={pod} />,
             <NamespaceSelectBadge
               key="namespace"

packages/core/src/renderer/components/badge/badge.module.scss

@@ -34,7 +34,8 @@
 .badge:not(.flat) {
   background: var(--colorVague);
   border-radius: 3px;
-  padding: .2em .4em;
+  line-height: normal;
+  padding: 0.2rem 0.4rem;
 }
 
 .small {

packages/core/src/renderer/components/line-progress/line-progress.scss

@@ -14,6 +14,7 @@
   .line {
     background: currentColor;
     display: block;
+    width: 100%;
     height: 100%;
     border-radius: inherit;
     transition: 250ms width ease-in;

packages/core/src/renderer/components/table/table-cell.scss

@@ -4,11 +4,13 @@
  */
 
 .TableCell {
+  position: relative;
   padding: $padding;
   word-break: break-all;
   overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1;
+  line-height: 1.1;
+  display: flex;
+  align-items: center;
 
   &.menu {
     @include table-cell-action;
@@ -39,43 +41,29 @@
     }
   }
 
-  // fix: don't hide "sortIcon" when used with <TableHead nowrap> and there is not enough space to show all the content
   &.sorting.nowrap {
     display: flex;
     align-items: center;
+  }
 
-    > * {
-      flex-shrink: 0;
-    }
+  .sortIcon {
+    transition: 150ms opacity;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    background: var(--tableHeaderBackground);
 
-    > .content {
-      flex-shrink: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    > .sortIcon {
-      margin: 0;
+    &.enabled {
+      opacity: 1;
     }
   }
 
-  .Table.sortable > .TableHead & {
-    user-select: none;
-    white-space: nowrap;
+  &:hover .sortIcon {
+    opacity: 1;
+  }
 
-    &.sorting {
-      cursor: pointer;
-    }
-
-    .sortIcon {
-      transition: 350ms opacity;
-      opacity: .3;
-
-      &.enabled {
-        opacity: 1;
-      }
-    }
+  &.sorting {
+    cursor: pointer;
   }
 
   a {

packages/core/src/renderer/components/table/table-head.scss

@@ -9,6 +9,8 @@
   color: var(--tableHeaderColor);
   display: flex;
   flex-shrink: 0;
+  user-select: none;
+  white-space: nowrap;
 
   &.topLine {
     border-top: 1px solid var(--borderFaintColor);