[#16481] Fix unread badge group chats #16610

ulisesmac · 2023-07-14T03:02:41Z

Summary

This PR fix the badge showed for group chats, instead of showing a counter when a non-mention message arrives, now shows the gray dot as in designs.

now:

before:

Also this PR fixes:

The badge component was not using customization color
The badge component was not correctly aligned vertically and horizontally
Since the badge component was misaligned, the text was not using the expected ellipsis, not it is using it.

An image showing the differences in the previous screens:

Review notes

I added two TODOs in the code, I wanted to use the grey-dot component but it's not exposed as part of the quo2 library, so I noticed, actually, this component to show 1:1 chats should be part of our library, instead, it is being created in status-im2.contexts.

I created an issue to solve it:
#16611

To solve this issue, I copied the gray button styles and added a note to be deleted when the component is moved to the quo2 library.

Platforms

Android
iOS

Areas that maybe impacted

Functional

1-1 chats
group chats

Steps to test

Open Status
Create a chat group.
Send a message (without mention) in the chat group. the notification badge in the group listing for other uses should be a gray dot.
Mention a user within the chat group, look at the notification should be a badge with the number of unread mentions
Send a normal message to a user, the notification should be a badge with the number of unread messages.

status: ready

status-im-auto · 2023-07-14T03:08:40Z

Jenkins Builds

Click to see older builds (24)

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`cfc4830`	#1	2023-07-14 03:08:40	~5 min	`android-e2e`	🤖`apk` 📲
✔️	`cfc4830`	#1	2023-07-14 03:09:48	~6 min	`ios`	📱`ipa` 📲
✔️	`cfc4830`	#1	2023-07-14 03:11:07	~8 min	`android`	🤖`apk` 📲
✔️	`cfc4830`	#1	2023-07-14 03:11:50	~8 min	`tests`	📄`log`

✔️	`97b9c2f`	#3	2023-07-14 23:41:19	~5 min	`android-e2e`	🤖`apk` 📲
✔️	`97b9c2f`	#3	2023-07-14 23:41:24	~5 min	`ios`	📱`ipa` 📲
✔️	`97b9c2f`	#3	2023-07-14 23:43:14	~7 min	`android`	🤖`apk` 📲
✔️	`97b9c2f`	#3	2023-07-14 23:44:15	~8 min	`tests`	📄`log`

✔️	`e1e16ff`	#4	2023-07-17 19:18:13	~5 min	`android-e2e`	🤖`apk` 📲
✔️	`e1e16ff`	#4	2023-07-17 19:18:30	~5 min	`android`	🤖`apk` 📲
✔️	`e1e16ff`	#4	2023-07-17 19:18:56	~6 min	`ios`	📱`ipa` 📲
✔️	`e1e16ff`	#4	2023-07-17 19:21:48	~9 min	`tests`	📄`log`

✔️	`decd99e`	#5	2023-07-20 22:25:13	~5 min	`android-e2e`	🤖`apk` 📲
✔️	`decd99e`	#5	2023-07-20 22:26:25	~6 min	`ios`	📱`ipa` 📲
✔️	`decd99e`	#5	2023-07-20 22:27:16	~7 min	`android`	🤖`apk` 📲
✔️	`decd99e`	#5	2023-07-20 22:28:00	~8 min	`tests`	📄`log`

✔️	`3d23b7b`	#6	2023-07-25 19:41:59	~6 min	`ios`	📱`ipa` 📲
✔️	`3d23b7b`	#6	2023-07-25 19:44:44	~8 min	`android-e2e`	🤖`apk` 📲
✔️	`3d23b7b`	#6	2023-07-25 19:44:59	~9 min	`android`	🤖`apk` 📲
✔️	`3d23b7b`	#6	2023-07-25 19:45:42	~9 min	`tests`	📄`log`

✔️	`488c838`	#7	2023-07-26 20:19:54	~5 min	`android`	🤖`apk` 📲
✔️	`488c838`	#7	2023-07-26 20:19:57	~6 min	`android-e2e`	🤖`apk` 📲
✔️	`488c838`	#7	2023-07-26 20:20:06	~6 min	`ios`	📱`ipa` 📲
✔️	`488c838`	#7	2023-07-26 20:22:13	~8 min	`tests`	📄`log`

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`8255e5f`	#8	2023-07-28 19:11:30	~6 min	`ios`	📱`ipa` 📲
✔️	`8255e5f`	#8	2023-07-28 19:12:49	~7 min	`android-e2e`	🤖`apk` 📲
✔️	`8255e5f`	#8	2023-07-28 19:12:57	~7 min	`android`	🤖`apk` 📲
✔️	`8255e5f`	#8	2023-07-28 19:14:10	~8 min	`tests`	📄`log`

✔️	`602c30f`	#9	2023-07-28 19:27:00	~6 min	`android-e2e`	🤖`apk` 📲
✔️	`602c30f`	#9	2023-07-28 19:27:04	~6 min	`android`	🤖`apk` 📲
✔️	`602c30f`	#9	2023-07-28 19:29:45	~8 min	`ios`	📱`ipa` 📲
✔️	`602c30f`	#9	2023-07-28 19:32:02	~11 min	`tests`	📄`log`

src/quo2/components/notifications/info_count.cljs

src/status_im2/contexts/chat/home/chat_list_item/style.cljs

src/status_im2/contexts/chat/home/chat_list_item/view.cljs

src/quo2/components/notifications/info_count.cljs

src/status_im2/contexts/chat/home/chat_list_item/view.cljs

src/quo2/components/notifications/info_count.cljs

yqrashawn

LGTM!

smohamedjavid

🚀

ibrkhalil

Thank you

qoqobolo · 2023-07-20T10:25:03Z

@ulisesmac and this one also needs to be rebased :)
Thank you!

