Truncate secondary names in username and author components #19468

seanstrom · 2024-04-01T12:47:11Z

fixes #19397

Summary

This PR attempts to fix issues relating a user's secondary name not being truncated when displaying their nickname in the following UIs:
- Home chat list
- Home contact list
- 1-1 chats
- Contact profile
This PR modifies the quo/username and quo/author components to support shrinking the secondary name field when reaching the flex width of the UI.
This PR could skip-manual-qa since it mainly affect visual layouts.

Platforms

Android
iOS

Functional

1-1 chats
public chats
group chats
Contact profile
Home chat list
Home contact list

Steps to Reproduce

The key areas of impact and steps to reproduce are described here: #19397

Before and after screenshots comparison

Before

Screen.Recording.2024-04-01.at.12.53.02.mov

After

Screen.Recording.2024-04-01.at.13.38.01.mov

status: ready

status-im-auto · 2024-04-01T12:52:13Z

Jenkins Builds

Click to see older builds (8)

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`5b40991`	#1	2024-04-01 12:52:12	~4 min	`tests`	📄`log`
✔️	`5b40991`	#1	2024-04-01 12:53:57	~6 min	`android`	🤖`apk` 📲
✔️	`5b40991`	#1	2024-04-01 12:55:14	~7 min	`android-e2e`	🤖`apk` 📲
✔️	`5b40991`	#1	2024-04-01 12:57:47	~10 min	`ios`	📱`ipa` 📲

✔️	`3c5925e`	#3	2024-04-01 15:14:40	~4 min	`tests`	📄`log`
✔️	`3c5925e`	#3	2024-04-01 15:16:22	~5 min	`android`	🤖`apk` 📲
✔️	`3c5925e`	#3	2024-04-01 15:17:40	~7 min	`android-e2e`	🤖`apk` 📲
✔️	`3c5925e`	#3	2024-04-01 15:18:47	~8 min	`ios`	📱`ipa` 📲

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`7343e31`	#4	2024-04-01 17:52:31	~4 min	`tests`	📄`log`

✔️	`f200637`	#5	2024-04-01 17:57:40	~4 min	`tests`	📄`log`
✔️	`f200637`	#5	2024-04-01 17:59:30	~6 min	`android-e2e`	🤖`apk` 📲
✔️	`f200637`	#5	2024-04-01 18:00:49	~7 min	`android`	🤖`apk` 📲
✔️	`f200637`	#5	2024-04-01 18:02:02	~8 min	`ios`	📱`ipa` 📲

mohsen-ghafouri

LGTM just please check the alignment of contact icon in the list, it looks different

status-im-auto · 2024-04-01T14:26:32Z

94% of end-end tests have passed

Total executed tests: 48
Failed tests: 2
Expected to fail tests: 1
Passed tests: 45

IDs of failed tests: 702844,702843

IDs of expected to fail tests: 703503

Failed tests (2)

Click to expand

Rerun failed tests

Class TestCommunityMultipleDeviceMerged:

1. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
Device 2: Find `EmojisNumber` by `xpath`: `//[starts-with(@text,'https://m.youtube.com/watch?v=Je7yErjEVt4')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']/../..//[@content-desc='emoji-reaction-4']/android.widget.TextView[2]` Device 2: Element EmojisNumber text is equal to 1 `critical/chats/test_public_chat_browsing.py:611: in test_community_links_with_previews_github_youtube_twitter_gif_send_enable 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))])) No preview image is shown for https://github.com/status-im/status-mobile/pull/11707` Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot
2. test_community_message_edit, id: 702843
Device 2: Looking for a message by text: Message AFTER edit 2 (Edited) Device 2: Find `ChatElementByText` by `xpath`: `//[starts-with(@text,'Message AFTER edit 2 (Edited)')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` critical/chats/test_public_chat_browsing.py:353: in test_community_message_edit self.channel_2.set_reaction(message_text_after_edit) ../views/chat_view.py:1070: in set_reaction self.chat_element_by_text(message).long_press_until_element_is_shown(element) ../views/base_element.py:326: in long_press_until_element_is_shown element = self.find_element() ../views/chat_view.py:116: in find_element self.wait_for_visibility_of_element(20) ../views/base_element.py:147: in wait_for_visibility_of_element raise TimeoutException( Device 2: ChatElementByText by xpath:`//[starts-with(@text,'Message AFTER edit 2 (Edited)')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']` is not found on the screen after wait_for_visibility_of_element Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot

Expected to fail tests (1)

Click to expand

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 (45)

Click to expand

Class TestCommunityOneDeviceMerged:

1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133
Device sessions Device 1: Steps, video, logs
2. test_community_copy_and_paste_message_in_chat_input, id: 702742
Device sessions Device 1: Steps, video, logs
3. test_community_undo_delete_message, id: 702869
Device sessions Device 1: Steps, video, logs
4. test_community_navigate_to_channel_when_relaunch, id: 702846
Device sessions Device 1: Steps, video, logs
5. test_community_mute_community_and_channel, id: 703382
Device sessions Device 1: Steps, video, logs

Class TestDeepLinksOneDevice:

1. test_links_open_universal_links_from_chat, id: 704613
Device sessions Device 1: Steps, video, logs
2. test_links_deep_links, id: 702775
Device sessions Device 1: Steps, video, logs

Class TestActivityMultipleDevicePR:

1. test_navigation_jump_to, id: 702936
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestActivityMultipleDevicePRTwo:

1. test_activity_center_mentions, id: 702957
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

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_add_contact_field_validation, id: 702777
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. 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
3. test_activity_center_contact_request_decline, id: 702850
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_push_emoji, id: 702813
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. 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
5. test_1_1_chat_edit_message, id: 702855
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_1_1_chat_send_image_save_and_share, id: 703391
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_1_1_chat_pin_messages, id: 702731
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_1_1_chat_message_reaction, id: 702730
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

1. test_1_1_chat_delete_via_long_press_relogin, id: 702784
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. 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
3. test_1_1_chat_mute_chat, id: 703496
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
2. test_group_chat_mute_chat, id: 703495
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
3. 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
4. test_group_chat_reactions, id: 703202
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
5. 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
6. 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 TestCommunityMultipleDeviceMergedTwo:

1. test_community_markdown_support, id: 702809
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_community_hashtag_links_to_community_channels, id: 702948
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_community_mentions_push_notification, id: 702786
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_community_leave, id: 702845
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_community_join_when_node_owner_offline, id: 703629
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

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_mark_all_messages_as_read, id: 703086
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_community_contact_block_unblock_offline, id: 702894
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_community_edit_delete_message_when_offline, id: 704615
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_community_message_delete, id: 702839
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_community_message_send_check_timestamps_sender_username, id: 702838
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
9. test_community_unread_messages_badge, id: 702841
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

seanstrom · 2024-04-01T15:22:41Z

@mohsen-ghafouri good catch! I've been looking into how to correct this and it seems to be complicated. A good amount of layout styles are embedded in the quo/author component, and those styles configure how to align the different sized text based on the requested size. Meaning that some views need extra padding to align everything with the larger text, which makes a bit difficult to get everything cleanly aligned everywhere.

I've given it my best shot, and I think I've got to a good place, but more tinkering may be required to get everything tuned to the exact specs in the designs. One thought I had was to possibly separate each "element" of a component from the different layout components, and then allow quo/author component to receive layout component as props. Thoughts?

Here's some updated screenshots for the current alignments:

seanstrom · 2024-04-01T15:25:46Z

@status-im/mobile-qa can you review these E2E results please? 🙏

ulisesmac · 2024-04-01T16:05:16Z

Hi @seanstrom

I think we should ask for a design review once you believe you''ve matched the designs with the implementation.

I'd say it's ok to make all the changes needed in terms of layout to get the UI correct.

src/quo/components/messages/author/style.cljs

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

seanstrom · 2024-04-01T17:52:36Z

@ulisesmac Happy to do a design review, though this PR is trying to address issues with truncating secondary names. The alignments issues seem to be present in develop (unrelated to these changes I think), and I'd like to have a separate PR for re-constructing the quo/author component since that could be a fairly large change. Thoughts?

…ry-name can be truncated

… counter

…n counter

pavloburykh · 2024-04-01T19:03:27Z

@status-im/mobile-qa can you review these E2E results please? 🙏

Hey @seanstrom! Thank you for the PR. E2E failures are not PR related.

ulisesmac · 2024-04-01T19:58:43Z

@ulisesmac Happy to do a design review, though this PR is trying to address issues with truncating secondary names. The alignments issues seem to be present in develop (unrelated to these changes I think), and I'd like to have a separate PR for re-constructing the quo/author component since that could be a fairly large change. Thoughts?

oh ok, then it's ok. let's address it in a separate issue. thanks

seanstrom · 2024-04-02T07:09:53Z

Awesome! I'll start another PR for the alignment stuff and request design review there, thank you 🙏

seanstrom self-assigned this Apr 1, 2024

seanstrom requested review from mohsen-ghafouri and ulisesmac April 1, 2024 12:47

mohsen-ghafouri approved these changes Apr 1, 2024

View reviewed changes

seanstrom force-pushed the seanstrom/truncate-secondary-names branch from 8e4b4b1 to 3c5925e Compare April 1, 2024 15:10

ulisesmac reviewed Apr 1, 2024

View reviewed changes

src/quo/components/messages/author/style.cljs Show resolved Hide resolved

src/status_im/contexts/chat/home/chat_list_item/view.cljs Outdated Show resolved Hide resolved

src/status_im/contexts/chat/home/chat_list_item/view.cljs Outdated Show resolved Hide resolved

seanstrom added 8 commits April 1, 2024 18:53

fix: allow name-container inside message content to shrink so seconda…

29a2211

…ry-name can be truncated

fix: responsively truncate contact profile secondary-name

79a24d3

fix: ensure home chat-list-items use full available width in layout

8f149bf

fix: adjust layout of home chat-list-item shrinking with notification…

cd3d46f

… counter

fix: adjust layout of home chat-list-item when displaying notificatio…

ea932c8

…n counter

tidy: simplify alignment

9130327

tweak: adjust alignment of quo/author component for different text sizes

6a6a30c

tidy: extract styles and reformat notification-layout

f200637

seanstrom force-pushed the seanstrom/truncate-secondary-names branch from 7343e31 to f200637 Compare April 1, 2024 17:53

seanstrom requested a review from ulisesmac April 1, 2024 17:55

ulisesmac approved these changes Apr 1, 2024

View reviewed changes

seanstrom added the skip-manual-qa label Apr 2, 2024

seanstrom merged commit dd7795a into develop Apr 2, 2024
6 checks passed

seanstrom deleted the seanstrom/truncate-secondary-names branch April 2, 2024 07:14

seanstrom mentioned this pull request Apr 3, 2024

Tweak layout of quo/author component to use flex-baseline #19489

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Truncate secondary names in username and author components #19468

Truncate secondary names in username and author components #19468

seanstrom commented Apr 1, 2024 •

edited

Loading

status-im-auto commented Apr 1, 2024 •

edited

Loading

mohsen-ghafouri left a comment

status-im-auto commented Apr 1, 2024

Class TestCommunityMultipleDeviceMerged:

Class TestCommunityOneDeviceMerged:

Class TestCommunityOneDeviceMerged:

Class TestDeepLinksOneDevice:

Class TestActivityMultipleDevicePR:

Class TestActivityMultipleDevicePRTwo:

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityMultipleDeviceMergedTwo:

Class TestCommunityMultipleDeviceMerged:

seanstrom commented Apr 1, 2024 •

edited

Loading

seanstrom commented Apr 1, 2024

ulisesmac commented Apr 1, 2024

seanstrom commented Apr 1, 2024 •

edited

Loading

pavloburykh commented Apr 1, 2024

ulisesmac commented Apr 1, 2024

seanstrom commented Apr 2, 2024

Truncate secondary names in username and author components #19468

Truncate secondary names in username and author components #19468

Conversation

seanstrom commented Apr 1, 2024 • edited Loading

Summary

Platforms

Functional

Steps to Reproduce

Before and after screenshots comparison

Before

After

status-im-auto commented Apr 1, 2024 • edited Loading

Jenkins Builds

mohsen-ghafouri left a comment

Choose a reason for hiding this comment

status-im-auto commented Apr 1, 2024

94% of end-end tests have passed

Failed tests (2)

Class TestCommunityMultipleDeviceMerged:

Expected to fail tests (1)

Class TestCommunityOneDeviceMerged:

Passed tests (45)

Class TestCommunityOneDeviceMerged:

Class TestDeepLinksOneDevice:

Class TestActivityMultipleDevicePR:

Class TestActivityMultipleDevicePRTwo:

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityMultipleDeviceMergedTwo:

Class TestCommunityMultipleDeviceMerged:

seanstrom commented Apr 1, 2024 • edited Loading

seanstrom commented Apr 1, 2024

ulisesmac commented Apr 1, 2024

seanstrom commented Apr 1, 2024 • edited Loading

pavloburykh commented Apr 1, 2024

ulisesmac commented Apr 1, 2024

seanstrom commented Apr 2, 2024

seanstrom commented Apr 1, 2024 •

edited

Loading

status-im-auto commented Apr 1, 2024 •

edited

Loading

seanstrom commented Apr 1, 2024 •

edited

Loading

seanstrom commented Apr 1, 2024 •

edited

Loading