fix(ui): MetricsTable - span empty message across all columns

relative-ci · Jul 10, 2023 · eb735f2 · eb735f2
1 parent 8931a6a
commit eb735f2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/packages/ui/src/components/metrics-table/metrics-table.jsx b/packages/ui/src/components/metrics-table/metrics-table.jsx
@@ -93,7 +93,7 @@ const getHeaderTotalCells = (rows) => (run, runIndex, runs) => {
 
 const getHeaderRows = (runs, items, showHeaderSum, title) => [
   {
-    className: styles.headerRowColumns,
+    className: styles.headerRow,
     cells: [
       // Metric name column - one empty strying to render the column
       {
@@ -181,21 +181,20 @@ export const MetricsTable = ({
   items,
   emptyMessage,
   showHeaderSum,
-  headerRows,
+  headerRows: parentHeaderRows,
   title,
   showAllItems,
   setShowAllItems,
   ...restProps
 }) => {
-  const { headers, columnClassNames } = useMemo(() => {
-    const headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
+  const { headers, columnCount } = useMemo(() => {
+    const headerRows = getHeaderRows(runs, items, showHeaderSum, title);
 
     return {
-      headers: [...headerRows, ...headerColumns],
-      // First header row has the column class names
-      columnClassNames: headerColumns[0].cells.map((headerColumn) => headerColumn.className),
+      headers: [...parentHeaderRows, ...headerRows],
+      columnCount: sum(headerRows[0].cells?.map((cell) => cell.colSpan || 1)),
     };
-  }, [headerRows, runs, items, showHeaderSum, title]);
+  }, [parentHeaderRows, runs, items, showHeaderSum, title]);
 
   const rootClassName = cx(
     styles.root,
@@ -229,7 +228,7 @@ export const MetricsTable = ({
       <Table.TBody>
         {showEmpty && (
           <Table.Tr>
-            <Table.Td className={styles.empty} colSpan={columnClassNames?.length || 1}>
+            <Table.Td className={styles.empty} colSpan={columnCount}>
               <Stack space="xxsmall">
                 <div>
                   <Icon glyph={Icon.ICONS.INFO} className={styles.emptyIcon} size="large" />
@@ -248,7 +247,7 @@ export const MetricsTable = ({
 
             {hasHiddenItems && (
               <Table.Tr>
-                <Table.Td className={styles.showAllItems} colSpan={columnClassNames?.length || 1}>
+                <Table.Td className={styles.showAllItems} colSpan={columnCount}>
                   {showAllItems ? (
                       <button
                         onClick={() => setShowAllItems(false)}

diff --git a/packages/ui/src/components/metrics-table/metrics-table.module.css b/packages/ui/src/components/metrics-table/metrics-table.module.css
@@ -41,8 +41,8 @@
 }
 
 /* columns overrides for showHeaderSum */
-.showHeaderSum .headerRowColumns .value,
-.showHeaderSum .headerRowColumns .delta {
+.showHeaderSum .headerRow .value,
+.showHeaderSum .headerRow .delta {
   border-bottom: 0;
   padding-bottom: 0;
 }