Dashboard big screen support with staggered grid layout for cards

WooCommerce/build.gradle

@@ -22,7 +22,7 @@ fladle {
             "notPackage com.woocommerce.android.e2e.tests.screenshot"
     ]
     devices = [
-            [ "model": "Pixel2.arm", "version": "30" ]
+            ["model": "Pixel2.arm", "version": "30"]
     ]
     localResultsDir = "$rootDir/build/instrumented-tests"
 
@@ -411,6 +411,7 @@ dependencies {
     implementation(libs.androidx.compose.material.icons.extended)
     implementation(libs.androidx.compose.ui.text.google.fonts)
     implementation(libs.androidx.navigation.compose)
+    implementation(libs.androidx.adaptive.android)
 
     implementation(libs.androidx.hilt.navigation.compose)
     implementation(libs.androidx.constraintlayout.compose)

WooCommerce/src/androidTest/kotlin/com/woocommerce/android/e2e/screens/mystore/StatsComponent.kt

@@ -6,7 +6,7 @@ import com.woocommerce.android.R
 import com.woocommerce.android.e2e.helpers.util.Screen
 import com.woocommerce.android.ui.dashboard.stats.DashboardStatsTestTags
 
-class StatsComponent : Screen(R.id.dashboardStats_root) {
+class StatsComponent : Screen(R.id.my_store_stats_container) {
     override fun recover() {
         super.recover()
         clickOn(R.id.dashboard)

WooCommerce/src/androidTest/kotlin/com/woocommerce/android/e2e/screens/mystore/TopPerformersComponent.kt

@@ -6,7 +6,7 @@ import com.woocommerce.android.R
 import com.woocommerce.android.e2e.helpers.util.Screen
 import com.woocommerce.android.ui.dashboard.stats.DashboardStatsTestTags
 
-class TopPerformersComponent : Screen(R.id.dashboardStats_root) {
+class TopPerformersComponent : Screen(R.id.my_store_stats_container) {
     override fun recover() {
         super.recover()
         clickOn(R.id.dashboard)

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/dashboard/DashboardContainer.kt

@@ -5,34 +5,50 @@
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 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.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material.pullrefresh.PullRefreshIndicator
+import androidx.compose.material.pullrefresh.pullRefresh
+import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import androidx.window.core.layout.WindowSizeClass
+import androidx.window.core.layout.WindowWidthSizeClass
 import com.woocommerce.android.R
 import com.woocommerce.android.model.DashboardWidget
 import com.woocommerce.android.ui.blaze.creation.BlazeCampaignCreationDispatcher
 import com.woocommerce.android.ui.compose.component.WCColoredButton
 import com.woocommerce.android.ui.compose.component.WCOutlinedButton
 import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.OpenRangePicker
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.ConfigurableWidget
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.FeedbackWidget
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.ShareStoreWidget
 import com.woocommerce.android.ui.dashboard.blaze.DashboardBlazeCard
 import com.woocommerce.android.ui.dashboard.coupons.DashboardCouponsCard
 import com.woocommerce.android.ui.dashboard.google.DashboardGoogleAdsCard
@@ -45,81 +61,166 @@
 import com.woocommerce.android.ui.dashboard.topperformers.DashboardTopPerformersWidgetCard
 import com.woocommerce.android.ui.main.MainActivityViewModel
 
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun DashboardContainer(
     mainActivityViewModel: MainActivityViewModel,
     dashboardViewModel: DashboardViewModel,
-    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher
+    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
+    windowSizeClass: WindowSizeClass,
 ) {
-    dashboardViewModel.dashboardWidgets.observeAsState().value?.let { widgets ->
-        WidgetList(
-            widgetUiModels = widgets,
-            mainActivityViewModel = mainActivityViewModel,
-            dashboardViewModel = dashboardViewModel,
-            blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher
-        )
+    dashboardViewModel.dashboardCardsState.observeAsState().value?.let { state ->
+
+        val pullRefreshState = rememberPullRefreshState(state.isRefreshing, dashboardViewModel::onPullToRefresh)
+        Box(Modifier.pullRefresh(pullRefreshState)) {
+            DashboardWidgets(
+                widgetUiModels = state.widgets,
+                mainActivityViewModel = mainActivityViewModel,
+                dashboardViewModel = dashboardViewModel,
+                blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(MaterialTheme.colors.surface)
+                    .padding(vertical = dimensionResource(id = R.dimen.major_100)),
+                numberOfColumns = when (windowSizeClass.windowWidthSizeClass) {
+                    WindowWidthSizeClass.COMPACT -> 1
+                    WindowWidthSizeClass.MEDIUM -> 2
+                    WindowWidthSizeClass.EXPANDED -> 3
+                    else -> 1
+                }
+            )
+
+            PullRefreshIndicator(
+                refreshing = state.isRefreshing,
+                state = pullRefreshState,
+                modifier = Modifier.align(Alignment.TopCenter),
+                contentColor = MaterialTheme.colors.primary,
+            )
+        }
     }
 }
 
 @Composable
-private fun WidgetList(
-    widgetUiModels: List<DashboardViewModel.DashboardWidgetUiModel>,
+private fun DashboardWidgets(
+    widgetUiModels: List<DashboardWidgetUiModel>,
     mainActivityViewModel: MainActivityViewModel,
     dashboardViewModel: DashboardViewModel,
-    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher
+    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
+    modifier: Modifier = Modifier,
+    numberOfColumns: Int = 1
 ) {
-    Column(
-        verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.major_100)),
-        modifier = Modifier
-            .fillMaxSize()
-            .background(MaterialTheme.colors.surface)
-            .padding(vertical = dimensionResource(id = R.dimen.major_100))
-    ) {
-        val widgetModifier = Modifier
-            .fillMaxWidth()
-            .padding(horizontal = 16.dp)
-        widgetUiModels.forEach {
-            AnimatedVisibility(it.isVisible) {
-                when (it) {
-                    is DashboardViewModel.DashboardWidgetUiModel.ConfigurableWidget -> {
-                        ConfigurableWidgetCard(
-                            widgetUiModel = it,
-                            mainActivityViewModel = mainActivityViewModel,
-                            dashboardViewModel = dashboardViewModel,
-                            blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
-                            modifier = widgetModifier
-                        )
-                    }
+    val widgetModifier = Modifier
+        .fillMaxWidth()
+        .padding(horizontal = 16.dp)
+    val nestedScrollInterop = rememberNestedScrollInteropConnection()
 
-                    is DashboardViewModel.DashboardWidgetUiModel.ShareStoreWidget -> {
-                        ShareStoreCard(
-                            onShareClicked = it.onShareClicked,
-                            modifier = widgetModifier
-                        )
-                    }
-
-                    is DashboardViewModel.DashboardWidgetUiModel.FeedbackWidget -> {
-                        FeedbackCard(
-                            widget = it,
-                            modifier = widgetModifier
-                        )
-                    }
-
-                    is DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard -> {
-                        NewWidgetsCard(
-                            state = it,
-                            modifier = widgetModifier
-                        )
+    if (numberOfColumns == 1) {
+        Column(
+            modifier = modifier
+                .nestedScroll(nestedScrollInterop)
+                .verticalScroll(rememberScrollState()),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            widgetUiModels.forEach { widget ->
+                AnimatedVisibility(widget.isVisible) {
+                    DashboardWidgetCard(
+                        widget,
+                        mainActivityViewModel,
+                        dashboardViewModel,
+                        blazeCampaignCreationDispatcher,
+                        widgetModifier
+                    )
+                }
+            }
+        }
+    } else {
+        val widgetColumns = splitWidgetsIntoColumns(
+            numberOfColumns = numberOfColumns,
+            visibleUiWidgets = widgetUiModels.filter { it.isVisible }
+        )
+        Row(
+            modifier = modifier
+                .nestedScroll(nestedScrollInterop)
+                .verticalScroll(rememberScrollState())
+        ) {
+            widgetColumns.forEach { columnWidgets ->
+                Column(
+                    modifier = Modifier.weight(1f),
+                    verticalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    columnWidgets.forEach { widget ->
+                        AnimatedVisibility(widget.isVisible) {
+                            DashboardWidgetCard(
+                                widget,
+                                mainActivityViewModel,
+                                dashboardViewModel,
+                                blazeCampaignCreationDispatcher,
+                                widgetModifier
+                            )
+                        }
                     }
                 }
             }
         }
     }
 }
 
+private fun splitWidgetsIntoColumns(
+    numberOfColumns: Int,
+    visibleUiWidgets: List<DashboardWidgetUiModel>
+): MutableList<MutableList<DashboardWidgetUiModel>> {
+    val widgetColumns = MutableList<MutableList<DashboardWidgetUiModel>>(numberOfColumns) { mutableListOf() }
+    for ((index, item) in visibleUiWidgets.withIndex()) {
+        widgetColumns[index % numberOfColumns].add(item)
+    }
+    return widgetColumns
+}
+
+@Composable
+private fun DashboardWidgetCard(
+    it: DashboardWidgetUiModel,
+    mainActivityViewModel: MainActivityViewModel,
+    dashboardViewModel: DashboardViewModel,
+    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
+    widgetModifier: Modifier
+) {
+    when (it) {
+        is ConfigurableWidget -> {
+            ConfigurableWidgetCard(
+                widgetUiModel = it,
+                mainActivityViewModel = mainActivityViewModel,
+                dashboardViewModel = dashboardViewModel,
+                blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
+                modifier = widgetModifier
+            )
+        }
+
+        is ShareStoreWidget -> {
+            ShareStoreCard(
+                onShareClicked = it.onShareClicked,
+                modifier = widgetModifier
+            )
+        }
+
+        is FeedbackWidget -> {
+            FeedbackCard(
+                widget = it,
+                modifier = widgetModifier
+            )
+        }
+
+        is NewWidgetsCard -> {
+            NewWidgetsCard(
+                state = it,
+                modifier = widgetModifier
+            )
+        }
+    }
+}
+
 @Composable
 private fun ConfigurableWidgetCard(
-    widgetUiModel: DashboardViewModel.DashboardWidgetUiModel.ConfigurableWidget,
+    widgetUiModel: DashboardWidgetUiModel.ConfigurableWidget,
     mainActivityViewModel: MainActivityViewModel,
     dashboardViewModel: DashboardViewModel,
     blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
@@ -227,7 +328,7 @@
 
 @Composable
 private fun FeedbackCard(
-    widget: DashboardViewModel.DashboardWidgetUiModel.FeedbackWidget,
+    widget: DashboardWidgetUiModel.FeedbackWidget,
     modifier: Modifier
 ) {
     LaunchedEffect(Unit) {
@@ -271,7 +372,7 @@
 
 @Composable
 private fun NewWidgetsCard(
-    state: DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard,
+    state: DashboardWidgetUiModel.NewWidgetsCard,
     modifier: Modifier
 ) {
     Column(