Bug 1833697 - Refactor TabsTrayStore into TabsTrayBanner

app/src/main/java/org/mozilla/fenix/tabstray/TabsTray.kt

@@ -31,8 +31,6 @@ import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import mozilla.components.browser.state.selector.normalTabs
-import mozilla.components.browser.state.selector.privateTabs
 import mozilla.components.browser.state.state.BrowserState
 import mozilla.components.browser.state.state.ContentState
 import mozilla.components.browser.state.state.TabSessionState
@@ -122,10 +120,6 @@ fun TabsTray(
     onDeleteSelectedTabsClick: () -> Unit,
     onForceSelectedTabsAsInactiveClick: () -> Unit,
 ) {
-    val normalTabCount = browserStore
-        .observeAsComposableState { state -> state.normalTabs.size }.value ?: 0
-    val privateTabCount = browserStore
-        .observeAsComposableState { state -> state.privateTabs.size }.value ?: 0
     val multiselectMode = tabsTrayStore
         .observeAsComposableState { state -> state.mode }.value ?: TabsTrayState.Mode.Normal
     val selectedPage = tabsTrayStore
@@ -160,13 +154,9 @@ fun TabsTray(
     ) {
         Box(modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection())) {
             TabsTrayBanner(
-                selectMode = multiselectMode,
-                selectedPage = selectedPage,
-                normalTabCount = normalTabCount,
-                privateTabCount = privateTabCount,
+                tabsTrayStore = tabsTrayStore,
                 isInDebugMode = isInDebugMode,
                 onTabPageIndicatorClicked = onTabPageClick,
-                onExitSelectModeClick = { tabsTrayStore.dispatch(TabsTrayAction.ExitSelectMode) },
                 onSaveToCollectionClick = onSaveToCollectionClick,
                 onShareSelectedTabsClick = onShareSelectedTabsClick,
                 onEnterMultiselectModeClick = { tabsTrayStore.dispatch(TabsTrayAction.EnterSelectMode) },

app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt

@@ -45,6 +45,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import mozilla.components.browser.state.state.ContentState
 import mozilla.components.browser.state.state.TabSessionState
+import mozilla.components.lib.state.ext.observeAsComposableState
 import mozilla.components.ui.tabcounter.TabCounter
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.DropdownMenu
@@ -57,14 +58,9 @@ private val ICON_SIZE = 24.dp
 /**
  * Top-level UI for displaying the banner in [TabsTray].
  *
- * @param selectMode Current [TabsTrayState.Mode] used in the tabs tray.
- * @param selectedPage The active [Page] of the Tabs Tray.
- * @param normalTabCount The total amount of normal browsing tabs currently open.
- * @param privateTabCount The number of private browsing tabs currently open.
+ * @param tabsTrayStore [TabsTrayStore] used to listen for changes to [TabsTrayState].
  * @param isInDebugMode True for debug variant or if secret menu is enabled for this session.
  * @param onTabPageIndicatorClicked Invoked when the user clicks on a tab page indicator.
- * @param onExitSelectModeClick Invoked when the user clicks on exit select mode button from the
- * multi select banner.
  * @param onSaveToCollectionClick Invoked when the user clicks on the save to collection button from
  * the multi select banner.
  * @param onShareSelectedTabsClick Invoked when the user clicks on the share button from the multi select banner.
@@ -81,13 +77,9 @@ private val ICON_SIZE = 24.dp
 @Suppress("LongParameterList")
 @Composable
 fun TabsTrayBanner(
-    selectMode: TabsTrayState.Mode,
-    selectedPage: Page,
-    normalTabCount: Int,
-    privateTabCount: Int,
+    tabsTrayStore: TabsTrayStore,
     isInDebugMode: Boolean,
     onTabPageIndicatorClicked: (Page) -> Unit,
-    onExitSelectModeClick: () -> Unit,
     onSaveToCollectionClick: () -> Unit,
     onShareSelectedTabsClick: () -> Unit,
     onEnterMultiselectModeClick: () -> Unit,
@@ -100,11 +92,21 @@ fun TabsTrayBanner(
     onBookmarkSelectedTabsClick: () -> Unit,
     onForceSelectedTabsAsInactiveClick: () -> Unit,
 ) {
-    if (selectMode is TabsTrayState.Mode.Select) {
+    val normalTabCount = tabsTrayStore.observeAsComposableState { state ->
+        state.normalTabs.size + state.inactiveTabs.size
+    }.value ?: 0
+    val privateTabCount = tabsTrayStore
+        .observeAsComposableState { state -> state.privateTabs.size }.value ?: 0
+    val multiselectMode = tabsTrayStore
+        .observeAsComposableState { state -> state.mode }.value ?: TabsTrayState.Mode.Normal
+    val selectedPage = tabsTrayStore
+        .observeAsComposableState { state -> state.selectedPage }.value ?: Page.NormalTabs
+
+    if (multiselectMode is TabsTrayState.Mode.Select) {
         MultiSelectBanner(
-            selectedTabCount = selectMode.selectedTabs.size,
+            selectedTabCount = multiselectMode.selectedTabs.size,
             shouldShowInactiveButton = isInDebugMode,
-            onExitSelectModeClick = onExitSelectModeClick,
+            onExitSelectModeClick = { tabsTrayStore.dispatch(TabsTrayAction.ExitSelectMode) },
             onSaveToCollectionsClick = onSaveToCollectionClick,
             onShareSelectedTabs = onShareSelectedTabsClick,
             onBookmarkSelectedTabsClick = onBookmarkSelectedTabsClick,
@@ -510,22 +512,28 @@ private fun TabsTrayBannerPreviewRoot(
     selectMode: TabsTrayState.Mode = TabsTrayState.Mode.Normal,
     selectedPage: Page = Page.NormalTabs,
     normalTabCount: Int = 10,
+    privateTabCount: Int = 10,
 ) {
-    var selectedPageState by remember { mutableStateOf(selectedPage) }
-    var selectModeState by remember { mutableStateOf(selectMode) }
+    val normalTabs = generateFakeTabsList(normalTabCount)
+    val privateTabs = generateFakeTabsList(privateTabCount)
+
+    val tabsTrayStore = TabsTrayStore(
+        initialState = TabsTrayState(
+            selectedPage = selectedPage,
+            mode = selectMode,
+            normalTabs = normalTabs,
+            privateTabs = privateTabs,
+        ),
+    )
 
     FirefoxTheme {
         Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
             TabsTrayBanner(
-                selectMode = selectModeState,
-                selectedPage = selectedPageState,
-                normalTabCount = normalTabCount,
-                privateTabCount = 10,
+                tabsTrayStore = tabsTrayStore,
                 isInDebugMode = true,
                 onTabPageIndicatorClicked = { page ->
-                    selectedPageState = page
+                    tabsTrayStore.dispatch(TabsTrayAction.PageSelected(page))
                 },
-                onExitSelectModeClick = { selectModeState = TabsTrayState.Mode.Normal },
                 onSaveToCollectionClick = {},
                 onShareSelectedTabsClick = {},
                 onEnterMultiselectModeClick = {},
@@ -551,3 +559,14 @@ private object DisabledRippleTheme : RippleTheme {
     @Composable
     override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
 }
+
+private fun generateFakeTabsList(tabCount: Int = 10, isPrivate: Boolean = false): List<TabSessionState> =
+    List(tabCount) { index ->
+        TabSessionState(
+            id = "tabId$index-$isPrivate",
+            content = ContentState(
+                url = "www.mozilla.com",
+                private = isPrivate,
+            ),
+        )
+    }