diff --git a/frontend/src/components/TableRenderer/LabelColumn.tsx b/frontend/src/components/TableRenderer/LabelColumn.tsx index b7210d4557..d78d76f69e 100644 --- a/frontend/src/components/TableRenderer/LabelColumn.tsx +++ b/frontend/src/components/TableRenderer/LabelColumn.tsx @@ -1,10 +1,10 @@ import './LabelColumn.styles.scss'; import { Popover, Tag } from 'antd'; -import { popupContainer } from 'utils/selectPopupContainer'; import { LabelColumnProps } from './TableRenderer.types'; import TagWithToolTip from './TagWithToolTip'; +import { getLabelAndValueContent } from './utils'; function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element { const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels; @@ -19,19 +19,17 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element { )} {remainingLabels.length > 0 && ( {labels.map( (label: string): JSX.Element => ( - +
+ + {getLabelAndValueContent(label, value && value[label])} + +
), )} diff --git a/frontend/src/components/TableRenderer/utils.ts b/frontend/src/components/TableRenderer/utils.ts index ebceffe436..ef5ec104a2 100644 --- a/frontend/src/components/TableRenderer/utils.ts +++ b/frontend/src/components/TableRenderer/utils.ts @@ -38,6 +38,16 @@ export const getLabelRenderingValue = ( return label; }; +export const getLabelAndValueContent = ( + label: string, + value?: string, +): string => { + if (value) { + return `${label}: ${value}`; + } + return `${label}`; +}; + interface GeneratorResizeTableColumnsProp { baseColumnOptions: ColumnsType; dynamicColumnOption: { key: string; columnOption: ColumnType }[];