Merge pull request #2849 from element-hq/feature/bma/roomNameEdition

Improve room setting edition

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt

@@ -1,132 +0,0 @@
-/*
- * 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.
- */
-
-// This is actually expected, as we should remove this component soon and use ModalBottomSheet instead
-@file:Suppress("UsingMaterialAndMaterial3Libraries")
-
-package io.element.android.libraries.designsystem.theme.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CornerSize
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ModalBottomSheetDefaults
-import androidx.compose.material.ModalBottomSheetState
-import androidx.compose.material.ModalBottomSheetValue
-import androidx.compose.material.rememberModalBottomSheetState
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.contentColorFor
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import io.element.android.libraries.architecture.coverage.ExcludeFromCoverage
-import io.element.android.libraries.designsystem.modifiers.applyIf
-import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.preview.PreviewGroup
-
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-fun ModalBottomSheetLayout(
-    sheetContent: @Composable ColumnScope.() -> Unit,
-    modifier: Modifier = Modifier,
-    sheetState: ModalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden),
-    sheetShape: Shape = MaterialTheme.shapes.large.copy(bottomStart = CornerSize(0.dp), bottomEnd = CornerSize(0.dp)),
-    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
-    sheetBackgroundColor: Color = MaterialTheme.colorScheme.surface,
-    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
-    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
-    displayHandle: Boolean = false,
-    useSystemPadding: Boolean = true,
-    content: @Composable () -> Unit = {}
-) {
-    androidx.compose.material.ModalBottomSheetLayout(
-        sheetContent = {
-            Column(
-                Modifier.fillMaxWidth()
-                    .applyIf(useSystemPadding, ifTrue = {
-                        navigationBarsPadding()
-                    })
-            ) {
-                if (displayHandle) {
-                    Spacer(modifier = Modifier.height(16.dp))
-                    Box(
-                        modifier = Modifier
-                            .background(MaterialTheme.colorScheme.onSurfaceVariant, RoundedCornerShape(2.dp))
-                            .size(width = 32.dp, height = 4.dp)
-                            .align(Alignment.CenterHorizontally),
-                    )
-                    Spacer(modifier = Modifier.height(24.dp))
-                }
-                sheetContent()
-            }
-        },
-        modifier = modifier,
-        sheetState = sheetState,
-        sheetShape = sheetShape,
-        sheetElevation = sheetElevation,
-        sheetBackgroundColor = sheetBackgroundColor,
-        sheetContentColor = sheetContentColor,
-        scrimColor = scrimColor,
-        content = content,
-    )
-}
-
-@Preview(group = PreviewGroup.BottomSheets)
-@Composable
-internal fun ModalBottomSheetLayoutLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
-
-@Preview(group = PreviewGroup.BottomSheets)
-@Composable
-internal fun ModalBottomSheetLayoutDarkPreview() =
-    ElementPreviewDark { ContentToPreview() }
-
-@OptIn(ExperimentalMaterialApi::class)
-@ExcludeFromCoverage
-@Composable
-private fun ContentToPreview() {
-    ModalBottomSheetLayout(
-        modifier = Modifier.height(140.dp),
-        displayHandle = true,
-        sheetState = ModalBottomSheetState(ModalBottomSheetValue.Expanded, density = LocalDensity.current),
-        sheetContent = {
-            Text(
-                text = "Sheet Content",
-                modifier = Modifier
-                    .padding(start = 16.dp, end = 16.dp, bottom = 20.dp)
-                    .background(color = Color.Green)
-            )
-        }
-    ) {
-        Text(text = "Content", modifier = Modifier.background(color = Color.Red))
-    }
-}

libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/room/MatrixRoomInfo.kt

