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

[#16577] Add missing context tags variants & fix API #16962

Merged
merged 1 commit into from
Aug 28, 2023

Conversation

ulisesmac
Copy link
Contributor

fixes #16577

Summary

This PR implements the missing variants of the context-tag variant and matches its API to figma.

image

Review notes

I noticed some other components are still incomplete:

  • preview-list lacked of 20 size
  • group-avatar lacked of 28 size
  • user-avatar lacked of 28 size

So I implemented them in order to have this PR working and pass design review, but these components should be checked in the same way I did it with this one.

Testing notes

The previous context-tag uses have been replaced by this new one reworked.

Platforms

  • Android
  • iOS

Steps to test

  • Open Status
  • Open quo2.preview -> tags -> context-tags
  • Check the variants.

status: ready

@ulisesmac ulisesmac self-assigned this Aug 9, 2023
@ulisesmac ulisesmac force-pushed the 16577-missing-context-tags-variants branch from 783cfe7 to 661ddce Compare August 9, 2023 23:37
@status-im-auto
Copy link
Member

status-im-auto commented Aug 9, 2023

Jenkins Builds

Click to see older builds (45)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 661ddce #2 2023-08-09 23:43:14 ~5 min android-e2e 🤖apk 📲
✔️ 661ddce #2 2023-08-09 23:44:45 ~7 min ios 📱ipa 📲
✔️ 661ddce #2 2023-08-09 23:45:35 ~7 min android 🤖apk 📲
✔️ 661ddce #2 2023-08-09 23:47:09 ~9 min tests 📄log
✔️ db65236 #3 2023-08-10 22:41:50 ~5 min android 🤖apk 📲
✔️ db65236 #3 2023-08-10 22:41:55 ~5 min android-e2e 🤖apk 📲
✔️ db65236 #3 2023-08-10 22:42:52 ~6 min ios 📱ipa 📲
✔️ db65236 #3 2023-08-10 22:44:58 ~8 min tests 📄log
d9e10e4 #4 2023-08-10 22:48:11 ~2 min tests 📄log
✔️ ec43f69 #5 2023-08-10 22:55:18 ~5 min android 🤖apk 📲
✔️ ec43f69 #5 2023-08-10 22:55:59 ~6 min android-e2e 🤖apk 📲
✔️ ec43f69 #5 2023-08-10 22:57:44 ~8 min ios 📱ipa 📲
✔️ ec43f69 #5 2023-08-10 23:01:24 ~11 min tests 📄log
1b42c9d #7 2023-08-14 19:55:16 ~2 min tests 📄log
✔️ 1b42c9d #7 2023-08-14 19:58:35 ~5 min android 🤖apk 📲
✔️ 1b42c9d #7 2023-08-14 19:58:55 ~5 min android-e2e 🤖apk 📲
✔️ 1b42c9d #7 2023-08-14 19:59:36 ~6 min ios 📱ipa 📲
✔️ bc168cb #8 2023-08-14 22:59:25 ~5 min android-e2e 🤖apk 📲
✔️ bc168cb #8 2023-08-14 22:59:34 ~5 min android 🤖apk 📲
✔️ bc168cb #8 2023-08-14 23:00:38 ~6 min ios 📱ipa 📲
✔️ bc168cb #8 2023-08-14 23:02:40 ~8 min tests 📄log
✔️ cfc74b5 #9 2023-08-18 20:58:50 ~5 min android-e2e 🤖apk 📲
✔️ cfc74b5 #9 2023-08-18 20:58:54 ~5 min android 🤖apk 📲
✔️ cfc74b5 #9 2023-08-18 21:00:34 ~7 min ios 📱ipa 📲
✔️ cfc74b5 #9 2023-08-18 21:02:07 ~8 min tests 📄log
✔️ 42501ac #10 2023-08-18 21:12:07 ~5 min android-e2e 🤖apk 📲
✔️ 42501ac #10 2023-08-18 21:12:10 ~5 min android 🤖apk 📲
✔️ 42501ac #10 2023-08-18 21:13:31 ~6 min ios 📱ipa 📲
✔️ 42501ac #10 2023-08-18 21:14:56 ~8 min tests 📄log
✔️ 2f83dab #12 2023-08-23 22:14:48 ~5 min android-e2e 🤖apk 📲
✔️ 2f83dab #12 2023-08-23 22:14:54 ~5 min android 🤖apk 📲
✔️ 2f83dab #12 2023-08-23 22:16:07 ~6 min ios 📱ipa 📲
✔️ 2f83dab #12 2023-08-23 22:18:00 ~8 min tests 📄log
✔️ 07e3b5f #16 2023-08-23 22:28:53 ~6 min android 🤖apk 📲
✔️ 07e3b5f #16 2023-08-23 22:28:53 ~6 min android-e2e 🤖apk 📲
✔️ 07e3b5f #16 2023-08-23 22:29:25 ~6 min ios 📱ipa 📲
✔️ 07e3b5f #16 2023-08-23 22:30:55 ~8 min tests 📄log
✔️ a41eeb1 #17 2023-08-26 00:14:25 ~5 min android-e2e 🤖apk 📲
✔️ a41eeb1 #17 2023-08-26 00:14:27 ~5 min android 🤖apk 📲
✔️ a41eeb1 #17 2023-08-26 00:16:26 ~7 min ios 📱ipa 📲
✔️ a41eeb1 #17 2023-08-26 00:17:34 ~8 min tests 📄log
801f8fb #18 2023-08-28 07:28:25 ~29 sec android-e2e 📄log
801f8fb #18 2023-08-28 07:28:25 ~29 sec android 📄log
801f8fb #18 2023-08-28 07:28:28 ~31 sec ios 📄log
801f8fb #18 2023-08-28 07:29:30 ~1 min tests 📄log
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ e393ef7 #19 2023-08-28 08:28:40 ~5 min android-e2e 🤖apk 📲
✔️ e393ef7 #19 2023-08-28 08:29:00 ~5 min android 🤖apk 📲
✔️ e393ef7 #19 2023-08-28 08:30:35 ~7 min ios 📱ipa 📲
✔️ 05602dd #20 2023-08-28 11:33:02 ~7 min android-e2e 🤖apk 📲
✔️ 05602dd #20 2023-08-28 11:34:25 ~8 min android 🤖apk 📲
✔️ 05602dd #20 2023-08-28 11:35:17 ~9 min tests 📄log
✔️ 05602dd #20 2023-08-28 11:35:58 ~10 min ios 📱ipa 📲

Copy link
Member

@smohamedjavid smohamedjavid left a comment

Choose a reason for hiding this comment

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

Nice work! 🚀 @ulisesmac

@ulisesmac ulisesmac force-pushed the 16577-missing-context-tags-variants branch from db65236 to d9e10e4 Compare August 10, 2023 22:45
@ulisesmac
Copy link
Contributor Author

@smohamedjavid @J-Son89 I have pushed changes according to your comments.

@@ -7,24 +7,27 @@

(def sizes
{:icon {:small 12
28 16
Copy link
Contributor

Choose a reason for hiding this comment

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

how possible would it be to update the other uses here and fix across the app so we're not mixing semantic names with integers? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As I wrote in this PR description:

So I implemented them in order to have this PR working and pass design review, but these components should be checked in the same way I did it with this one.

I meant, we need to refactor, add the missing sizes and fix the API of these components.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks, my bad for missing that!

:medium 32
:large 48}})

;; TODO: this implementation does not support group display picture (can only display default group
;; icon).
(defn- view-internal
[_]
(fn [{:keys [color size theme]}]
(fn [{:keys [color size theme icon-name]
Copy link
Contributor

Choose a reason for hiding this comment

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

can we change color to customization-color? or is that a follow up?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This PR already has a lot of changes related to the context-tag and its uses, adding even more to refactor surrounding components is too mucho IMO. I just touched the other components to add the required features, a separate issue for each one is required. I will create the issues

Copy link
Contributor

Choose a reason for hiding this comment

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

Yep I agree, thanks!

Copy link
Contributor

@J-Son89 J-Son89 left a comment

Choose a reason for hiding this comment

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

pr looks good, left a few comments if you can take a look at them 👍

@ulisesmac
Copy link
Contributor Author

After rebasing with develop, the variants relying on the user-avatar component:

  • Default
  • Multiuser
  • Multinetwork

are broken, I noticed also the preview-list component is broken (which is used for multiuser and multinetwork).
Instead of try to fix the user-avatar component in this PR, I opened an issue to address it and once it is solved in the entire app, use it for context-tags.

issue:

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 like the light blur theme is missing

@ulisesmac ulisesmac force-pushed the 16577-missing-context-tags-variants branch 4 times, most recently from edfb125 to cc65a01 Compare August 23, 2023 22:20
@ulisesmac
Copy link
Contributor Author

ulisesmac commented Aug 23, 2023

Looks like the light blur theme is missing

@Francesca-G The preview screen blur was not looking nice on iOS but on Android it looks better.
I fixed the preview blur bg for light theme on IOS, so could you please test it again?

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.

@ulisesmac all good :)

@status-im-auto
Copy link
Member

81% of end-end tests have passed

Total executed tests: 43
Failed tests: 8
Passed tests: 35
IDs of failed tests: 702732,702948,702783,703202,702786,702731,702808,702958 

Failed tests (8)

Click to expand
  • Rerun failed tests

  • Class TestActivityMultipleDevicePR:

    1. test_activity_center_admin_notification_accept_swipe, id: 702958

    Device 2: Click until `ActivityCenterElement` by `xpath`: `//*[contains(@text, 'user1')]/ancestor::*[@content-desc='activity']` will be presented
    Device 2: Find `Button` by `accessibility id`: `open-activity-center-button`

    medium/test_activity_center.py:315: in test_activity_center_admin_notification_accept_swipe
        self.home_2.clear_chat_long_press(self.username_1)
    ../views/home_view.py:519: in clear_chat_long_press
        self.get_chat(username).long_press_element()
    ../views/home_view.py:346: in get_chat
        chat_in_ac.wait_for_element(20)
    ../views/base_element.py:122: in wait_for_element
        raise TimeoutException(
     Device `2`: `ActivityCenterElement` by` xpath`: `//*[contains(@text, 'user1')]/ancestor::*[@content-desc='activity']` is not found on the screen after wait_for_element
    



    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783

    Device 2: Find Text by xpath: //*[starts-with(@text,'test message')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@content-desc='message-status']/android.widget.TextView
    Device 2: Text is Delivered

    critical/chats/test_1_1_public_chats.py:1377: in test_1_1_chat_is_shown_message_sent_delivered_from_offline
        self.errors.verify_no_errors()
    base_test_case.py:177: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Message was not delivered after resending from offline
    



    Device sessions

    2. 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]]

    2. test_group_chat_reactions, id: 703202

    Device 1: Find Button by accessibility id: authors-for-reaction-5
    Device 1: Tap on found: Button

    critical/chats/test_group_chat.py:344: in test_group_chat_reactions
        self.errors.verify_no_errors()
    base_test_case.py:177: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Incorrect reactions count for user admin after changing the reactions
    



    Device sessions

    3. 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:441: in test_group_chat_offline_pn
        self.errors.verify_no_errors()
    base_test_case.py:177: 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
    



    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_hashtag_links_to_community_channels, id: 702948

    # STEP: Device 1 sends a message with hashtag in the dogs channel
    Device 1: Sending message '#cats'

    critical/test_public_chat_browsing.py:1195: in test_community_hashtag_links_to_community_channels
        self.channel_1.send_message(message_with_hashtag)
    ../views/chat_view.py:988: in send_message
        self.chat_message_input.wait_for_element(wait_chat_input_sec)
    ../views/base_element.py:122: in wait_for_element
        raise TimeoutException(
     Device `1`: `ChatMessageInput` by` accessibility id`: `chat-message-input` is not found on the screen after wait_for_element
    



    Device sessions

    2. test_community_mentions_push_notification, id: 702786

    # STEP: Invited member gets push notification with the mention and tap it
    Device 2: Getting PN by 'user_2'

    critical/test_public_chat_browsing.py:1088: in test_community_mentions_push_notification
        self.errors.verify_no_errors()
    base_test_case.py:177: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Push notification with the mention was not received by admin
    E    Can not edit a message with a mention
    E    Push notification with the mention was not received by the invited member 
    

    [[Issue with username in PN, issue #6 in https://github.com//issues/15500]]

    Device sessions

    Passed tests (35)

    Click to expand

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_mute_chat, id: 703495
    Device sessions

    2. test_group_chat_send_image_save_and_share, id: 703297
    Device sessions

    3. test_group_chat_join_send_text_messages_push, id: 702807
    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_markdown_support, id: 702809
    Device sessions

    2. test_community_several_images_send_reply, id: 703194
    Device sessions

    3. test_community_one_image_send_reply, id: 702859
    Device sessions

    4. test_community_emoji_send_copy_paste_reply, id: 702840
    Device sessions

    5. test_community_mark_all_messages_as_read, id: 703086
    Device sessions

    6. test_community_contact_block_unblock_offline, id: 702894
    Device sessions

    7. test_community_message_delete, id: 702839
    Device sessions

    8. test_community_message_send_check_timestamps_sender_username, id: 702838
    Device sessions

    9. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
    Device sessions

    10. test_community_message_edit, id: 702843
    Device sessions

    11. test_community_leave, id: 702845
    Device sessions

    12. test_community_unread_messages_badge, id: 702841
    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_discovery, id: 703503
    Device sessions

    4. test_community_undo_delete_message, id: 702869
    Device sessions

    5. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    6. test_community_mute_community_and_channel, id: 703382
    Device sessions

    Class TestActivityMultipleDevicePR:

    1. test_activity_center_mentions, id: 702957
    Device sessions

    2. test_navigation_jump_to, id: 702936
    Device sessions

    3. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
    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_delete_via_long_press_relogin, id: 702784
    Device sessions

    4. test_1_1_chat_push_emoji, id: 702813
    Device sessions

    5. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    6. test_1_1_chat_mute_chat, id: 703496
    Device sessions

    7. test_1_1_chat_edit_message, id: 702855
    Device sessions

    8. test_1_1_chat_send_image_save_and_share, id: 703391
    Device sessions

    9. test_1_1_chat_message_reaction, id: 702730
    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

    @ulisesmac ulisesmac force-pushed the 16577-missing-context-tags-variants branch from 07e3b5f to a41eeb1 Compare August 26, 2023 00:08
    @J-Son89 J-Son89 force-pushed the 16577-missing-context-tags-variants branch from a41eeb1 to 801f8fb Compare August 28, 2023 07:27
    @J-Son89 J-Son89 self-assigned this Aug 28, 2023
    @J-Son89 J-Son89 force-pushed the 16577-missing-context-tags-variants branch from 801f8fb to e393ef7 Compare August 28, 2023 08:22
    @VolodLytvynenko VolodLytvynenko self-assigned this Aug 28, 2023
    @J-Son89
    Copy link
    Contributor

    J-Son89 commented Aug 28, 2023

    @VolodLytvynenko, @ulisesmac is on pto so I have taken over this branch. looks like you are in testing with it so let me know if any issues and I will address them :)

    1 similar comment
    @J-Son89
    Copy link
    Contributor

    J-Son89 commented Aug 28, 2023

    @VolodLytvynenko, @ulisesmac is on pto so I have taken over this branch. looks like you are in testing with it so let me know if any issues and I will address them :)

    @VolodLytvynenko
    Copy link
    Contributor

    Hi @ulisesmac thank you for PR. No issues from my side. PR can be merged

    Add icon-name to group avatar
    
    Add missing context-tags variants and fix the API to match figma
    
    Updates context-tag previous uses
    
    remove `nil nil` params
    
    Rename alias
    
    Remove theme/provider alias
    
    Lint fix
    
    add map style argument to style/container
    
    Fix code style
    
    Update use of group-avatar api
    
    Add issue for multinetwork variant
    
    Add issue for wroing text style
    @J-Son89 J-Son89 force-pushed the 16577-missing-context-tags-variants branch from e393ef7 to 05602dd Compare August 28, 2023 11:25
    @J-Son89 J-Son89 merged commit 255a3b9 into develop Aug 28, 2023
    2 checks passed
    @J-Son89 J-Son89 deleted the 16577-missing-context-tags-variants branch August 28, 2023 11:37
    andresceballosm pushed a commit to andresceballosm/status-mobile that referenced this pull request Aug 29, 2023
    Add icon-name to group avatar
    
    Add missing context-tags variants and fix the API to match figma
    
    Updates context-tag previous uses
    
    Update use of group-avatar api
    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.

    Create all missing context tag variants
    7 participants