For #19600: Change manage cards preference UI dynamically.

app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardsSettingFragment.kt

@@ -10,6 +10,7 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.annotation.VisibleForTesting
 import androidx.lifecycle.lifecycleScope
+import androidx.navigation.NavController
 import androidx.navigation.fragment.findNavController
 import androidx.preference.Preference
 import androidx.preference.PreferenceFragmentCompat
@@ -21,7 +22,6 @@ import mozilla.components.lib.state.ext.consumeFrom
 import mozilla.components.service.fxa.SyncEngine
 import org.mozilla.fenix.R
 import org.mozilla.fenix.components.StoreProvider
-import org.mozilla.fenix.ext.getPreferenceKey
 import org.mozilla.fenix.ext.navigateBlockingForAsyncNavGraph
 import org.mozilla.fenix.ext.requireComponents
 import org.mozilla.fenix.ext.showToolbar
@@ -62,7 +62,7 @@ class CreditCardsSettingFragment : PreferenceFragmentCompat() {
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
         consumeFrom(creditCardsStore) { state ->
-            updateCardManagementPreferencesVisibility(state.creditCards)
+            updateCardManagementPreference(state.creditCards.isNotEmpty(), findNavController())
         }
     }
 
@@ -98,39 +98,39 @@ class CreditCardsSettingFragment : PreferenceFragmentCompat() {
         )
     }
 
-    override fun onPreferenceTreeClick(preference: Preference): Boolean {
-        when (preference.key) {
-            getPreferenceKey(R.string.pref_key_credit_cards_add_credit_card) -> {
-                val directions =
-                    CreditCardsSettingFragmentDirections
-                        .actionCreditCardsSettingFragmentToCreditCardEditorFragment()
-                findNavController().navigateBlockingForAsyncNavGraph(directions)
-            }
-            getPreferenceKey(R.string.pref_key_credit_cards_manage_saved_cards) -> {
-                val directions =
-                    CreditCardsSettingFragmentDirections
-                        .actionCreditCardsSettingFragmentToCreditCardsManagementFragment()
-                findNavController().navigateBlockingForAsyncNavGraph(directions)
-            }
-        }
-
-        return super.onPreferenceTreeClick(preference)
-    }
-
     /**
      * Updates preferences visibility depending on credit cards being already saved or not.
      */
     @VisibleForTesting
