diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index a05fa44587..fa53edc166 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -137,7 +137,9 @@ const AggregationPanel = ({
{segment.items.map((item, idx) => {
switch (item.type) {
case 'text':
- return ;
+ return (
+
+ );
case 'keyValue':
return (
);
case 'table':
- return ;
+ return (
+
+ );
case 'image':
return ;
case 'video':
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index c5c362bbae..7b892330bd 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -22,18 +22,26 @@
display: flex;
gap: 10px;
align-items: center;
+}
- .copyIcon {
- display: none;
- cursor: pointer;
- margin-left: 4px;
- color: inherit;
- opacity: 0.6;
- }
+.textElement {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
- &:hover .copyIcon {
- display: inline-block;
- }
+.copyIcon {
+ display: none;
+ cursor: pointer;
+ margin-left: 4px;
+ color: inherit;
+ opacity: 0.6;
+}
+
+.keyValue:hover .copyIcon,
+.textElement:hover .copyIcon,
+.tableCell:hover .copyIcon {
+ display: inline-block;
}
.video {
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index e3c4eddbc3..c7bec145b2 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -3,10 +3,27 @@ import copy from 'copy-to-clipboard';
import Icon from 'components/Icon/Icon.react';
import styles from './AggregationPanel.scss';
+// Copy-to-clipboard icon button shown on hover
+const CopyButton = ({ value, showNote }) => {
+ const handleCopy = () => {
+ copy(String(value));
+ if (showNote) {
+ showNote('Value copied to clipboard', false);
+ }
+ };
+
+ return (
+
+
+
+ );
+};
+
// Text Element Component
-export const TextElement = ({ text, style }) => (
-
+export const TextElement = ({ text, style, showNote }) => (
+
);
@@ -16,13 +33,6 @@ export const KeyValueElement = ({ item, appName, style, showNote }) => {
? [{ value: item.value, url: item.url, isRelativeUrl: item.isRelativeUrl }, ...item.values]
: [{ value: item.value, url: item.url, isRelativeUrl: item.isRelativeUrl }];
- const handleCopy = () => {
- copy(String(item.value));
- if (showNote) {
- showNote('Value copied to clipboard', false);
- }
- };
-
const renderValue = ({ value, url, isRelativeUrl }) => {
if (url) {
return (
@@ -44,15 +54,13 @@ export const KeyValueElement = ({ item, appName, style, showNote }) => {
{renderValue(val)}
))}
-
-
-
+
);
};
// Table Element Component
-export const TableElement = ({ columns, rows, style }) => (
+export const TableElement = ({ columns, rows, style, showNote }) => (
@@ -65,9 +73,17 @@ export const TableElement = ({ columns, rows, style }) => (
{rows.map((row, idx) => (
- {columns.map((column, colIdx) => (
- | {row[column.name]} |
- ))}
+ {columns.map((column, colIdx) => {
+ const value = row[column.name];
+ return (
+
+ {value}
+ {value !== undefined && value !== null && value !== '' && (
+
+ )}
+ |
+ );
+ })}
))}