Hide encryption history + FTUE flow (#839)

* First attempt at implementing encrypted history banner and removing old UTDs

* Get the right behavior in the timeline

* Implement the designs

* Extract post-processing logic, add tests

* Add encryption banner to timeline screenshots

* Create FTUE feature to handle welcome screen and analytics

* Move classes to their own packages, add tests for `DefaultFtueState`.

* Remove unnecessary private MutableStateFlow

* Move some FTUE related methods and classes back to the `impl` module

* Handle back press at each FTUE step

* Remove unneeded `TestScope` receiver for `createState` in tests.

* Use light & dark previews for the banner view.

* Move color customization from `TextStyle` to `Text` component.

* Rename `InfoList` design components, use them in `AnalyticsOptInView` too.

* Cleanup MatrixClient.

* Fix copy&paste error

Co-authored-by: Benoit Marty <[email protected]>

* Fix typo

* Fix Maestro tests

---------

Co-authored-by: ElementBot <[email protected]>
Co-authored-by: Benoit Marty <[email protected]>

Author: 3 people

.maestro/tests/account/login.yaml

@@ -23,6 +23,8 @@ appId: ${APP_ID}
 - inputText: ${PASSWORD}
 - pressKey: Enter
 - tapOn: "Continue"
+- runFlow: ../assertions/assertWelcomeScreenDisplayed.yaml
+- tapOn: "Continue"
 - runFlow: ../assertions/assertAnalyticsDisplayed.yaml
 - tapOn: "Not now"
 - runFlow: ../assertions/assertHomeDisplayed.yaml

.maestro/tests/assertions/assertWelcomeScreenDisplayed.yaml

@@ -0,0 +1,6 @@
+appId: ${APP_ID}
+---
+- extendedWaitUntil:
+    visible:
+      id: "welcome_screen-title"
+    timeout: 10_000

appnav/build.gradle.kts

@@ -54,6 +54,8 @@ dependencies {
     implementation(projects.tests.uitests)
     implementation(libs.coil)
 
+    implementation(projects.features.ftue.api)
+
     implementation(projects.services.apperror.impl)
     implementation(projects.services.appnavstate.api)
     implementation(projects.services.analytics.api)

appnav/src/main/kotlin/io/element/android/appnav/LoggedInFlowNode.kt

@@ -19,6 +19,8 @@ package io.element.android.appnav
 import android.os.Parcelable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.lifecycleScope
@@ -41,14 +43,15 @@ import io.element.android.anvilannotations.ContributesNode
 import io.element.android.appnav.loggedin.LoggedInNode
 import io.element.android.appnav.room.RoomFlowNode
 import io.element.android.appnav.room.RoomLoadedFlowNode
-import io.element.android.features.analytics.api.AnalyticsEntryPoint
 import io.element.android.features.createroom.api.CreateRoomEntryPoint
 import io.element.android.features.invitelist.api.InviteListEntryPoint
 import io.element.android.features.networkmonitor.api.NetworkMonitor
 import io.element.android.features.networkmonitor.api.NetworkStatus
 import io.element.android.features.preferences.api.PreferencesEntryPoint
 import io.element.android.features.roomlist.api.RoomListEntryPoint
 import io.element.android.features.verifysession.api.VerifySessionEntryPoint
+import io.element.android.features.ftue.api.FtueEntryPoint
+import io.element.android.features.ftue.api.state.FtueState
 import io.element.android.libraries.architecture.BackstackNode
 import io.element.android.libraries.architecture.NodeInputs
 import io.element.android.libraries.architecture.animation.rememberDefaultTransitionHandler
@@ -64,13 +67,10 @@ import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.sync.SyncState
 import io.element.android.libraries.matrix.ui.di.MatrixUIBindings
 import io.element.android.libraries.push.api.notifications.NotificationDrawerManager
-import io.element.android.services.analytics.api.AnalyticsService
 import io.element.android.services.appnavstate.api.AppNavigationStateService
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.distinctUntilChanged
-import kotlinx.coroutines.flow.launchIn
-import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
 import kotlinx.parcelize.Parcelize
 
@@ -81,14 +81,14 @@ class LoggedInFlowNode @AssistedInject constructor(
     private val roomListEntryPoint: RoomListEntryPoint,
     private val preferencesEntryPoint: PreferencesEntryPoint,
     private val createRoomEntryPoint: CreateRoomEntryPoint,
-    private val analyticsOptInEntryPoint: AnalyticsEntryPoint,
     private val appNavigationStateService: AppNavigationStateService,
     private val verifySessionEntryPoint: VerifySessionEntryPoint,
     private val inviteListEntryPoint: InviteListEntryPoint,
-    private val analyticsService: AnalyticsService,
+    private val ftueEntryPoint: FtueEntryPoint,
     private val coroutineScope: CoroutineScope,
     private val networkMonitor: NetworkMonitor,
     private val notificationDrawerManager: NotificationDrawerManager,
+    private val ftueState: FtueState,
     snackbarDispatcher: SnackbarDispatcher,
 ) : BackstackNode<LoggedInFlowNode.NavTarget>(
     backstack = BackStack(
@@ -99,19 +99,6 @@ class LoggedInFlowNode @AssistedInject constructor(
     plugins = plugins
 ) {
 
-    private fun observeAnalyticsState() {
-        analyticsService.didAskUserConsent()
-            .distinctUntilChanged()
-            .onEach { isConsentAsked ->
-                if (isConsentAsked) {
-                    backstack.removeLast(NavTarget.AnalyticsOptIn)
-                } else {
-                    backstack.push(NavTarget.AnalyticsOptIn)
-                }
-            }
-            .launchIn(lifecycleScope)
-    }
-
     interface Callback : Plugin {
         fun onOpenBugReport() = Unit
     }
@@ -136,7 +123,7 @@ class LoggedInFlowNode @AssistedInject constructor(
 
     override fun onBuilt() {
         super.onBuilt()
-        observeAnalyticsState()
+
         lifecycle.subscribe(
             onCreate = {
                 plugins<LifecycleCallback>().forEach { it.onFlowCreated(id, inputs.matrixClient) }
@@ -146,6 +133,10 @@ class LoggedInFlowNode @AssistedInject constructor(
                 // TODO We do not support Space yet, so directly navigate to main space
                 appNavigationStateService.onNavigateToSpace(id, MAIN_SPACE)
                 loggedInFlowProcessor.observeEvents(coroutineScope)
+
+                if (ftueState.shouldDisplayFlow.value) {
+                    backstack.push(NavTarget.Ftue)
+                }
             },
             onResume = {
                 syncService.startSync()
@@ -209,7 +200,7 @@ class LoggedInFlowNode @AssistedInject constructor(
         object InviteList : NavTarget
 
         @Parcelize
-        object AnalyticsOptIn : NavTarget
+        object Ftue : NavTarget
     }
 
     override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node {
@@ -306,8 +297,13 @@ class LoggedInFlowNode @AssistedInject constructor(
                     .callback(callback)
                     .build()
             }
-            NavTarget.AnalyticsOptIn -> {
-                analyticsOptInEntryPoint.createNode(this, buildContext)
+            NavTarget.Ftue -> {
+                ftueEntryPoint.nodeBuilder(this, buildContext)
+                    .callback(object : FtueEntryPoint.Callback {
+                        override fun onFtueFlowFinished() {
+                            backstack.pop()
+                        }
+                    }).build()
             }
         }
     }
@@ -335,7 +331,11 @@ class LoggedInFlowNode @AssistedInject constructor(
                 transitionHandler = rememberDefaultTransitionHandler(),
             )
 
-            PermanentChild(navTarget = NavTarget.Permanent)
+            val isFtueDisplayed by ftueState.shouldDisplayFlow.collectAsState()
+
+            if (!isFtueDisplayed) {
+                PermanentChild(navTarget = NavTarget.Permanent)
+            }
         }
     }
 

build.gradle.kts

@@ -246,7 +246,7 @@ koverMerged {
             name = "Check code coverage of states"
             target = kotlinx.kover.api.VerificationTarget.CLASS
             overrideClassFilter {
-                includes += "*State"
+                includes += "^*State$"
                 excludes += "io.element.android.libraries.matrix.api.timeline.item.event.OtherState$*"
                 excludes += "io.element.android.libraries.matrix.api.timeline.item.event.EventSendState$*"
                 excludes += "io.element.android.libraries.matrix.api.room.RoomMembershipState*"
@@ -262,6 +262,8 @@ koverMerged {
                 excludes += "io.element.android.libraries.maplibre.compose.CameraPositionState*"
                 excludes += "io.element.android.libraries.maplibre.compose.SaveableCameraPositionState"
                 excludes += "io.element.android.libraries.maplibre.compose.SymbolState*"
+                excludes += "io.element.android.features.ftue.api.state.*"
+                excludes += "io.element.android.features.ftue.impl.welcome.state.*"
             }
             bound {
                 minValue = 90

features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt

@@ -16,12 +16,11 @@
 
 package io.element.android.features.analytics.impl
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
@@ -48,6 +47,8 @@ import androidx.compose.ui.unit.dp
 import io.element.android.features.analytics.api.AnalyticsOptInEvents
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.atomic.molecules.InfoListItem
+import io.element.android.libraries.designsystem.atomic.molecules.InfoListOrganism
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
@@ -60,6 +61,7 @@ import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
 import io.element.android.libraries.designsystem.utils.LogCompositions
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
+import kotlinx.collections.immutable.persistentListOf
 
 @Composable
 fun AnalyticsOptInView(
@@ -69,14 +71,30 @@ fun AnalyticsOptInView(
 ) {
     LogCompositions(tag = "Analytics", msg = "Root")
     val eventSink = state.eventSink
+
+    fun onTermsAccepted() {
+        eventSink(AnalyticsOptInEvents.EnableAnalytics(true))
+    }
+
+    fun onTermsDeclined() {
+        eventSink(AnalyticsOptInEvents.EnableAnalytics(false))
+    }
+
+    BackHandler(onBack = ::onTermsDeclined)
     HeaderFooterPage(
         modifier = modifier
             .fillMaxSize()
             .systemBarsPadding()
             .imePadding(),
         header = { AnalyticsOptInHeader(state, onClickTerms) },
         content = { AnalyticsOptInContent() },
-        footer = { AnalyticsOptInFooter(eventSink) })
+        footer = {
+            AnalyticsOptInFooter(
+                onTermsAccepted = ::onTermsAccepted,
+                onTermsDeclined = ::onTermsDeclined,
+            )
+        }
+    )
 }
 
 @Composable
@@ -114,6 +132,19 @@ private fun AnalyticsOptInHeader(
     }
 }
 
+@Composable
+private fun CheckIcon(modifier: Modifier = Modifier) {
+    Icon(
+        modifier = Modifier
+            .size(20.dp)
+            .background(color = MaterialTheme.colorScheme.background, shape = CircleShape)
+            .padding(2.dp),
+        imageVector = Icons.Rounded.Check,
+        contentDescription = null,
+        tint = ElementTheme.colors.textActionAccent,
+    )
+}
+
 @Composable
 private fun AnalyticsOptInContent(
     modifier: Modifier = Modifier,
@@ -125,80 +156,45 @@ private fun AnalyticsOptInContent(
             verticalBias = -0.4f
         )
     ) {
-        Column(
-            verticalArrangement = Arrangement.spacedBy(4.dp)
-        ) {
-            AnalyticsOptInContentRow(
-                text = stringResource(id = R.string.screen_analytics_prompt_data_usage),
-                idx = 0
-            )
-            AnalyticsOptInContentRow(
-                text = stringResource(id = R.string.screen_analytics_prompt_third_party_sharing),
-                idx = 1
-            )
-            AnalyticsOptInContentRow(
-                text = stringResource(id = R.string.screen_analytics_prompt_settings),
-                idx = 2
-            )
-        }
-    }
-}
-
-@Composable
-private fun AnalyticsOptInContentRow(
-    text: String,
-    idx: Int,
-    modifier: Modifier = Modifier,
-) {
-    val radius = 14.dp
-    val bgShape = when (idx) {
-        0 -> RoundedCornerShape(topStart = radius, topEnd = radius)
-        2 -> RoundedCornerShape(bottomStart = radius, bottomEnd = radius)
-        else -> RoundedCornerShape(0.dp)
-    }
-    Row(
-        modifier = modifier
-            .fillMaxWidth()
-            .background(
-                color = ElementTheme.colors.temporaryColorBgSpecial,
-                shape = bgShape,
-            )
-            .padding(vertical = 12.dp, horizontal = 20.dp),
-    ) {
-        Icon(
-            modifier = Modifier
-                .size(20.dp)
-                .background(color = MaterialTheme.colorScheme.background, shape = CircleShape)
-                .padding(2.dp),
-            imageVector = Icons.Rounded.Check,
-            contentDescription = null,
-            tint = ElementTheme.colors.textActionAccent,
-        )
-        Text(
-            modifier = Modifier.padding(start = 16.dp),
-            text = text,
-            style = ElementTheme.typography.fontBodyMdMedium,
-            color = MaterialTheme.colorScheme.primary,
+        InfoListOrganism(
+            items = persistentListOf(
+                InfoListItem(
+                    message = stringResource(id = R.string.screen_analytics_prompt_data_usage),
+                    iconComposable = { CheckIcon() },
+                ),
+                InfoListItem(
+                    message = stringResource(id = R.string.screen_analytics_prompt_third_party_sharing),
+                    iconComposable = { CheckIcon() },
+                ),
+                InfoListItem(
+                    message = stringResource(id = R.string.screen_analytics_prompt_settings),
+                    iconComposable = { CheckIcon() },
+                ),
+            ),
+            textStyle = ElementTheme.typography.fontBodyMdMedium,
+            iconTint = ElementTheme.colors.textPrimary,
+            backgroundColor = ElementTheme.colors.temporaryColorBgSpecial
         )
     }
 }
 
 @Composable
 private fun AnalyticsOptInFooter(
-    eventSink: (AnalyticsOptInEvents) -> Unit,
+    onTermsAccepted: () -> Unit,
+    onTermsDeclined: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     ButtonColumnMolecule(
         modifier = modifier,
     ) {
         Button(
-            onClick = { eventSink(AnalyticsOptInEvents.EnableAnalytics(true)) },
+            onClick = onTermsAccepted,
             modifier = Modifier.fillMaxWidth(),
         ) {
             Text(text = stringResource(id = CommonStrings.action_ok))
         }
         TextButton(
-            onClick = { eventSink(AnalyticsOptInEvents.EnableAnalytics(false)) },
+            onClick = onTermsDeclined,
             modifier = Modifier.fillMaxWidth(),
         ) {
             Text(text = stringResource(id = CommonStrings.action_not_now))

features/ftue/api/build.gradle.kts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+plugins {
+    id("io.element.android-library")
+}
+
+android {
+    namespace = "io.element.android.features.ftue.api"
+}
+
+dependencies {
+    implementation(projects.libraries.architecture)
+}