From 66350878be507b55d6e364e655165d8f77b50896 Mon Sep 17 00:00:00 2001
From: Tadeo Hepperle <62739623+tadeohepperle@users.noreply.github.com>
Date: Mon, 22 Jan 2024 13:39:55 +0100
Subject: [PATCH] network id column: no truncate and add copy (#572)

---
 .../List/Column/NetworkIdColumn.tsx           | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/List/Column/NetworkIdColumn.tsx b/frontend/src/components/List/Column/NetworkIdColumn.tsx
index b3a01ea..0b13cda 100644
--- a/frontend/src/components/List/Column/NetworkIdColumn.tsx
+++ b/frontend/src/components/List/Column/NetworkIdColumn.tsx
@@ -18,8 +18,7 @@ import * as React from 'react';
 import { Maybe } from '../../../common';
 import { ColumnProps } from './';
 import { Node } from '../../../state';
-import { Truncate } from '../../';
-import { Tooltip } from '../../';
+import { Tooltip, TooltipCopyCallback } from '../../';
 import icon from '../../../icons/fingerprint.svg';
 
 export class NetworkIdColumn extends React.Component<ColumnProps> {
@@ -30,6 +29,7 @@ export class NetworkIdColumn extends React.Component<ColumnProps> {
   public static readonly sortBy = ({ networkId }: Node) => networkId || '';
 
   private data: Maybe<string>;
+  private copy: Maybe<TooltipCopyCallback>;
 
   public shouldComponentUpdate(nextProps: ColumnProps) {
     return this.data !== nextProps.node.networkId;
@@ -45,10 +45,22 @@ export class NetworkIdColumn extends React.Component<ColumnProps> {
     }
 
     return (
-      <td className="Column">
-        <Tooltip text={networkId} position="left" />
-        <Truncate text={networkId} chars={10} />
+      <td className="Column" onClick={this.onClick}>
+        <Tooltip text={networkId} position="left" copy={this.onCopy} />
+        {networkId}
       </td>
     );
   }
+
+  private onCopy = (copy: TooltipCopyCallback) => {
+    this.copy = copy;
+  };
+
+  private onClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+
+    if (this.copy != null) {
+      this.copy();
+    }
+  };
 }