feat: Connect vs Direct Sign In Buttons

These will only show up for useres with update permissions on a given cluster or org. We’ll implement the actual backing functionality next.

https://harperdb.atlassian.net/browse/STUDIO-583

Author: dawsontoth

src/features/cluster/InstanceLogInCell.tsx

@@ -4,6 +4,7 @@ import { useInstanceClient } from '@/config/useInstanceClient';
 import { authStore } from '@/features/auth/store/authStore';
 import { onInstanceLogoutSubmit } from '@/features/instance/operations/mutations/onInstanceLogoutSubmit';
 import { useInstanceAuth } from '@/hooks/useAuth';
+import { useOrganizationClusterInstancePermissions } from '@/hooks/usePermissions';
 import { Instance } from '@/lib/api.patch';
 import { getOperationsUrlForInstance } from '@/lib/urls/getOperationsUrlForInstance';
 import { Link } from '@tanstack/react-router';
@@ -14,6 +15,8 @@ export function InstanceLogInCell({ instance }: { readonly instance: Instance })
 	const { user: instanceUser, isLoading: instanceAuthIsLoading } = useInstanceAuth(instance.id);
 	const operationsUrl = useMemo(() => getOperationsUrlForInstance(instance), [instance]);
 	const instanceClient = useInstanceClient(operationsUrl);
