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

feat: new keycard component #15892

Merged

Conversation

codemaster115
Copy link
Contributor

fixes #15823

Summary

New Keycard component per design

Review notes

New component by given figma design

  • Created a keycard component in quo2/components folder by given structure and best practices.
  • Blur variant design is still out of scope.
  • Still missing watermark asset. I will upgrade it and restyle it after receive.

Testing notes

There's a preview screen for the component

status: wip

@status-github-bot
Copy link

Hey @codemaster115, and thank you so much for making your first pull request in status-mobile! ❤️ Please help us make your experience better by filling out this brief questionnaire https://goo.gl/forms/uWqNcVpVz7OIopXg2

@status-im-auto
Copy link
Member

status-im-auto commented May 12, 2023

Jenkins Builds

Click to see older builds (16)
Commit #️⃣ Finished (UTC) Duration Platform Result
407cec3 #1 2023-05-12 20:41:42 ~4 min tests 📄log
✔️ 407cec3 #1 2023-05-12 20:42:37 ~5 min android 🤖apk 📲
✔️ 407cec3 #1 2023-05-12 20:42:48 ~6 min android-e2e 🤖apk 📲
✔️ 407cec3 #1 2023-05-12 20:45:36 ~8 min ios 📱ipa 📲
255048f #2 2023-05-14 23:09:31 ~3 min tests 📄log
✔️ 255048f #2 2023-05-14 23:11:26 ~5 min android-e2e 🤖apk 📲
✔️ 255048f #2 2023-05-14 23:11:49 ~6 min android 🤖apk 📲
✔️ 255048f #2 2023-05-14 23:14:10 ~8 min ios 📱ipa 📲
e5e5fd6 #3 2023-05-14 23:19:15 ~4 min tests 📄log
✔️ e5e5fd6 #3 2023-05-14 23:19:46 ~5 min android 🤖apk 📲
✔️ e5e5fd6 #3 2023-05-14 23:20:19 ~6 min android-e2e 🤖apk 📲
✔️ e5e5fd6 #3 2023-05-14 23:20:28 ~6 min ios 📱ipa 📲
0a1ebb2 #5 2023-05-15 13:29:54 ~5 min tests 📄log
✔️ 0a1ebb2 #5 2023-05-15 13:32:52 ~8 min android 🤖apk 📲
✔️ 0a1ebb2 #5 2023-05-15 13:32:58 ~8 min ios 📱ipa 📲
✔️ 0a1ebb2 #5 2023-05-15 13:32:59 ~8 min android-e2e 🤖apk 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ c05332c #6 2023-05-15 13:49:47 ~8 min android 🤖apk 📲
✔️ c05332c #6 2023-05-15 13:51:32 ~10 min android-e2e 🤖apk 📲
✔️ c05332c #6 2023-05-15 13:52:34 ~10 min tests 📄log
✔️ c05332c #6 2023-05-15 13:57:55 ~16 min ios 📱ipa 📲
✔️ bb20a7d #7 2023-05-16 11:41:07 ~6 min ios 📱ipa 📲
✔️ bb20a7d #7 2023-05-16 11:41:44 ~7 min android-e2e 🤖apk 📲
✔️ bb20a7d #7 2023-05-16 11:42:07 ~7 min android 🤖apk 📲

Copy link
Member

@flexsurfer flexsurfer left a comment

Choose a reason for hiding this comment

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

thank you for your contribution

ios/Podfile.lock Outdated Show resolved Hide resolved
[quo2.components.keycard.style :as style]
[quo2.components.tags.tag :as tag]
[quo2.foundations.colors :as colors]
[status-im2.common.resources :as resources]
Copy link
Member

Choose a reason for hiding this comment

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

quo shouldn't know about status-im, so there are two ways

  1. move component to common
  2. move resources outside status-im
    @ilmotta @J-Son89 @ulisesmac wdyt?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, I agree. I think we should make another resources file in src/quo2 as well. 👍

Copy link
Contributor

Choose a reason for hiding this comment

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

I agree with @J-Son89, sounds good 👍

Copy link
Contributor

Choose a reason for hiding this comment

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

Up until this point we have been also passing assets/resources as props, so that's also an alternative to avoid coupling status-im2 concerns. But I like @J-Son89's idea too.

@@ -1687,6 +1687,8 @@
"database-reset-content": "Chats, contacts and settings have been deleted. You can use your account with your Keycard",
"database-reset-warning": "Database will be reset. Chats, contacts and settings will be deleted",
"empty-keycard-required": "Requires an empty Keycard",
"empty-keycard": "Empty Keycard",
"user-keycard": "{{name}} Card",
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this actually what the designers envisioned or should it just be the users name? cc @xAlisher

(-> (h/expect (h/query-by-label-text :holder-name))
(h/is-equal (i18n/label :t/user-keycard {:name :holder-name}))))