ulisesmac · 2023-07-20T22:19:42Z

@ulisesmac and this one also needs to be rebased :) Thank you!

@qoqobolo Done! :)

status-im-auto · 2023-07-21T09:51:54Z

67% of end-end tests have passed

Total executed tests: 36
Failed tests: 12
Passed tests: 24

IDs of failed tests: 702732,703133,702957,703086,702894,702850,702936,702786,702947,702731,702845,702958

Failed tests (12)

Click to expand

Rerun failed tests

Class TestActivityMultipleDevicePR:

1. test_activity_center_mentions, id: 702957
Test setup failed: medium/test_activity_center.py:156: in prepare_devices self.chat_2.element_by_text_part('View').click() ../views/base_element.py:91: in click self.find_element().click() ../views/base_element.py:80: in find_element raise NoSuchElementException( Device 2: Button by xpath: `//*[contains(@text, "View")]` is not found on the screen
2. test_navigation_jump_to, id: 702936
Device 2: Click until `ChatMessageInput` by `accessibility id`: `chat-message-input` will be presented Device 2: Find `Button` by `xpath`: `//[contains(@text, "View")]` Test setup failed: medium/test_activity_center.py:156: in prepare_devices self.chat_2.element_by_text_part('View').click() ../views/base_element.py:91: in click self.find_element().click() ../views/base_element.py:80: in find_element raise NoSuchElementException( Device 2: Button by xpath: `//[contains(@text, "View")]` is not found on the screen Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot
3. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
Test setup failed: medium/test_activity_center.py:156: in prepare_devices self.chat_2.element_by_text_part('View').click() ../views/base_element.py:91: in click self.find_element().click() ../views/base_element.py:80: in find_element raise NoSuchElementException( Device 2: Button by xpath: `//*[contains(@text, "View")]` is not found on the screen
4. test_activity_center_admin_notification_accept_swipe, id: 702958
Test setup failed: medium/test_activity_center.py:156: in prepare_devices self.chat_2.element_by_text_part('View').click() ../views/base_element.py:91: in click self.find_element().click() ../views/base_element.py:80: in find_element raise NoSuchElementException( Device 2: Button by xpath: `//*[contains(@text, "View")]` is not found on the screen

Class TestCommunityMultipleDeviceMerged:

1. test_community_mark_all_messages_as_read, id: 703086
Device 1: Looking for chat: 'aiebfar' Device 1: Long press on `ChatElement` until expected element is shown critical/test_public_chat_browsing.py:898: in test_community_mark_all_messages_as_read community_1_element.long_press_until_element_is_shown(mark_as_read_button) ../views/base_element.py:302: in long_press_until_element_is_shown action.long_press(element).release().perform() /home/jenkins/.local/lib/python3.10/site-packages/appium/webdriver/common/touch_action.py:163: in perform self._driver.execute(Command.TOUCH_ACTION, params) /home/jenkins/.local/lib/python3.10/site-packages/selenium/webdriver/remote/webdriver.py:321: in execute self.error_handler.check_response(response) /home/jenkins/.local/lib/python3.10/site-packages/appium/webdriver/errorhandler.py:31: in check_response raise wde /home/jenkins/.local/lib/python3.10/site-packages/appium/webdriver/errorhandler.py:26: in check_response super().check_response(response) /home/jenkins/.local/lib/python3.10/site-packages/selenium/webdriver/remote/errorhandler.py:242: in check_response raise exception_class(message, screen, stacktrace) The element 'By.xpath: //*[@content-desc='chat-name-text'][starts-with(@text,'aiebfar')]/..' does not exist in DOM anymore; also Unexpected Alert is shown: 'Feature not implemented.' Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot
2. test_community_contact_block_unblock_offline, id: 702894
Device 1: Tap on found: Button Device 1: Looking for a message by text: Hurray! unblocked `critical/test_public_chat_browsing.py:852: in test_community_contact_block_unblock_offline self.errors.verify_no_errors() base_test_case.py:183: in verify_no_errors pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))])) Hurray! unblocked was not received in public chat after user unblock!` Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot
3. test_community_mentions_push_notification, id: 702786
Device 1: Looking for a message by text: user_1 Device 1: Find `ChatElementByText` by `xpath`: `//[starts-with(@text,'user_1')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` critical/test_public_chat_browsing.py:942: in test_community_mentions_push_notification self.channel_1.set_reaction(message=self.username_1, emoji="sad") ../views/chat_view.py:1020: in set_reaction self.chat_element_by_text(message).long_press_until_element_is_shown(element) ../views/base_element.py:298: in long_press_until_element_is_shown element = self.find_element() ../views/chat_view.py:133: in find_element self.wait_for_visibility_of_element(20) ../views/base_element.py:135: in wait_for_visibility_of_element raise TimeoutException( Device 1: ChatElementByText by xpath:`//[starts-with(@text,'user_1')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` is not found on the screen after wait_for_visibility_of_element; also Unexpected Alert is shown: 'Feature not implemented.' Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot
4. test_community_leave, id: 702845
Device 2: Find `Button` by `xpath`: `//*[@text="Leave community"]` Device 2: Tap on found: Button `critical/test_public_chat_browsing.py:1002: in test_community_leave self.errors.verify_no_errors() base_test_case.py:183: in verify_no_errors pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))])) Community is still shown in the list after leave; also Unexpected Alert is shown: 'Feature not implemented.'` Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot

Class TestCommunityOneDeviceMerged:

1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133

Device 1: Find Button by accessibility id: show-profiles
Device 1: Tap on found: Button

critical/test_public_chat_browsing.py:433: in test_restore_multiaccount_with_waku_backup_remove_switch
    self.errors.verify_no_errors()
base_test_case.py:183: in verify_no_errors
    pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
 Contact(s) was (were) not restored from backup: MyCustomNickname!

Device sessions

Device 1:

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_decline, id: 702850

Device 1: Tap on found: Button
Device 1: Find Text by xpath: //*[@content-desc="pending-contact-requests-count"]/android.widget.TextView

medium/test_activity_center.py:56: in test_activity_center_contact_request_decline
    if self.home_1.pending_contact_request_text.text != '1':
../views/base_element.py:391: in text
    text = self.find_element().text
../views/base_element.py:80: in find_element
    raise NoSuchElementException(
 Device 1: Text by xpath: `//*[@content-desc="pending-contact-requests-count"]/android.widget.TextView` is not found on the screen

Device sessions

Device 1:

Device 2:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_pin_messages, id: 702731
`Test is not run, e2e blocker` [[reason: [NOTRUN] Pin feature is in development]]

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732
`Test is not run, e2e blocker` [[reason: [NOTRUN] Pin feature is in development]]

Passed tests (24)

Click to expand

Class TestCommunityMultipleDeviceMerged:

1. test_community_several_images_send_reply, id: 703194
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_community_one_image_send_reply, id: 702859
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_community_emoji_send_copy_paste_reply, id: 702840
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_community_message_delete, id: 702839
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_community_message_send_check_timestamps_sender_username, id: 702838
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_community_message_edit, id: 702843
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_community_unread_messages_badge, id: 702841
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_send_image_save_and_share, id: 703297
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
2. test_group_chat_reactions, id: 703202
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
3. test_group_chat_join_send_text_messages_push, id: 702807
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
4. test_group_chat_offline_pn, id: 702808
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_1_1_chat_text_message_delete_push_disappear, id: 702733
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_1_1_chat_delete_via_long_press_relogin, id: 702784
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_1_1_chat_push_emoji, id: 702813
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_1_1_chat_edit_message, id: 702855
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_1_1_chat_send_image_save_and_share, id: 703391
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
9. test_1_1_chat_message_reaction, id: 702730
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestCommunityOneDeviceMerged:

1. test_community_copy_and_paste_message_in_chat_input, id: 702742
Device sessions Device 1: Steps, video, logs
2. test_community_navigate_to_channel_when_relaunch, id: 702846
Device sessions Device 1: Steps, video, logs

status-im-auto · 2023-07-21T11:06:45Z

67% of end-end tests have passed

Total executed tests: 12
Failed tests: 4
Passed tests: 8

IDs of failed tests: 702731,703133,702850,702732

Failed tests (4)

Click to expand

Rerun failed tests

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_pin_messages, id: 702731
`Test is not run, e2e blocker` [[reason: [NOTRUN] Pin feature is in development]]

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732
`Test is not run, e2e blocker` [[reason: [NOTRUN] Pin feature is in development]]

Class TestCommunityOneDeviceMerged:

1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133

Device 1: Find Button by accessibility id: show-profiles
Device 1: Tap on found: Button

critical/test_public_chat_browsing.py:433: in test_restore_multiaccount_with_waku_backup_remove_switch
    self.errors.verify_no_errors()
base_test_case.py:183: in verify_no_errors
    pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
 Contact(s) was (were) not restored from backup: MyCustomNickname!

Device sessions

Device 1:

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_decline, id: 702850

Device 1: Tap on found: Button
Device 1: Find Text by xpath: //*[@content-desc="pending-contact-requests-count"]/android.widget.TextView

medium/test_activity_center.py:56: in test_activity_center_contact_request_decline
    if self.home_1.pending_contact_request_text.text != '1':
../views/base_element.py:391: in text
    text = self.find_element().text
../views/base_element.py:80: in find_element
    raise NoSuchElementException(
 Device 1: Text by xpath: `//*[@content-desc="pending-contact-requests-count"]/android.widget.TextView` is not found on the screen

Device sessions

Device 1:

Device 2:

Passed tests (8)

Click to expand

Class TestCommunityMultipleDeviceMerged:

1. test_community_leave, id: 702845
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_community_contact_block_unblock_offline, id: 702894
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_community_mark_all_messages_as_read, id: 703086
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_community_mentions_push_notification, id: 702786
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestActivityMultipleDevicePR:

1. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_activity_center_admin_notification_accept_swipe, id: 702958
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_activity_center_mentions, id: 702957
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_navigation_jump_to, id: 702936
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

churik · 2023-07-24T09:34:17Z

@ulisesmac

ISSUE 1: can't see the unread indicator on 1-1 chat

Steps:

User A: add User B as a contact
User A: send a couple of messages to the user B

Expected result:
user B: can see the unread indicator

Actual result:

telegram-cloud-document-4-5904649681954148417.mp4

OS: IOS, Android
The same is about group chats - no unread indicator on mentions. There is a chance that rebase broke the implementation.

Question 2: would it be possible in this PR is possible to customize the color of the unread badge on Activity Centre and on the community or should I create a follow-up?

ulisesmac · 2023-07-25T19:39:45Z

Thanks for reviewing @churik

About issue 1:
Yes, I pushed an error while solving PR's comments, now it's fixed.

about issue 2:
I tried to solve it, but I noticed the components used are different, so it'd need a different solution. Since our PRs only push one commit to develop, it'd be better to address the fix in a separate PR (commit).

churik · 2023-07-26T09:38:36Z

@Francesca-G ready for design review, good to do from QA side, thanks!

ulisesmac · 2023-07-26T20:12:36Z

@Francesca-G ready for design review, good to do from QA side, thanks!

Hey @churik, @Francesca-G has already approved this PR, could you please add the "tested ok" label if this is ready to be merged?

Thanks! :)

Also notification alignment styles in the component

ulisesmac requested review from ilmotta, yqrashawn, smohamedjavid and ibrkhalil July 14, 2023 03:02

ulisesmac self-assigned this Jul 14, 2023

ulisesmac mentioned this pull request Jul 14, 2023

Move and finish the 1:1 chat component to quo library #16611

Open