@@ -27,7 +27,10 @@ import kotlinx.collections.immutable.ImmutableMap
 @Immutable
 data class MatrixRoomInfo(
     val id: RoomId,
+    /** The room's name from the room state event if received from sync, or one that's been computed otherwise. */
     val name: String?,
+    /** Room name as defined by the room state event only. */
+    val rawName: String?,
     val topic: String?,
     val avatarUrl: String?,
     val isDirect: Boolean,

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/room/MatrixRoomInfoMapper.kt

@@ -39,6 +39,7 @@ class MatrixRoomInfoMapper(
         return MatrixRoomInfo(
             id = RoomId(it.id),
             name = it.displayName,
+            rawName = it.rawName,
             topic = it.topic,
             avatarUrl = it.avatarUrl,
             isDirect = it.isDirect,

libraries/matrix/test/src/main/kotlin/io/element/android/libraries/matrix/test/TestData.kt

@@ -56,6 +56,7 @@ val A_TRANSACTION_ID = TransactionId("aTransactionId")
 const val A_UNIQUE_ID = "aUniqueId"
 
 const val A_ROOM_NAME = "A room name"
+const val A_ROOM_RAW_NAME = "A room raw name"
 const val A_MESSAGE = "Hello world!"
 const val A_REPLY = "OK, I'll be there!"
 const val ANOTHER_MESSAGE = "Hello universe!"

libraries/matrix/test/src/main/kotlin/io/element/android/libraries/matrix/test/room/FakeMatrixRoom.kt

@@ -735,6 +735,7 @@ data class EndPollInvocation(
 fun aRoomInfo(
     id: RoomId = A_ROOM_ID,
     name: String? = A_ROOM_NAME,
+    rawName: String? = name,
     topic: String? = "A topic",
     avatarUrl: String? = AN_AVATAR_URL,
     isDirect: Boolean = false,
@@ -759,6 +760,7 @@ fun aRoomInfo(
 ) = MatrixRoomInfo(
     id = id,
     name = name,
+    rawName = rawName,
     topic = topic,
     avatarUrl = avatarUrl,
     isDirect = isDirect,

libraries/matrixui/build.gradle.kts

@@ -39,6 +39,7 @@ dependencies {
     implementation(projects.libraries.designsystem)
     implementation(projects.libraries.core)
     implementation(projects.libraries.uiStrings)
+    implementation(projects.libraries.testtags)
     implementation(libs.coil.compose)
     implementation(libs.coil.gif)
     implementation(libs.jsoup)

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AvatarActionBottomSheet.kt

@@ -14,25 +14,23 @@
  * limitations under the License.
  */
 
-@file:OptIn(ExperimentalMaterialApi::class)
-@file:Suppress("UsingMaterialAndMaterial3Libraries")
+@file:OptIn(ExperimentalMaterial3Api::class)
 
 package io.element.android.libraries.matrix.ui.components
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ModalBottomSheetState
-import androidx.compose.material.ModalBottomSheetValue
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.components.list.ListItemContent
@@ -41,33 +39,44 @@ import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.IconSource
 import io.element.android.libraries.designsystem.theme.components.ListItem
 import io.element.android.libraries.designsystem.theme.components.ListItemStyle
-import io.element.android.libraries.designsystem.theme.components.ModalBottomSheetLayout
+import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.hide
 import io.element.android.libraries.matrix.ui.media.AvatarAction
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
-import kotlinx.coroutines.launch
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AvatarActionBottomSheet(
     actions: ImmutableList<AvatarAction>,
-    modalBottomSheetState: ModalBottomSheetState,
+    isVisible: Boolean,
     onActionSelected: (action: AvatarAction) -> Unit,
+    onDismiss: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     val coroutineScope = rememberCoroutineScope()
-    fun onItemActionClicked(itemAction: AvatarAction) {
-        onActionSelected(itemAction)
-        coroutineScope.launch {
-            modalBottomSheetState.hide()
-        }
+    val sheetState = rememberModalBottomSheetState(
+        skipPartiallyExpanded = true
+    )
+
+    BackHandler(enabled = isVisible) {
+        sheetState.hide(coroutineScope, then = { onDismiss() })
     }
 
-    ModalBottomSheetLayout(
-        modifier = modifier,
-        sheetState = modalBottomSheetState,
-        displayHandle = true,
-        sheetContent = {
+    fun onItemActionClicked(itemAction: AvatarAction) {
+        onActionSelected(itemAction)
+        sheetState.hide(coroutineScope, then = { onDismiss() })
+    }
+
+    if (isVisible) {
+        ModalBottomSheet(
+            onDismissRequest = {
+                sheetState.hide(coroutineScope, then = { onDismiss() })
+            },
+            modifier = modifier,
+            sheetState = sheetState,
+        ) {
             AvatarActionBottomSheetContent(
                 actions = actions,
                 onActionClicked = ::onItemActionClicked,
@@ -76,7 +85,7 @@ fun AvatarActionBottomSheet(
                     .imePadding()
             )
         }
-    )
+    }
 }
 
 @Composable
@@ -115,10 +124,8 @@ private fun AvatarActionBottomSheetContent(
 internal fun AvatarActionBottomSheetPreview() = ElementPreview {
     AvatarActionBottomSheet(
         actions = persistentListOf(AvatarAction.TakePhoto, AvatarAction.ChoosePhoto, AvatarAction.Remove),
-        modalBottomSheetState = ModalBottomSheetState(
-            initialValue = ModalBottomSheetValue.Expanded,
-            density = LocalDensity.current,
-        ),
+        isVisible = true,
         onActionSelected = { },
+        onDismiss = { },
     )
 }

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/EditableAvatarView.kt

@@ -33,23 +33,32 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.testtags.TestTags
+import io.element.android.libraries.testtags.testTag
 
 @Composable
 fun EditableAvatarView(
-    userId: String?,
+    matrixId: String,
     displayName: String?,
     avatarUrl: Uri?,
     avatarSize: AvatarSize,
     onAvatarClicked: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Column(modifier = modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
         Box(
             modifier = Modifier
                 .size(avatarSize.dp)
@@ -58,15 +67,14 @@ fun EditableAvatarView(
                     onClick = onAvatarClicked,
                     indication = rememberRipple(bounded = false),
                 )
+                .testTag(TestTags.editAvatar)
         ) {
             when (avatarUrl?.scheme) {
                 null, "mxc" -> {
-                    userId?.let {
-                        Avatar(
-                            avatarData = AvatarData(it, displayName, avatarUrl?.toString(), size = avatarSize),
-                            modifier = Modifier.fillMaxSize(),
-                        )
-                    }
+                    Avatar(
+                        avatarData = AvatarData(matrixId, displayName, avatarUrl?.toString(), size = avatarSize),
+                        modifier = Modifier.fillMaxSize(),
+                    )
                 }
                 else -> {
                     UnsavedAvatar(
@@ -94,3 +102,26 @@ fun EditableAvatarView(
         }
     }
 }
+
+@PreviewsDayNight
+@Composable
+internal fun EditableAvatarViewPreview(
+    @PreviewParameter(EditableAvatarViewUriProvider::class) uri: Uri?
+) = ElementPreview {
+    EditableAvatarView(
+        matrixId = "id",
+        displayName = "A room",
+        avatarUrl = uri,
+        avatarSize = AvatarSize.EditRoomDetails,
+        onAvatarClicked = {},
+    )
+}
+
+open class EditableAvatarViewUriProvider : PreviewParameterProvider<Uri?> {
+    override val values: Sequence<Uri?>
+        get() = sequenceOf(
+            null,
+            Uri.parse("mxc://matrix.org/123456"),
+            Uri.parse("https://example.com/avatar.jpg"),
+        )
+}

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/room/MatrixRoomState.kt

@@ -62,3 +62,21 @@ fun MatrixRoom.isOwnUserAdmin(): Boolean {
     val powerLevel = roomInfo?.userPowerLevels?.get(sessionId) ?: 0L
     return RoomMember.Role.forPowerLevel(powerLevel) == RoomMember.Role.ADMIN
 }
+
+@Composable
+fun MatrixRoom.rawName(): String? {
+    val roomInfo by roomInfoFlow.collectAsState(initial = null)
+    return roomInfo?.rawName
+}
+
+@Composable
+fun MatrixRoom.topic(): String? {
+    val roomInfo by roomInfoFlow.collectAsState(initial = null)
+    return roomInfo?.topic
+}
+
+@Composable
+fun MatrixRoom.avatarUrl(): String? {
+    val roomInfo by roomInfoFlow.collectAsState(initial = null)
+    return roomInfo?.avatarUrl
+}

libraries/testtags/src/main/kotlin/io/element/android/libraries/testtags/TestTags.kt

@@ -64,6 +64,11 @@ object TestTags {
      */
     val memberDetailAvatar = TestTag("member_detail-avatar")
 
+    /**
+     * Edit avatar.
+     */
+    val editAvatar = TestTag("edit-avatar")
+
     /**
      * Welcome screen.
      */