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) => (
-
+
))}
-
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;
+}