diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index faaa5f6c73..1f572d3345 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -101,7 +101,15 @@ const AggregationPanel = ({
case 'text':
return ;
case 'keyValue':
- return ;
+ return (
+
+ );
case 'table':
return ;
case 'image':
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 58edd2a41e..0cee53e290 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -21,6 +21,19 @@
font-size: 14px;
display: flex;
gap: 10px;
+ align-items: center;
+
+ .copyIcon {
+ display: none;
+ cursor: pointer;
+ margin-left: 4px;
+ color: inherit;
+ opacity: 0.6;
+ }
+
+ &:hover .copyIcon {
+ display: inline-block;
+ }
}
.video {
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index cf53193e6d..2d2fcd3cb1 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -1,4 +1,6 @@
import React from 'react';
+import copy from 'copy-to-clipboard';
+import Icon from 'components/Icon/Icon.react';
import styles from './AggregationPanel.scss';
// Text Element Component
@@ -9,18 +11,30 @@ export const TextElement = ({ text, style}) => (
);
// Key-Value Element Component
-export const KeyValueElement = ({ item, appName, style }) => (
-
-);
+export const KeyValueElement = ({ item, appName, style, showNote }) => {
+ const handleCopy = () => {
+ copy(String(item.value));
+ if (showNote) {
+ showNote('Value copied to clipboard', false);
+ }
+ };
+
+ return (
+
+ {item.key}:
+ {item.url ? (
+
+ {item.value}
+
+ ) : (
+
{item.value}
+ )}
+
+
+
+
+ );
+};
// Table Element Component
export const TableElement = ({ columns, rows, style }) => (