feat: added copy fqdn url menu item to cluster card dropdown

Author: BboyAkers

src/features/clusters/components/ClusterCard.tsx

@@ -22,6 +22,7 @@ import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluste
 import { Link } from '@tanstack/react-router';
 import { Ellipsis } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
+import { toast } from 'sonner';
 
 const activeClusterStatuses = ['RUNNING'];
 const deletedClusterStatuses = ['TERMINATING', 'TERMINATED', 'REMOVED'];
@@ -37,14 +38,17 @@ export function ClusterCard({
 	const auth = useInstanceAuth(cluster.id);
 
 	const isActive = useMemo(() => cluster.status && activeClusterStatuses.includes(cluster.status), [cluster.status]);
-	const isTerminated = useMemo(() => cluster.status && deletedClusterStatuses.includes(cluster.status), [cluster.status]);
+	const isTerminated = useMemo(
+		() => cluster.status && deletedClusterStatuses.includes(cluster.status),
+		[cluster.status]
+	);
 	const operationsUrl = useMemo(() => getOperationsUrlForCluster(cluster), [cluster]);
 	const instanceClient = useInstanceClient(operationsUrl);
 	const [signingOut, setSigningOut] = useState(false);
 
 	const onSignOutClick = useCallback(async () => {
 		setSigningOut(true);
-		const fullCluster = await getClusterInfo(cluster.id).catch(err => {
+		const fullCluster = await getClusterInfo(cluster.id).catch((err) => {
 			console.error('Failed to lookup cluster details, proceeding without checking instances.', err);
 			return null;
 		});
@@ -61,17 +65,34 @@ export function ClusterCard({
 		onTerminateClusterModal(cluster);
 	}, [cluster, onTerminateClusterModal]);
 
+	const onCopyFQDNClick = useCallback(() => {
+		navigator.clipboard.writeText(cluster.fqdn || '');
+		toast.info('FQDN url copied to clipboard');
+	}, [cluster.fqdn]);
+
 	const menuItems = [
 		isActive && update && (
-			<Link to={`${cluster.id}/edit`} disabled={signingOut}><DropdownMenuItem>Edit</DropdownMenuItem></Link>),
+			<Link to={`${cluster.id}/edit`} disabled={signingOut}>
+				<DropdownMenuItem>Edit</DropdownMenuItem>
+			</Link>
+		),
+		isActive && view && (
+			<Link to={`${cluster.id}/instances`} disabled={signingOut}>
+				<DropdownMenuItem>Instances</DropdownMenuItem>
+			</Link>
+		),
 		isActive && view && (
-			<Link to={`${cluster.id}/instances`} disabled={signingOut}><DropdownMenuItem>Instances</DropdownMenuItem></Link>),
+			<DropdownMenuItem onClick={onCopyFQDNClick} disabled={signingOut}>
+				Copy FQDN Url
+			</DropdownMenuItem>
+		),
 		isActive && view && !!operationsUrl && !auth.isLoading && auth.user && (
-			<DropdownMenuItem onClick={onSignOutClick} disabled={signingOut}>Sign Out</DropdownMenuItem>),
+			<DropdownMenuItem onClick={onSignOutClick} disabled={signingOut}>
+				Sign Out
+			</DropdownMenuItem>
+		),
 		!isTerminated && remove && (
-			<DropdownMenuItem
-				className="bg-red focus:bg-red/70 focus:text-white"
-				onClick={onTerminateClick}>
+			<DropdownMenuItem className="bg-red focus:bg-red/70 focus:text-white" onClick={onTerminateClick}>
 				Terminate
 			</DropdownMenuItem>
 		),
@@ -82,35 +103,40 @@ export function ClusterCard({
 			<CardHeader>
 				<CardDescription className="flex items-center justify-between">
 					<span className="truncate">{cluster.id}</span>
-					{!isTerminated && (<DropdownMenu>
-						<DropdownMenuTrigger>
-							<Ellipsis aria-label="Cluster options" />
-						</DropdownMenuTrigger>
-						<DropdownMenuContent>
-							<DropdownMenuLabel className="text-gray-600 text-xs">Plans</DropdownMenuLabel>
-							{cluster.plans?.map(plan => (
-								<DropdownMenuLabel key={plan.planId}>
-									{plan.planId} / {plan.regionId}<br />
-									Auto Renewal {plan.autoRenew
-									? <Badge variant="success">ON</Badge>
-									: <Badge variant="warning">OFF</Badge>}
-								</DropdownMenuLabel>
-							))}
-							{menuItems.length > 0 && (<>
-								<DropdownMenuSeparator />
-								{...menuItems}
-							</>)}
-						</DropdownMenuContent>
-					</DropdownMenu>)}
+					{!isTerminated && (
+						<DropdownMenu>
+							<DropdownMenuTrigger>
+								<Ellipsis aria-label="Cluster options" />
+							</DropdownMenuTrigger>
+							<DropdownMenuContent>
+								<DropdownMenuLabel className="text-gray-600 text-xs">Plans</DropdownMenuLabel>
+								{cluster.plans?.map((plan) => (
+									<DropdownMenuLabel key={plan.planId}>
+										{plan.planId} / {plan.regionId}
+										<br />
+										Auto Renewal{' '}
+										{plan.autoRenew ? <Badge variant="success">ON</Badge> : <Badge variant="warning">OFF</Badge>}
+									</DropdownMenuLabel>
+								))}
+								{menuItems.length > 0 && (
+									<>
+										<DropdownMenuSeparator />
+										{...menuItems}
+									</>
+								)}
+							</DropdownMenuContent>
+						</DropdownMenu>
+					)}
 				</CardDescription>
 				<CardTitle>
 					<h2>{cluster.name}</h2>
 				</CardTitle>
 			</CardHeader>
 			<CardContent className="flex justify-between">
 				{cluster.status && (
-					<Badge variant={renderBadgeStatusVariant(cluster.status)}>{renderBadgeStatusText(cluster.status)}</Badge>)}
-				{isActive && view && (<ClusterCardAction cluster={cluster} />)}
+					<Badge variant={renderBadgeStatusVariant(cluster.status)}>{renderBadgeStatusText(cluster.status)}</Badge>
+				)}
+				{isActive && view && <ClusterCardAction cluster={cluster} />}
 			</CardContent>
 		</Card>
 	);