use CopyableText (click-to-copy) in GUI for instance info

src/client/gui/lib/copyable_text.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart' hide Tooltip;
+import 'package:flutter/services.dart';
+import 'tooltip.dart';
+
+class CopyableText extends StatefulWidget {
+  final String text;
+  final TextStyle? style;
+
+  const CopyableText(this.text, {super.key, this.style});
+
+  @override
+  State<CopyableText> createState() => _CopyableTextState();
+}
+
+class _CopyableTextState extends State<CopyableText> {
+  bool _copied = false;
+  bool get _isCopyable => widget.text != '-';
+
+  void _copyToClipboard() async {
+    if (!_isCopyable) return;
+    await Clipboard.setData(ClipboardData(text: widget.text));
+    setState(() => _copied = true);
+  }
+
+  void _resetCopied() {
+    if (_copied) {
+      setState(() => _copied = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Widget text = Text(
+      widget.text,
+      style: widget.style,
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+    );
+
+    if (!_isCopyable) return text;
+
+    return MouseRegion(
+      cursor: SystemMouseCursors.click,
+      onExit: (_) => _resetCopied(),
+      child: GestureDetector(
+        onTap: _copyToClipboard,
+        child: Tooltip(
+          message: _copied ? 'Copied' : 'Click to copy',
+          child: text,
+        ),
+      ),
+    );
+  }
+}

src/client/gui/lib/tooltip.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart' as fl;
 
-class Tooltip extends fl.StatelessWidget {
+class Tooltip extends fl.StatefulWidget {
   final fl.Widget child;
   final String message;
   final bool visible;
@@ -12,18 +12,40 @@ class Tooltip extends fl.StatelessWidget {
     this.visible = true,
   });
 
+  @override
+  fl.State<Tooltip> createState() => _TooltipState();
+}
+
+class _TooltipState extends fl.State<Tooltip> {
+  final _key = fl.GlobalKey<fl.TooltipState>();
+  bool _forceShow = false;
+
+  @override
+  void didUpdateWidget(Tooltip oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.message != widget.message) {
+      setState(() => _forceShow = true);
+      Future.delayed(const Duration(milliseconds: 1), () {
+        if (mounted) {
+          setState(() => _forceShow = false);
+        }
+      });
+    }
+  }
+
   @override
   fl.Widget build(fl.BuildContext context) {
     return fl.TooltipVisibility(
-      visible: visible,
+      visible: widget.visible,
       child: fl.Tooltip(
-        message: message,
+        key: _forceShow ? _key : null,
+        message: widget.message,
         textAlign: fl.TextAlign.center,
         decoration: fl.BoxDecoration(
           color: const fl.Color(0xff111111),
           borderRadius: fl.BorderRadius.circular(2),
         ),
-        child: child,
+        child: widget.child,
       ),
     );
   }

src/client/gui/lib/vm_details/ip_addresses.dart

@@ -1,12 +1,14 @@
 import 'package:flutter/material.dart' hide Tooltip;
+import '../copyable_text.dart';
 
 import '../extensions.dart';
 import '../tooltip.dart';
 
 class IpAddresses extends StatelessWidget {
   final Iterable<String> ips;
+  final bool copyable;
 
-  const IpAddresses(this.ips, {super.key});
+  const IpAddresses(this.ips, {this.copyable = false, super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -15,10 +17,13 @@ class IpAddresses extends StatelessWidget {
 
     return Row(children: [
       Expanded(
-        child: Tooltip(
-          message: firstIp,
-          child: Text(firstIp.nonBreaking, overflow: TextOverflow.ellipsis),
-        ),
+        child: copyable
+            ? CopyableText(firstIp)
+            : Tooltip(
+                message: firstIp,
+                child:
+                    Text(firstIp.nonBreaking, overflow: TextOverflow.ellipsis),
+              ),
       ),
       if (restIps.isNotEmpty)
         Badge.count(

src/client/gui/lib/vm_details/vm_details_general.dart

@@ -1,7 +1,8 @@
 import 'package:basics/basics.dart';
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' hide Tooltip;
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:intl/intl.dart';
+import 'package:flutter/services.dart';
 
 import '../extensions.dart';
 import '../providers.dart';
@@ -10,6 +11,8 @@ import 'memory_usage.dart';
 import 'vm_action_buttons.dart';
 import 'vm_details.dart';
 import 'vm_status_icon.dart';
+import '../tooltip.dart';
+import '../copyable_text.dart';
 
 class VmDetailsHeader extends ConsumerWidget {
   final String name;
@@ -76,11 +79,9 @@ class VmDetailsHeader extends ConsumerWidget {
 
     final list = [
       Expanded(
-        child: Text(
+        child: CopyableText(
           name.nonBreaking,
           style: const TextStyle(fontSize: 24, fontWeight: FontWeight.w300),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
         ),
       ),
       locationButtons,
@@ -150,28 +151,28 @@ class GeneralDetails extends ConsumerWidget {
       width: 150,
       height: baseVmStatHeight,
       label: 'IMAGE',
-      child: Text(info.instanceInfo.currentRelease),
+      child: CopyableText(info.instanceInfo.currentRelease),
     );
 
     final privateIp = VmStat(
       width: 150,
       height: baseVmStatHeight,
       label: 'PRIVATE IP',
-      child: Text(info.instanceInfo.ipv4.firstOrNull ?? '-'),
+      child: CopyableText(info.instanceInfo.ipv4.firstOrNull ?? '-'),
     );
 
     final publicIp = VmStat(
       width: 150,
       height: baseVmStatHeight,
       label: 'PUBLIC IP',
-      child: Text(info.instanceInfo.ipv4.skip(1).firstOrNull ?? '-'),
+      child: CopyableText(info.instanceInfo.ipv4.skip(1).firstOrNull ?? '-'),
     );
 
     final created = VmStat(
       width: 140,
       height: baseVmStatHeight,
       label: 'CREATED',
-      child: Text(
+      child: CopyableText(
         DateFormat('yyyy-MM-dd HH:mm:ss')
             .format(info.instanceInfo.creationTimestamp.toDateTime()),
       ),

src/client/gui/lib/vm_table/vm_table_headers.dart

@@ -14,6 +14,7 @@ import '../vm_details/vm_status_icon.dart';
 import 'search_box.dart';
 import 'table.dart';
 import 'vms.dart';
+import '../copyable_text.dart';
 
 final headers = <TableHeader<VmInfo>>[
   TableHeader(
@@ -72,23 +73,28 @@ final headers = <TableHeader<VmInfo>>[
     minWidth: 70,
     cellBuilder: (info) {
       final image = info.instanceInfo.currentRelease;
-      return Text(
+      return CopyableText(
         image.isNotBlank ? image.nonBreaking : '-',
-        overflow: TextOverflow.ellipsis,
       );
     },
   ),
   TableHeader(
     name: 'PRIVATE IP',
     width: 140,
     minWidth: 100,
-    cellBuilder: (info) => IpAddresses(info.instanceInfo.ipv4.take(1)),
+    cellBuilder: (info) => IpAddresses(
+      info.instanceInfo.ipv4.take(1),
+      copyable: true,
+    ),
   ),
   TableHeader(
     name: 'PUBLIC IP',
     width: 140,
     minWidth: 100,
-    cellBuilder: (info) => IpAddresses(info.instanceInfo.ipv4.skip(1)),
+    cellBuilder: (info) => IpAddresses(
+      info.instanceInfo.ipv4.skip(1),
+      copyable: true,
+    ),
   ),
 ];