Update more options screen according to the design

screenshot: https://screenshot.googleplex.com/5iUFTNXofBJnEpj

Test: deployed locally

Bug: 253157211
Change-Id: Iab0308ef566c6c8292cb3d796576d537a6dc733e

packages/CredentialManager/res/values/strings.xml

@@ -15,14 +15,16 @@
   <string name="choose_create_option_password_title">Save your password to <xliff:g id="providerInfoDisplayName">%1$s</xliff:g>?</string>
   <string name="choose_create_option_sign_in_title">Save your sign-in info to <xliff:g id="providerInfoDisplayName">%1$s</xliff:g>?</string>
   <string name="choose_sign_in_title">Use saved sign in</string>
-  <string name="create_passkey_at">Create passkey at</string>
+  <string name="create_passkey_in">Create passkey in</string>
+  <string name="save_password_to">Save password to</string>
+  <string name="save_sign_in_to">Save sign-in to</string>
   <string name="use_provider_for_all_title">Use <xliff:g id="providerInfoDisplayName">%1$s</xliff:g> for all your sign-ins?</string>
   <string name="set_as_default">Set as default</string>
   <string name="use_once">Use once</string>
   <string name="choose_create_option_description">You can use saved <xliff:g id="type">%1$s</xliff:g> on any device. It will be saved to <xliff:g id="providerInfoDisplayName">%2$s</xliff:g> for <xliff:g id="createInfoDisplayName">%3$s</xliff:g></string>
-  <string name="more_options_title_multiple_options"><xliff:g id="providerInfoDisplayName">%1$s</xliff:g> for <xliff:g id="createInfoTitle">%2$s</xliff:g></string>
-  <string name="more_options_title_one_option"><xliff:g id="providerInfoDisplayName">%1$s</xliff:g></string>
-  <string name="more_options_usage_data"><xliff:g id="passwordsNumber">%1$s</xliff:g> passwords and <xliff:g id="passkeyssNumber">%2$s</xliff:g> passkeys saved</string>
+  <string name="more_options_usage_passwords_passkeys"><xliff:g id="passwordsNumber">%1$s</xliff:g> passwords, <xliff:g id="passkeysNumber">%2$s</xliff:g> passkeys</string>
+  <string name="more_options_usage_passwords"><xliff:g id="passwordsNumber">%1$s</xliff:g> passwords</string>
+  <string name="more_options_usage_passkeys"><xliff:g id="passkeysNumber">%1$s</xliff:g> passkeys</string>
   <string name="passkeys">passkeys</string>
   <string name="passwords">passwords</string>
   <string name="sign_ins">sign-ins</string>

packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateModel.kt

