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 }) => ( -
- {item.key}: - {item.url ? ( - - {item.value} - - ) : ( - {item.value} - )} -
-); +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 }) => (