-    internal fun updateCardManagementPreferencesVisibility(creditCardsList: List<CreditCard>) {
+    internal fun updateCardManagementPreference(
-        val hasCreditCards = creditCardsList.isNotEmpty()
+        hasCreditCards: Boolean,
-
+        navController: NavController
+    ) {
         val manageSavedCardsPreference =
-            requirePreference<Preference>(R.string.pref_key_credit_cards_manage_saved_cards)
+            requirePreference<Preference>(R.string.pref_key_credit_cards_manage_cards)
-        val addCreditCardsPreference =
+
-            requirePreference<Preference>(R.string.pref_key_credit_cards_add_credit_card)
+        val directions = if (hasCreditCards) {
+            CreditCardsSettingFragmentDirections
+                .actionCreditCardsSettingFragmentToCreditCardsManagementFragment()
+        } else {
+            CreditCardsSettingFragmentDirections
+                .actionCreditCardsSettingFragmentToCreditCardEditorFragment()
+        }
 
-        manageSavedCardsPreference.isVisible = hasCreditCards
+        if (hasCreditCards) {
-        addCreditCardsPreference.isVisible = !hasCreditCards
+            manageSavedCardsPreference.icon = null
+            manageSavedCardsPreference.title =
+                getString(R.string.preferences_credit_cards_manage_saved_cards)
+        } else {
+            manageSavedCardsPreference.setIcon(R.drawable.ic_new)
+            manageSavedCardsPreference.title =
+                getString(R.string.preferences_credit_cards_add_credit_card)
+        }
+
+        manageSavedCardsPreference.setOnPreferenceClickListener {
+            navController.navigateBlockingForAsyncNavGraph(directions)
+            super.onPreferenceTreeClick(it)
+        }
     }
 
     /**

app/src/main/res/values/preference_keys.xml

@@ -180,10 +180,8 @@
     <string name="pref_key_credit_cards_save_and_autofill_cards" translatable="false">pref_key_credit_cards_save_and_autofill_cards</string>
     <!-- Key for the "Sync cards across devices" preference in the "Credit cards" fragment -->
     <string name="pref_key_credit_cards_sync_cards_across_devices" translatable="false">pref_key_credit_cards_sync_cards_across_devices</string>
-    <!-- Key for the "Add credit card" preference in the "Credit cards" fragment -->
-    <string name="pref_key_credit_cards_add_credit_card" translatable="false">pref_key_credit_cards_add_credit_card</string>
     <!-- Key for the "Manage saved cards" preference in the "Credit cards" fragment -->
-    <string name="pref_key_credit_cards_manage_saved_cards" translatable="false">pref_key_credit_cards_manage_saved_cards</string>
+    <string name="pref_key_credit_cards_manage_cards" translatable="false">pref_key_credit_cards_manage_cards</string>
 
     <!-- Privacy Settings -->
     <string name="pref_key_open_links_in_a_private_tab" translatable="false">pref_key_open_links_in_a_private_tab</string>

app/src/main/res/xml/credit_cards_preferences.xml

@@ -15,13 +15,7 @@
         app:singleLineTitle="false"
         app:allowDividerBelow="true" />
     <Preference
-        android:icon="@drawable/ic_new"
+        android:key="@string/pref_key_credit_cards_manage_cards"
-        android:key="@string/pref_key_credit_cards_add_credit_card"
-        android:title="@string/preferences_credit_cards_add_credit_card"
-        app:isPreferenceVisible="false"
-        app:allowDividerAbove="true" />
-    <Preference
-        android:key="@string/pref_key_credit_cards_manage_saved_cards"
         android:title="@string/preferences_credit_cards_manage_saved_cards"
         app:isPreferenceVisible="false"
         app:allowDividerAbove="true" />

app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardsSettingFragmentTest.kt

@@ -5,17 +5,23 @@
 package org.mozilla.fenix.settings.creditcards
 
 import androidx.fragment.app.FragmentActivity
+import androidx.navigation.NavController
 import androidx.preference.Preference
 import io.mockk.mockk
+import io.mockk.verify
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.test.TestCoroutineDispatcher
 import mozilla.components.concept.storage.CreditCard
-import org.junit.Assert.assertTrue
+import mozilla.components.support.test.robolectric.testContext
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertNotNull
+import org.junit.Assert.assertNull
 import org.junit.Before
 import org.junit.Test
 import org.junit.runner.RunWith
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.getPreferenceKey
+import org.mozilla.fenix.ext.navigateBlockingForAsyncNavGraph
 import org.mozilla.fenix.helpers.FenixRobolectricTestRunner
 import org.robolectric.Robolectric
 
@@ -25,10 +31,12 @@ class CreditCardsSettingFragmentTest {
 
     private val testDispatcher = TestCoroutineDispatcher()
     private lateinit var creditCardsSettingFragment: CreditCardsSettingFragment
+    private val navController: NavController = mockk(relaxed = true)
 
     @Before
     fun setUp() {
         creditCardsSettingFragment = CreditCardsSettingFragment()
+
         val activity = Robolectric.buildActivity(FragmentActivity::class.java).create().get()
 
         activity.supportFragmentManager.beginTransaction()
@@ -38,32 +46,60 @@ class CreditCardsSettingFragmentTest {
     }
 
     @Test
-    fun `GIVEN the list of credit cards is not empty, WHEN fragment is displayed THEN the manage credit cards pref is visible`() {
+    fun `GIVEN the list of credit cards is not empty, WHEN fragment is displayed THEN the manage credit cards pref is 'Manage saved cards'`() {
-        val manageSavedCardsPreference = creditCardsSettingFragment.findPreference<Preference>(
+        val preferenceTitle =
-            creditCardsSettingFragment.getPreferenceKey(R.string.pref_key_credit_cards_manage_saved_cards)
+            testContext.getString(R.string.preferences_credit_cards_manage_saved_cards)
+        val manageCardsPreference = creditCardsSettingFragment.findPreference<Preference>(
+            creditCardsSettingFragment.getPreferenceKey(R.string.pref_key_credit_cards_manage_cards)
         )
 
+        val directions =
+            CreditCardsSettingFragmentDirections
+                .actionCreditCardsSettingFragmentToCreditCardsManagementFragment()
+
         val creditCards: List<CreditCard> = listOf(mockk(), mockk())
 
         val creditCardsState = CreditCardsListState(creditCards = creditCards)
         val creditCardsStore = CreditCardsFragmentStore(creditCardsState)
 
-        creditCardsSettingFragment.updateCardManagementPreferencesVisibility(creditCardsStore.state.creditCards)
+        creditCardsSettingFragment.updateCardManagementPreference(
+            creditCardsStore.state.creditCards.isNotEmpty(),
+            navController
+        )
+
+        assertNull(manageCardsPreference?.icon)
+        assertEquals(preferenceTitle, manageCardsPreference?.title)
+
+        manageCardsPreference?.performClick()
 
-        assertTrue(manageSavedCardsPreference!!.isVisible)
+        verify { navController.navigateBlockingForAsyncNavGraph(directions) }
     }
 
     @Test
-    fun `GIVEN the list of credit cards is empty, WHEN fragment is displayed THEN the add credit card pref is visible`() {
+    fun `GIVEN the list of credit cards is empty, WHEN fragment is displayed THEN the manage credit cards pref is 'Add card'`() {
-        val addCreditCardsPreference = creditCardsSettingFragment.findPreference<Preference>(
+        val preferenceTitle =
-            creditCardsSettingFragment.getPreferenceKey(R.string.pref_key_credit_cards_add_credit_card)
+            testContext.getString(R.string.preferences_credit_cards_add_credit_card)
+        val manageCardsPreference = creditCardsSettingFragment.findPreference<Preference>(
+            creditCardsSettingFragment.getPreferenceKey(R.string.pref_key_credit_cards_manage_cards)
         )
 
+        val directions =
+            CreditCardsSettingFragmentDirections
+                .actionCreditCardsSettingFragmentToCreditCardEditorFragment()
+
         val creditCardsState = CreditCardsListState(creditCards = emptyList())
         val creditCardsStore = CreditCardsFragmentStore(creditCardsState)
 
-        creditCardsSettingFragment.updateCardManagementPreferencesVisibility(creditCardsStore.state.creditCards)
+        creditCardsSettingFragment.updateCardManagementPreference(
+            creditCardsStore.state.creditCards.isNotEmpty(),
+            navController
+        )
+
+        assertNotNull(manageCardsPreference?.icon)
+        assertEquals(preferenceTitle, manageCardsPreference?.title)
+
+        manageCardsPreference?.performClick()
 
-        assertTrue(addCreditCardsPreference!!.isVisible)
+        verify { navController.navigateBlockingForAsyncNavGraph(directions) }
     }
 }