authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-17 20:18:19-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-17 20:18:19-07:00
log05a8c6016a4070b92f5d51e7a79b9c76814947df
tree43a8c20dfe0299c5525db554a0f3e3bf69e59920
parent5a39013313a7e6e9d6fbeeb915b8c176ea3dd126
signature Signed by PGP key B5690EEEBB952194

fix(mobile): share accessible connection trace controls (#12371)

4 files changed, 69 insertions(+), 51 deletions(-)

apps/mobile/src/features/connection/CloudEnvironmentRows.tsx+10-17
......@@ -1,3 +1,4 @@
1import { ConnectionTraceId } from "./ConnectionTraceId";
12import { useAuth } from "@clerk/expo";
23import { SymbolView } from "../../components/AppSymbol";
34import {
......@@ -405,23 +406,15 @@ function CloudEnvironmentRowShell(props: {
405406 >
406407 {statusText}
407408 {errorTraceId ? (
408 <>
409 {" Trace ID: "}
410 <Text
411 accessibilityHint="Copies the trace ID"
412 accessibilityRole="button"
413 className={cn("text-xs underline decoration-dotted", statusClassName)}
414 onLongPress={(event) => {
415 event.stopPropagation();
416 copyTextWithHaptic(errorTraceId, { target: "connection-trace-id" });
417 }}
418 onPress={(event) => {
419 event.stopPropagation();
420 }}
421 >
422 {errorTraceId}
423 </Text>
424 </>
409 <ConnectionTraceId
410 traceId={errorTraceId}
411 tone={
412 props.connectionError && props.connectionState !== "unsupported"
413 ? "danger"
414 : "muted"
415 }
416 activation="longPress"
417 />
425418 ) : null}
426419 </Text>
427420 {errorCanExpand ? (
apps/mobile/src/features/connection/ConnectionEnvironmentRow.tsx+6-18
......@@ -1,3 +1,4 @@
1import { ConnectionTraceId } from "./ConnectionTraceId";
12import { SymbolView } from "../../components/AppSymbol";
23import { connectionStatusText } from "@t3tools/client-runtime/connection";
34import type { AtomCommandResult } from "@t3tools/client-runtime/state/runtime";
......@@ -15,7 +16,6 @@ import { MaterialButton } from "../../components/MaterialButton";
1516import { MaterialIconButton } from "../../components/MaterialIconButton";
1617import { ThemedSwitch } from "../../components/ThemedSwitch";
1718import { cn } from "../../lib/cn";
18import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
1919import type { ConnectedEnvironmentSummary } from "../../state/remote-runtime-types";
2020import { serverEnvironment } from "../../state/server";
2121import { ConnectionStatusDot } from "./ConnectionStatusDot";
......@@ -114,23 +114,11 @@ export function ConnectionEnvironmentRow(props: {
114114 >
115115 {statusLabel}
116116 {statusTraceId ? (
117 <>
118 {" Trace ID: "}
119 <Text
120 accessibilityHint="Copies the trace ID"
121 accessibilityRole="button"
122 className="underline decoration-dotted"
123 onLongPress={(event) => {
124 event.stopPropagation();
125 copyTextWithHaptic(statusTraceId, { target: "connection-trace-id" });
126 }}
127 onPress={(event) => {
128 event.stopPropagation();
129 }}
130 >
131 {statusTraceId}
132 </Text>
133 </>
117 <ConnectionTraceId
118 traceId={statusTraceId}
119 tone={hasConnectionFailure ? "danger" : "muted"}
120 activation="longPress"
121 />
134122 ) : null}
135123 </Text>
136124 ) : null}
apps/mobile/src/features/connection/ConnectionTraceId.tsx created+51
......@@ -0,0 +1,51 @@
1import { AppText as Text } from "../../components/AppText";
2import { cn } from "../../lib/cn";
3import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
4
5/** Inline trace control; disclosure rows reserve ordinary taps for their own navigation. */
6export function ConnectionTraceId({
7 traceId,
8 tone = "muted",
9 activation = "press",
10}: {
11 readonly traceId: string;
12 readonly tone?: "muted" | "danger";
13 readonly activation?: "press" | "longPress";
14}) {
15 const copy = () => copyTextWithHaptic(traceId, { target: "connection-trace-id" });
16 return (
17 <>
18 {" Trace ID: "}
19 <Text
20 accessibilityHint={
21 activation === "longPress" ? "Long press to copy the trace ID" : "Copies the trace ID"
22 }
23 accessibilityLabel={`Copy trace ID ${traceId}`}
24 accessibilityRole="button"
25 accessibilityActions={[{ name: "activate", label: "Copy trace ID" }]}
26 onAccessibilityAction={(event) => {
27 event.stopPropagation();
28 if (event.nativeEvent.actionName === "activate") copy();
29 }}
30 className={cn(
31 "underline decoration-dotted",
32 tone === "danger" ? "text-danger-foreground" : "text-foreground-muted",
33 )}
34 onLongPress={
35 activation === "longPress"
36 ? (event) => {
37 event.stopPropagation();
38 copy();
39 }
40 : undefined
41 }
42 onPress={(event) => {
43 event.stopPropagation();
44 if (activation === "press") copy();
45 }}
46 >
47 {traceId}
48 </Text>
49 </>
50 );
51}
apps/mobile/src/features/connection/EnvironmentConnectionNotice.tsx+2-16
......@@ -1,3 +1,4 @@
1import { ConnectionTraceId } from "./ConnectionTraceId";
12import {
23 type EnvironmentConnectionPhase,
34 type EnvironmentConnectionPresentation,
......@@ -6,7 +7,6 @@ import { SymbolView } from "../../components/AppSymbol";
67import { ActivityIndicator, Pressable, View } from "react-native";
78
89import { AppText as Text } from "../../components/AppText";
9import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
1010
1111function noticeTitle(phase: EnvironmentConnectionPhase, environmentLabel: string): string {
1212 switch (phase) {
......@@ -81,21 +81,7 @@ export function EnvironmentConnectionNotice(props: {
8181 <Text className="text-center text-sm leading-normal text-foreground-muted">
8282 {noticeDetail(props.connection.phase, props.resourceName, props.connection.error)}
8383 {props.connection.traceId ? (
84 <>
85 {" Trace ID: "}
86 <Text
87 accessibilityHint="Copies the trace ID"
88 accessibilityRole="button"
89 className="underline decoration-dotted"
90 onPress={() =>
91 copyTextWithHaptic(props.connection.traceId!, {
92 target: "connection-trace-id",
93 })
94 }
95 >
96 {props.connection.traceId}
97 </Text>
98 </>
84 <ConnectionTraceId traceId={props.connection.traceId} />
9985 ) : null}
10086 </Text>
10187