feat: Add domains to more spots

Author: dawsontoth

src/config/useEntityRestURL.ts

@@ -14,7 +14,7 @@ export function useEntityRestURL(): string | null {
 
 	const isFabricConnect = (!!clusterId && authStore.checkForFabricConnect(clusterId))
 		|| !!instanceId && authStore.checkForFabricConnect(instanceId);
-	if (isFabricConnect) {
+	if (isFabricConnect || (cluster && !instanceId)) {
 		return getRestUrlForCluster(cluster);
 	} else if (instanceClient.defaults.baseURL) {
 		return instanceClient.defaults.baseURL.replace(/:9925\/?/, '');

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

@@ -0,0 +1,42 @@
+import { TextLoadingSkeleton } from '@/components/TextLoadingSkeleton';
+import { Button } from '@/components/ui/button';
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
+import { Cluster } from '@/integrations/api/api.patch';
+import { CopyIcon } from 'lucide-react';
+
+export const ClusterDomainsList = ({
+	loadingInstanceInfo,
+	clusterInfo,
+}: {
+	loadingInstanceInfo?: boolean;
+	clusterInfo?: Cluster | undefined;
+}) => {
+	return (
+		<>
+			<dt className="font-bold text-sm/6">Cluster Domains</dt>
+			<dd className="text-sm/6 sm:mt-2">
+				{loadingInstanceInfo
+					? <TextLoadingSkeleton />
+					: clusterInfo?.domains?.map((domain) => <ClusterDomainUrl key={domain.id} domain={domain.domain} />)}
+			</dd>
+		</>
+	);
+};
+
+function ClusterDomainUrl({ domain }: { domain: string }) {
+	const [onCopyClick] = useCopyToClipboard(domain || '');
+	return (
+		<div key={domain}>
+			{domain}
+			<Button
+				className="ml-2"
+				type="button"
+				variant="default"
+				size="sm"
+				onClick={onCopyClick}
+			>
+				<CopyIcon className="w-4 h-4" />
+			</Button>
+		</div>
+	);
+}

src/features/instance/config/overview/index.tsx

@@ -5,6 +5,7 @@ import { isLocalStudio } from '@/config/constants';
 import { useInstanceClientIdParams } from '@/config/useInstanceClient';
 import { getInstanceInfoQueryOptions } from '@/features/cluster/queries/getInstanceInfoQuery';
 import { ApplicationURL } from '@/features/instance/config/overview/components/ApplicationURL';
+import { ClusterDomainsList } from '@/features/instance/config/overview/components/ClusterDomainsList';
 import { HarperVersion } from '@/features/instance/config/overview/components/HarperVersion';
 import { InstanceNodeName } from '@/features/instance/config/overview/components/InstanceNodeName';
 import { InstanceURL } from '@/features/instance/config/overview/components/InstanceURL';
@@ -108,6 +109,11 @@ export function ConfigOverviewIndex() {
 							<div className="px-4 pb-4 sm:col-span-2 sm:px-0">
 								<ApplicationURL loadingInstanceInfo={loadingInstanceInfo} clusterInfo={clusterInfo} />
 							</div>
+							{clusterInfo?.domains?.length && (
+								<div className="px-4 pb-4 sm:col-span-3 sm:px-0">
+									<ClusterDomainsList loadingInstanceInfo={loadingInstanceInfo} clusterInfo={clusterInfo} />
+								</div>
+							)}
 						</dl>
 					</CloudStudioOverview>
 				)}

src/integrations/api/api.patch.d.ts

@@ -96,7 +96,7 @@ export interface Cluster extends SchemaCluster {
 	// TODO: Can we return enums from the server to make this easier?
 	status?: string | 'PROVISIONING' | 'UPDATING' | 'RUNNING' | 'TERMINATED' | 'FAILED';
 	domainIds?: string[];
-	domains?: Array<{ domain: string }>;
+	domains?: Array<{ id: string; domain: string }>;
 }
 
 export interface InstanceDatabaseMap {

src/lib/urls/getRestUrlForCluster.ts

@@ -1,12 +1,16 @@
 import { Cluster } from '@/integrations/api/api.patch';
+import { linkify } from '@/lib/urls/linkify';
 
-export function getRestUrlForCluster(cluster: undefined | Pick<Cluster, 'fqdn'>): string | null {
-	let fqdn = cluster?.fqdn;
-	if (!fqdn) {
-		return null;
+export function getRestUrlForCluster(cluster: undefined | Pick<Cluster, 'fqdn' | 'domains'>): string | null {
+	if (cluster?.domains) {
+		for (const domain of cluster.domains) {
+			if (domain.domain) {
+				return linkify(domain.domain);
+			}
+		}
 	}
-	if (!fqdn.match(/^https?:\/\//i)) {
-		fqdn = `https://${fqdn}`;
+	if (!cluster?.fqdn) {
+		return null;
 	}
-	return new URL(fqdn).toString();
+	return linkify(cluster.fqdn);
 }

src/lib/urls/linkify.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { linkify } from './linkify';
+
+describe('linkify', () => {
+	it('should add https:// prefix if no protocol is present', () => {
+		expect(linkify('example.com')).toBe('https://example.com/');
+	});
+
+	it('should preserve http:// protocol', () => {
+		expect(linkify('http://example.com')).toBe('http://example.com/');
+	});
+
+	it('should preserve https:// protocol', () => {
+		expect(linkify('https://example.com')).toBe('https://example.com/');
+	});
+
+	it('should handle subdomains and paths', () => {
+		expect(linkify('sub.example.com/path/to/resource')).toBe('https://sub.example.com/path/to/resource');
+	});
+
+	it('should be case-insensitive when checking for protocol', () => {
+		expect(linkify('HTTP://example.com')).toBe('http://example.com/');
+		expect(linkify('Https://example.com')).toBe('https://example.com/');
+	});
+
+	it('should handle fqdn with port', () => {
+		expect(linkify('localhost:3000')).toBe('https://localhost:3000/');
+	});
+
+	it('should throw error for invalid URL strings that cannot be parsed by URL constructor', () => {
+		// URL constructor throws if the resulting string is not a valid URL
+		expect(() => linkify('!!@@##')).toThrow();
+	});
+});

src/lib/urls/linkify.ts

@@ -0,0 +1,7 @@
+export function linkify(fqdn: string): string {
+	return new URL(
+		!fqdn.match(/^https?:\/\//i)
+			? `https://${fqdn}`
+			: fqdn,
+	).toString();
+}