diff --git a/apps/mobile/src/features/connection/CloudEnvironmentRows.tsx b/apps/mobile/src/features/connection/CloudEnvironmentRows.tsx index 608d43b2acb..173d093d849 100644 --- a/apps/mobile/src/features/connection/CloudEnvironmentRows.tsx +++ b/apps/mobile/src/features/connection/CloudEnvironmentRows.tsx @@ -24,13 +24,7 @@ import { availableCloudEnvironmentPresentation } from "../cloud/cloudEnvironment import { ConnectionStatusDot } from "./ConnectionStatusDot"; import { type RelayEnvironmentView, useConnectionController } from "./useConnectionController"; -/** - * "T3 Connect" section: every environment published to the signed-in account, - * with connect switches, availability status, refresh, and loading/error - * states. Shared between the Settings environments screen and the T3 Connect - * onboarding sheet. - */ -export function CloudEnvironmentRows(props: { +interface CloudEnvironmentRowsProps { readonly connectedCloudEnvironments: ReadonlyArray; readonly onReconnectEnvironment: (environmentId: EnvironmentId) => void; readonly showcaseAvailableEnvironments?: ReadonlyArray; @@ -41,8 +35,31 @@ export function CloudEnvironmentRows(props: { * pull-to-refresh). */ readonly showHeader?: boolean; -}) { +} + +/** + * "T3 Connect" section: every environment published to the signed-in account, + * with connect switches, availability status, refresh, and loading/error + * states. Shared between the Settings environments screen and the T3 Connect + * onboarding sheet. + */ +export function CloudEnvironmentRows(props: CloudEnvironmentRowsProps) { + // Showcase captures run without a Clerk publishable key, so `ClerkProvider` + // is never mounted and any `useAuth` call throws — the fixture states whether + // the rows are signed in instead of asking Clerk. + if (props.showcaseSignedIn !== undefined) { + return props.showcaseSignedIn ? : null; + } + return ; +} + +function SignedInCloudEnvironmentRows(props: CloudEnvironmentRowsProps) { const { isSignedIn } = useAuth({ treatPendingAsSignedOut: false }); + if (!isSignedIn) return null; + return ; +} + +function CloudEnvironmentRowsContent(props: CloudEnvironmentRowsProps) { const controller = useConnectionController(); const iconColor = useThemeColor("--color-icon"); const availableCloudEnvironments = @@ -67,8 +84,6 @@ export function CloudEnvironmentRows(props: { const showHeader = props.showHeader ?? true; - if (!(props.showcaseSignedIn ?? isSignedIn)) return null; - return ( {showHeader ? (