Skip to content

Commit 7862c42

Browse files
authored
feat: Add clipboard icon to copy value of key-value element in info panel (#2871)
1 parent dfa8a6b commit 7862c42

File tree

3 files changed

+48
-13
lines changed

3 files changed

+48
-13
lines changed

src/components/AggregationPanel/AggregationPanel.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,15 @@ const AggregationPanel = ({
101101
case 'text':
102102
return <TextElement key={idx} text={item.text} style={item.style} />;
103103
case 'keyValue':
104-
return <KeyValueElement key={idx} item={item} appName={appName} style={item.style} />;
104+
return (
105+
<KeyValueElement
106+
key={idx}
107+
item={item}
108+
appName={appName}
109+
showNote={showNote}
110+
style={item.style}
111+
/>
112+
);
105113
case 'table':
106114
return <TableElement key={idx} columns={item.columns} rows={item.rows} style={item.style} />;
107115
case 'image':

src/components/AggregationPanel/AggregationPanel.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,19 @@
2121
font-size: 14px;
2222
display: flex;
2323
gap: 10px;
24+
align-items: center;
25+
26+
.copyIcon {
27+
display: none;
28+
cursor: pointer;
29+
margin-left: 4px;
30+
color: inherit;
31+
opacity: 0.6;
32+
}
33+
34+
&:hover .copyIcon {
35+
display: inline-block;
36+
}
2437
}
2538

2639
.video {

src/components/AggregationPanel/AggregationPanelComponents.js

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React from 'react';
2+
import copy from 'copy-to-clipboard';
3+
import Icon from 'components/Icon/Icon.react';
24
import styles from './AggregationPanel.scss';
35

46
// Text Element Component
@@ -9,18 +11,30 @@ export const TextElement = ({ text, style}) => (
911
);
1012

1113
// Key-Value Element Component
12-
export const KeyValueElement = ({ item, appName, style }) => (
13-
<div className={styles.keyValue} style={style}>
14-
{item.key}:
15-
{item.url ? (
16-
<a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank" rel="noreferrer">
17-
{item.value}
18-
</a>
19-
) : (
20-
<span>{item.value}</span>
21-
)}
22-
</div>
23-
);
14+
export const KeyValueElement = ({ item, appName, style, showNote }) => {
15+
const handleCopy = () => {
16+
copy(String(item.value));
17+
if (showNote) {
18+
showNote('Value copied to clipboard', false);
19+
}
20+
};
21+
22+
return (
23+
<div className={styles.keyValue} style={style}>
24+
{item.key}:
25+
{item.url ? (
26+
<a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank" rel="noreferrer">
27+
{item.value}
28+
</a>
29+
) : (
30+
<span>{item.value}</span>
31+
)}
32+
<span className={styles.copyIcon} onClick={handleCopy}>
33+
<Icon name="clone-icon" width={12} height={12} fill="currentColor" />
34+
</span>
35+
</div>
36+
);
37+
};
2438

2539
// Table Element Component
2640
export const TableElement = ({ columns, rows, style }) => (

0 commit comments

Comments
 (0)