android/ui: move bug report helper text to its own list item

Updates tailscale/corp#19045

Signed-off-by: Percy Wegmann <percy@tailscale.com>

android/src/main/java/com/tailscale/ipn/ui/util/ClipboardValueView.kt

@@ -27,16 +27,17 @@ fun ClipboardValueView(value: String, title: String? = null, subtitle: String? =
   ListItem(
       colors = MaterialTheme.colorScheme.titledListItem,
       modifier = Modifier.clickable { localClipboardManager.setText(AnnotatedString(value)) },
-      overlineContent = { title?.let { Text(it, style = MaterialTheme.typography.titleMedium) } },
+      overlineContent = title?.let { { Text(it, style = MaterialTheme.typography.titleMedium) } },
       headlineContent = { Text(text = value, style = MaterialTheme.typography.bodyMedium) },
-      supportingContent = {
+      supportingContent =
-        subtitle?.let { subtitle ->
+          subtitle?.let {
-          Text(
+            {
-              subtitle,
+              Text(
-              modifier = Modifier.padding(top = 8.dp),
+                  it,
-              style = MaterialTheme.typography.bodyMedium)
+                  modifier = Modifier.padding(top = 8.dp),
-        }
+                  style = MaterialTheme.typography.bodyMedium)
-      },
+            }
+          },
       trailingContent = {
         Icon(
             painterResource(R.drawable.clipboard),

android/src/main/java/com/tailscale/ipn/ui/util/Lists.kt

@@ -10,12 +10,15 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.text.ClickableText
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
@@ -52,8 +55,24 @@ object Lists {
               fontWeight = fontWeight)
         }
   }
+
+  @Composable
+  fun InfoItem(text: CharSequence, onClick: (() -> Unit)? = null) {
+    val style =
+        MaterialTheme.typography.bodyMedium.copy(color = MaterialTheme.colorScheme.onSurfaceVariant)
+    ListItem(
+        headlineContent = {
+          Box(modifier = Modifier.padding(vertical = 4.dp)) {
+            onClick?.let {
+              ClickableText(text = text as AnnotatedString, style = style, onClick = { onClick() })
+            } ?: run { Text(text as String, style = style) }
+          }
+        })
+  }
 }
 
+/** Similar to items() but includes a horizontal divider between items. */
+
 /** Similar to items() but includes a horizontal divider between items. */
 inline fun <T> LazyListScope.itemsWithDividers(
     items: List<T>,

android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt

@@ -28,6 +28,7 @@ import com.tailscale.ipn.R
 import com.tailscale.ipn.ui.Links
 import com.tailscale.ipn.ui.theme.link
 import com.tailscale.ipn.ui.util.ClipboardValueView
+import com.tailscale.ipn.ui.util.Lists
 import com.tailscale.ipn.ui.viewModel.BugReportViewModel
 
 @Composable
@@ -46,10 +47,9 @@ fun BugReportView(backToSettings: BackNavigation, model: BugReportViewModel = vi
                 onClick = { handler.openUri(Links.SUPPORT_URL) })
           })
 
-      ClipboardValueView(
+      ClipboardValueView(bugReportID, title = stringResource(R.string.bug_report_id))
-          bugReportID,
+
-          title = stringResource(R.string.bug_report_id),
+      Lists.InfoItem(stringResource(id = R.string.bug_report_id_desc))
-          subtitle = stringResource(id = R.string.bug_report_id_desc))
     }
   }
 }

android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt

@@ -4,11 +4,9 @@
 package com.tailscale.ipn.ui.view
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.text.ClickableText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
@@ -24,7 +22,6 @@ import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.withStyle
-import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.tailscale.ipn.BuildConfig
 import com.tailscale.ipn.R
@@ -165,9 +162,7 @@ object Setting {
 @Composable
 fun AdminTextView(onNavigateToAdminConsole: () -> Unit) {
   val adminStr = buildAnnotatedString {
-    withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.onSurfaceVariant)) {
+    append(stringResource(id = R.string.settings_admin_prefix))
-      append(stringResource(id = R.string.settings_admin_prefix))
-    }
 
     pushStringAnnotation(tag = "link", annotation = Links.ADMIN_URL)
     withStyle(
@@ -177,16 +172,7 @@ fun AdminTextView(onNavigateToAdminConsole: () -> Unit) {
                 textDecoration = TextDecoration.Underline)) {
           append(stringResource(id = R.string.settings_admin_link))
         }
-    pop()
   }
 
-  ListItem(
+  Lists.InfoItem(adminStr, onClick = onNavigateToAdminConsole)
-      headlineContent = {
-        Box(modifier = Modifier.padding(vertical = 4.dp)) {
-          ClickableText(
-              text = adminStr,
-              style = MaterialTheme.typography.bodyMedium,
-              onClick = { onNavigateToAdminConsole() })
-        }
-      })
 }

android/src/main/java/com/tailscale/ipn/ui/viewModel/BugReportViewModel.kt

@@ -15,7 +15,9 @@ class BugReportViewModel : ViewModel() {
 
   init {
     Client(viewModelScope).bugReportId { result ->
-      result.onSuccess { bugReportID.set(it) }.onFailure { bugReportID.set("(Error fetching ID)") }
+      result
+          .onSuccess { bugReportID.set(it.trim()) }
+          .onFailure { bugReportID.set("(Error fetching ID)") }
     }
   }
 }