[Dynamic Dashboard] Introduce a component to re-use as header in the filterable cards

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

@@ -0,0 +1,129 @@
+package com.woocommerce.android.ui.dashboard
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.DropdownMenu
+import androidx.compose.material.DropdownMenuItem
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.FilterList
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.woocommerce.android.R
+import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
+
+@Composable
+fun <T> DashboardFilterableCardHeader(
+    title: String,
+    currentFilter: T,
+    filterList: List<T>,
+    onFilterSelected: (T) -> Unit,
+    modifier: Modifier = Modifier,
+    mapper: @Composable (T) -> String = { it.toString() }
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.minor_100)),
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier.padding(
+            start = dimensionResource(id = R.dimen.major_100)
+        )
+    ) {
+        Text(
+            text = title,
+            style = MaterialTheme.typography.body2,
+            color = MaterialTheme.colors.onSurface
+        )
+
+        Text(
+            text = mapper(currentFilter),
+            style = MaterialTheme.typography.body2,
+            color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
+        )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        Box {
+            var isMenuExpanded by remember { mutableStateOf(false) }
+            IconButton(
+                onClick = { isMenuExpanded = true }
+            ) {
+                Icon(
+                    imageVector = Icons.Default.FilterList,
+                    contentDescription = stringResource(
+                        id = R.string.dashboard_filter_menu_content_description
+                    ),
+                    tint = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
+                )
+            }
+
+            DropdownMenu(
+                expanded = isMenuExpanded,
+                onDismissRequest = { isMenuExpanded = false },
+                modifier = Modifier
+                    .defaultMinSize(minWidth = 250.dp)
+            ) {
+                filterList.forEach {
+                    DropdownMenuItem(
+                        onClick = {
+                            onFilterSelected(it)
+                            isMenuExpanded = false
+                        }
+                    ) {
+                        Row(
+                            horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.minor_100))
+                        ) {
+                            Text(text = mapper(it))
+                            Spacer(modifier = Modifier.weight(1f))
+                            if (currentFilter == it) {
+                                Icon(
+                                    imageVector = Icons.Default.Check,
+                                    contentDescription = stringResource(id = androidx.compose.ui.R.string.selected),
+                                    tint = MaterialTheme.colors.primary
+                                )
+                            } else {
+                                Spacer(modifier = Modifier.size(dimensionResource(R.dimen.image_minor_50)))
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+@Preview
+private fun DashboardFilterableCardHeaderPreview() {
+    val filters = remember {
+        listOf("Filter 1", "Filter 2", "Filter 3")
+    }
+    var currentFilter by remember { mutableStateOf("Filter 1") }
+    WooThemeWithBackground {
+        DashboardFilterableCardHeader(
+            title = "Title",
+            currentFilter = currentFilter,
+            filterList = filters,
+            onFilterSelected = { currentFilter = it },
+            modifier = Modifier
+        )
+    }
+}

WooCommerce/src/main/res/values/strings.xml

@@ -371,6 +371,7 @@
     <string name="dashboard_stats_granularity_months">Months</string>
     <string name="dashboard_stats_granularity_years">Years</string>
     <string name="dashboard_stats_edit_granularity_content_description">Change date range button</string>
+    <string name="dashboard_filter_menu_content_description">Open filter dropdown</string>
 
     <string name="dashboard_stats_visitors">Visitors</string>
     <string name="dashboard_stats_orders">Orders</string>
@@ -417,6 +418,7 @@
     <string name="dynamic_dashboard_widget_error_title">Unable to load data</string>
     <string name="dynamic_dashboard_widget_error_description"><![CDATA[Try reloading this card. If the issue persists, please <a href="support">contact support</a>.]]></string>
 
+    <string name="dashboard_reviews_card_header_title">Status</string>
     <!--
         Sign Up Flow
     -->