[PM-16905] Add back button to new device notice (#4570)

Author: andrebispo5

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/newdevicenotice/NewDeviceNoticeTwoFactorNavigation.kt

@@ -24,12 +24,14 @@ fun NavController.navigateToNewDeviceNoticeTwoFactor(
  */
 fun NavGraphBuilder.newDeviceNoticeTwoFactorDestination(
     onNavigateBackToVault: () -> Unit,
+    onNavigateBack: () -> Unit,
 ) {
     composableWithSlideTransitions(
         route = NEW_DEVICE_NOTICE_TWO_FACTOR_ROUTE,
     ) {
         NewDeviceNoticeTwoFactorScreen(
             onNavigateBackToVault = onNavigateBackToVault,
+            onNavigateBack = onNavigateBack,
         )
     }
 }

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/newdevicenotice/NewDeviceNoticeTwoFactorScreen.kt

@@ -11,11 +11,15 @@ import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewScreenSizes
@@ -27,13 +31,16 @@ import com.x8bit.bitwarden.R
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.ChangeAccountEmailClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.ContinueDialogClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.DismissDialogClick
+import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.NavigateBackClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.RemindMeLaterClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.TurnOnTwoFactorClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorEvent.NavigateBackToVault
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorEvent.NavigateToChangeAccountEmail
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorEvent.NavigateToTurnOnTwoFactor
 import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
 import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin
+import com.x8bit.bitwarden.ui.platform.components.appbar.BitwardenTopAppBar
+import com.x8bit.bitwarden.ui.platform.components.appbar.NavigationIcon
 import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton
 import com.x8bit.bitwarden.ui.platform.components.button.BitwardenOutlinedButton
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenTwoButtonDialog
@@ -46,9 +53,12 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 /**
  * The top level composable for the new device notice two factor screen.
  */
+@OptIn(ExperimentalMaterial3Api::class)
+@Suppress("LongMethod")
 @Composable
 fun NewDeviceNoticeTwoFactorScreen(
     onNavigateBackToVault: () -> Unit,
+    onNavigateBack: () -> Unit,
     intentManager: IntentManager = LocalIntentManager.current,
     viewModel: NewDeviceNoticeTwoFactorViewModel = hiltViewModel(),
 ) {
@@ -64,6 +74,8 @@ fun NewDeviceNoticeTwoFactorScreen(
             }
 
             NavigateBackToVault -> onNavigateBackToVault()
+
+            NewDeviceNoticeTwoFactorEvent.NavigateBack -> onNavigateBack()
         }
     }
 
@@ -85,7 +97,26 @@ fun NewDeviceNoticeTwoFactorScreen(
         null -> Unit
     }
 
-    BitwardenScaffold {
+    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
+    BitwardenScaffold(
+        modifier = Modifier
+            .nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            BitwardenTopAppBar(
+                title = "",
+                scrollBehavior = scrollBehavior,
+                navigationIcon = NavigationIcon(
+                    navigationIcon = rememberVectorPainter(R.drawable.ic_back),
+                    navigationIconContentDescription = stringResource(id = R.string.back),
+                    onNavigationIconClick = remember(viewModel) {
+                        {
+                            viewModel.trySendAction(NavigateBackClick)
+                        }
+                    },
+                ),
+            )
+        },
+    ) {
         NewDeviceNoticeTwoFactorContent(
             onTurnOnTwoFactorClick = {
                 viewModel.trySendAction(TurnOnTwoFactorClick)

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/newdevicenotice/NewDeviceNoticeTwoFactorViewModel.kt

@@ -15,6 +15,7 @@ import com.x8bit.bitwarden.data.vault.repository.VaultRepository
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.ChangeAccountEmailClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.ContinueDialogClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.DismissDialogClick
+import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.NavigateBackClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.RemindMeLaterClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorAction.TurnOnTwoFactorClick
 import com.x8bit.bitwarden.ui.auth.feature.newdevicenotice.NewDeviceNoticeTwoFactorDialogState.ChangeAccountEmailDialog
@@ -90,6 +91,8 @@ class NewDeviceNoticeTwoFactorViewModel @Inject constructor(
             DismissDialogClick -> updateDialogState(newState = null)
 
             ContinueDialogClick -> handleContinueDialog()
+
+            NavigateBackClick -> sendEvent(NewDeviceNoticeTwoFactorEvent.NavigateBack)
         }
     }
 
@@ -154,6 +157,11 @@ sealed class NewDeviceNoticeTwoFactorEvent {
      * Navigates back to vault.
      */
     data object NavigateBackToVault : NewDeviceNoticeTwoFactorEvent()
+
+    /**
+     * Navigates back to previous screen.
+     */
+    data object NavigateBack : NewDeviceNoticeTwoFactorEvent()
 }
 
 /**
@@ -184,6 +192,11 @@ sealed class NewDeviceNoticeTwoFactorAction {
      * User tapped the continue dialog button.
      */
     data object ContinueDialogClick : NewDeviceNoticeTwoFactorAction()
+
+    /**
+     * User tapped the back button.
+     */
+    data object NavigateBackClick : NewDeviceNoticeTwoFactorAction()
 }
 
 /**

app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/vaultunlocked/VaultUnlockedNavigation.kt

@@ -241,6 +241,7 @@ fun NavGraphBuilder.vaultUnlockedGraph(
         )
         newDeviceNoticeTwoFactorDestination(
             onNavigateBackToVault = { navController.navigateToVaultUnlockedGraph() },
+            onNavigateBack = { navController.popBackStack() },
         )
     }
 }

app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/newdevicenotice/NewDeviceNoticeTwoFactorScreenTest.kt

@@ -4,6 +4,7 @@ import androidx.compose.ui.test.assert
 import androidx.compose.ui.test.assertIsDisplayed
 import androidx.compose.ui.test.hasAnyAncestor
 import androidx.compose.ui.test.isDialog
+import androidx.compose.ui.test.onNodeWithContentDescription
 import androidx.compose.ui.test.onNodeWithText
 import androidx.compose.ui.test.performClick
 import androidx.compose.ui.test.performScrollTo
@@ -20,13 +21,15 @@ import junit.framework.TestCase.assertTrue
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.update
 import org.junit.After
+import org.junit.Assert
 import org.junit.Before
 import org.junit.Test
 
 class NewDeviceNoticeTwoFactorScreenTest : BaseComposeTest() {
     private val intentManager = mockk<IntentManager>(relaxed = true) {
         every { startCustomTabsActivity(any()) } just runs
     }
+    private var onNavigateBackToVaultCalled = false
     private var onNavigateBackCalled = false
     private val mutableStateFlow = MutableStateFlow(DEFAULT_STATE)
     private val mutableEventFlow = bufferedMutableSharedFlow<NewDeviceNoticeTwoFactorEvent>()
@@ -39,7 +42,8 @@ class NewDeviceNoticeTwoFactorScreenTest : BaseComposeTest() {
     fun setUp() {
         composeTestRule.setContent {
             NewDeviceNoticeTwoFactorScreen(
-                onNavigateBackToVault = { onNavigateBackCalled = true },
+                onNavigateBackToVault = { onNavigateBackToVaultCalled = true },
+                onNavigateBack = { onNavigateBackCalled = true },
                 intentManager,
                 viewModel = viewModel,
             )
@@ -48,9 +52,21 @@ class NewDeviceNoticeTwoFactorScreenTest : BaseComposeTest() {
 
     @After
     fun tearDown() {
+        onNavigateBackToVaultCalled = false
         onNavigateBackCalled = false
     }
 
+    @Test
+    fun `onNavigateBack should send action to viewModel`() {
+        composeTestRule
+            .onNodeWithContentDescription("Back")
+            .performClick()
+
+        verify {
+            viewModel.trySendAction(NewDeviceNoticeTwoFactorAction.NavigateBackClick)
+        }
+    }
+
     @Test
     fun `Turn on two-step verification click should send TurnOnTwoFactorClick action`() {
         composeTestRule
@@ -117,7 +133,13 @@ class NewDeviceNoticeTwoFactorScreenTest : BaseComposeTest() {
     @Test
     fun `RemindMeLaterClick should call OnNavigateBack`() {
         mutableEventFlow.tryEmit(NewDeviceNoticeTwoFactorEvent.NavigateBackToVault)
-        assertTrue(onNavigateBackCalled)
+        assertTrue(onNavigateBackToVaultCalled)
+    }
+
+    @Test
+    fun `onNavigateBack should set onNavigateBackCalled to true`() {
+        mutableEventFlow.tryEmit(NewDeviceNoticeTwoFactorEvent.NavigateBack)
+        Assert.assertTrue(onNavigateBackCalled)
     }
 
     @Test
@@ -157,7 +179,7 @@ class NewDeviceNoticeTwoFactorScreenTest : BaseComposeTest() {
                 "Make your account more secure by setting up two-step login in the Bitwarden web app.",
                 substring = true,
                 ignoreCase = true,
-                )
+            )
             .assert(hasAnyAncestor(isDialog()))
             .assertIsDisplayed()
         composeTestRule

app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/newdevicenotice/NewDeviceNoticeTwoFactorViewModelTest.kt

@@ -127,7 +127,7 @@ class NewDeviceNoticeTwoFactorViewModelTest : BaseViewModelTest() {
     }
 
     @Test
-    fun `RemindMeLaterClick should emit NavigateBack`() = runTest {
+    fun `RemindMeLaterClick should emit NavigateBackToVault`() = runTest {
         val viewModel = createViewModel()
         viewModel.eventFlow.test {
             viewModel.trySendAction(NewDeviceNoticeTwoFactorAction.RemindMeLaterClick)
@@ -146,6 +146,18 @@ class NewDeviceNoticeTwoFactorViewModelTest : BaseViewModelTest() {
         }
     }
 
+    @Test
+    fun `NavigateBackClick should send NavigateBack event`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.trySendAction(NewDeviceNoticeTwoFactorAction.NavigateBackClick)
+        viewModel.eventFlow.test {
+            assertEquals(
+                NewDeviceNoticeTwoFactorEvent.NavigateBack,
+                awaitItem(),
+            )
+        }
+    }
+
     @Test
     @Suppress("MaxLineLength")
     fun `ContinueDialogClick should emit NavigateToTurnOnTwoFactor if dialog state is TurnOnTwoFactorDialog`() =