android: put new search behind flag (#587)

Until the WIP feature is ready

Updates tailscale/corp#18973

Signed-off-by: kari-ts <kari@tailscale.com>
Signed-off-by: kari-ts <135075563+kari-ts@users.noreply.github.com>

android/src/main/java/com/tailscale/ipn/App.kt

@@ -35,6 +35,7 @@ import com.tailscale.ipn.ui.notifier.Notifier
 import com.tailscale.ipn.ui.viewModel.VpnViewModel
 import com.tailscale.ipn.ui.viewModel.VpnViewModelFactory
 import com.tailscale.ipn.util.TSLog
+import com.tailscale.ipn.util.FeatureFlags
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.SupervisorJob
@@ -191,6 +192,7 @@ class App : UninitializedApp(), libtailscale.AppContext, ViewModelStoreOwner {
       val hideDisconnectAction = MDMSettings.forceEnabled.flow.first()
     }
     TSLog.init(this)
+    FeatureFlags.initialize(mapOf("enable_new_search" to false))
   }
 
   private fun initViewModels() {

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

@@ -27,7 +27,10 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.outlined.ArrowDropDown
+import androidx.compose.material.icons.outlined.Clear
+import androidx.compose.material.icons.outlined.Close
 import androidx.compose.material.icons.outlined.Lock
+import androidx.compose.material.icons.outlined.Search
 import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material3.Button
 import androidx.compose.material3.DropdownMenu
@@ -39,6 +42,7 @@ import androidx.compose.material3.ListItem
 import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -56,6 +60,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.SpanStyle
@@ -83,6 +88,7 @@ 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
+import com.tailscale.ipn.ui.theme.searchBarColors
 import com.tailscale.ipn.ui.theme.secondaryButton
 import com.tailscale.ipn.ui.theme.short
 import com.tailscale.ipn.ui.theme.surfaceContainerListItem
@@ -98,6 +104,7 @@ import com.tailscale.ipn.ui.util.set
 import com.tailscale.ipn.ui.viewModel.IpnViewModel.NodeState
 import com.tailscale.ipn.ui.viewModel.MainViewModel
 import com.tailscale.ipn.ui.viewModel.VpnViewModel
+import com.tailscale.ipn.util.FeatureFlags
 
 // Navigation actions for the MainView
 data class MainViewNavigation(
@@ -215,7 +222,8 @@ fun MainView(
                 PeerList(
                     viewModel = viewModel,
                     onNavigateToPeerDetails = navigation.onNavigateToPeerDetails,
-                    onSearchBarClick = navigation.onNavigateToSearch)
+                    onSearchBarClick = navigation.onNavigateToSearch,
+                    onSearch = { viewModel.searchPeers(it) })
               }
               Ipn.State.NoState,
               Ipn.State.Starting -> StartingView()
@@ -518,7 +526,8 @@ fun ConnectView(
 fun PeerList(
     viewModel: MainViewModel,
     onNavigateToPeerDetails: (Tailcfg.Node) -> Unit,
-    onSearchBarClick: () -> Unit
+    onSearchBarClick: () -> Unit,
+    onSearch: (String) -> Unit
 ) {
   val peerList by viewModel.peers.collectAsState(initial = emptyList<PeerSet>())
   val searchTermStr by viewModel.searchTerm.collectAsState(initial = "")
@@ -526,16 +535,60 @@ fun PeerList(
       remember { derivedStateOf { searchTermStr.isNotEmpty() && peerList.isEmpty() } }.value
 
   val netmap = viewModel.netmap.collectAsState()
+  val focusManager = LocalFocusManager.current
+  var isSearchFocussed by remember { mutableStateOf(false) }
   var isListFocussed by remember { mutableStateOf(false) }
   val expandedPeer = viewModel.expandedMenuPeer.collectAsState()
   val localClipboardManager = LocalClipboardManager.current
   val enableSearch = !isAndroidTV()
 
   Column(modifier = Modifier.fillMaxSize()) {
-    if (enableSearch) {
+    if (enableSearch && FeatureFlags.isEnabled("enable_new_search")) {
       Search(onSearchBarClick)
 
       Spacer(modifier = Modifier.height(if (showNoResults) 0.dp else 8.dp))
+    } else {
+      if (enableSearch) {
+        Box(
+            modifier =
+                Modifier.fillMaxWidth().background(color = MaterialTheme.colorScheme.surface)) {
+              OutlinedTextField(
+                  modifier =
+                      Modifier.fillMaxWidth()
+                          .padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 0.dp)
+                          .onFocusChanged { isSearchFocussed = it.isFocused },
+                  singleLine = true,
+                  shape = MaterialTheme.shapes.extraLarge,
+                  colors = MaterialTheme.colorScheme.searchBarColors,
+                  leadingIcon = {
+                    Icon(imageVector = Icons.Outlined.Search, contentDescription = "search")
+                  },
+                  trailingIcon = {
+                    if (isSearchFocussed) {
+                      IconButton(
+                          onClick = {
+                            focusManager.clearFocus()
+                            onSearch("")
+                          }) {
+                            Icon(
+                                imageVector =
+                                    if (searchTermStr.isEmpty()) Icons.Outlined.Close
+                                    else Icons.Outlined.Clear,
+                                contentDescription = "clear search",
+                                tint = MaterialTheme.colorScheme.onSurfaceVariant)
+                          }
+                    }
+                  },
+                  placeholder = {
+                    Text(
+                        text = stringResource(id = R.string.search),
+                        style = MaterialTheme.typography.bodyLarge,
+                        maxLines = 1)
+                  },
+                  value = searchTermStr,
+                  onValueChange = { onSearch(it) })
+            }
+      }
     }
 
     // Peers display

android/src/main/java/com/tailscale/ipn/util/FeatureFlags.kt

@@ -0,0 +1,26 @@
+// Copyright (c) Tailscale Inc & AUTHORS
+// SPDX-License-Identifier: BSD-3-Clause
+package com.tailscale.ipn.util
+
+object FeatureFlags {
+
+  // Map to hold the feature flags
+  private val flags: MutableMap<String, Boolean> = mutableMapOf()
+
+  fun initialize(defaults: Map<String, Boolean>) {
+    flags.clear()
+    flags.putAll(defaults)
+  }
+
+  fun enable(feature: String) {
+    flags[feature] = true
+  }
+
+  fun disable(feature: String) {
+    flags[feature] = false
+  }
+
+  fun isEnabled(feature: String): Boolean {
+    return flags[feature] ?: false
+  }
+}