feat: Add copy icons to the two URLs on the config overview page

Closes #898

Author: dawsontoth

src/features/instance/config/overview/components/ApplicationURL.tsx

@@ -1,5 +1,8 @@
 import { TextLoadingSkeleton } from '@/components/TextLoadingSkeleton';
+import { Button } from '@/components/ui/button';
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
 import { Cluster } from '@/lib/api.patch';
+import { CopyIcon } from 'lucide-react';
 
 export const ApplicationURL = ({
 	loadingInstanceInfo,
@@ -8,10 +11,26 @@ export const ApplicationURL = ({
 	loadingInstanceInfo?: boolean;
 	clusterInfo?: Cluster | undefined;
 }) => {
+	const [onCopyClick] = useCopyToClipboard(clusterInfo?.fqdn || '');
 	return (
 		<>
 			<dt className="font-bold text-sm/6">Application URL</dt>
-			<dd className="text-sm/6 sm:mt-2">{loadingInstanceInfo ? <TextLoadingSkeleton /> : clusterInfo?.fqdn || 'N/A'}</dd>
+			<dd className="text-sm/6 sm:mt-2">{loadingInstanceInfo
+				? <TextLoadingSkeleton />
+				: clusterInfo?.fqdn
+					? <>
+						{clusterInfo.fqdn}
+						<Button
+							className="ml-2"
+							type="button"
+							variant="default"
+							size="sm"
+							onClick={onCopyClick}
+						>
+							<CopyIcon className="w-4 h-4" />
+						</Button>
+					</>
+					: 'N/A'}</dd>
 		</>
 	);
 };

src/features/instance/config/overview/components/InstanceURL.tsx

@@ -1,7 +1,10 @@
 import { TextLoadingSkeleton } from '@/components/TextLoadingSkeleton';
+import { Button } from '@/components/ui/button';
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
 import { Instance } from '@/lib/api.patch';
 import { getOperationsUrlForInstance } from '@/lib/urls/getOperationsUrlForInstance';
 import { Link } from '@tanstack/react-router';
+import { CopyIcon } from 'lucide-react';
 import { useMemo } from 'react';
 
 export const InstanceURL = ({
@@ -12,13 +15,26 @@ export const InstanceURL = ({
 	instanceInfo?: Instance | undefined;
 }) => {
 	const instanceUrl = useMemo(() => instanceInfo ? getOperationsUrlForInstance(instanceInfo) : null, [instanceInfo]);
+	const [onCopyClick] = useCopyToClipboard(instanceUrl || '');
 	return (
 		<>
 			<dt className="font-bold text-sm/6">Operations URL</dt>
 			<dd className="text-sm/6 sm:mt-2">{loadingInstanceInfo
 				? (<TextLoadingSkeleton />)
 				: instanceUrl
-					? (<Link to={instanceUrl} target="_blank" className="underline hover:text-blue-300">{instanceUrl}</Link>)
+					? (
+						<>
+							<Link to={instanceUrl} target="_blank" className="underline hover:text-blue-300">{instanceUrl}</Link>
+							<Button
+								className="ml-2"
+								type="button"
+								variant="default"
+								size="sm"
+								onClick={onCopyClick}
+							>
+								<CopyIcon className="w-4 h-4" />
+							</Button>
+						</>)
 					: 'N/A'}</dd>
 		</>
 	);