diff --git a/packages/ui/src/components/metrics-table/metrics-table.jsx b/packages/ui/src/components/metrics-table/metrics-table.jsx index 0fe196cccc..bdcf346322 100644 --- a/packages/ui/src/components/metrics-table/metrics-table.jsx +++ b/packages/ui/src/components/metrics-table/metrics-table.jsx @@ -22,27 +22,25 @@ const getHeaderCell = (items, showHeaderSum) => (run, index, runs) => { const { label, internalBuildNumber } = run; const jobName = ( - + {label} ); return { - children: showHeaderSum - ? ( -
- {jobName} - -
- ) : jobName, + children: showHeaderSum ? ( +
+ {jobName} + +
+ ) : ( + jobName + ), className, }; }; @@ -63,42 +61,44 @@ const generateRowCell = () => (item) => { return '-'; } - const { - displayValue, deltaPercentage, displayDeltaPercentage, deltaType, - } = item; + const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = item; return ( {deltaPercentage ? ( - + ) : null} ); }; -const getRows = (runs, items, renderRowHeader) => items.map((item) => { - const { changed } = item; +const getRows = (runs, items, renderRowHeader) => + items.map((item, index) => { + const { changed } = item; - return { - className: changed ? '' : styles.unchanged, - cells: [ - // Metric name - renderRowHeader(item), - - // Metric item values - ...item.runs.map(generateRowCell()), - ], - }; -}); + return { + key: item?.key || index, + className: changed ? '' : styles.unchanged, + cells: [ + // Metric name + renderRowHeader(item), + + // Metric item values + ...item.runs.map(generateRowCell()), + ], + }; + }); export const MetricsTable = ({ - className, renderRowHeader, runs, items, emptyMessage, showHeaderSum, + className, + renderRowHeader, + runs, + items, + emptyMessage, + showHeaderSum, }) => ( 1) && styles.multipleRuns)} + className={cx(styles.root, className, runs.length > 1 && styles.multipleRuns)} headers={getHeaders(runs, items, showHeaderSum)} rows={getRows(runs, items, renderRowHeader)} emptyMessage={emptyMessage} @@ -115,17 +115,23 @@ MetricsTable.defaultProps = { MetricsTable.propTypes = { className: PropTypes.string, renderRowHeader: PropTypes.func, - runs: PropTypes.arrayOf(PropTypes.shape({ - internalBuildNumber: PropTypes.number, - })).isRequired, - items: PropTypes.arrayOf(PropTypes.shape({ - key: PropTypes.string, - label: PropTypes.string, - runs: PropTypes.arrayOf(PropTypes.shape({ - displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - displayDelta: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - })), - })).isRequired, + runs: PropTypes.arrayOf( + PropTypes.shape({ + internalBuildNumber: PropTypes.number, + }), + ).isRequired, + items: PropTypes.arrayOf( + PropTypes.shape({ + key: PropTypes.string, + label: PropTypes.string, + runs: PropTypes.arrayOf( + PropTypes.shape({ + displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + displayDelta: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + }), + ), + }), + ).isRequired, emptyMessage: PropTypes.element, showHeaderSum: PropTypes.bool, }; diff --git a/packages/ui/src/ui/box/__snapshots__/box.stories.storyshot b/packages/ui/src/ui/box/__snapshots__/box.stories.storyshot index c9103d08b4..0602054414 100644 --- a/packages/ui/src/ui/box/__snapshots__/box.stories.storyshot +++ b/packages/ui/src/ui/box/__snapshots__/box.stories.storyshot @@ -83,145 +83,164 @@ exports[`Storyshots UI/Box with table 1`] = ` className="root" > - - - - - + + - - + + - - + + + + - - - - + + - - + + - - - + c1 + + + + + - - - + + - - + + - - - + c2 + + + + + - - - + + - - + + - - + + + +
+
- Col A - - + Col A + - Col B - - + Col B + - Col C -
+ Col C +
- - a1 - - + a1 + - b1 - - + b1 + - c1 -
- - a2 - - + a2 + - b2 - - + b2 + - c2 -
- - a3 - - + a3 + - b3 - - + b3 + - c3 -
+ c3 +
diff --git a/packages/ui/src/ui/table/__snapshots__/table.stories.storyshot b/packages/ui/src/ui/table/__snapshots__/table.stories.storyshot index 439b6fdff3..f5a7b12d81 100644 --- a/packages/ui/src/ui/table/__snapshots__/table.stories.storyshot +++ b/packages/ui/src/ui/table/__snapshots__/table.stories.storyshot @@ -45,111 +45,123 @@ exports[`Storyshots UI/Table default 1`] = ` className="root" > - - - - a1 - - - - + a1 + + + - b1 - - - - + b1 + + + - c1 - - - - + c1 + + + + + - - - a2 - - - - + a2 + + + - b2 - - - - + b2 + + + - c2 - - - - + c2 + + + + + - - - a3 - - - - + a3 + + + - b3 - - - - + b3 + + + - c3 - - - + + c3 + + + + @@ -177,7 +189,9 @@ exports[`Storyshots UI/Table empty 1`] = ` className="root" > - + - + - - + - - - - - - + + + + - Col A (right) - - - - + Col A (right) + + + - Col B (center) - - - - + Col B (center) + + + - Col C (underline) - - - + + Col C (underline) + + + + - - - - - row 1 - - - - - + + row 1 + + + + - - a1 - - - - - + + a1 + + + + - b1 - - - - + b1 + + + - c1 - - - - + c1 + + + + + - - - - row 2 - - - - - + + + row 2 + + + + - a2 - - - - + a2 + + + - b2 - - - - + b2 + + + - c2 - - - - + c2 + + + + + - - - - row 2 - - - - - + + row 2 + + + + - a3 - - - - + a3 + + + - b3 - - - - + b3 + + + - c3 - - - + + c3 + + + + @@ -711,145 +755,164 @@ exports[`Storyshots UI/Table with headers 1`] = ` className="root" > - - + - - Col A - - - - + Col A + + + - Col B - - - - + Col B + + + - Col C - - - + + Col C + + + + - - - - a1 - - - - + a1 + + + - b1 - - - - + b1 + + + - c1 - - - - + c1 + + + + + - - - a2 - - - - + a2 + + + - b2 - - - - + b2 + + + - c2 - - - - + c2 + + + + + - - - a3 - - - - + a3 + + + - b3 - - - - + b3 + + + - c3 - - - + + c3 + + + + @@ -907,145 +970,164 @@ exports[`Storyshots UI/Table with outline 1`] = ` className="root outline" > - - + - - Col A - - - - + Col A + + + - Col B - - - - + Col B + + + - Col C - - - + + Col C + + + + - - - - a1 - - - - + a1 + + + - b1 - - - - + b1 + + + - c1 - - - - + c1 + + + + + - - - a2 - - - - + a2 + + + - b2 - - - - + b2 + + + - c2 - - - - + c2 + + + + + - - - a3 - - - - + a3 + + + - b3 - - - - + b3 + + + - c3 - - - + + c3 + + + + @@ -1100,138 +1182,153 @@ exports[`Storyshots UI/Table with row headers 1`] = ` className="root" > - - - - row 1 - - - - + row 1 + + + - a1 - - - - + a1 + + + - b1 - - - - + b1 + + + - c1 - - - - + c1 + + + + + - - - row 2 - - - - + row 2 + + + - a2 - - - - + a2 + + + - b2 - - - - + b2 + + + - c2 - - - - + c2 + + + + + - - - row 3 - - - - + row 3 + + + - a3 - - - - + a3 + + + - b3 - - - - + b3 + + + - c3 - - - + + c3 + + + + diff --git a/packages/ui/src/ui/table/table.jsx b/packages/ui/src/ui/table/table.jsx index 13f57e9ea4..21d34a42f8 100644 --- a/packages/ui/src/ui/table/table.jsx +++ b/packages/ui/src/ui/table/table.jsx @@ -16,12 +16,24 @@ const getColumnAttributes = (headers, hasRowHeader, cellId) => { return typeof header === 'object' ? omit(header, ['children']) : {}; }; +const Tr = (props) => { + const { className } = props; + return ; +}; + +Tr.defaultProps = { + className: '', +}; + +Tr.propTypes = { + /** Adopted child class name */ + className: PropTypes.string, +}; + const Th = (props) => { const { className, ...restProps } = props; - return ( - - ); + return ; }; Th.defaultProps = { @@ -35,9 +47,7 @@ Th.propTypes = { const Td = (props) => { const { className, ...restProps } = props; - return ( - - ); + return ; }; Td.defaultProps = { @@ -51,56 +61,51 @@ Td.propTypes = { const renderHeader = (header, index) => { const headerProps = { - key: (header && header.key) || index, - ...typeof header === 'object' && !React.isValidElement(header) ? header : { children: header }, + key: `header-${index}`, + ...(typeof header === 'object' && !React.isValidElement(header) + ? header + : { children: header }), }; return ; }; -export const Table = ({ - className, emptyMessage, outline, headers, rows, -}) => ( +export const Table = ({ className, emptyMessage, outline, headers, rows }) => ( - {(headers && headers.length > 0) && ( + {headers && headers.length > 0 && ( - - {headers.map(renderHeader)} - + {headers.map(renderHeader)} )} - {rows.length > 0 && rows.map(({ - className: rowCustomClassName, - cells = [], - header = '', - key, - ...rowProps - }, index) => { - const rowClassNames = cx(css.row, rowCustomClassName); - - return ( - - {header ? renderHeader(header) : null} - {cells.map((cell, cellIndex) => { - const cellProps = { - key: (cell && cell.key) || cellIndex, - ...getColumnAttributes(headers, !!header, cellIndex), - ...typeof cell === 'object' && !React.isValidElement(cell) ? cell : { children: cell }, - }; - - return - ); - })} + {rows.length > 0 && + rows.map( + ({ className: rowCustomClassName, cells = [], header = '', key, ...rowProps }, index) => { + const rowKey = `row-${key || index}`; + + return ( + + {header && renderHeader(header)} + + {cells.map((cell, cellIndex) => { + const cellProps = { + key: cell?.key || `${rowKey}-${cellIndex}`, + ...getColumnAttributes(headers, !!header, cellIndex), + ...(typeof cell === 'object' && !React.isValidElement(cell) + ? cell + : { children: cell }), + }; + + return + ); + }, + )} {rows.length === 0 && ( - - +
; - })} -
; + })} +
+
{emptyMessage}