WEB-566: [Android] UI for flagged comment (#1643)

* Change flagged comment nomenclatuclature to removed

* Create flagged ui element

* Fix replies visibility error

* Create screenshot tests and comment card tests

* Add flagged message screen shot

* Linter

* Remove unused method

* Update string name

* Update string usages

Co-authored-by: hadia <hadiamohamed.iti@gmail.com>
Co-authored-by: Isabel Martin <arkariang@gmail.com>

app/src/androidTest/java/com/kickstarter/screenshoot/testing/ui/components/CommentCardShotTest.kt

@@ -82,4 +82,10 @@ class CommentCardShotTest : ScreenshotTest {
         )
         compareScreenshot(commentCard)
     }
+
+    @Test
+    fun commentCardScreenshotTest_FLAGGED_MESSAGE() {
+        commentCard.setCommentCardStatus(CommentCardStatus.FLAGGED_COMMENT)
+        compareScreenshot(commentCard)
+    }
 }

app/src/main/java/com/kickstarter/ui/viewholders/CommentCardViewHolder.kt

@@ -151,6 +151,11 @@ class CommentCardViewHolder(
         })
 
         binding.commentsCardView.setFlaggedMessage(
+            context().getString(R.string.FPO_this_comment_is_under_review) +
+                " " +
+                context().getString(R.string.Learn_more_about_comment_guidelines)
+        )
+        binding.commentsCardView.setRemovedMessage(
             context().getString(R.string.This_comment_has_been_removed_by_Kickstarter) +
                 context().getString(R.string.Learn_more_about_comment_guidelines)
         )

app/src/main/java/com/kickstarter/ui/views/CommentCard.kt

@@ -6,6 +6,7 @@ import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.View
 import android.view.View.OnClickListener
+import androidx.appcompat.widget.AppCompatTextView
 import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.core.content.ContextCompat
 import androidx.core.content.withStyledAttributes
