feat(debug): migration progress [WPB-3523] (#2128)

app/src/main/kotlin/com/wire/android/mapper/UIParticipantMapper.kt

@@ -55,7 +55,8 @@ class UIParticipantMapper @Inject constructor(
             unavailable = unavailable,
             isDeleted = (user is OtherUser && user.deleted),
             botService = (user as? OtherUser)?.botService,
-            isDefederated = (user is OtherUser && user.defederated)
+            isDefederated = (user is OtherUser && user.defederated),
+            supportedProtocolList = supportedProtocols.orEmpty().toList()
         )
     }
 
@@ -69,7 +70,8 @@ class UIParticipantMapper @Inject constructor(
             unavailable = !userSummary.isUserDeleted && userSummary.userName.orEmpty().isEmpty(),
             isDeleted = userSummary.isUserDeleted,
             isSelf = isSelfUser,
-            isDefederated = false
+            isDefederated = false,
+            supportedProtocolList = listOf()
         )
     }
 
@@ -84,7 +86,8 @@ class UIParticipantMapper @Inject constructor(
             isDeleted = userSummary.isUserDeleted,
             isSelf = false,
             readReceiptDate = date,
-            isDefederated = false
+            isDefederated = false,
+            supportedProtocolList = listOf()
         )
     }
 

app/src/main/kotlin/com/wire/android/ui/common/DeletedLabel.kt → app/src/main/kotlin/com/wire/android/ui/common/StatusBox.kt

@@ -32,11 +32,12 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.wire.android.R
 import com.wire.android.ui.theme.wireColorScheme
