From 7ef219b1e25e69eaf2128e9b8cefc0475635a9a7 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Mon, 7 Jul 2025 12:53:12 +0200
Subject: [PATCH 1/2] feat: add copy icon to aggregation panel

---
 .../AggregationPanel/AggregationPanel.js      | 10 ++++-
 .../AggregationPanel/AggregationPanel.scss    | 11 ++++++
 .../AggregationPanelComponents.js             | 38 +++++++++++++------
 3 files changed, 46 insertions(+), 13 deletions(-)

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 <TextElement key={idx} text={item.text} style={item.style} />;
             case 'keyValue':
-              return <KeyValueElement key={idx} item={item} appName={appName} style={item.style} />;
+              return (
+                <KeyValueElement
+                  key={idx}
+                  item={item}
+                  appName={appName}
+                  showNote={showNote}
+                  style={item.style}
+                />
+              );
             case 'table':
               return <TableElement key={idx} columns={item.columns} rows={item.rows} style={item.style} />;
             case 'image':
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 58edd2a41e..4e533f7b6b 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -21,6 +21,17 @@
     font-size: 14px;
     display: flex;
     gap: 10px;
+    align-items: center;
+
+    .copyIcon {
+        display: none;
+        cursor: pointer;
+        margin-left: 4px;
+    }
+
+    &:hover .copyIcon {
+        display: inline-block;
+    }
 }
 
 .video {
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index cf53193e6d..b2eda45ce2 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 }) => (
-  <div className={styles.keyValue} style={style}>
-    {item.key}:
-    {item.url ? (
-      <a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank" rel="noreferrer">
-        {item.value}
-      </a>
-    ) : (
-      <span>{item.value}</span>
-    )}
-  </div>
-);
+export const KeyValueElement = ({ item, appName, style, showNote }) => {
+  const handleCopy = () => {
+    copy(String(item.value));
+    if (showNote) {
+      showNote('Value copied to clipboard', false);
+    }
+  };
+
+  return (
+    <div className={styles.keyValue} style={style}>
+      {item.key}:
+      {item.url ? (
+        <a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank" rel="noreferrer">
+          {item.value}
+        </a>
+      ) : (
+        <span>{item.value}</span>
+      )}
+      <span className={styles.copyIcon} onClick={handleCopy}>
+        <Icon name="clone-icon" width={12} height={12} />
+      </span>
+    </div>
+  );
+};
 
 // Table Element Component
 export const TableElement = ({ columns, rows, style }) => (

From 597357596ec1823bde5539a7c7d21e0bfc389d32 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Mon, 7 Jul 2025 13:14:02 +0200
Subject: [PATCH 2/2] chore: refine copy icon styling

---
 src/components/AggregationPanel/AggregationPanel.scss         | 2 ++
 src/components/AggregationPanel/AggregationPanelComponents.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 4e533f7b6b..0cee53e290 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -27,6 +27,8 @@
         display: none;
         cursor: pointer;
         margin-left: 4px;
+        color: inherit;
+        opacity: 0.6;
     }
 
     &:hover .copyIcon {
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index b2eda45ce2..2d2fcd3cb1 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -30,7 +30,7 @@ export const KeyValueElement = ({ item, appName, style, showNote }) => {
         <span>{item.value}</span>
       )}
       <span className={styles.copyIcon} onClick={handleCopy}>
-        <Icon name="clone-icon" width={12} height={12} />
+        <Icon name="clone-icon" width={12} height={12} fill="currentColor" />
       </span>
     </div>
   );