@@ -33,7 +34,8 @@ class CommentCard @JvmOverloads constructor(
     init {
         obtainStyledAttributes(context, attrs, defStyleAttr)
 
-        bindFlaggedMessage()
+        bindCommunityGuidelines(binding.removedMessage, onCommentCardClickedListener)
+        bindCommunityGuidelines(binding.flaggedMessage, onCommentCardClickedListener)
 
         binding.retryButtonGroup.setAllOnClickListener {
             onCommentCardClickedListener?.onRetryViewClicked(it)
@@ -43,17 +45,18 @@ class CommentCard @JvmOverloads constructor(
             onCommentCardClickedListener?.onViewRepliesButtonClicked(it)
         }
 
-        binding.flaggedMessage.setOnClickListener {
+        binding.removedMessage.setOnClickListener {
             onCommentCardClickedListener?.onCommentGuideLinesClicked(it)
         }
+
         binding.replyButton.setOnClickListener {
             onCommentCardClickedListener?.onReplyButtonClicked(it)
         }
     }
 
-    private fun bindFlaggedMessage() {
-        binding.flaggedMessage.parseHtmlTag()
-        binding.flaggedMessage.makeLinks(
+    private fun bindCommunityGuidelines(textView: AppCompatTextView, onCommentCardClickedListener: OnCommentCardClickedListener?) {
+        textView.parseHtmlTag()
+        textView.makeLinks(
             Pair(
                 context.resources.getString(R.string.Learn_more_about_comment_guidelines).parseHtmlTag(),
                 OnClickListener {
@@ -149,9 +152,16 @@ class CommentCard @JvmOverloads constructor(
             cardCommentStatus == CommentCardStatus.TRYING_TO_POST ||
             cardCommentStatus == CommentCardStatus.CANCELED_PLEDGE_COMMENT
 
-        binding.commentDeletedMessageGroup.isVisible =
+        binding.removedMessage.isVisible =
             cardCommentStatus == CommentCardStatus.DELETED_COMMENT
 
+        binding.flaggedMessage.isVisible =
+            cardCommentStatus == CommentCardStatus.FLAGGED_COMMENT
+
+        binding.infoButton.isVisible =
+            cardCommentStatus == CommentCardStatus.DELETED_COMMENT ||
+            cardCommentStatus == CommentCardStatus.FLAGGED_COMMENT
+
         binding.canceledPledgeMessage.isVisible =
             cardCommentStatus == CommentCardStatus.CANCELED_PLEDGE_MESSAGE
 
@@ -219,9 +229,14 @@ class CommentCard @JvmOverloads constructor(
         binding.commentBody.urlSpanWithoutUnderlines()
     }
 
+    fun setRemovedMessage(message: String) {
+        binding.removedMessage.text = message
+        bindCommunityGuidelines(binding.removedMessage, onCommentCardClickedListener)
+    }
+
     fun setFlaggedMessage(message: String) {
         binding.flaggedMessage.text = message
-        bindFlaggedMessage()
+        bindCommunityGuidelines(binding.flaggedMessage, onCommentCardClickedListener)
     }
 
     fun setCancelPledgeMessage(message: String) {
@@ -287,4 +302,5 @@ enum class CommentCardStatus(val commentCardStatus: Int) {
     TRYING_TO_POST(6), // comments without reply view,
     CANCELED_PLEDGE_MESSAGE(7),
     CANCELED_PLEDGE_COMMENT(8),
+    FLAGGED_COMMENT(9),
 }

app/src/main/res/layout/comment_card.xml

@@ -168,19 +168,30 @@
 
     <androidx.appcompat.widget.AppCompatImageView
         android:id="@+id/info_button"
-        style="@style/CommentsReplyButton"
+        style="@style/CommentsInfoIcon"
         android:src="@drawable/ic_info"
-        app:layout_constraintTop_toTopOf="@+id/flagged_message"
-        app:layout_constraintStart_toStartOf="@id/avatar"
-        />
+        app:layout_constraintTop_toBottomOf="@+id/avatar"
+        app:layout_constraintStart_toStartOf="@id/avatar" />
 
     <androidx.appcompat.widget.AppCompatTextView
-        android:id="@+id/flagged_message"
+        android:id="@+id/removed_message"
         style="@style/CommentCardFlaggedMessage"
+        android:visibility="gone"
         android:text="@string/This_comment_has_been_removed_by_Kickstarter"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@id/info_button"
-        app:layout_constraintTop_toBottomOf="@id/avatar"/>
+        app:layout_constraintTop_toBottomOf="@id/avatar"
+        tools:visibility="visible"/>
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/flagged_message"
+        style="@style/CommentCardFlaggedMessage"
+        android:visibility="gone"
+        android:text="@string/FPO_this_comment_is_under_review"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/info_button"
+        app:layout_constraintTop_toBottomOf="@id/avatar"
+        tools:visibility="visible"/>
 
     <androidx.appcompat.widget.AppCompatTextView
         android:id="@+id/canceled_pledge_message"
@@ -211,11 +222,4 @@
         tools:visibility="visible"
         app:constraint_referenced_ids="retry_button,retry_message" />
 
-    <androidx.constraintlayout.widget.Group
-        android:id="@+id/comment_deleted_message_group"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:visibility="gone"
-        tools:visibility="visible"
-        app:constraint_referenced_ids="flagged_message,info_button" />
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -69,6 +69,9 @@
   <string name="stripe_publishable_key">pk_live_zjuK52lEUYcvBhIXEUnOEJzk</string>
   <string name="stripe_version" tools:ignore="TypographyDashes">2015-08-07</string>
 
+  <!-- Comments -->
+  <string name="FPO_this_comment_is_under_review">This comment is under review.</string>
+
   <!--  Qualtrics -->
   <string name="Take_our_survey_to_help_us_make_a_better_app_for_you">Take our survey to help us make a better app for you.</string>
   <string name="No_thanks">No thanks</string>

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

@@ -936,6 +936,14 @@
     <item name="android:drawablePadding">@dimen/grid_1</item>
   </style>
 
+  <style name="CommentsInfoIcon" parent="CommentsCardButton">
+    <item name="android:layout_width">0dp</item>
+    <item name="android:layout_marginTop">@dimen/grid_3</item>
+    <item name="android:layout_marginEnd">@dimen/grid_3</item>
+    <item name="android:layout_marginStart">@dimen/grid_1</item>
+    <item name="android:drawablePadding">@dimen/grid_1</item>
+  </style>
+
   <style name="CommentsDisabledMessageTextView" parent="Widget.Design.TextInputLayout">
     <item name="android:layout_width">0dp</item>
     <item name="android:layout_marginStart">@dimen/grid_2</item>

app/src/test/java/com/kickstarter/ui/view/CommentCardTest.kt

@@ -3,9 +3,9 @@ package com.kickstarter.ui.view
 import android.view.LayoutInflater
 import android.view.View
 import androidx.appcompat.widget.AppCompatButton
+import androidx.appcompat.widget.AppCompatImageView
 import androidx.appcompat.widget.AppCompatTextView
 import androidx.constraintlayout.widget.ConstraintLayout
-import androidx.constraintlayout.widget.Group
 import androidx.core.view.isGone
 import androidx.core.view.isVisible
 import com.kickstarter.KSRobolectricTestCase
@@ -17,14 +17,16 @@ import org.junit.Test
 
 class CommentCardTest : KSRobolectricTestCase() {
     private lateinit var commentCard: CommentCard
-    private lateinit var commentDeletedMessageGroup: Group
+    private lateinit var removedMessage: AppCompatTextView
     private lateinit var commentBody: AppCompatTextView
     private lateinit var replyButton: AppCompatButton
     private lateinit var repliesButton: AppCompatTextView
     private lateinit var retryButton: View
     private lateinit var postingButton: AppCompatButton
     private lateinit var postedButton: AppCompatButton
     private lateinit var showCanceledPledgeComment: AppCompatTextView
+    private lateinit var infoIcon: AppCompatImageView
+    private lateinit var flaggedMessage: AppCompatTextView
 
     @Before
     @Throws(Exception::class)
@@ -35,13 +37,15 @@ class CommentCardTest : KSRobolectricTestCase() {
         commentCard.setCommentEnabledThreads(true)
 
         commentBody = commentCard.findViewById(R.id.comment_body)
-        commentDeletedMessageGroup = commentCard.findViewById(R.id.comment_deleted_message_group)
+        removedMessage = commentCard.findViewById(R.id.removed_message)
+        flaggedMessage = commentCard.findViewById(R.id.flagged_message)
         replyButton = commentCard.findViewById(R.id.reply_button)
         retryButton = commentCard.findViewById(R.id.retry_button)
         repliesButton = commentCard.findViewById(R.id.replies)
         postingButton = commentCard.findViewById(R.id.posting_button)
         postedButton = commentCard.findViewById(R.id.posted_button)
         showCanceledPledgeComment = commentCard.findViewById(R.id.canceled_pledge_message)
+        infoIcon = commentCard.findViewById(R.id.info_button)
     }
 
     @Test
@@ -50,7 +54,9 @@ class CommentCardTest : KSRobolectricTestCase() {
         assertTrue(commentBody.isGone)
         assertFalse(retryButton.isVisible)
         assertFalse(replyButton.isVisible)
-        assertTrue(commentDeletedMessageGroup.isVisible)
+        assertTrue(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertTrue(infoIcon.isVisible)
         assertFalse(postedButton.isVisible)
         assertFalse(postingButton.isVisible)
         assertFalse(showCanceledPledgeComment.isVisible)
@@ -60,7 +66,9 @@ class CommentCardTest : KSRobolectricTestCase() {
     fun testFailedSendCommentStatus() {
         commentCard.setCommentCardStatus(CommentCardStatus.FAILED_TO_SEND_COMMENT)
         assertTrue(commentBody.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(replyButton.isVisible)
         assertTrue(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
@@ -73,7 +81,9 @@ class CommentCardTest : KSRobolectricTestCase() {
         commentCard.setCommentCardStatus(CommentCardStatus.COMMENT_FOR_LOGIN_BACKED_USERS)
         assertTrue(commentBody.isVisible)
         assertTrue(replyButton.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
         assertFalse(postingButton.isVisible)
@@ -84,7 +94,9 @@ class CommentCardTest : KSRobolectricTestCase() {
         commentCard.setCommentCardStatus(CommentCardStatus.COMMENT_WITH_REPLIES)
         assertTrue(commentBody.isVisible)
         assertTrue(replyButton.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
         assertFalse(postingButton.isVisible)
@@ -96,7 +108,9 @@ class CommentCardTest : KSRobolectricTestCase() {
         commentCard.setReplyButtonVisibility(false)
         assertTrue(commentBody.isVisible)
         assertFalse(replyButton.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
         assertFalse(postingButton.isVisible)
@@ -108,7 +122,9 @@ class CommentCardTest : KSRobolectricTestCase() {
         commentCard.setReplyButtonVisibility(true)
         assertTrue(commentBody.isVisible)
         assertTrue(replyButton.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
         assertFalse(postingButton.isVisible)
@@ -122,7 +138,9 @@ class CommentCardTest : KSRobolectricTestCase() {
         assertTrue(commentBody.isVisible)
         assertTrue(replyButton.isVisible)
         assertTrue(repliesButton.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
         assertFalse(postingButton.isVisible)
@@ -137,7 +155,9 @@ class CommentCardTest : KSRobolectricTestCase() {
         assertTrue(commentBody.isVisible)
         assertTrue(replyButton.isVisible)
         assertFalse(repliesButton.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
         assertFalse(postingButton.isVisible)
@@ -154,15 +174,19 @@ class CommentCardTest : KSRobolectricTestCase() {
         assertTrue(commentBody.isVisible)
         assertFalse(replyButton.isVisible)
         assertFalse(repliesButton.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(showCanceledPledgeComment.isVisible)
     }
     @Test
     fun testTryingToPostCommentStatus() {
         commentCard.setCommentCardStatus(CommentCardStatus.RE_TRYING_TO_POST)
         assertTrue(commentBody.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(replyButton.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
@@ -174,7 +198,9 @@ class CommentCardTest : KSRobolectricTestCase() {
     fun testSuccessfullyPostCommentStatus() {
         commentCard.setCommentCardStatus(CommentCardStatus.POSTING_COMMENT_COMPLETED_SUCCESSFULLY)
         assertTrue(commentBody.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(replyButton.isVisible)
         assertFalse(retryButton.isVisible)
         assertTrue(postedButton.isVisible)
@@ -187,7 +213,9 @@ class CommentCardTest : KSRobolectricTestCase() {
     fun testShowCanceledPledgeCommentStatus() {
         commentCard.setCommentCardStatus(CommentCardStatus.CANCELED_PLEDGE_COMMENT)
         assertTrue(commentBody.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
         assertFalse(replyButton.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)
@@ -200,7 +228,24 @@ class CommentCardTest : KSRobolectricTestCase() {
         commentCard.setCommentCardStatus(CommentCardStatus.CANCELED_PLEDGE_MESSAGE)
         assertFalse(commentBody.isVisible)
         assertTrue(showCanceledPledgeComment.isVisible)
-        assertFalse(commentDeletedMessageGroup.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertFalse(flaggedMessage.isVisible)
+        assertFalse(infoIcon.isVisible)
+        assertFalse(infoIcon.isVisible)
+        assertFalse(replyButton.isVisible)
+        assertFalse(retryButton.isVisible)
+        assertFalse(postedButton.isVisible)
+        assertFalse(postingButton.isVisible)
+    }
+
+    @Test
+    fun testShowFlaggedMessageStatus() {
+        commentCard.setCommentCardStatus(CommentCardStatus.FLAGGED_COMMENT)
+        assertFalse(commentBody.isVisible)
+        assertFalse(showCanceledPledgeComment.isVisible)
+        assertFalse(removedMessage.isVisible)
+        assertTrue(flaggedMessage.isVisible)
+        assertTrue(infoIcon.isVisible)
         assertFalse(replyButton.isVisible)
         assertFalse(retryButton.isVisible)
         assertFalse(postedButton.isVisible)