feat: pagination for cell file lists (#WPB-16903) (#3984)

Author: sbakhtiarov

.github/workflows/check-kalium-commitish.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   validate-kalium-ref:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout

app/src/main/kotlin/com/wire/android/di/accountScoped/CellsModule.kt

@@ -22,19 +22,21 @@ import com.wire.android.di.KaliumCoreLogic
 import com.wire.kalium.cells.CellsScope
 import com.wire.kalium.cells.domain.CellUploadManager
 import com.wire.kalium.cells.domain.usecase.AddAttachmentDraftUseCase
-import com.wire.kalium.cells.domain.usecase.publiclink.CreatePublicLinkUseCase
 import com.wire.kalium.cells.domain.usecase.DeleteCellAssetUseCase
 import com.wire.kalium.cells.domain.usecase.DownloadCellFileUseCase
-import com.wire.kalium.cells.domain.usecase.ObserveAttachmentDraftsUseCase
 import com.wire.kalium.cells.domain.usecase.GetCellFilesUseCase
+import com.wire.kalium.cells.domain.usecase.GetPaginatedFilesFlowUseCase
+import com.wire.kalium.cells.domain.usecase.ObserveAttachmentDraftsUseCase
 import com.wire.kalium.cells.domain.usecase.PublishAttachmentsUseCase
 import com.wire.kalium.cells.domain.usecase.RefreshCellAssetStateUseCase
 import com.wire.kalium.cells.domain.usecase.RemoveAttachmentDraftUseCase
 import com.wire.kalium.cells.domain.usecase.RemoveAttachmentDraftsUseCase
 import com.wire.kalium.cells.domain.usecase.RetryAttachmentUploadUseCase
 import com.wire.kalium.cells.domain.usecase.SetWireCellForConversationUseCase
+import com.wire.kalium.cells.domain.usecase.publiclink.CreatePublicLinkUseCase
 import com.wire.kalium.cells.domain.usecase.publiclink.DeletePublicLinkUseCase
 import com.wire.kalium.cells.domain.usecase.publiclink.GetPublicLinkUseCase
+import com.wire.kalium.cells.paginatedFilesFlowUseCase
 import com.wire.kalium.logic.CoreLogic
 import com.wire.kalium.logic.data.user.UserId
 import dagger.Module
@@ -83,6 +85,10 @@ class CellsModule {
     @Provides
     fun provideObserveFilesUseCase(cellsScope: CellsScope): GetCellFilesUseCase = cellsScope.observeFiles
 
+    @ViewModelScoped
+    @Provides
+    fun provideObservePagedFilesUseCase(cellsScope: CellsScope): GetPaginatedFilesFlowUseCase = cellsScope.paginatedFilesFlowUseCase
+
     @ViewModelScoped
     @Provides
     fun provideEnableCellUseCase(cellsScope: CellsScope): SetWireCellForConversationUseCase = cellsScope.enableWireCell

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

@@ -141,6 +141,7 @@ import com.wire.kalium.logic.data.mls.CipherSuite
 import kotlinx.coroutines.launch
 import kotlinx.datetime.Instant
 
+@Suppress("CyclomaticComplexMethod")
 @RootNavGraph
 @WireDestination(
     navArgsDelegate = GroupConversationDetailsNavArgs::class,
@@ -174,7 +175,7 @@ fun GroupConversationDetailsScreen(
     }
 
     val onConversationMediaClick: () -> Unit = {
-        if (groupOptions.isWireCellEnabled) {
+        if (groupOptions.isWireCellEnabled && groupOptions.isWireCellFeatureEnabled) {
             navigator.navigate(NavigationCommand(ConversationFilesScreenDestination(viewModel.conversationId.toString())))
         } else {
             navigator.navigate(NavigationCommand(ConversationMediaScreenDestination(viewModel.conversationId)))

app/src/main/kotlin/com/wire/android/ui/home/conversations/search/SearchServicesViewModel.kt

@@ -23,6 +23,7 @@ import androidx.compose.runtime.setValue
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.wire.android.mapper.ContactMapper
+import com.wire.android.ui.common.DEFAULT_SEARCH_QUERY_DEBOUNCE
 import com.wire.android.ui.home.newconversation.model.Contact
 import com.wire.android.util.EMPTY
 import com.wire.kalium.logic.feature.service.ObserveAllServicesUseCase

app/src/main/kotlin/com/wire/android/ui/home/conversations/search/SearchUserViewModel.kt

@@ -24,6 +24,7 @@ import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.wire.android.mapper.ContactMapper
+import com.wire.android.ui.common.DEFAULT_SEARCH_QUERY_DEBOUNCE
 import com.wire.android.ui.home.newconversation.model.Contact
 import com.wire.android.ui.navArgs
 import com.wire.android.util.EMPTY

app/src/main/kotlin/com/wire/android/ui/home/conversations/search/messages/SearchConversationMessagesViewModel.kt

@@ -24,7 +24,7 @@ import androidx.compose.runtime.setValue
 import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import com.wire.android.ui.common.textfield.textAsFlow
-import com.wire.android.ui.home.conversations.search.DEFAULT_SEARCH_QUERY_DEBOUNCE
+import com.wire.android.ui.common.DEFAULT_SEARCH_QUERY_DEBOUNCE
 import com.wire.android.ui.home.conversations.usecase.GetConversationMessagesFromSearchUseCase
 import com.wire.android.ui.navArgs
 import com.wire.android.util.dispatchers.DispatcherProvider

app/src/main/kotlin/com/wire/android/ui/home/conversationslist/ConversationListViewModel.kt

@@ -38,7 +38,7 @@ import com.wire.android.model.SnackBarMessage
 import com.wire.android.ui.common.bottomsheet.conversation.ConversationTypeDetail
 import com.wire.android.ui.common.dialogs.BlockUserDialogState
 import com.wire.android.ui.home.HomeSnackBarMessage
-import com.wire.android.ui.home.conversations.search.DEFAULT_SEARCH_QUERY_DEBOUNCE
+import com.wire.android.ui.common.DEFAULT_SEARCH_QUERY_DEBOUNCE
 import com.wire.android.ui.home.conversations.usecase.GetConversationsFromSearchUseCase
 import com.wire.android.ui.home.conversationslist.common.previewConversationFoldersFlow
 import com.wire.android.ui.home.conversationslist.model.BadgeEventType

app/src/main/kotlin/com/wire/android/ui/sharing/ImportMediaAuthenticatedViewModel.kt

@@ -35,7 +35,7 @@ import com.wire.android.appLogger
 import com.wire.android.model.ImageAsset
 import com.wire.android.model.SnackBarMessage
 import com.wire.android.ui.common.textfield.textAsFlow
-import com.wire.android.ui.home.conversations.search.DEFAULT_SEARCH_QUERY_DEBOUNCE
+import com.wire.android.ui.common.DEFAULT_SEARCH_QUERY_DEBOUNCE
 import com.wire.android.ui.home.conversations.usecase.GetConversationsFromSearchUseCase
 import com.wire.android.ui.home.conversations.usecase.HandleUriAssetUseCase
 import com.wire.android.ui.home.conversationslist.model.ConversationFolderItem

app/src/main/kotlin/com/wire/android/ui/home/conversations/search/DefaultSearchQueryDebounce.kt renamed to core/ui-common/src/main/kotlin/com/wire/android/ui/common/DefaultSearchQueryDebounce.kt

@@ -18,6 +18,6 @@
  *
  */
 
-package com.wire.android.ui.home.conversations.search
+package com.wire.android.ui.common
 
 const val DEFAULT_SEARCH_QUERY_DEBOUNCE = 500L

features/cells/build.gradle.kts

@@ -42,10 +42,14 @@ dependencies {
 
     implementation(libs.ktx.dateTime)
 
+    implementation(libs.androidx.paging3)
+    implementation(libs.androidx.paging3Compose)
+
     testImplementation(libs.junit5.core)
     testImplementation(libs.coroutines.test)
     testImplementation(libs.mockk.core)
     testImplementation(libs.turbine)
+    testImplementation(libs.androidx.paging.testing)
     testRuntimeOnly(libs.junit5.engine)
     androidTestImplementation(libs.androidx.test.extJunit)
     androidTestImplementation(libs.androidx.espresso.core)

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

@@ -19,9 +19,8 @@ package com.wire.android.feature.cells.ui
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.paging.compose.collectAsLazyPagingItems
 import com.wire.android.feature.cells.ui.destinations.PublicLinkScreenDestination
 import com.wire.android.navigation.NavigationCommand
 import com.wire.android.navigation.WireNavigator
@@ -39,7 +38,7 @@ fun AllFilesScreen(
     viewModel: CellViewModel = hiltViewModel(),
 ) {
 
-    val state by viewModel.state.collectAsState()
+    val pagingListItems = viewModel.filesFlow.collectAsLazyPagingItems()
 
     LaunchedEffect(searchBarState.searchQueryTextState.text) {
         if (searchBarState.searchQueryTextState.text.isNotEmpty()) {
@@ -49,20 +48,22 @@ fun AllFilesScreen(
     }
 
     val isSearchVisible = when {
-        state is CellViewState.Files -> true
-        state.isEmptySearch() -> true
-        else -> false
+        pagingListItems.isLoading() -> false
+        pagingListItems.isError() -> false
+        pagingListItems.itemCount == 0 && !viewModel.hasSearchQuery() -> false
+        else -> true
     }
 
     searchBarState.searchVisibleChanged(isSearchVisible)
 
     CellScreenContent(
         actionsFlow = viewModel.actions,
-        viewState = state,
+        pagingListItems = pagingListItems,
         sendIntent = { viewModel.sendIntent(it) },
-        downloadFileState = viewModel.downloadFile,
+        downloadFileState = viewModel.downloadFileSheet,
         fileMenuState = viewModel.menu,
         isAllFiles = true,
+        isSearchResult = viewModel.hasSearchQuery(),
         showPublicLinkScreen = { assetId, fileName, linkId ->
             navigator.navigate(
                 NavigationCommand(
@@ -76,5 +77,3 @@ fun AllFilesScreen(
         },
     )
 }
-
-private fun CellViewState.isEmptySearch() = this is CellViewState.Empty && isSearchResult

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

@@ -19,78 +19,165 @@ package com.wire.android.feature.cells.ui
 
 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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import com.wire.android.feature.cells.domain.model.AttachmentFileType
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.paging.LoadState
+import androidx.paging.compose.LazyPagingItems
+import androidx.paging.compose.itemContentType
+import androidx.paging.compose.itemKey
+import com.wire.android.feature.cells.R
 import com.wire.android.feature.cells.ui.model.CellFileUi
+import com.wire.android.feature.cells.ui.util.PreviewMultipleThemes
+import com.wire.android.ui.common.button.WireSecondaryButton
 import com.wire.android.ui.common.colorsScheme
+import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.common.divider.WireDivider
 import com.wire.android.ui.common.preview.MultipleThemePreviews
+import com.wire.android.ui.common.progress.WireCircularProgressIndicator
+import com.wire.android.ui.common.typography
 import com.wire.android.ui.theme.WireTheme
 
 @Composable
 internal fun CellFilesScreen(
-    files: List<CellFileUi>,
+    files: LazyPagingItems<CellFileUi>,
     onFileClick: (CellFileUi) -> Unit,
     onFileMenuClick: (CellFileUi) -> Unit,
-//    onRefresh: () -> Unit
 ) {
 
-//    TODO: Enable PullToRefresh support on HomeScreen level?
-//    PullToRefreshBox(
-//        isRefreshing = state.refreshing,
-//        onRefresh = { onRefresh() }
-//    ) {
     LazyColumn(
         modifier = Modifier
             .background(color = colorsScheme().surface)
             .fillMaxWidth(),
     ) {
         items(
-            items = files,
-            key = { it.uuid },
-        ) { file ->
-            CellListItem(
-                modifier = Modifier
-                    .animateItem()
-                    .clickable { onFileClick(file) },
-                file = file,
-                onMenuClick = { onFileMenuClick(file) }
-            )
-            WireDivider(modifier = Modifier.fillMaxWidth())
+            count = files.itemCount,
+            key = files.itemKey { it.uuid },
+            contentType = files.itemContentType { it }
+        ) { index ->
+
+            files[index]?.let { file ->
+                CellListItem(
+                    modifier = Modifier
+                        .animateItem()
+                        .background(color = colorsScheme().surface)
+                        .clickable { onFileClick(file) },
+                    file = file,
+                    onMenuClick = { onFileMenuClick(file) }
+                )
+                WireDivider(modifier = Modifier.fillMaxWidth())
+            }
+        }
+
+        when (files.loadState.append) {
+            is LoadState.Error -> item(contentType = "error") {
+                ErrorFooter(
+                    onRetry = { files.retry() }
+                )
+            }
+
+            is LoadState.Loading -> item(contentType = "progress") {
+                ProgressFooter()
+            }
+
+            is LoadState.NotLoading -> {}
         }
     }
-//    }
 }
 
 @MultipleThemePreviews
 @Composable
-fun PreviewCellFilesScreen() {
-    WireTheme {
-        CellFilesScreen(
-            files = listOf(
-                CellFileUi(
-                    uuid = "uuid",
-                    fileName = "Image name",
-                    mimeType = "image/png",
-                    assetType = AttachmentFileType.IMAGE,
-                    assetSize = 1234L,
-                    localPath = "path/to/local/file",
-                ),
-                CellFileUi(
-                    uuid = "uuid2",
-                    fileName = "PDF name",
-                    mimeType = "application/pdf",
-                    assetType = AttachmentFileType.PDF,
-                    assetSize = 99234L,
-                    localPath = "path/to/local/file",
+private fun ProgressFooter() {
+    Box(
+        modifier = Modifier
+            .height(dimensions().spacing56x)
+            .fillMaxWidth(),
+        contentAlignment = Alignment.Center,
+    ) {
+        Row(
+            modifier = Modifier
+                .height(dimensions().spacing24x)
+                .background(
+                    color = colorsScheme().surface,
+                    shape = RoundedCornerShape(dimensions().corner10x)
                 )
+                .padding(
+                    horizontal = dimensions().spacing16x,
+                ),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(
+                space = dimensions().spacing6x,
+                alignment = Alignment.CenterHorizontally,
             ),
-            onFileClick = {},
-            onFileMenuClick = {}
+        ) {
+            WireCircularProgressIndicator(
+                progressColor = colorsScheme().secondaryText,
+                size = dimensions().spacing14x,
+            )
+            Text(
+                text = stringResource(R.string.loading_files),
+                style = typography().subline01
+            )
+        }
+    }
+}
+
+@Composable
+private fun ErrorFooter(onRetry: () -> Unit) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colorsScheme().errorVariant)
+            .padding(dimensions().spacing12x),
+        verticalArrangement = Arrangement.spacedBy(
+            space = dimensions().spacing8x,
+            alignment = Alignment.CenterVertically,
+        ),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+
+        Text(
+            text = stringResource(R.string.file_list_load_error),
+            style = typography().label03,
+            color = colorsScheme().error,
+            textAlign = TextAlign.Center,
+        )
+
+        WireSecondaryButton(
+            modifier = Modifier.height(dimensions().spacing32x),
+            text = stringResource(R.string.retry),
+            onClick = onRetry,
+            fillMaxWidth = false,
+        )
+    }
+}
+
+@PreviewMultipleThemes
+@Composable
+private fun PreviewProgressFooter() {
+    WireTheme {
+        ProgressFooter()
+    }
+}
+
+@PreviewMultipleThemes
+@Composable
+private fun PreviewErrorFooter() {
+    WireTheme {
+        ErrorFooter(
+            onRetry = {}
         )
     }
 }