@@ -34,12 +34,12 @@ open class EntryInfo (
 class CreateOptionInfo(
   entryKey: String,
   entrySubkey: String,
-  val userProviderDisplayName: String,
+  val userProviderDisplayName: String?,
   val credentialTypeIcon: Drawable,
   val profileIcon: Drawable,
-  val passwordCount: Int,
-  val passkeyCount: Int,
-  val totalCredentialCount: Int,
+  val passwordCount: Int?,
+  val passkeyCount: Int?,
+  val totalCredentialCount: Int?,
   val lastUsedTimeMillis: Long?,
 ) : EntryInfo(entryKey, entrySubkey)
 

packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt

@@ -73,6 +73,7 @@ fun CreatePasskeyScreen(
           onMoreOptionsSelected = viewModel::onMoreOptionsSelected
         )
         CreateScreenState.MORE_OPTIONS_SELECTION -> MoreOptionsSelectionCard(
+            requestDisplayInfo = uiState.requestDisplayInfo,
             providerList = uiState.providers,
             onBackButtonSelected = viewModel::onBackButtonSelected,
             onOptionSelected = viewModel::onMoreOptionsRowSelected
@@ -209,6 +210,7 @@ fun ProviderSelectionCard(
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MoreOptionsSelectionCard(
+  requestDisplayInfo: RequestDisplayInfo,
   providerList: List<ProviderInfo>,
   onBackButtonSelected: () -> Unit,
   onOptionSelected: (ActiveEntry) -> Unit
@@ -218,7 +220,11 @@ fun MoreOptionsSelectionCard(
       TopAppBar(
         title = {
           Text(
-            text = stringResource(R.string.string_more_options),
+            text = when (requestDisplayInfo.type) {
+              TYPE_PUBLIC_KEY_CREDENTIAL -> stringResource(R.string.create_passkey_in)
+              TYPE_PASSWORD_CREDENTIAL -> stringResource(R.string.save_password_to)
+              else -> stringResource(R.string.save_sign_in_to)
+            },
             style = MaterialTheme.typography.titleMedium
           )
         },
@@ -231,15 +237,9 @@ fun MoreOptionsSelectionCard(
         }
       )
       Divider(
-         thickness = 24.dp,
+         thickness = 8.dp,
          color = Color.Transparent
       )
-      Text(
-        text = stringResource(R.string.create_passkey_at),
-        style = MaterialTheme.typography.bodyLarge,
-        modifier = Modifier.padding(horizontal = 28.dp),
-        textAlign = TextAlign.Center
-      )
       Card(
         shape = MaterialTheme.shapes.large,
         modifier = Modifier
@@ -249,7 +249,6 @@ fun MoreOptionsSelectionCard(
         LazyColumn(
           verticalArrangement = Arrangement.spacedBy(2.dp)
         ) {
-          // TODO: change the order according to usage frequency
           providerList.forEach { providerInfo ->
             providerInfo.createOptions.forEach { createOptionInfo ->
               item {
@@ -385,20 +384,22 @@ fun CreationSelectionCard(
         style = MaterialTheme.typography.bodyMedium,
         modifier = Modifier.align(alignment = Alignment.CenterHorizontally)
       )
-      Text(
-        text = stringResource(
-          R.string.choose_create_option_description,
-          when (requestDisplayInfo.type) {
-            TYPE_PUBLIC_KEY_CREDENTIAL -> stringResource(R.string.passkeys)
-            TYPE_PASSWORD_CREDENTIAL -> stringResource(R.string.passwords)
-            else -> stringResource(R.string.sign_ins)
-          },
-          providerInfo.displayName,
-          createOptionInfo.userProviderDisplayName
-        ),
-        style = MaterialTheme.typography.bodyLarge,
-        modifier = Modifier.padding(all = 24.dp).align(alignment = Alignment.CenterHorizontally)
-      )
+      if (createOptionInfo.userProviderDisplayName != null) {
+        Text(
+          text = stringResource(
+            R.string.choose_create_option_description,
+            when (requestDisplayInfo.type) {
+              TYPE_PUBLIC_KEY_CREDENTIAL -> stringResource(R.string.passkeys)
+              TYPE_PASSWORD_CREDENTIAL -> stringResource(R.string.passwords)
+              else -> stringResource(R.string.sign_ins)
+            },
+            providerInfo.displayName,
+            createOptionInfo.userProviderDisplayName
+          ),
+          style = MaterialTheme.typography.bodyLarge,
+          modifier = Modifier.padding(all = 24.dp).align(alignment = Alignment.CenterHorizontally)
+        )
+      }
       Card(
         shape = MaterialTheme.shapes.large,
         modifier = Modifier
@@ -504,30 +505,57 @@ fun MoreOptionsInfoRow(
         onClick = onOptionSelected,
         icon = {
             Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp),
-                bitmap = createOptionInfo.profileIcon.toBitmap().asImageBitmap(),
-                // painter = painterResource(R.drawable.ic_passkey),
-                // TODO: add description.
-                contentDescription = "")
+                bitmap = createOptionInfo.credentialTypeIcon.toBitmap().asImageBitmap(),
+                contentDescription = stringResource(R.string.createOptionInfo_icon_description))
         },
         shape = MaterialTheme.shapes.large,
         label = {
           Column() {
-            Text(
+              Text(
+                  text = providerInfo.displayName,
+                  style = MaterialTheme.typography.titleLarge,
+                  modifier = Modifier.padding(top = 16.dp)
+              )
+            if (createOptionInfo.userProviderDisplayName != null) {
+              Text(
+                text = createOptionInfo.userProviderDisplayName,
+                style = MaterialTheme.typography.bodyMedium)
+            }
+            if (createOptionInfo.passwordCount != null && createOptionInfo.passkeyCount != null) {
+              Text(
                 text =
-                if (providerInfo.createOptions.size > 1)
-                {stringResource(R.string.more_options_title_multiple_options,
-                  providerInfo.displayName, createOptionInfo.userProviderDisplayName)} else {
-                  stringResource(R.string.more_options_title_one_option,
-                    providerInfo.displayName)},
-                style = MaterialTheme.typography.titleLarge,
-                modifier = Modifier.padding(top = 16.dp)
-            )
-            Text(
-                text = stringResource(R.string.more_options_usage_data,
-                  createOptionInfo.passwordCount, createOptionInfo.passkeyCount),
+                  stringResource(
+                    R.string.more_options_usage_passwords_passkeys,
+                    createOptionInfo.passwordCount,
+                    createOptionInfo.passkeyCount
+                  ),
                 style = MaterialTheme.typography.bodyMedium,
                 modifier = Modifier.padding(bottom = 16.dp)
-            )
+              )
+            } else if (createOptionInfo.passwordCount != null) {
+              Text(
+                text =
+                stringResource(
+                  R.string.more_options_usage_passwords,
+                  createOptionInfo.passwordCount
+                ),
+                style = MaterialTheme.typography.bodyMedium,
+                modifier = Modifier.padding(bottom = 16.dp)
+              )
+            } else if (createOptionInfo.passkeyCount != null) {
+              Text(
+                text =
+                stringResource(
+                  R.string.more_options_usage_passkeys,
+                  createOptionInfo.passkeyCount
+                ),
+                style = MaterialTheme.typography.bodyMedium,
+                modifier = Modifier.padding(bottom = 16.dp)
+              )
+            } else if (createOptionInfo.totalCredentialCount != null) {
+              // TODO: Handle the case when there is total count
+              // but no passwords and passkeys after design is set
+            }
           }
         }
     )

packages/CredentialManager/src/com/android/credentialmanager/jetpack/provider/SaveEntryUi.kt

@@ -26,7 +26,7 @@ import android.graphics.drawable.Icon
  * TODO: move to jetpack.
  */
 class SaveEntryUi(
-  val userProviderAccountName: CharSequence,
+  val userProviderAccountName: CharSequence?,
   val credentialTypeIcon: Icon?,
   val profileIcon: Icon?,
   val passwordCount: Int?,