Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: action/reaction drawer UI issue #19630

Merged
merged 11 commits into from
May 17, 2024
Merged

Conversation

yqrashawn
Copy link
Contributor

@yqrashawn yqrashawn commented Apr 15, 2024

fixes #19278

Summary

  • quo/drawer-action
    • add :accessibility-label support, old :container accessibility label is removed
    • add :type for title and icon color (e.g. :danger)
  • reaction buttons
    • updated for two platforms based on screenshots of emulator
    • much better yet still not pixel perfect
    • mean reason is these buttons are emoji texts not images
  • hide reactions row (bottom of message) in reactions preview (long press on message reaction)
  • for message reaction and action drawer, replace quo/menu-item with quo/drawer-action
  • refactor/simplify message content code

Review notes

quo/drawer-action is a new component (2 weeks old), it's not used anywhere until this PR
lots of "drawer-action"s are using quo/menu-item, which should be upgraded to the new component, details at #19278 (comment)

Testing notes

  • Implementation of actions (reply, delete message) in the message drawer is replaced (from quo/menu-item to quo/drawer-action)
  • hide reactions row (bottom of message) in reactions preview (long press on message reaction)

Platforms

  • Android
  • iOS

Areas that maybe impacted

action drawer for chat messages
reaction drawer (add reaction to message, then long press message reaction)

Before and after screenshots comparison

Figma (if available) iOS (if available) Android (if available)
after(0.5) / figma image image
before(0.5) / figma image image

status: ready

@yqrashawn yqrashawn self-assigned this Apr 15, 2024
@status-im-auto
Copy link
Member

status-im-auto commented Apr 15, 2024

Jenkins Builds