+import com.wire.android.util.ui.PreviewMultipleThemes
 
 /**
  * Outlined box with a text inside.
@@ -46,17 +47,24 @@ import com.wire.android.ui.theme.wireColorScheme
 @Composable
 fun StatusBox(
     statusText: String,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    textColor: Color = MaterialTheme.wireColorScheme.labelText,
+    badgeColor: Color = MaterialTheme.wireColorScheme.surface,
+    withBorder: Boolean = true,
 ) {
     Box(
         modifier = modifier
             .wrapContentSize()
             .clip(RoundedCornerShape(size = dimensions().spacing4x))
-            .background(colorsScheme().surface)
+            .background(badgeColor)
             .border(
                 BorderStroke(
                     width = 1.dp,
-                    color = MaterialTheme.wireColorScheme.divider
+                    color = if (withBorder) {
+                        MaterialTheme.wireColorScheme.divider
+                    } else {
+                        badgeColor
+                    }
                 ),
                 shape = RoundedCornerShape(size = dimensions().spacing4x),
             )
@@ -68,7 +76,7 @@ fun StatusBox(
     ) {
         Text(
             text = statusText,
-            style = typography().label03.copy(color = MaterialTheme.wireColorScheme.labelText)
+            style = typography().label03.copy(color = textColor)
         )
     }
 }
@@ -81,8 +89,28 @@ fun DeletedLabel(modifier: Modifier = Modifier) {
     )
 }
 
-@Preview
+@Composable
+fun ProtocolLabel(
+    protocolName: String,
+    modifier: Modifier = Modifier
+) {
+    StatusBox(
+        statusText = protocolName,
+        modifier = modifier,
+        textColor = MaterialTheme.wireColorScheme.onPrimary,
+        badgeColor = MaterialTheme.wireColorScheme.primary,
+        withBorder = false
+    )
+}
+
+@PreviewMultipleThemes
 @Composable
 fun PreviewDeletedLabel() {
     DeletedLabel()
 }
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewProtocolLabel() {
+    ProtocolLabel("MLS")
+}

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/participants/ConversationParticipantItem.kt

@@ -31,10 +31,12 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import com.wire.android.BuildConfig
 import com.wire.android.R
 import com.wire.android.model.Clickable
 import com.wire.android.model.UserAvatarData
 import com.wire.android.ui.common.ArrowRightIcon
+import com.wire.android.ui.common.ProtocolLabel
 import com.wire.android.ui.common.RowItemTemplate
 import com.wire.android.ui.common.UserBadge
 import com.wire.android.ui.common.UserProfileAvatar
@@ -48,6 +50,8 @@ import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.ui.theme.wireTypography
 import com.wire.android.util.EMPTY
 import com.wire.android.util.uiReadReceiptDateTime
+import com.wire.kalium.logic.data.user.ConnectionState
+import com.wire.kalium.logic.data.user.SupportedProtocol
 import com.wire.kalium.logic.data.user.UserId
 
 @Composable
@@ -92,8 +96,15 @@ fun ConversationParticipantItem(
                     startPadding = dimensions().spacing6x,
                     isDeleted = uiParticipant.isDeleted
                 )
+                if (BuildConfig.MLS_SUPPORT_ENABLED && BuildConfig.DEVELOPER_FEATURES_ENABLED) {
+                    uiParticipant.supportedProtocolList.map {
+                        ProtocolLabel(
+                            protocolName = it.name,
+                            Modifier.padding(start = dimensions().spacing4x)
+                        )
+                    }
+                }
             }
-
         },
         subtitle = {
             HighlightSubtitle(
@@ -125,7 +136,11 @@ fun ConversationParticipantItem(
 @Composable
 fun PreviewGroupConversationParticipantItem() {
     ConversationParticipantItem(
-        UIParticipant(UserId("0", ""), "name", "handle", false, false, UserAvatarData(), Membership.Guest),
+        UIParticipant(
+            UserId("0", ""), "name", "handle", false, false, UserAvatarData(),
+            Membership.Guest, ConnectionState.ACCEPTED, false, false, null, null, false,
+            listOf(SupportedProtocol.PROTEUS, SupportedProtocol.MLS)
+        ),
         clickable = Clickable(enabled = true) {}
     )
 }

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/participants/GroupConversationParticipants.kt

@@ -23,34 +23,45 @@ package com.wire.android.ui.home.conversations.details.participants
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.text.style.TextAlign
+import com.wire.android.BuildConfig
 import com.wire.android.R
+import com.wire.android.ui.common.button.WirePrimaryButton
 import com.wire.android.ui.common.button.WireSecondaryButton
+import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.common.rememberBottomBarElevationState
-import com.wire.android.ui.common.button.WirePrimaryButton
 import com.wire.android.ui.home.conversations.details.participants.model.UIParticipant
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireDimensions
 import com.wire.android.ui.theme.wireTypography
+import com.wire.android.util.ui.PreviewMultipleThemes
 import com.wire.android.util.ui.stringWithStyledArgs
+import com.wire.kalium.logic.data.user.SupportedProtocol
 
 @Composable
 fun GroupConversationParticipants(
     openFullListPressed: () -> Unit,
     onProfilePressed: (UIParticipant) -> Unit,
-    onAddParticipantsPressed : () -> Unit,
+    onAddParticipantsPressed: () -> Unit,
     groupParticipantsState: GroupConversationParticipantsState,
     lazyListState: LazyListState = rememberLazyListState()
 ) {
@@ -77,20 +88,32 @@ fun GroupConversationParticipants(
                             groupParticipantsState.data.allCount.toString()
                         )
                     )
-                    if (groupParticipantsState.data.isSelfAnAdmin)
+                    if (groupParticipantsState.data.isSelfAnAdmin) {
                         WirePrimaryButton(
                             text = stringResource(R.string.conversation_details_group_participants_add),
                             fillMaxWidth = true,
-                            onClick = onAddParticipantsPressed ,
+                            onClick = onAddParticipantsPressed,
                             modifier = Modifier
                                 .fillMaxWidth()
                                 .padding(top = MaterialTheme.wireDimensions.spacing16x),
                         )
+                    }
+                    if (BuildConfig.MLS_SUPPORT_ENABLED && BuildConfig.DEVELOPER_FEATURES_ENABLED) {
+                        val groupParticipants = groupParticipantsState.data.allParticipants
+                        MLSProgressIndicator(
+                            progress = (groupParticipants)
+                                .filter { it.supportedProtocolList.contains(SupportedProtocol.MLS) }
+                                .size / (groupParticipantsState.data.allCount).toFloat(),
+                            modifier = Modifier
+                                .padding(top = dimensions().spacing16x)
+                                .background(MaterialTheme.wireColorScheme.surface)
+                        )
+                    }
                 }
             }
             participantsFoldersWithElements(context, groupParticipantsState, onProfilePressed)
         }
-        if (groupParticipantsState.showAllVisible)
+        if (groupParticipantsState.showAllVisible) {
             Surface(
                 shadowElevation = lazyListState.rememberBottomBarElevationState().value,
                 color = MaterialTheme.wireColorScheme.background
@@ -102,11 +125,50 @@ fun GroupConversationParticipants(
                     )
                 }
             }
+        }
     }
 }
 
-@Preview
+@Composable
+fun MLSProgressIndicator(
+    progress: Float,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.wireColorScheme.primary,
+    trackColor: Color = MaterialTheme.wireColorScheme.uncheckedColor
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(dimensions().spacing28x))
+            .height(dimensions().spacing32x),
+        contentAlignment = Alignment.Center
+    ) {
+        LinearProgressIndicator(
+            progress = progress,
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight(),
+            color = color,
+            trackColor = trackColor
+        )
+        Text(
+            style = MaterialTheme.typography.labelLarge,
+            text = "${SupportedProtocol.MLS.name} (${String.format("%.2f", progress * 100)}%)",
+            textAlign = TextAlign.Center,
+            color = MaterialTheme.wireColorScheme.onPrimary,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}
+
+@PreviewMultipleThemes
 @Composable
 fun PreviewGroupConversationParticipants() {
     GroupConversationParticipants({}, {}, {}, GroupConversationParticipantsState.PREVIEW)
 }
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewMLSProgressIndicator() {
+    MLSProgressIndicator(0.25F)
+}

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/participants/GroupConversationParticipantsState.kt

@@ -22,6 +22,7 @@ package com.wire.android.ui.home.conversations.details.participants
 
 import com.wire.android.ui.home.conversations.details.participants.model.ConversationParticipantsData
 import com.wire.android.ui.home.conversations.details.participants.model.UIParticipant
+import com.wire.kalium.logic.data.user.SupportedProtocol
 import com.wire.kalium.logic.data.user.UserId
 
 data class GroupConversationParticipantsState(
@@ -32,8 +33,24 @@ data class GroupConversationParticipantsState(
     companion object {
         val PREVIEW = GroupConversationParticipantsState(
             data = ConversationParticipantsData(
-                admins = listOf(UIParticipant(UserId("0", ""), "name", "handle", true)),
-                participants = listOf(UIParticipant(UserId("1", ""), "name", "handle", false)),
+                admins = listOf(
+                    UIParticipant(
+                        id = UserId("0", ""),
+                        name = "admin",
+                        handle = "handle",
+                        isSelf = true,
+                        supportedProtocolList = listOf(SupportedProtocol.MLS)
+                    )
+                ),
+                participants = listOf(
+                    UIParticipant(
+                        id = UserId("1", ""),
+                        name = "participant",
+                        handle = "handle",
+                        isSelf = true,
+                        supportedProtocolList = listOf(SupportedProtocol.PROTEUS)
+                    )
+                ),
                 allAdminsCount = 1,
                 allParticipantsCount = 1,
                 isSelfAnAdmin = true

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/participants/model/ConversationParticipantsData.kt

@@ -28,4 +28,5 @@ data class ConversationParticipantsData(
     val isSelfAnAdmin: Boolean = false
 ) {
     val allCount: Int = allAdminsCount + allParticipantsCount
+    val allParticipants: List<UIParticipant> = participants + admins
 }

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/participants/model/UIParticipant.kt

@@ -24,6 +24,7 @@ import com.wire.android.model.UserAvatarData
 import com.wire.android.ui.home.conversationslist.model.Membership
 import com.wire.kalium.logic.data.user.BotService
 import com.wire.kalium.logic.data.user.ConnectionState
+import com.wire.kalium.logic.data.user.SupportedProtocol
 import com.wire.kalium.logic.data.user.UserId
 import kotlinx.datetime.Instant
 
@@ -40,5 +41,6 @@ data class UIParticipant(
     val isDeleted: Boolean = false,
     val readReceiptDate: Instant? = null,
     val botService: BotService? = null,
-    val isDefederated: Boolean = false
+    val isDefederated: Boolean = false,
+    val supportedProtocolList: List<SupportedProtocol> = listOf()
 )