feat: sort tags alphabetically (WPB-21606) (#4510)

Author: ohassine

core/ui-common/src/main/kotlin/com/wire/android/ui/common/chip/WireFilterChip.kt

@@ -62,7 +62,6 @@ fun WireFilterChip(
         enabled = isEnabled,
         selected = isSelected,
         colors = wireChipColors(),
-        border = null,
         trailingIcon = {
             Icon(
                 modifier = Modifier

features/cells/src/main/java/com/wire/android/feature/cells/ui/AllFilesScreen.kt

@@ -103,7 +103,7 @@ fun AllFilesScreen(
     )
 
     FilterBottomSheet(
-        selectableTags = viewModel.tags.collectAsState().value,
+        selectableTags = viewModel.sortedTags.collectAsState().value,
         selectedTags = viewModel.selectedTags.collectAsState().value,
         onApply = {
             filterBottomSheetState.hide()

features/cells/src/main/java/com/wire/android/feature/cells/ui/CellViewModel.kt

@@ -54,6 +54,7 @@ import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharedFlow
+import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asSharedFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -65,7 +66,9 @@ import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.flow
 import kotlinx.coroutines.flow.flowOf
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onStart
+import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
 import okio.Path
@@ -118,7 +121,13 @@ class CellViewModel @Inject constructor(
     val selectedTags: StateFlow<Set<String>> = _selectedTags.asStateFlow()
 
     private val _tags = MutableStateFlow<Set<String>>(emptySet())
-    val tags: StateFlow<Set<String>> = _tags.asStateFlow()
+    val sortedTags: StateFlow<List<String>> = _tags.asStateFlow()
+        .map { it.sortedBy { tag -> tag.lowercase() } }
+        .stateIn(
+            scope = viewModelScope,
+            started = SharingStarted.WhileSubscribed(STOP_TIMEOUT_MILLIS),
+            initialValue = emptyList()
+        )
 
     // Used to navigate to the root of the recycle bin after restoring a parent folder.
     private val _navigateToRecycleBinRoot = MutableStateFlow(false)
@@ -500,7 +509,7 @@ class CellViewModel @Inject constructor(
     }
 
     suspend fun loadTags() {
-        getAllTagsUseCase().onSuccess { updated -> _tags.update { updated.sorted().toSet() } }
+        getAllTagsUseCase().onSuccess { updated -> _tags.update { updated } }
         // apply delay to avoid too frequent requests
         delay(30.seconds)
     }
@@ -515,6 +524,7 @@ class CellViewModel @Inject constructor(
                 append = LoadState.NotLoading(true)
             )
         )
+        const val STOP_TIMEOUT_MILLIS = 1_000L
     }
 }
 

features/cells/src/main/java/com/wire/android/feature/cells/ui/filter/FilterBottomSheet.kt

@@ -62,7 +62,7 @@ import com.wire.android.ui.theme.wireTypography
 
 @Composable
 fun FilterBottomSheet(
-    selectableTags: Set<String>,
+    selectableTags: List<String>,
     selectedTags: Set<String>,
     onApply: (Set<String>) -> Unit,
     onClearAll: () -> Unit,
@@ -95,7 +95,7 @@ fun FilterBottomSheet(
 
 @Composable
 private fun SheetContent(
-    selectableTags: Set<String>,
+    selectableTags: List<String>,
     selectedTags: Set<String>,
     onApply: (Set<String>) -> Unit = {},
     onClearAll: () -> Unit = {},
@@ -155,28 +155,37 @@ private fun SheetContent(
                     style = MaterialTheme.wireTypography.label01,
                     color = colorsScheme().secondaryText,
                 )
-                LazyRow(
-                    modifier = Modifier.padding(
-                        top = dimensions().spacing16x,
-                        bottom = dimensions().spacing16x
+                if (selectableTags.isEmpty()) {
+                    Text(
+                        modifier = Modifier.padding(top = dimensions().spacing16x, bottom = dimensions().spacing16x),
+                        text = stringResource(R.string.no_tags_created_yet_label),
+                        style = MaterialTheme.wireTypography.body01,
+                        color = colorsScheme().onBackground,
                     )
-                ) {
-                    selectableTags.forEach { tag ->
-                        val isSelected = selectedChips.contains(tag)
-
-                        item {
-                            WireFilterChip(
-                                label = tag,
-                                isSelected = isSelected,
-                                modifier = Modifier.padding(end = dimensions().spacing16x),
-                                onSelectChip = { label ->
-                                    selectedChips = if (isSelected) {
-                                        selectedChips - label
-                                    } else {
-                                        selectedChips + label
+                } else {
+                    LazyRow(
+                        modifier = Modifier.padding(
+                            top = dimensions().spacing16x,
+                            bottom = dimensions().spacing16x
+                        )
+                    ) {
+                        selectableTags.forEach { tag ->
+                            val isSelected = selectedChips.contains(tag)
+
+                            item {
+                                WireFilterChip(
+                                    label = tag,
+                                    isSelected = isSelected,
+                                    modifier = Modifier.padding(end = dimensions().spacing16x),
+                                    onSelectChip = { label ->
+                                        selectedChips = if (isSelected) {
+                                            selectedChips - label
+                                        } else {
+                                            selectedChips + label
+                                        }
                                     }
-                                }
-                            )
+                                )
+                            }
                         }
                     }
                 }
@@ -218,7 +227,21 @@ private fun SheetContent(
 fun PreviewFilterBottomSheet() {
     WireTheme {
         FilterBottomSheet(
-            setOf("Android", "iOS", "Web", "QA"),
+            listOf("Android", "iOS", "Web", "QA"),
+            emptySet(),
+            onApply = {},
+            onClearAll = {},
+            onDismiss = {},
+        )
+    }
+}
+
+@MultipleThemePreviews
+@Composable
+fun PreviewEmptyFilterBottomSheet() {
+    WireTheme {
+        FilterBottomSheet(
+            listOf(),
             emptySet(),
             onApply = {},
             onClearAll = {},

features/cells/src/main/res/values/strings.xml

@@ -113,6 +113,7 @@
     <string name="filter_label">Filter</string>
     <string name="tags_label">Tags</string>
     <string name="select_tags_label">select tags</string>
+    <string name="no_tags_created_yet_label">No tags were created yet.</string>
     <string name="clear_all_label">Clear All</string>
     <string name="apply_label">Apply</string>
     <string name="add_or_remove_tags_title">Add or remove tags</string>