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

Implement Quo2 Avatar /Wallet Avatar component #17703

Merged
merged 1 commit into from
Nov 2, 2023

Conversation

tumanov-alex
Copy link
Contributor

fixes #16608

Refactor the already existing component

Testing notes

  1. go to quo library
  2. find "avatars"
  3. press "wallet-user-avatar"

@tumanov-alex tumanov-alex self-assigned this Oct 20, 2023
@status-im-auto
Copy link
Member

status-im-auto commented Oct 20, 2023

Jenkins Builds

Click to see older builds (15)
Commit #️⃣ Finished (UTC) Duration Platform Result
15bf65b #1 2023-10-20 16:05:38 ~2 min tests 📄log
✔️ 15bf65b #1 2023-10-20 16:08:36 ~5 min android-e2e 🤖apk 📲
✔️ 15bf65b #1 2023-10-20 16:08:50 ~6 min android 🤖apk 📲
✔️ 15bf65b #1 2023-10-20 16:12:22 ~9 min ios 📱ipa 📲
431b797 #2 2023-10-30 12:46:33 ~2 min tests 📄log
✔️ 431b797 #2 2023-10-30 12:50:04 ~6 min android 🤖apk 📲
✔️ 431b797 #2 2023-10-30 12:50:18 ~6 min android-e2e 🤖apk 📲
✔️ d22ce23 #4 2023-10-30 14:06:19 ~5 min android-e2e 🤖apk 📲
✔️ d22ce23 #4 2023-10-30 14:06:45 ~6 min android 🤖apk 📲
✔️ d22ce23 #4 2023-10-30 14:10:49 ~10 min ios 📱ipa 📲
✔️ d22ce23 #4 2023-10-30 14:12:15 ~11 min tests 📄log
✔️ 0568f02 #6 2023-10-30 16:37:01 ~5 min android-e2e 🤖apk 📲
✔️ 0568f02 #6 2023-10-30 16:37:12 ~5 min android 🤖apk 📲
✔️ 0568f02 #6 2023-10-30 16:40:16 ~9 min tests 📄log
✔️ 0568f02 #6 2023-10-30 16:53:00 ~21 min ios 📱ipa 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 567aa79 #7 2023-11-02 16:59:11 ~5 min android-e2e 🤖apk 📲
✔️ 567aa79 #7 2023-11-02 17:01:31 ~7 min android 🤖apk 📲
✔️ 567aa79 #7 2023-11-02 17:03:04 ~9 min tests 📄log
✔️ 567aa79 #7 2023-11-02 17:15:06 ~21 min ios 📱ipa 📲
✔️ d86d6f4 #8 2023-11-02 19:18:21 ~6 min android 🤖apk 📲
✔️ d86d6f4 #8 2023-11-02 19:19:42 ~7 min android-e2e 🤖apk 📲
✔️ d86d6f4 #8 2023-11-02 19:21:31 ~9 min tests 📄log
✔️ d86d6f4 #8 2023-11-02 19:25:12 ~13 min ios 📱ipa 📲

Comment on lines 159 to 162
(def user-avatar quo.components.avatars.user-avatar.view/user-avatar)
(def wallet-user-avatar quo.components.avatars.wallet-user-avatar/wallet-user-avatar)
(def user-avatar quo.components.avatars.wallet-user-avatar.view/wallet-user-avatar)
Copy link
Member

Choose a reason for hiding this comment

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

There's a redefined variable here, is this intended?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed

@briansztamfater
Copy link
Member

Code looks good in general, but we should make sure we are not breaking other components or screens as there are some usages of quo.components.avatars.user-avatar.view and quo.components.avatars.wallet-user-avatar.view throughout the codebase

:text-align :center
:justify-content :center
:align-items :center
:background-color (circle-color customization-color)})
Copy link
Contributor

Choose a reason for hiding this comment

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

btw if you look closely at the designs, you will notice the last variant is not using customization-color - we need to make this the default for when no customization-color prop is set and this needs to be there for the designs.

Screenshot 2023-10-23 at 15 23 12 @briansztamfater recently added this but it seems to have been removed here 👍

@tumanov-alex tumanov-alex force-pushed the 16608-quo-wallet-avatar-component branch 2 times, most recently from b5b6ddb to d22ce23 Compare October 30, 2023 14:00
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 ✨

Minor issue to fix: size 24 should have 1 character only, just like size 20.
(The double-letter avatar should happen from 32px and up)

Screenshot 2023-10-30 alle 17 07 13 Screenshot 2023-10-30 alle 17 07 43

@tumanov-alex
Copy link
Contributor Author

@churik can we run this pr through e2e please?

@qoqobolo
Copy link
Contributor

qoqobolo commented Nov 1, 2023

can we run this pr through e2e please?

hey @tumanov-alex , thanks for the PR!
To run tests, you just need to drag the PR into the E2E tests column on the pipeline board 😉

