Issue/21283 no connection message

WordPress/src/main/java/org/wordpress/android/ui/mediapicker/loader/GifMediaDataSource.kt

@@ -39,8 +39,7 @@ class GifMediaDataSource
 
         if (!networkUtilsWrapper.isNetworkAvailable()) {
             return Failure(
-                UiStringRes(R.string.no_network_title),
-                htmlSubtitle = UiStringRes(R.string.no_network_message),
+                UiStringRes(R.string.no_network_message),
                 image = R.drawable.img_illustration_cloud_off_152dp,
                 data = items
             )

WordPress/src/main/java/org/wordpress/android/ui/mediapicker/loader/MediaLibraryDataSource.kt

@@ -59,8 +59,7 @@ class MediaLibraryDataSource(
     ): MediaLoadingResult {
         if (!networkUtilsWrapper.isNetworkAvailable()) {
             return Failure(
-                UiStringRes(R.string.no_network_title),
-                htmlSubtitle = UiStringRes(R.string.no_network_message),
+                UiStringRes(R.string.no_network_message),
                 image = R.drawable.img_illustration_cloud_off_152dp,
                 data = if (loadMore) get(mediaTypes, filter) else listOf()
             )

WordPress/src/main/java/org/wordpress/android/ui/mediapicker/loader/StockMediaDataSource.kt

@@ -32,8 +32,7 @@ class StockMediaDataSource
     ): MediaLoadingResult {
         if (!networkUtilsWrapper.isNetworkAvailable()) {
             return Failure(
-                UiStringRes(R.string.no_network_title),
-                htmlSubtitle = UiStringRes(R.string.no_network_message),
+                UiStringRes(R.string.no_network_message),
                 image = R.drawable.img_illustration_cloud_off_152dp,
                 data = if (loadMore) get() else listOf()
             )

WordPress/src/main/java/org/wordpress/android/ui/selfhostedusers/SelfHostedUserComposables.kt

@@ -13,9 +13,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -30,6 +32,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -114,46 +117,53 @@ fun LargeAvatar(avatarUrl: String) {
  * A composable that displays a message when there is no network connection
  */
 @Composable
-fun OfflineView() {
+fun OfflineView(
+    onRetryClick: (() -> Unit)? = null,
+) {
     MessageView(
-        R.drawable.ic_wifi_off_24px,
-        R.string.no_network_title,
-        R.string.no_network_message,
+        imageRes = R.drawable.img_illustration_cloud_off_152dp,
+        messageRes = R.string.no_network_message,
+        buttonRes = R.string.retry,
+        onButtonClick = onRetryClick
     )
 }
 
 /**
- * A composable that displays a title with an icon above it and an optional subtitle below it
+ * A composable that displays a message with an image above it and an optional button below it
  */
 @Composable
 fun MessageView(
-    @DrawableRes iconRes: Int,
-    @StringRes titleRes: Int,
-    @StringRes subtitleRes: Int? = null,
+    @DrawableRes imageRes: Int,
+    @StringRes messageRes: Int,
+    @StringRes buttonRes: Int? = null,
+    onButtonClick: (() -> Unit)? = null,
 ) {
     Column(
         modifier = Modifier.fillMaxSize(),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Icon(
-            imageVector = ImageVector.vectorResource(iconRes),
+            imageVector = ImageVector.vectorResource(imageRes),
+            tint = colorResource(R.color.neutral_30),
             contentDescription = null,
-            tint = MaterialTheme.colorScheme.onSurface,
-            modifier = Modifier
-                .size(85.dp)
         )
         Text(
-            text = stringResource(titleRes),
+            text = stringResource(messageRes),
             style = MaterialTheme.typography.titleLarge,
             color = MaterialTheme.colorScheme.onSurface,
+            modifier = Modifier.padding(top = 16.dp),
         )
-        if (subtitleRes != null) {
-            Text(
-                text = stringResource(subtitleRes),
-                style = MaterialTheme.typography.titleSmall,
-                color = MaterialTheme.colorScheme.onSurface,
-            )
+        if (buttonRes != null && onButtonClick != null) {
+            Button(
+                modifier = Modifier.padding(top = 16.dp),
+                shape = RoundedCornerShape(2.dp),
+                onClick = onButtonClick,
+            ) {
+                Text(
+                    text = stringResource(R.string.retry).uppercase(),
+                )
+            }
         }
     }
 }
@@ -214,12 +224,14 @@ fun ScreenWithTopBar(
 )
 private fun OfflineScreenPreview() {
     val content: @Composable () -> Unit = @Composable {
-        OfflineView()
+        OfflineView(
+            onRetryClick = {}
+        )
     }
     ScreenWithTopBar(
         title = "Title",
         content = content,
         onCloseClick = {},
-        isScrollable = false
+        isScrollable = false,
     )
 }

WordPress/src/main/java/org/wordpress/android/ui/selfhostedusers/SelfHostedUsersActivity.kt

@@ -50,6 +50,9 @@ class SelfHostedUsersActivity : LocaleAwareActivity() {
                         },
                         onUserAvatarClick = { avatarUrl ->
                             viewModel.onUserAvatarClick(avatarUrl)
+                        },
+                        onRetryClick = {
+                            viewModel.onRetryClick()
                         }
                     )
                 }

WordPress/src/main/java/org/wordpress/android/ui/selfhostedusers/SelfHostedUsersScreen.kt

@@ -39,6 +39,7 @@ fun SelfHostedUsersScreen(
     onCloseClick: () -> Unit = {},
     onUserClick: (UserWithEditContext) -> Unit = {},
     onUserAvatarClick: (avatarUrl: String?) -> Unit = {},
+    onRetryClick: () -> Unit = {},
 ) {
     val state = uiState.collectAsState().value
 
@@ -89,8 +90,8 @@ fun SelfHostedUsersScreen(
 
                 is SelfHostedUserState.EmptyUserList -> {
                     MessageView(
-                        R.drawable.ic_people_white_24dp,
-                        R.string.no_users,
+                        imageRes = R.drawable.ic_people_white_24dp,
+                        messageRes = R.string.no_users,
                     )
                 }
 
@@ -106,7 +107,9 @@ fun SelfHostedUsersScreen(
                 }
 
                 is SelfHostedUserState.Offline -> {
-                    OfflineView()
+                    OfflineView(
+                        onRetryClick = onRetryClick
+                    )
                 }
             }
         }

WordPress/src/main/java/org/wordpress/android/ui/selfhostedusers/SelfHostedUsersViewModel.kt

@@ -87,6 +87,14 @@ class SelfHostedUsersViewModel @Inject constructor(
         }
     }
 
+    /**
+     * Called when the retry button is clicked
+     */
+    fun onRetryClick() {
+        _uiState.value = SelfHostedUserState.Loading
+        fetchUsers()
+    }
+
     sealed class SelfHostedUserState {
         data object Loading : SelfHostedUserState()
         data object Offline : SelfHostedUserState()

WordPress/src/main/res/layout/actionable_empty_view.xml

@@ -62,7 +62,7 @@
                 android:layout_height="wrap_content"
                 android:layout_marginTop="@dimen/margin_extra_large"
                 android:adjustViewBounds="true"
-                android:contentDescription="@string/content_description_person_reading_device_notification"
+                android:contentDescription="@null"
                 android:visibility="gone" />
 
             <ProgressBar

WordPress/src/test/java/org/wordpress/android/ui/mediapicker/loader/GifMediaDataSourceTest.kt

@@ -110,8 +110,7 @@ class GifMediaDataSourceTest : BaseUnitTest() {
         val result = gifMediaDataSource.load(forced = false, loadMore = false, filter = filter)
 
         (result as MediaLoadingResult.Failure).apply {
-            Assertions.assertThat((this.title as UiStringRes).stringRes).isEqualTo(R.string.no_network_title)
-            Assertions.assertThat(this.htmlSubtitle).isEqualTo(UiStringRes(R.string.no_network_message))
+            Assertions.assertThat((this.title as UiStringRes).stringRes).isEqualTo(R.string.no_network_message)
             Assertions.assertThat(this.image).isEqualTo(R.drawable.img_illustration_cloud_off_152dp)
         }
     }

WordPress/src/test/java/org/wordpress/android/ui/mediapicker/loader/MediaLibraryDataSourceTest.kt

@@ -80,8 +80,7 @@ class MediaLibraryDataSourceTest : BaseUnitTest() {
 
         val result = dataSource.load(forced = false, loadMore = false, filter = null) as Failure
 
-        assertThat(result.title).isEqualTo(UiStringRes(R.string.no_network_title))
-        assertThat(result.htmlSubtitle).isEqualTo(UiStringRes(R.string.no_network_message))
+        assertThat(result.title).isEqualTo(UiStringRes(R.string.no_network_message))
         assertThat(result.image).isEqualTo(R.drawable.img_illustration_cloud_off_152dp)
         assertThat(result.data).isEmpty()
     }
@@ -96,8 +95,7 @@ class MediaLibraryDataSourceTest : BaseUnitTest() {
 
         val result = dataSource.load(forced = false, loadMore = true, filter = null) as Failure
 
-        assertThat(result.title).isEqualTo(UiStringRes(R.string.no_network_title))
-        assertThat(result.htmlSubtitle).isEqualTo(UiStringRes(R.string.no_network_message))
+        assertThat(result.title).isEqualTo(UiStringRes(R.string.no_network_message))
         assertThat(result.image).isEqualTo(R.drawable.img_illustration_cloud_off_152dp)
         assertThat(result.data).hasSize(1)
         result.data.assertContains(mediaModel, 0)

WordPress/src/test/java/org/wordpress/android/ui/mediapicker/loader/StockMediaDataSourceTest.kt

@@ -138,8 +138,7 @@ class StockMediaDataSourceTest : BaseUnitTest() {
         val result = stockMediaDataSource.load(forced = false, loadMore = false, filter = filter)
 
         (result as MediaLoadingResult.Failure).apply {
-            assertThat((this.title as UiStringRes).stringRes).isEqualTo(R.string.no_network_title)
-            assertThat(this.htmlSubtitle).isEqualTo(UiStringRes(R.string.no_network_message))
+            assertThat((this.title as UiStringRes).stringRes).isEqualTo(R.string.no_network_message)
             assertThat(this.image).isEqualTo(R.drawable.img_illustration_cloud_off_152dp)
         }
         verifyNoInteractions(stockMediaStore)