fix: when sidecar is open, only show status badge, not status text

Fixes #4058

Author: starpit

plugins/plugin-client-common/src/components/Table/TableCell.tsx

@@ -76,6 +76,9 @@ export default function renderCell(
         />
       )
     } else {
+      const tag = cidx > 0 && kuiRow.attributes[cidx - 1].tag
+      const innerText = (kuiRow.attributes[cidx - 1] && kuiRow.attributes[cidx - 1].valueDom) || cell.value
+
       return (
         <TableCell
           key={cell.id}
@@ -90,15 +93,18 @@ export default function renderCell(
           <span
             data-key={cidx === 0 ? kuiRow.key : kuiRow.attributes[cidx - 1].key}
             data-value={cell.value}
-            data-tag={cidx > 0 && kuiRow.attributes[cidx - 1].tag}
+            data-tag={tag}
             className={
               'cell-inner ' +
               (cidx === 0
                 ? (kuiRow.css || '') + (kuiRow.onclick ? ' clickable' : '')
                 : (kuiRow.attributes[cidx - 1].css || '') + (kuiRow.attributes[cidx - 1].onclick ? ' clickable' : ''))
             }
           >
-            {(kuiRow.attributes[cidx - 1] && kuiRow.attributes[cidx - 1].valueDom) || cell.value}
+            {tag === 'badge' && (
+              <span title={innerText} data-tag="badge-circle" className={kuiRow.attributes[cidx - 1].css} />
+            )}
+            <span className="kui--cell-inner-text">{innerText}</span>
           </span>
         </TableCell>
       )

plugins/plugin-client-common/web/css/static/ui.css

@@ -1151,14 +1151,6 @@ body[kui-theme-style] a:hover:not(.plain-anchor) {
 
 badge,
 [data-tag="badge"] {
-  & {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 600;
-    background-color: var(--color-tag-beta-fill);
-    color: var(--color-tag-beta-text);
-  }
   &.clickable:hover {
     /* no underline effect for icons (i) and badges */
     text-decoration: none;

plugins/plugin-client-common/web/scss/components/Table/badges.scss

@@ -1,40 +1,57 @@
 .bx--data-table {
-  [data-tag='badge']:not(.badge-as-image):not(.badge-as-fontawesome) {
-    color: var(--color-text-02);
-    background-color: transparent !important;
+  [data-tag='badge'] {
     display: flex;
     align-items: center;
-    font-weight: normal;
   }
-  [data-tag='badge']:not(.badge-as-image):not(.badge-as-fontawesome):before {
-    content: '';
+  [data-tag='badge-circle'] {
     margin-right: 1ex;
-    width: 0.75em;
-    height: 0.75em;
+    width: 0.875em;
+    height: 0.875em;
     background-color: var(--color-ui-05);
     border-radius: 50%;
   }
-  [data-tag='badge'].green-background:not(.badge-as-image):before {
+  [data-tag='badge-circle'].green-background {
     background-color: var(--color-green);
     color: var(--color-ui-01);
   }
-  [data-tag='badge'].yellow-background:not(.badge-as-image):before,
+  [data-tag='badge-circle'].yellow-background,
   button.yellow-background {
     background: var(--color-yellow);
     color: var(--color-ui-01);
   }
-  [data-tag='badge'].red-background:not(.badge-as-image):before {
+  [data-tag='badge-circle'].red-background {
     background: var(--color-red);
     color: var(--color-ui-01);
   }
-  [data-tag='badge'].gray-background:not(.badge-as-image):before {
+  [data-tag='badge-circle'].gray-background {
     background: var(--color-processing);
     color: var(--color-ui-02);
   }
 }
 
+.repl.sidecar-visible .bx--data-table-container .bx--data-table {
+  th[data-key='STATUS'] {
+    padding-left: 0;
+  }
+  [data-tag='badge'] {
+    justify-content: center;
+
+    [data-tag='badge-circle'] {
+      margin: 0;
+      width: 1em;
+      height: 1em;
+      border-radius: 0;
+    }
+
+    .kui--cell-inner-text {
+      /* show only the badge-circle when the sidecar is open */
+      display: none;
+    }
+  }
+}
+
 [data-table-watching='true'] .bx--data-table {
-  [data-tag='badge'].yellow-background:not(.badge-as-image) {
+  [data-tag='badge-circle'].yellow-background {
     animation: var(--animation-repeating-pulse);
   }
 }

plugins/plugin-kubectl/src/lib/view/modes/Form.tsx

@@ -43,7 +43,7 @@ export default function SidecarForm({
           (typeof vvalue === 'number' ? vvalue.toLocaleString() : typeof vvalue !== 'object' ? vvalue : vvalue.label) ||
           ''
 
-        const colspan = Math.max(Math.ceil(key.length / 8), Math.ceil(value.length / 3))
+        const colspan = Math.max(Math.ceil(key.length / 7.5), Math.ceil(value.length / 3))
         const style = { gridColumn: `span ${colspan > 15 ? 8 : colspan}` }
         const className = typeof vvalue !== 'object' ? undefined : 'kui--form-item--for-label'
 
@@ -63,16 +63,22 @@ export default function SidecarForm({
 
 export function FormWithLabels(props: { map: FormMap; resource: KubeResource }) {
   const labelMap: FormMap = {}
+  let nLabels = 0
   if (props.resource.metadata && props.resource.metadata.labels) {
     for (const key in props.resource.metadata.labels) {
+      nLabels++
       labelMap[`${key} label`] = { label: props.resource.metadata.labels[key] }
     }
   }
 
   return (
     <div className="padding-content scrollable">
       <SidecarForm nested map={props.map} />
-      <SidecarForm nested map={labelMap} className="top-pad" />
+      {nLabels > 0 && (
+        <div style={{ paddingTop: '1em' }}>
+          <SidecarForm nested map={labelMap} className="top-pad" />
+        </div>
+      )}
     </div>
   )
 }