Click to see older builds (61)
Commit #️⃣ Finished (UTC) Duration Platform Result
d326511 #1 2024-04-15 02:51:58 ~3 min tests 📄log
✔️ d326511 #1 2024-04-15 02:55:14 ~7 min android-e2e 🤖apk 📲
✔️ d326511 #1 2024-04-15 02:55:22 ~7 min android 🤖apk 📲
✔️ d326511 #1 2024-04-15 02:57:53 ~9 min ios 📱ipa 📲
0af6218 #2 2024-04-15 09:17:24 ~2 min tests 📄log
✔️ 0af6218 #2 2024-04-15 09:20:31 ~5 min android-e2e 🤖apk 📲
✔️ 0af6218 #2 2024-04-15 09:21:23 ~6 min android 🤖apk 📲
✔️ 0af6218 #2 2024-04-15 09:24:12 ~9 min ios 📱ipa 📲
7a0aac9 #3 2024-04-15 09:34:04 ~2 min tests 📄log
✔️ 7e275d9 #4 2024-04-15 09:41:53 ~4 min tests 📄log
✔️ 7e275d9 #4 2024-04-15 09:43:41 ~5 min android-e2e 🤖apk 📲
✔️ 7e275d9 #4 2024-04-15 09:44:53 ~7 min android 🤖apk 📲
✔️ 7e275d9 #4 2024-04-15 09:48:47 ~10 min ios 📱ipa 📲
✔️ 8eb3358 #5 2024-04-17 07:55:01 ~5 min tests 📄log
✔️ 8eb3358 #5 2024-04-17 07:57:17 ~8 min android-e2e 🤖apk 📲
✔️ 8eb3358 #5 2024-04-17 07:57:22 ~8 min android 🤖apk 📲
✔️ 8eb3358 #5 2024-04-17 07:59:47 ~10 min ios 📱ipa 📲
✔️ fadbd84 #6 2024-04-18 11:22:41 ~4 min tests 📄log
✔️ fadbd84 #6 2024-04-18 11:24:42 ~6 min android-e2e 🤖apk 📲
✔️ fadbd84 #6 2024-04-18 11:25:51 ~7 min android 🤖apk 📲
✔️ fadbd84 #6 2024-04-18 11:28:02 ~9 min ios 📱ipa 📲
a13f47f #7 2024-05-10 03:16:53 ~2 min tests 📄log
✔️ a13f47f #7 2024-05-10 03:21:11 ~6 min android 🤖apk 📲
✔️ a13f47f #7 2024-05-10 03:22:48 ~8 min android-e2e 🤖apk 📲
✔️ a13f47f #7 2024-05-10 03:23:51 ~9 min ios 📱ipa 📲
✔️ e0b759b #8 2024-05-10 05:42:03 ~5 min tests 📄log
✔️ e0b759b #8 2024-05-10 05:43:34 ~6 min android-e2e 🤖apk 📲
✔️ e0b759b #8 2024-05-10 05:45:11 ~8 min android 🤖apk 📲
✔️ e0b759b #8 2024-05-10 05:46:20 ~9 min ios 📱ipa 📲
✔️ 3b49758 #9 2024-05-10 05:52:22 ~5 min tests 📄log
✔️ 3b49758 #9 2024-05-10 05:53:56 ~7 min android 🤖apk 📲
✔️ 3b49758 #9 2024-05-10 05:55:02 ~8 min android-e2e 🤖apk 📲
✔️ 3b49758 #9 2024-05-10 05:56:35 ~9 min ios 📱ipa 📲
✔️ 19fdc1f #10 2024-05-10 08:11:19 ~3 min tests 📄log
✔️ 19fdc1f #10 2024-05-10 08:13:13 ~5 min android 🤖apk 📲
✔️ 19fdc1f #10 2024-05-10 08:16:33 ~9 min android-e2e 🤖apk 📲
✔️ 19fdc1f #10 2024-05-10 08:17:17 ~9 min ios 📱ipa 📲
✔️ a25fe11 #11 2024-05-13 06:50:51 ~4 min tests 📄log
✔️ a25fe11 #11 2024-05-13 06:52:21 ~5 min android-e2e 🤖apk 📲
✔️ a25fe11 #11 2024-05-13 06:54:45 ~8 min android 🤖apk 📲
✔️ a25fe11 #11 2024-05-13 06:56:38 ~10 min ios 📱ipa 📲
✔️ b6c5a8d #12 2024-05-13 14:04:08 ~3 min tests 📄log
✔️ b6c5a8d #12 2024-05-13 14:06:05 ~5 min android-e2e 🤖apk 📲
✔️ b6c5a8d #12 2024-05-13 14:06:34 ~6 min android 🤖apk 📲
✔️ b6c5a8d #12 2024-05-13 14:10:03 ~9 min ios 📱ipa 📲
✔️ d598d1f #13 2024-05-13 14:27:30 ~5 min tests 📄log
✔️ d598d1f #13 2024-05-13 14:27:56 ~5 min android-e2e 🤖apk 📲
✔️ d598d1f #13 2024-05-13 14:29:44 ~7 min android 🤖apk 📲
✔️ d598d1f #13 2024-05-13 14:31:40 ~9 min ios 📱ipa 📲
✔️ 7601097 #14 2024-05-15 00:34:50 ~5 min tests 📄log
✔️ 7601097 #14 2024-05-15 00:36:41 ~6 min android 🤖apk 📲
✔️ 7601097 #14 2024-05-15 00:37:56 ~8 min android-e2e 🤖apk 📲
✔️ 7601097 #14 2024-05-15 00:39:14 ~9 min ios 📱ipa 📲
✔️ 92fba98 #16 2024-05-16 07:03:19 ~4 min tests 📄log
✔️ 92fba98 #16 2024-05-16 07:05:07 ~6 min android 🤖apk 📲
✔️ 92fba98 #16 2024-05-16 07:05:14 ~6 min android-e2e 🤖apk 📲
✔️ 92fba98 #16 2024-05-16 07:07:34 ~9 min ios 📱ipa 📲
554f824 #17 2024-05-16 07:44:32 ~2 min tests 📄log
✔️ 554f824 #17 2024-05-16 07:48:31 ~6 min android 🤖apk 📲
✔️ 554f824 #17 2024-05-16 07:50:33 ~8 min android-e2e 🤖apk 📲
✔️ 554f824 #17 2024-05-16 07:51:51 ~9 min ios 📱ipa 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
7cbddd1 #18 2024-05-16 12:38:38 ~2 min tests 📄log
✔️ 7cbddd1 #18 2024-05-16 12:42:04 ~5 min android 🤖apk 📲
✔️ 7cbddd1 #18 2024-05-16 12:43:54 ~7 min android-e2e 🤖apk 📲
✔️ 7cbddd1 #18 2024-05-16 12:50:05 ~13 min ios 📱ipa 📲
✔️ 3bcfdb5 #20 2024-05-17 08:29:32 ~4 min tests 📄log
✔️ 3bcfdb5 #20 2024-05-17 08:30:23 ~5 min android 🤖apk 📲
✔️ 3bcfdb5 #20 2024-05-17 08:30:24 ~5 min android-e2e 🤖apk 📲
✔️ 3bcfdb5 #20 2024-05-17 08:36:43 ~12 min ios 📱ipa 📲

