diff --git a/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/clusterItemsGridRow/clusterItemsGridRow.jsx b/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/clusterItemsGridRow/clusterItemsGridRow.jsx index 25c9aad25e..86b773c324 100644 --- a/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/clusterItemsGridRow/clusterItemsGridRow.jsx +++ b/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/clusterItemsGridRow/clusterItemsGridRow.jsx @@ -134,11 +134,11 @@ export const ClusterItemsGridRow = ({ data, onEditItem, onUnlinkSingleTicket, on {extensions.map((extension) => ( -
+
))} -
+
{matchedTests}
diff --git a/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/clusterItemsGridRow/clusterItemsGridRow.scss b/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/clusterItemsGridRow/clusterItemsGridRow.scss index 0e3f23cb16..2393135995 100644 --- a/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/clusterItemsGridRow/clusterItemsGridRow.scss +++ b/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/clusterItemsGridRow/clusterItemsGridRow.scss @@ -30,6 +30,14 @@ &-full-width { width: 100%; } + + &.matched-tests { + width: 130px; + } + + &.extension-col { + width: 165px; + } } .matched-tests-col-text { @@ -37,11 +45,10 @@ font-family: $FONT-REGULAR; font-size: 12px; text-align: right; - right: 24px; + padding-right: 24px; display: block; width: 130px; - top: 12px; - position: absolute; + padding-top: 12px; } .expand-col { diff --git a/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/uniqueErrorsGrid.jsx b/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/uniqueErrorsGrid.jsx index dd06d54081..ca1b2b8c60 100644 --- a/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/uniqueErrorsGrid.jsx +++ b/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/uniqueErrorsGrid.jsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames/bind'; import { Grid } from 'components/main/grid'; @@ -62,17 +62,25 @@ export const UniqueErrorsGridWrapped = ({ parentLaunch, data, loading, ...rest } }, ]; - if (extensions.length) { - extensions.forEach((extension) => { - columns.push({ + const memoizedExtensionsColumns = useMemo(() => { + if (!extensions.length) return []; + + return extensions.map((extension) => { + const MemoizedComponent = (params) => ( +
+ +
+ ); + + return { title: { - component: (params) => , + component: MemoizedComponent, }, - }); + }; }); - } + }, [extensions]); - columns.push({ + columns.push(...memoizedExtensionsColumns, { id: MATCHED_TESTS_COLUMN_ID, title: { full: 'MATCHED TESTS', diff --git a/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/uniqueErrorsGrid.scss b/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/uniqueErrorsGrid.scss index 2192f81607..3a41f6aa38 100644 --- a/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/uniqueErrorsGrid.scss +++ b/app/src/pages/inside/uniqueErrorsPage/uniqueErrorsGrid/uniqueErrorsGrid.scss @@ -25,3 +25,7 @@ .matched-header{ width: 130px; } + +.extension-col { + width: 165px; +}