PM-10843 autofill setup screen animated image. (#3932)

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupAutofillScreen.kt

@@ -1,7 +1,6 @@
 package com.x8bit.bitwarden.ui.auth.feature.accountsetup
 
 import android.content.res.Configuration
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -13,6 +12,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@@ -22,6 +22,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
@@ -42,9 +43,9 @@ import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
 import com.x8bit.bitwarden.ui.platform.components.dialog.BasicDialogState
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenBasicDialog
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenTwoButtonDialog
+import com.x8bit.bitwarden.ui.platform.components.image.BitwardenGifImage
 import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
 import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenWideSwitch
-import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
 import com.x8bit.bitwarden.ui.platform.composition.LocalIntentManager
 import com.x8bit.bitwarden.ui.platform.manager.intent.IntentManager
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@@ -136,6 +137,7 @@ private fun SetupAutoFillContent(
     Column(
         modifier = modifier,
     ) {
+        Spacer(Modifier.height(8.dp))
         SetupAutoFillContentHeader(
             modifier = Modifier
                 .align(Alignment.CenterHorizontally)
@@ -196,10 +198,21 @@ private fun SetupAutoFillContentHeader(
 
 @Composable
 private fun OrderedHeaderContent() {
-    // Animated Image placeholder TODO PM-10843
-    Image(
-        painter = rememberVectorPainter(id = R.drawable.account_setup),
-        contentDescription = null,
+    BitwardenGifImage(
+        resId = R.drawable.img_setup_autofill,
+        modifier = Modifier
+            .clip(
+                RoundedCornerShape(
+                    topStart = 16.dp,
+                    topEnd = 16.dp,
+                    bottomStart = 0.dp,
+                    bottomEnd = 0.dp,
+                ),
+            )
+            .size(
+                width = 230.dp,
+                height = 280.dp,
+            ),
     )
     Spacer(modifier = Modifier.size(24.dp))
     Column(

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/image/BitwardenGifImage.kt

@@ -0,0 +1,34 @@
+package com.x8bit.bitwarden.ui.platform.components.image
+
+import androidx.annotation.DrawableRes
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
+import com.bumptech.glide.integration.compose.GlideImage
+
+/**
+ * A composable that displays a gif image.
+ *
+ * The content will also be scaled to fit the image to the container.
+ */
+@OptIn(ExperimentalGlideComposeApi::class)
+@Composable
+fun BitwardenGifImage(
+    @DrawableRes resId: Int,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+) {
+    // The need for this workaround of loading into a drawable first is related to issue reported
+    // [here](https://github.com/bumptech/glide/issues/3751)
+    val context = LocalContext.current
+    val drawable = AppCompatResources.getDrawable(context, resId)
+    GlideImage(
+        model = drawable,
+        contentDescription = contentDescription,
+        contentScale = ContentScale.Fit,
+        modifier = modifier,
+    )
+}

app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupAutofillScreenTest.kt

@@ -46,6 +46,7 @@ class SetupAutofillScreenTest : BaseComposeTest() {
     fun `Turning on autofill should send AutofillServiceChanged with value of true`() {
         composeTestRule
             .onNodeWithText("Auto-fill services")
+            .performScrollTo()
             .performClick()
 
         verify {