(h/test "Render of keycard component when: Status = Filled, Locked = True"
Copy link
Contributor

Choose a reason for hiding this comment

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

this last test is missing a prop to make it locked and the evaluators in the test do not check for any locked properties.

Copy link
Contributor

@ulisesmac ulisesmac left a comment

Choose a reason for hiding this comment

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

Thank you so much for this PR!

It looks good to me 👍 😃

[quo2.components.keycard.style :as style]
[quo2.components.tags.tag :as tag]
[quo2.foundations.colors :as colors]
[status-im2.common.resources :as resources]
Copy link
Contributor

Choose a reason for hiding this comment

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

I agree with @J-Son89, sounds good 👍

Copy link
Contributor

@OmarBasem OmarBasem left a comment

Choose a reason for hiding this comment

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

Good work. LGTM!

Comment on lines +28 to +37
(defn preview-keycard
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])
Copy link
Contributor

Choose a reason for hiding this comment

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

I think rn/view can be removed and apply the background-color to flat-list ?

Copy link
Member

@flexsurfer flexsurfer left a comment

Choose a reason for hiding this comment

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

great job, thank you

@flexsurfer
Copy link
Member

pls run make lint-fix

[2023-05-15T13:25:22.047Z] Formatting required in file src/quo2/foundations/resources.cljs

[2023-05-15T13:25:56.626Z] Processed 1105 files, 1 of which requires formatting.

ios/Podfile.lock Outdated Show resolved Hide resolved
@J-Son89
Copy link
Contributor

J-Son89 commented May 15, 2023

BTW: This pr does not need QA as it is only new code in the quo2 component library and not touching application code.

@status-im-auto
Copy link
Member

85% of end-end tests have passed

Total executed tests: 27
Failed tests: 4
Passed tests: 23
Not executed tests: 4
IDs of not executed tests: 702936,702947,702957,702958 
IDs of failed tests: 702786,702807,702838,702813 

Not executed tests (4)

Click to expand
  • Rerun not executed tests
  • 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:228: in test_group_chat_join_send_text_messages_push
        self.errors.verify_no_errors()
    base_test_case.py:184: 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 
    

    [[blocked by 15859]]

    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_push_emoji, id: 702813

    # STEP: Send emoji message to Device 1 while it's on background
    Device 2: Sending message 'emoji'

    critical/chats/test_1_1_public_chats.py:1172: in test_1_1_chat_push_emoji
        chat_2.send_message(emoji.emojize(emoji_message))
    ../views/chat_view.py:937: in send_message
        self.chat_message_input.wait_for_element(wait_chat_input_sec)
    ../views/base_element.py:117: 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 
    

    [[blocked by 15859]]

    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_mentions_push_notification, id: 702786

    Device 1: Tap on found: Button
    Device 1: Looking for a message by text: user_1

    critical/test_public_chat_browsing.py:759: in test_community_mentions_push_notification
        self.errors.verify_no_errors()
    base_test_case.py:184: 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 
    

    [[blocked by 15859]]

    Device sessions

    2. test_community_message_send_check_timestamps_sender_username, id: 702838

    Device 2: Verifying that 'hello' is under today
    Device 2: Looking for a message by text: hello

    critical/test_public_chat_browsing.py:456: in test_community_message_send_check_timestamps_sender_username
        channel.verify_message_is_under_today_text(message, self.errors)
    ../views/chat_view.py:927: in verify_message_is_under_today_text
        message_element.wait_for_visibility_of_element()
    ../views/base_element.py:135: in wait_for_visibility_of_element
        raise TimeoutException(
     Device 2: ChatElementByText by xpath:`//*[starts-with(@text,'hello')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` is not found on the screen after wait_for_visibility_of_element 
    

    [[blocked by 14797]]

    Device sessions

    Passed tests (23)

    Click to expand

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_emoji_send_copy_paste_reply, id: 702840
    Device sessions

    2. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
    Device sessions

    3. test_community_contact_block_unblock_offline, id: 702894
    Device sessions

    4. test_community_leave, id: 702845
    Device sessions

    5. test_community_unread_messages_badge, id: 702841
    Device sessions

    6. test_community_message_delete, id: 702839
    Device sessions

    7. test_community_mark_all_messages_as_read, id: 703086
    Device sessions

    8. test_community_message_edit, id: 702843
    Device sessions

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_pin_messages, id: 702732
    Device sessions

    2. test_group_chat_offline_pn, id: 702808
    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    2. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133
    Device sessions

    3. test_community_copy_and_paste_message_in_chat_input, id: 702742
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_text_message_delete_push_disappear, id: 702733
    Device sessions

    2. test_1_1_chat_edit_message, id: 702855
    Device sessions

    3. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    4. test_1_1_chat_message_reaction, id: 702730
    Device sessions

    5. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
    Device sessions

    6. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
    Device sessions

    7. test_1_1_chat_pin_messages, id: 702731
    Device sessions

    8. test_1_1_chat_delete_via_long_press_relogin, id: 702784
    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_activity_center_contact_request_decline, id: 702850
    Device sessions

    2. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
    Device sessions

    @flexsurfer flexsurfer merged commit 369aed3 into status-im:develop May 16, 2023
    @J-Son89 J-Son89 mentioned this pull request May 16, 2023
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Labels
    Projects
    No open projects
    Archived in project
    Development

    Successfully merging this pull request may close these issues.

    Keycard component - create quo2 component
    8 participants