@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch 3 times, most recently from 7a0aac9 to 7e275d9 Compare April 15, 2024 09:37
@yqrashawn
Copy link
Contributor Author

yqrashawn commented Apr 15, 2024

pressed background color

CleanShot 2024-04-15 at 17 38 53

@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch from 7e275d9 to 8eb3358 Compare April 17, 2024 07:48
@yqrashawn yqrashawn marked this pull request as ready for review April 17, 2024 07:49
@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch from 8eb3358 to fadbd84 Compare April 18, 2024 11:18
Copy link
Contributor

@mohsen-ghafouri mohsen-ghafouri left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch 2 times, most recently from a13f47f to e0b759b Compare May 10, 2024 05:36
@yqrashawn
Copy link
Contributor Author

PR is ready for design review @Francesca-G

@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch from e0b759b to 3b49758 Compare May 10, 2024 05:46
Copy link

@Francesca-G Francesca-G left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Message is completely missing when I open the drawer:

Screenshot 2024-05-10 alle 09 11 37

@yqrashawn
Copy link
Contributor Author

Sorry for that. It's a bug already in dev branch and it's fixed now. @Francesca-G

Copy link

@Francesca-G Francesca-G left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, I only left a comment here about the message bottom spacing:

Screenshot 2024-05-10 alle 10 35 18

@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch from 19fdc1f to a25fe11 Compare May 13, 2024 06:46
@yqrashawn
Copy link
Contributor Author

@Francesca-G bottom spacing should be fixed now

@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch 2 times, most recently from b6c5a8d to d598d1f Compare May 13, 2024 14:21
@seanstrom
Copy link
Member

@yqrashawn yup yup I don't mind taking a look on my side 👍

One note about what I remember about aligning these icons is that we use the author component in a few areas:

  • Chats
  • Home contacts list
  • Home recent chats
  • Home group chats (I think?)

And it was tricky to get all of them to align correctly because they each use a slightly different layout that wrap the author component. So it might be worth checking that alignment is correct in those other areas 🙏

@seanstrom
Copy link
Member

@yqrashawn okay I took on my side, and I think the icon is almost aligned by maybe slightly mis-aligned.

Before (Develop) After (This Branch)
Before Alignment Tweaks After Alignment Tweaks

One note about what I remember about aligning these icons is that we use the author component in a few areas:

  • Chats
  • Home contacts list
  • Home recent chats
  • Home group chats (I think?)

And it was tricky to get all of them to align correctly because they each use a slightly different layout that wrap the author component. So it might be worth checking that alignment is correct in those other areas 🙏

Also here's some screenshots from the other related screens that I mentioned.

Name Screenshot
Home recent chats Home Recent Chats
Home contacts Home Contacts

@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch from 554f824 to 7cbddd1 Compare May 16, 2024 12:35
@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch from 7cbddd1 to 654d756 Compare May 17, 2024 08:20
Signed-off-by: yqrashawn <namy.19@gmail.com>
@yqrashawn yqrashawn force-pushed the fix/action-reaction-drawer branch from 654d756 to 3bcfdb5 Compare May 17, 2024 08:24
@mariia-skrypnyk
Copy link

Hi @yqrashawn @seanstrom !

Please, let me know when I can retest it again.

@yqrashawn
Copy link
Contributor Author

Hi @seanstrom, thanks for the detailed review.

I've updated the commit and not the component should be pixel perfect on both platform

  • Instead of adding negative margin to the container, I added it to the primary name, since that's the only part that exceeds the container height
  • The same primary name has different height on iOS and Android, so the negative margin depends on the platform
  • about align-items, baseline behaves different and center behaves identical on two platforms

@yqrashawn
Copy link
Contributor Author

Hi @mariia-skrypnyk, ready for retest

