Allow to scroll table columns with labels (badges) (#4358)

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

@@ -76,6 +76,7 @@ export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
     return this.labels
       .map(label => (
         <Badge
+          scrollable
           className={styles.badge}
           key={label}
           label={label}

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

@@ -264,7 +264,7 @@ export class Catalog extends React.Component<Props> {
           { 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: "Labels", className: `${styles.labelsCell} scrollable`, id: "labels" },
           { title: "Status", className: styles.statusCell, sortBy: sortBy.status, id: "status" },
         ].filter(Boolean)}
         customizeTableRowProps={item => ({

src/renderer/components/+config-autoscalers/hpa.tsx

@@ -87,7 +87,7 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
           { title: "Max Pods", className: "max-pods", sortBy: columnId.maxPods, id: columnId.maxPods },
           { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
           { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-          { title: "Status", className: "status", id: columnId.status },
+          { title: "Status", className: "status scrollable", id: columnId.status },
         ]}
         renderTableContents={hpa => [
           hpa.getName(),
@@ -108,6 +108,7 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
                 tooltip={tooltip}
                 className={cssNames(type.toLowerCase())}
                 expandable={false}
+                scrollable={true}
               />
             );
           }),

src/renderer/components/+config-secrets/secrets.tsx

@@ -69,7 +69,7 @@ export class Secrets extends React.Component<Props> {
             { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
             { className: "warning", showWithColumn: columnId.name },
             { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
-            { title: "Labels", className: "labels", sortBy: columnId.labels, id: columnId.labels },
+            { title: "Labels", className: "labels scrollable", sortBy: columnId.labels, id: columnId.labels },
             { title: "Keys", className: "keys", sortBy: columnId.keys, id: columnId.keys },
             { title: "Type", className: "type", sortBy: columnId.type, id: columnId.type },
             { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
@@ -78,7 +78,7 @@ export class Secrets extends React.Component<Props> {
             secret.getName(),
             <KubeObjectStatusIcon key="icon" object={secret} />,
             secret.getNs(),
-            secret.getLabels().map(label => <Badge key={label} label={label} expandable={false}/>),
+            secret.getLabels().map(label => <Badge scrollable key={label} label={label} expandable={false}/>),
             secret.getKeys().join(", "),
             secret.type,
             secret.getAge(),

src/renderer/components/+namespaces/namespaces.tsx

@@ -64,14 +64,14 @@ export class Namespaces extends React.Component<Props> {
           renderTableHeader={[
             { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
             { className: "warning", showWithColumn: columnId.name },
-            { title: "Labels", className: "labels", sortBy: columnId.labels, id: columnId.labels },
+            { title: "Labels", className: "labels scrollable", sortBy: columnId.labels, id: columnId.labels },
             { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
             { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
           ]}
           renderTableContents={item => [
             item.getName(),
             <KubeObjectStatusIcon key="icon" object={item} />,
-            item.getLabels().map(label => <Badge key={label} label={label}/>),
+            item.getLabels().map(label => <Badge scrollable key={label} label={label}/>),
             item.getAge(),
             { title: item.getStatus(), className: item.getStatus().toLowerCase() },
           ]}

src/renderer/components/+workloads-daemonsets/daemonsets.tsx

@@ -50,12 +50,6 @@ export class DaemonSets extends React.Component<Props> {
     return daemonSetStore.getChildPods(daemonSet).length;
   }
 
-  renderNodeSelector(daemonSet: DaemonSet) {
-    return daemonSet.getNodeSelectors().map(selector => (
-      <Badge key={selector} label={selector}/>
-    ));
-  }
-
   render() {
     return (
       <KubeObjectListLayout
@@ -79,7 +73,7 @@ export class DaemonSets extends React.Component<Props> {
           { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
           { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods },
           { className: "warning", showWithColumn: columnId.pods },
-          { title: "Node Selector", className: "labels", id: columnId.labels },
+          { title: "Node Selector", className: "labels scrollable", id: columnId.labels },
           { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={daemonSet => [
@@ -87,7 +81,9 @@ export class DaemonSets extends React.Component<Props> {
           daemonSet.getNs(),
           this.getPodsLength(daemonSet),
           <KubeObjectStatusIcon key="icon" object={daemonSet}/>,
-          this.renderNodeSelector(daemonSet),
+          daemonSet.getNodeSelectors().map(selector => (
+            <Badge key={selector} label={selector} scrollable/>
+          )),
           daemonSet.getAge(),
         ]}
       />

src/renderer/components/badge/badge.module.css

@@ -25,6 +25,18 @@
   max-width: 100%;
 }
 
+// might be used in a scrollable area with {overflow: auto}
+.badge.scrollable {
+  max-width: unset;
+
+  &:not(.isExpanded) {
+    white-space: unset;
+    overflow: unset;
+    text-overflow: unset;
+  }
+}
+
+
 .badge.interactive:hover {
   background-color: var(--mainBackground);
   cursor: pointer;

src/renderer/components/badge/badge.tsx

@@ -34,6 +34,7 @@ export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorP
   label?: React.ReactNode;
   expandable?: boolean;
   disabled?: boolean;
+  scrollable?: boolean;
 }
 
 // Common handler for all Badge instances
@@ -81,7 +82,7 @@ export class Badge extends React.Component<BadgeProps> {
   }
 
   render() {
-    const { className, label, disabled, small, children, flat, expandable, ...elemProps } = this.props;
+    const { className, label, disabled, scrollable, small, children, flat, expandable, ...elemProps } = this.props;
     const clickable = Boolean(this.props.onClick) || this.isExpandable;
     const classNames = cssNames(styles.badge, className, {
       [styles.small]: small,
@@ -90,6 +91,7 @@ export class Badge extends React.Component<BadgeProps> {
       [styles.interactive]: this.isExpandable,
       [styles.isExpanded]: this.isExpanded,
       [styles.disabled]: disabled,
+      [styles.scrollable]: scrollable,
     });
 
     return (

src/renderer/components/item-object-list/item-list-layout.scss

@@ -49,12 +49,6 @@
     position: relative;
     min-height: 200px;
   }
-
-  .TableCell {
-    &.menu {
-      @include table-cell-action;
-    }
-  }
 }
 
 .ItemListLayoutVisibilityMenu {

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

@@ -25,6 +25,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &.menu {
+    @include table-cell-action;
+  }
+
+  &.scrollable {
+    @include hidden-scrollbar;
+    display: flex;
+    align-items: center;
+
+    :not(:last-of-type) {
+      margin-right: 0.5em;
+    }
+  }
+
   &.checkbox {
     display: flex;
     flex: 0 0 32px !important;

src/renderer/components/table/table-cell.tsx

@@ -33,6 +33,7 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
   id?: string; // used for configuration visibility of columns
   className?: string;
   title?: ReactNode;
+  scrollable?: boolean; // content inside could be scrolled
   checkbox?: boolean; // render cell with a checkbox
   isChecked?: boolean; // mark checkbox as checked or not
   renderBoolean?: boolean; // show "true" or "false" for all of the children elements are "typeof boolean"
@@ -88,9 +89,11 @@ export class TableCell extends React.Component<TableCellProps> {
   }
 
   render() {
-    const { className, checkbox, isChecked, sortBy, _sort, _sorting, _nowrap, children, title, renderBoolean: displayBoolean, showWithColumn, ...cellProps } = this.props;
+    const { className, checkbox, isChecked, scrollable, sortBy, _sort, _sorting, _nowrap, children, title, renderBoolean: displayBoolean, showWithColumn, ...cellProps } = this.props;
+
     const classNames = cssNames("TableCell", className, {
       checkbox,
+      scrollable,
       nowrap: _nowrap,
       sorting: this.isSortable,
     });