feat: Add copy icon to text and table cell info-panel segments

src/components/AggregationPanel/AggregationPanel.js

@@ -137,7 +137,9 @@ const AggregationPanel = ({
         {segment.items.map((item, idx) => {
           switch (item.type) {
             case 'text':
-              return <TextElement key={idx} text={item.text} style={item.style} />;
+              return (
+                <TextElement key={idx} text={item.text} style={item.style} showNote={showNote} />
+              );
             case 'keyValue':
               return (
                 <KeyValueElement
@@ -149,7 +151,15 @@ const AggregationPanel = ({
                 />
               );
             case 'table':
-              return <TableElement key={idx} columns={item.columns} rows={item.rows} style={item.style} />;
+              return (
+                <TableElement
+                  key={idx}
+                  columns={item.columns}
+                  rows={item.rows}
+                  style={item.style}
+                  showNote={showNote}
+                />
+              );
             case 'image':
               return <ImageElement key={`${idx}-${item.url}`} url={item.url} style={item.style} />;
             case 'video':

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 {

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 (
+    <span className={styles.copyIcon} onClick={handleCopy}>
+      <Icon name="clone-icon" width={12} height={12} fill="currentColor" />
+    </span>
+  );
+};
+
 // Text Element Component
-export const TextElement = ({ text, style }) => (
-  <div className="text-element" style={style}>
+export const TextElement = ({ text, style, showNote }) => (
+  <div className={`text-element ${styles.textElement}`} style={style}>
     <p>{text}</p>
+    <CopyButton value={text} showNote={showNote} />
   </div>
 );
 
@@ -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)}
         </React.Fragment>
       ))}
-      <span className={styles.copyIcon} onClick={handleCopy}>
-        <Icon name="clone-icon" width={12} height={12} fill="currentColor" />
-      </span>
+      <CopyButton value={item.value} showNote={showNote} />
     </div>
   );
 };
 
 // Table Element Component
-export const TableElement = ({ columns, rows, style }) => (
+export const TableElement = ({ columns, rows, style, showNote }) => (
   <div className="table-element">
     <table style={style}>
       <thead>
@@ -65,9 +73,17 @@ export const TableElement = ({ columns, rows, style }) => (
       <tbody>
         {rows.map((row, idx) => (
           <tr key={idx}>
-            {columns.map((column, colIdx) => (
-              <td key={colIdx}>{row[column.name]}</td>
-            ))}
+            {columns.map((column, colIdx) => {
+              const value = row[column.name];
+              return (
+                <td key={colIdx} className={styles.tableCell}>
+                  {value}
+                  {value !== undefined && value !== null && value !== '' && (
+                    <CopyButton value={value} showNote={showNote} />
+                  )}
+                </td>
+              );
+            })}
           </tr>
         ))}
       </tbody>