@mariia-skrypnyk
Copy link

@yqrashawn thanks.
Looks good for me, just wait for e2e test done and will move to @Francesca-G review.

@status-im-auto
Copy link
Member

85% of end-end tests have passed

Total executed tests: 52
Failed tests: 6
Expected to fail tests: 2
Passed tests: 44
IDs of failed tests: 727230,702859,702894,727229,703391,702807 
IDs of expected to fail tests: 703495,703503 

Failed tests (6)

Click to expand
  • Rerun failed tests

  • Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_send_image_save_and_share, id: 703391

    Device 2: Find `Button` by `accessibility id`: `image-0`
    Device 2: Click system back button

    critical/chats/test_1_1_public_chats.py:458: in test_1_1_chat_send_image_save_and_share
        self.errors.verify_no_errors()
    base_test_case.py:190: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Message about saving a photo is not shown for receiver.
    



    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_one_image_send_reply, id: 702859

    Device 2: Find EmojisNumber by xpath: //*[starts-with(@text,'reply to image')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']/../..//*[@content-desc='emoji-reaction-1']/android.widget.TextView[2]
    Device 2: Element EmojisNumber text is equal to 1

    critical/chats/test_public_chat_browsing.py:503: in test_community_one_image_send_reply
        self.errors.verify_no_errors()
    base_test_case.py:190: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Message about saving a photo is not shown.
    



    Device sessions

    2. test_community_contact_block_unblock_offline, id: 702894

    Device 2: Tap on found: Text
    Device 2: Find Text by xpath: //*[starts-with(@text,'Hurray! unblocked')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@content-desc='message-status']/android.widget.TextView

    critical/chats/test_public_chat_browsing.py:739: in test_community_contact_block_unblock_offline
        self.errors.verify_no_errors()
    base_test_case.py:190: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Message was not delivered after back up online.
    



    Device sessions

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_join_send_text_messages_push, id: 702807

    Device 2: Tap on found: Text
    Device 2: Find Text by xpath: //*[starts-with(@text,'Hey, admin!')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@content-desc='message-status']/android.widget.TextView

    critical/chats/test_group_chat.py:95: in test_group_chat_join_send_text_messages_push
        self.chats[1].chat_element_by_text(message_to_admin).wait_for_status_to_be('Delivered', timeout=120)
    ../views/chat_view.py:221: in wait_for_status_to_be
        current_status = self.status
    ../views/chat_view.py:209: in status
        status = status_element.text
    ../views/base_element.py:416: in text
        text = self.find_element().text
    ../views/base_element.py:79: in find_element
        raise NoSuchElementException(
     Device 2: Text by xpath: `//*[starts-with(@text,'Hey, admin!')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@content-desc='message-status']/android.widget.TextView` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception
    



    Device sessions

    Class TestWalletMultipleDevice:

    1. test_wallet_send_asset_from_drawer, id: 727230

    Device 1: Find Text by xpath: //android.view.ViewGroup[@content-desc='container']/android.widget.TextView[@text='Ether']/../android.widget.TextView[3]
    Device 1: Text is 0.98542 ETH

    critical/test_wallet.py:129: in test_wallet_send_asset_from_drawer
        self._check_balances_after_tx(amount_to_send, sender_balance, receiver_balance, eth_amount_sender,
    critical/test_wallet.py:100: in _check_balances_after_tx
        self.errors.verify_no_errors()
    base_test_case.py:190: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Eth amount in the receivers wallet is 0.0025 but should be 0.0026
    E    Eth amount in the senders wallet is 0.9854 but should be 0.9853
    



    2. test_wallet_send_eth, id: 727229

    Device 1: Find Text by xpath: //android.view.ViewGroup[@content-desc='container']/android.widget.TextView[@text='Ether']/../android.widget.TextView[3]
    Device 1: Text is 0.98542 ETH

    critical/test_wallet.py:114: in test_wallet_send_eth
        self._check_balances_after_tx(amount_to_send, sender_balance, receiver_balance, eth_amount_sender,
    critical/test_wallet.py:100: in _check_balances_after_tx
        self.errors.verify_no_errors()
    base_test_case.py:190: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Eth amount in the receivers wallet is 0.0025 but should be 0.0026
    E    Eth amount in the senders wallet is 0.9854 but should be 0.9853
    



    Expected to fail tests (2)

    Click to expand

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_mute_chat, id: 703495

    # STEP: Change device time so chat will be unmuted by timer
    Device 2: Long press on ChatElement

    critical/chats/test_group_chat.py:464: in test_group_chat_mute_chat
        self.errors.verify_no_errors()
    base_test_case.py:190: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Chat is still muted after timeout 
    

    [[Chat is not unmuted after expected time: https://github.com//issues/19627]]

    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_community_discovery, id: 703503

    Test is not run, e2e blocker  
    

    [[reason: [NOTRUN] Curated communities not loading, https://github.com//issues/17852]]

    Passed tests (44)

    Click to expand

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_pin_messages, id: 702732
    Device sessions

    2. test_group_chat_send_image_save_and_share, id: 703297
    Device sessions

    3. test_group_chat_reactions, id: 703202
    Device sessions

    4. test_group_chat_offline_pn, id: 702808
    Device sessions

    Class TestActivityMultipleDevicePRTwo:

    1. test_activity_center_mentions, id: 702957
    Device sessions

    2. test_activity_center_admin_notification_accept_swipe, id: 702958
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
    Device sessions

    2. test_1_1_chat_text_message_delete_push_disappear, id: 702733
    Device sessions

    3. test_1_1_chat_push_emoji, id: 702813
    Device sessions

    4. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    5. test_1_1_chat_edit_message, id: 702855
    Device sessions

    6. test_1_1_chat_pin_messages, id: 702731
    Device sessions

    7. test_1_1_chat_message_reaction, id: 702730
    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_add_contact_field_validation, id: 702777
    Device sessions

    2. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
    Device sessions

    3. test_activity_center_contact_request_decline, id: 702850
    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_several_images_send_reply, id: 703194
    Device sessions

    2. test_community_emoji_send_copy_paste_reply, id: 702840
    Device sessions

    3. test_community_mark_all_messages_as_read, id: 703086
    Device sessions

    4. test_community_edit_delete_message_when_offline, id: 704615
    Device sessions

    5. test_community_message_delete, id: 702839
    Device sessions

    6. test_community_message_send_check_timestamps_sender_username, id: 702838
    Device sessions

    7. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
    Device sessions

    8. test_community_message_edit, id: 702843
    Device sessions

    9. test_community_unread_messages_badge, id: 702841
    Device sessions

    Class TestWalletOneDevice:

    1. test_wallet_add_remove_regular_account, id: 727231
    Device sessions

    2. test_wallet_add_remove_watch_only_account, id: 727232
    Device sessions

    Class TestCommunityMultipleDeviceMergedTwo:

    1. test_community_markdown_support, id: 702809
    Device sessions

    2. test_community_hashtag_links_to_community_channels, id: 702948
    Device sessions

    3. test_community_mentions_push_notification, id: 702786
    Device sessions

    4. test_community_leave, id: 702845
    Device sessions

    5. test_community_join_when_node_owner_offline, id: 703629
    Device sessions

    Class TestActivityMultipleDevicePR:

    1. test_navigation_jump_to, id: 702936
    Device sessions

    2. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
    Device sessions

    Class TestDeepLinksOneDevice:

    1. test_links_open_universal_links_from_chat, id: 704613
    Device sessions

    2. test_links_deep_links, id: 702775
    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133
    Device sessions

    2. test_community_copy_and_paste_message_in_chat_input, id: 702742
    Device sessions

    3. test_community_undo_delete_message, id: 702869
    Device sessions

    4. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    5. test_community_mute_community_and_channel, id: 703382
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

    1. test_1_1_chat_delete_via_long_press_relogin, id: 702784
    Device sessions

    2. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
    Device sessions

    3. test_1_1_chat_mute_chat, id: 703496
    Device sessions

    @mariia-skrypnyk
    Copy link

    Failed e2e are not related.

    @yqrashawn yqrashawn merged commit cfe9d6e into develop May 17, 2024
    6 checks passed
    @yqrashawn yqrashawn deleted the fix/action-reaction-drawer branch May 17, 2024 12:12
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    Archived in project
    Archived in project
    Development

    Successfully merging this pull request may close these issues.

    Posts & Attachments - Reply drawer issues
    7 participants