android/ui: fix exit node picker (#416)

fixes tailscale/corp#20547

Corrects some regressions with selection of exit nodes.
We'll now display flag country: name instead of the
raw mullvad node nam and selecting an exit node properly
respects the forced exit node ID from MDM so the
right fields are disabled/hidden.

Signed-off-by: Jonathan Nobels <jonathan@tailscale.com>

android/src/main/java/com/tailscale/ipn/ui/model/TailCfg.kt

@@ -13,6 +13,7 @@ import com.tailscale.ipn.ui.theme.on
 import com.tailscale.ipn.ui.util.ComposableStringFormatter
 import com.tailscale.ipn.ui.util.DisplayAddress
 import com.tailscale.ipn.ui.util.TimeUtil
+import com.tailscale.ipn.ui.util.flag
 import com.tailscale.ipn.ui.viewModel.PeerSettingInfo
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.json.JsonElement
@@ -112,6 +113,17 @@ class Tailcfg {
     val displayName: String
       get() = ComputedName ?: Name
 
+    val exitNodeName: String
+      get() {
+        if (isMullvadNode &&
+                Hostinfo.Location?.Country != null &&
+                Hostinfo.Location?.City != null &&
+                Hostinfo.Location?.CountryCode != null) {
+          return "${Hostinfo.Location!!.CountryCode!!.flag()} ${Hostinfo.Location!!.Country!!}: ${Hostinfo.Location!!.City!!}"
+        }
+        return displayName
+      }
+
     val keyDoesNotExpire: Boolean
       get() = KeyExpiry == "0001-01-01T00:00:00Z"
 

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

@@ -5,8 +5,8 @@ package com.tailscale.ipn.ui.view
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Check
@@ -18,7 +18,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -29,7 +28,6 @@ import com.tailscale.ipn.mdm.ShowHide
 import com.tailscale.ipn.ui.notifier.Notifier
 import com.tailscale.ipn.ui.theme.disabledListItem
 import com.tailscale.ipn.ui.theme.listItem
-import com.tailscale.ipn.ui.theme.off
 import com.tailscale.ipn.ui.util.Lists
 import com.tailscale.ipn.ui.util.LoadingIndicator
 import com.tailscale.ipn.ui.util.itemsWithDividers
@@ -55,18 +53,20 @@ fun ExitNodePicker(
       val showRunAsExitNode by MDMSettings.runExitNode.flow.collectAsState()
       val allowLanAccessMDMDisposition by MDMSettings.exitNodeAllowLANAccess.flow.collectAsState()
       val managedByOrganization by model.managedByOrganization.collectAsState()
+      val forcedExitNodeId = MDMSettings.exitNodeID.flow.collectAsState().value
 
       LazyColumn(modifier = Modifier.padding(innerPadding)) {
         item(key = "header") {
-          if (MDMSettings.exitNodeID.flow.value != null){
+          if (forcedExitNodeId != null) {
             Text(
                 text =
                     managedByOrganization?.let {
                       stringResource(R.string.exit_node_mdm_orgname, it)
-                    } ?: stringResource(R.string.exit_node_mdm) ,
+                    } ?: stringResource(R.string.exit_node_mdm),
                 style = MaterialTheme.typography.bodyMedium,
                 color = MaterialTheme.colorScheme.onSurfaceVariant,
                 modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 4.dp))
+          } else {
             ExitNodeItem(
                 model,
                 ExitNodePickerViewModel.ExitNode(
@@ -115,10 +115,11 @@ fun ExitNodeItem(
 ) {
   val online by node.online.collectAsState()
   val isRunningExitNode = viewModel.isRunningExitNode.collectAsState().value
+  val forcedExitNodeId = MDMSettings.exitNodeID.flow.collectAsState().value
 
   Box {
     var modifier: Modifier = Modifier
-    if (online && !isRunningExitNode && MDMSettings.exitNodeID.flow.value != null) {
+    if (online && !isRunningExitNode && forcedExitNodeId == null) {
       modifier = modifier.clickable { viewModel.setExitNode(node) }
     }
     ListItem(
@@ -167,7 +168,11 @@ fun MullvadItem(nav: ExitNodePickerNav, count: Int, selected: Boolean) {
 }
 
 @Composable
-fun RunAsExitNodeItem(nav: ExitNodePickerNav, viewModel: ExitNodePickerViewModel, anyActive: Boolean) {
+fun RunAsExitNodeItem(
+    nav: ExitNodePickerNav,
+    viewModel: ExitNodePickerViewModel,
+    anyActive: Boolean
+) {
   val isRunningExitNode = viewModel.isRunningExitNode.collectAsState().value
 
   Box {

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

@@ -76,6 +76,7 @@ import com.tailscale.ipn.ui.theme.customErrorContainer
 import com.tailscale.ipn.ui.theme.disabled
 import com.tailscale.ipn.ui.theme.errorButton
 import com.tailscale.ipn.ui.theme.errorListItem
+import com.tailscale.ipn.ui.theme.exitNodeToggleButton
 import com.tailscale.ipn.ui.theme.listItem
 import com.tailscale.ipn.ui.theme.minTextSize
 import com.tailscale.ipn.ui.theme.primaryListItem
@@ -223,7 +224,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
   val chosenExitNodeId = prefs.activeExitNodeID ?: prefs.selectedExitNodeID
 
   val exitNodePeer = chosenExitNodeId?.let { id -> netmap?.Peers?.find { it.StableID == id } }
-  val name = exitNodePeer?.ComputedName
+  val name = exitNodePeer?.exitNodeName
 
   val managedByOrganization by viewModel.managedByOrganization.collectAsState()
 
@@ -262,7 +263,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
                   colors =
                       when (nodeState) {
                         NodeState.ACTIVE_AND_RUNNING -> MaterialTheme.colorScheme.primaryListItem
-                        NodeState.ACTIVE_NOT_RUNNING -> MaterialTheme.colorScheme.primaryListItem
+                        NodeState.ACTIVE_NOT_RUNNING -> MaterialTheme.colorScheme.listItem
                         NodeState.RUNNING_AS_EXIT_NODE -> MaterialTheme.colorScheme.warningListItem
                         NodeState.OFFLINE_ENABLED -> MaterialTheme.colorScheme.errorListItem
                         NodeState.OFFLINE_DISABLED -> MaterialTheme.colorScheme.errorListItem
@@ -315,6 +316,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
                                 NodeState.OFFLINE_MDM -> MaterialTheme.colorScheme.errorButton
                                 NodeState.RUNNING_AS_EXIT_NODE ->
                                     MaterialTheme.colorScheme.warningButton
+                                NodeState.ACTIVE_NOT_RUNNING -> MaterialTheme.colorScheme.exitNodeToggleButton
                                 else -> MaterialTheme.colorScheme.secondaryButton
                               },
                           onClick = {