Merge pull request #21287 from wordpress-mobile/issue/21283-no-connec…

…tion-message

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)