[TS-147] Add internal debug field display (#9302)

* Add internal debug field display * Update title
2025-10-29 11:21:19 -05:00
parent 3107efb449
commit 339f3320c6
7 changed files with 98 additions and 1 deletions
@@ -0,0 +1,74 @@
+import {TouchableWithoutFeedback, View} from 'react-native'
+import * as Clipboard from 'expo-clipboard'
+
+import {atoms as a, useTheme} from '#/alf'
+import * as Prompt from '#/components/Prompt'
+import * as Toast from '#/components/Toast'
+import {Text} from '#/components/Typography'
+import {useDevMode} from '#/storage/hooks/dev-mode'
+
+/**
+ * Internal-use component to display debug information supplied by the appview.
+ * The `debug` field only exists on some API views, and is only visible for
+ * internal users in dev mode. As such, none of these strings need to be
+ * translated.
+ *
+ * This component can be removed at any time if we don't find it useful.
+ */
+export function DebugFieldDisplay<T extends {debug?: {[x: string]: unknown}}>({
+  subject,
+}: {
+  subject: T
+}) {
+  const t = useTheme()
+  const [devMode] = useDevMode()
+  const prompt = Prompt.usePromptControl()
+
+  if (!devMode) return
+  if (!subject.debug) return
+
+  return (
+    <>
+      <Prompt.Basic
+        control={prompt}
+        title="Debug"
+        description={JSON.stringify(subject.debug, null, 2)}
+        cancelButtonCta="Close"
+        confirmButtonCta="Copy"
+        onConfirm={() => {
+          Clipboard.setStringAsync(JSON.stringify(subject.debug, null, 2))
+          Toast.show('Copied to clipboard', {type: 'success'})
+        }}
+      />
+      <TouchableWithoutFeedback
+        accessibilityRole="button"
+        onPress={e => {
+          e.preventDefault()
+          e.stopPropagation()
+          prompt.open()
+          return false
+        }}>
+        <View style={[a.flex_row, a.align_center, a.gap_xs, a.pt_sm, a.pb_xs]}>
+          <View
+            style={[a.py_xs, a.px_sm, a.rounded_sm, t.atoms.bg_contrast_25]}>
+            <Text
+              style={[a.font_bold, a.text_xs, t.atoms.text_contrast_medium]}>
+              Debug
+            </Text>
+          </View>
+          <Text
+            numberOfLines={1}
+            style={[
+              a.flex_1,
+              a.text_xs,
+              a.leading_tight,
+              {fontFamily: 'monospace'},
+              t.atoms.text_contrast_low,
+            ]}>
+            {JSON.stringify(subject.debug)}
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
+    </>
+  )
+}