@qoqobolo qoqobolo self-assigned this Nov 2, 2023
@status-im-auto
Copy link
Member

84% of end-end tests have passed

Total executed tests: 45
Failed tests: 4
Expected to fail tests: 3
Passed tests: 38
IDs of failed tests: 702786,702807,702813,702777 
IDs of expected to fail tests: 702731,702808,702732 

Failed tests (4)

Click to expand
  • Rerun failed tests

  • Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_join_send_text_messages_push, id: 702807

    Device 2: `Text` is `Delivered`
    Device 1: Looking for a message by text: Hey, admin!

    critical/chats/test_group_chat.py:97: in test_group_chat_join_send_text_messages_push
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Message Hey, admin! was not received by admin
    



    Device sessions

    Class TestCommunityMultipleDeviceMergedTwo:

    1. test_community_mentions_push_notification, id: 702786

    Device 2: Getting PN by 'user_2'
    Device 2: Looking for a message by text: user_2

    critical/chats/test_public_chat_browsing.py:897: in test_community_mentions_push_notification
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Channel did not open by clicking on a notification with the mention for admin
    E    Edited message is not shown correctly for the sender
    E    Edited message is not shown correctly for the (receiver) admin
    E    Channel did not open by clicking on a notification with the mention for the invited member
    



    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_add_contact_field_validation, id: 702777

    Device 2: Find Button by xpath: //*[@text="Paste"]
    Device 2: Tap on found: Button

    activity_center/test_activity_center.py:153: in test_add_contact_field_validation
        self.home_2.element_by_translation_id("user-found").wait_for_visibility_of_element(10)
    ../views/base_element.py:139: in wait_for_visibility_of_element
        raise TimeoutException(
     Device 2: Button by xpath:`//*[@text="User found"]` is not found on the screen after wait_for_visibility_of_element
    



    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_push_emoji, id: 702813

    Device 1: App to background
    Device 2: Sending message 'emoji'

    critical/chats/test_1_1_public_chats.py:345: in test_1_1_chat_push_emoji
        chat_2.send_message(emoji.emojize(emoji_message))
    ../views/chat_view.py:1001: in send_message
        self.chat_message_input.wait_for_element(wait_chat_input_sec)
    ../views/base_element.py:121: in wait_for_element
        raise TimeoutException(
     Device `2`: `ChatMessageInput` by` accessibility id`: `chat-message-input` is not found on the screen after wait_for_element
    



    Device sessions

    Expected to fail tests (3)

    Click to expand

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_offline_pn, id: 702808

    Device 3: Looking for a message by text: message from old member
    Device 3: Looking for a message by text: message from new member

    critical/chats/test_group_chat.py:323: in test_group_chat_offline_pn
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Messages PN was not fetched from offline 
    

    [[Data delivery issue]]

    Device sessions

    2. test_group_chat_pin_messages, id: 702732

    Test is not run, e2e blocker  
    

    [[reason: [NOTRUN] Pin feature is in development]]

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_pin_messages, id: 702731

    Test is not run, e2e blocker  
    

    [[reason: [NOTRUN] Pin feature is in development]]

    Passed tests (38)

    Click to expand

    Class TestActivityMultipleDevicePRTwo:

    1. test_activity_center_admin_notification_accept_swipe, id: 702958
    Device sessions

    2. test_activity_center_mentions, id: 702957
    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_emoji_send_copy_paste_reply, id: 702840
    Device sessions

    2. test_community_contact_block_unblock_offline, id: 702894
    Device sessions

    3. test_community_mark_all_messages_as_read, id: 703086
    Device sessions

    4. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
    Device sessions

    5. test_community_unread_messages_badge, id: 702841
    Device sessions

    6. test_community_message_delete, id: 702839
    Device sessions

    7. test_community_message_send_check_timestamps_sender_username, id: 702838
    Device sessions

    8. test_community_one_image_send_reply, id: 702859
    Device sessions

    9. test_community_message_edit, id: 702843
    Device sessions

    10. test_community_several_images_send_reply, id: 703194
    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
    Device sessions

    2. test_activity_center_contact_request_decline, id: 702850
    Device sessions

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_reactions, id: 703202
    Device sessions

    2. test_group_chat_send_image_save_and_share, id: 703297
    Device sessions

    3. test_group_chat_mute_chat, id: 703495
    Device sessions

    Class TestCommunityMultipleDeviceMergedTwo:

    1. test_community_leave, id: 702845
    Device sessions

    2. test_community_markdown_support, id: 702809
    Device sessions

    3. test_community_hashtag_links_to_community_channels, id: 702948
    Device sessions

    4. test_community_join_when_node_owner_offline, id: 703629
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

    1. test_1_1_chat_mute_chat, id: 703496
    Device sessions

    2. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
    Device sessions

    3. test_1_1_chat_delete_via_long_press_relogin, id: 702784
    Device sessions

    Class TestActivityMultipleDevicePR:

    1. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
    Device sessions

    2. test_navigation_jump_to, id: 702936
    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_community_copy_and_paste_message_in_chat_input, id: 702742
    Device sessions

    2. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    3. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133
    Device sessions

    4. test_community_undo_delete_message, id: 702869
    Device sessions

    5. test_community_mute_community_and_channel, id: 703382
    Device sessions

    6. test_community_discovery, id: 703503
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_edit_message, id: 702855
    Device sessions

    2. test_1_1_chat_message_reaction, id: 702730
    Device sessions

    3. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    4. test_1_1_chat_text_message_delete_push_disappear, id: 702733
    Device sessions

    5. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
    Device sessions

    6. test_1_1_chat_send_image_save_and_share, id: 703391
    Device sessions

    @status-im-auto
    Copy link
    Member

    0% of end-end tests have passed

    Total executed tests: 4
    Failed tests: 4
    Expected to fail tests: 0
    Passed tests: 0
    
    IDs of failed tests: 702786,702807,702813,702777 
    

    Failed tests (4)

    Click to expand
  • Rerun failed tests

  • Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_join_send_text_messages_push, id: 702807

    Device 2: `Text` is `Delivered`
    Device 1: Looking for a message by text: Hey, admin!

    critical/chats/test_group_chat.py:97: in test_group_chat_join_send_text_messages_push
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Message Hey, admin! was not received by admin
    



    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_add_contact_field_validation, id: 702777

    ## Creating new multiaccount (password:'qwerty1234', keycard:'False', enable_notification: 'False')
    Device 2: Find Button by accessibility id: show-new-account-options

    activity_center/test_activity_center.py:145: in test_add_contact_field_validation
        self.device_2.create_user(third_user=True, username=new_username_2)
    ../views/sign_in_view.py:232: in create_user
        self.plus_profiles_button.click()
    ../views/base_element.py:90: in click
        self.find_element().click()
    ../views/base_element.py:79: in find_element
        raise NoSuchElementException(
     Device 2: Button by accessibility id: `show-new-account-options` 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 TestCommunityMultipleDeviceMergedTwo:

    1. test_community_mentions_push_notification, id: 702786

    Device 2: Getting PN by 'user_2'
    Device 2: Looking for a message by text: user_2

    critical/chats/test_public_chat_browsing.py:902: in test_community_mentions_push_notification
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Channel did not open by clicking on a notification with the mention for admin
    E    Channel did not open by clicking on a notification with the mention for the invited member
    



    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_push_emoji, id: 702813

    Device 1: App to background
    Device 2: Sending message 'emoji'

    critical/chats/test_1_1_public_chats.py:345: in test_1_1_chat_push_emoji
        chat_2.send_message(emoji.emojize(emoji_message))
    ../views/chat_view.py:1001: in send_message
        self.chat_message_input.wait_for_element(wait_chat_input_sec)
    ../views/base_element.py:121: in wait_for_element
        raise TimeoutException(
     Device `2`: `ChatMessageInput` by` accessibility id`: `chat-message-input` is not found on the screen after wait_for_element
    



    Device sessions

    @qoqobolo
    Copy link
    Contributor

    qoqobolo commented Nov 2, 2023

    Hey @tumanov-alex, thanks for your work!
    LGTM, the e2e failures are not related to PR, it can be merged.

    The only thing I noticed is that an error appears when you clear the Size value.
    But the same thing happens on nightly, so it's not an issue of this PR, just FYI.

    video_2023-11-02_16-29-33.mp4

    Rewrite docs
    Use get-initials utility
    
    Move wallet-user-avatar to a separate folder (to conform with other adjacent components)
                          Add tests
                          Refactor to reflect conventions
    
    Fix lint
    
    Fix lint
    
    Fix color usage
    
    Change "color" to "customization-color"
    Remove extra props
    Refactor component properties object
    
    Update color usage to comply with the latest conventions
    
    Use correct color for circle-color
    Fix require to follow conventions
    
    Fix tests
    
    Remove extra code
    Do refactor
    
    Refactor
    
    Add new changes
    
    Simplify two lines
    
    Simplify two lines
    
    Move folder into quo
    
    Fix paths
    
    fix require line
    
    Use one letters instead of two for size 24
    @tumanov-alex tumanov-alex force-pushed the 16608-quo-wallet-avatar-component branch from 567aa79 to d86d6f4 Compare November 2, 2023 19:11
    @J-Son89 J-Son89 merged commit 0eef520 into develop Nov 2, 2023
    6 checks passed
    @J-Son89 J-Son89 deleted the 16608-quo-wallet-avatar-component branch November 2, 2023 19:29
    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.

    Implement Quo2 Avatar /Wallet Avatar component
    6 participants