+	const { update } = useOrganizationClusterInstancePermissions();
+
 	const onSignOutClick = useCallback(async () => {
 		await onInstanceLogoutSubmit({ instanceClient, entityId: instance.id });
 		authStore.setUserForEntity(instance, null);
@@ -22,24 +25,36 @@ export function InstanceLogInCell({ instance }: { readonly instance: Instance })
 	if (instanceAuthIsLoading || !['CLONE_READY', 'RUNNING', 'UPDATED'].includes(instance.status)) {
 		return <LoaderCircleIcon className="animate-spin" color="gray" />;
 	}
+
 	if (!instanceUser) {
-		return <Link
-			to={`../instance/${instance.id}/sign-in`}
-			className="text-sm"
-			aria-label={`Sign in to ${instance.name} instance`}
-			title={`Sign in to ${instance.name} instance`}
-		>
-			<Button variant="positiveOutline">Sign In</Button>
-		</Link>;
+		return <span className="flex gap-4">
+			{update && <Link
+				to={`../instance/${instance.id}${defaultInstanceRoute}`}
+				className="text-sm"
+				aria-label={`Connect to ${instance.name} instance`}
+				title={`Connect to ${instance.name} instance`}
+			>
+				<Button variant="positiveOutline">Fabric Connect</Button>
+			</Link>}
+			<Link
+				to={`../instance/${instance.id}/sign-in`}
+				className="text-sm"
+				aria-label={`Sign in to ${instance.name} instance`}
+				title={`Sign in to ${instance.name} instance`}
+			>
+				<Button variant={update ? 'defaultOutline' : 'positiveOutline'}>Direct Sign In</Button>
+			</Link>
+		</span>;
 	}
+
 	return <span className="flex gap-4">
 		<Link
 			to={`../instance/${instance.id}${defaultInstanceRoute}`}
 			className="text-sm"
 			aria-label={`Go to ${instance.name} instance`}
 			title={`Go to ${instance.name} instance`}
 		>
-			<Button variant="positiveOutline">View</Button>
+			<Button variant="positiveOutline">Direct Connect</Button>
 		</Link>
 		<Button
 			variant="destructiveOutline"
@@ -48,7 +63,7 @@ export function InstanceLogInCell({ instance }: { readonly instance: Instance })
 			title={`Sign out from ${instance.name} instance`}
 			onClick={onSignOutClick}
 		>
-			Sign Out
+			Direct Sign Out
 		</Button>
 	</span>;
 }

src/features/clusters/components/ClusterCard.tsx

@@ -125,6 +125,11 @@ export function ClusterCard({ cluster }: { cluster: Cluster; }) {
 	);
 
 	const menuItems = [
+		isActive && update && !auth.isLoading && !auth.user && (
+			<Link to={`${cluster.id}/sign-in`} disabled={signingOut}>
+				<DropdownMenuItem>Direct Sign In</DropdownMenuItem>
+			</Link>
+		),
 		isActive && update && (
 			<Link to={`${cluster.id}/edit`} disabled={signingOut}>
 				<DropdownMenuItem>Edit</DropdownMenuItem>
@@ -137,7 +142,7 @@ export function ClusterCard({ cluster }: { cluster: Cluster; }) {
 		),
 		isActive && view && cluster.fqdn && (
 			<DropdownMenuItem onClick={onCopyFQDNClick} disabled={signingOut}>
-				Copy host name
+				Copy Host Name
 			</DropdownMenuItem>
 		),
 		isActive && view && cluster.fqdn && (
@@ -147,7 +152,7 @@ export function ClusterCard({ cluster }: { cluster: Cluster; }) {
 		),
 		isActive && view && !!operationsUrl && !auth.isLoading && auth.user && (
 			<DropdownMenuItem onClick={onSignOutClick} disabled={signingOut}>
-				Sign Out
+				Direct Sign Out
 			</DropdownMenuItem>
 		),
 		clusterHasFailed && create && (

src/features/clusters/components/ClusterCardAction.tsx

@@ -3,14 +3,14 @@ import { defaultInstanceRoute } from '@/config/constants';
 import { useInstanceAuth } from '@/hooks/useAuth';
 import { useOrganizationClusterPermissions } from '@/hooks/usePermissions';
 import { Cluster } from '@/lib/api.patch';
+import { clusterIsSelfManaged } from '@/lib/api/clusterIsSelfManaged';
 import { Link } from '@tanstack/react-router';
 import { ArrowRight } from 'lucide-react';
-import { useMemo } from 'react';
 
 export function ClusterCardAction({ cluster }: { cluster: Cluster }) {
 	const auth = useInstanceAuth(cluster.id);
 	const { view, update } = useOrganizationClusterPermissions(cluster.organizationId, cluster.id);
-	const isPendingResetPassword = useMemo(() => cluster.resetPassword, [cluster]);
+
 	if (!view) {
 		return undefined;
 	}
@@ -23,7 +23,7 @@ export function ClusterCardAction({ cluster }: { cluster: Cluster }) {
 		</Link>;
 	}
 
-	if (isPendingResetPassword) {
+	if (cluster.resetPassword) {
 		if (update) {
 			return <Link to={`/${cluster.organizationId}/${cluster.id}/finish-setup`} className="text-sm text-nowrap" aria-label={`Set Password on ${cluster.name}`} title={`Set Password on ${cluster.name}`}>
 				<Button variant="positive" className="py-2 hover:border-b-2 animate-glow-pulse">
@@ -39,16 +39,26 @@ export function ClusterCardAction({ cluster }: { cluster: Cluster }) {
 	if (auth.isLoading) {
 		return undefined;
 	}
+
 	if (auth.user) {
 		return <Link to={`/${cluster.organizationId}/${cluster.id}${defaultInstanceRoute}`} className="text-sm text-nowrap" aria-label={`View ${cluster.name}`} title={`View ${cluster.name}`}>
 			<span className="py-2 hover:border-b-2">
-				View <ArrowRight className="inline-block" />
+				Direct Connect <ArrowRight className="inline-block" />
+			</span>
+		</Link>;
+	}
+
+	if (update && !clusterIsSelfManaged(cluster)) {
+		return <Link to={`/${cluster.organizationId}/${cluster.id}${defaultInstanceRoute}`} className="text-sm text-nowrap" aria-label={`Connect to ${cluster.name}`} title={`Connect to ${cluster.name}`}>
+			<span className="py-2 hover:border-b-2">
+				Fabric Connect <ArrowRight className="inline-block" />
 			</span>
 		</Link>;
 	}
+
 	return <Link to={`/${cluster.organizationId}/${cluster.id}/sign-in`} className="text-sm text-nowrap" aria-label={`Sign In to ${cluster.name}`} title={`Sign In to ${cluster.name}`}>
 		<span className="py-2 hover:border-b-2">
-			Sign In <ArrowRight className="inline-block" />
+			Direct Sign In <ArrowRight className="inline-block" />
 		</span>
 	</Link>;
 }