From 0911e4dee7035d1378b708f5baa9f6734284dee6 Mon Sep 17 00:00:00 2001 From: M-ZubairAhmed Date: Wed, 15 May 2024 07:35:25 +0000 Subject: [PATCH] [MM-57383] User profile popover performance improved and redesigned (#26420) --- .../accessibility/accessibility_image_spec.js | 7 +- .../accessibility/accessibility_post_spec.js | 12 +- .../profile/account_settings_position_spec.ts | 2 +- .../profile/fullname_truncate_spec.ts | 5 +- .../account_settings/profile/username_spec.ts | 4 +- .../bot_accounts/display_name_spec.js | 4 +- .../add_users_to_channel_spec.ts | 5 +- .../custom_status_expiry_2_spec.ts | 4 +- .../guest_experience_ui_spec.ts | 6 +- .../guest_identification_ui_spec.ts | 3 +- .../profile_popover_spec_user_a_b_spec.ts | 2 +- .../inapp_username_profile_override_spec.js | 2 +- .../messaging/mobile_profile_popover_spec.js | 4 +- .../channels/scroll/fixed_width_spec.js | 19 +- .../admin_user_card.test.tsx.snap | 20 +- .../__snapshots__/at_mention.test.tsx.snap | 375 +- .../components/at_mention/at_mention.test.tsx | 1 + .../src/components/at_mention/at_mention.tsx | 210 +- .../src/components/at_mention/index.tsx | 6 +- .../channel_info_rhs/about_area_dm.tsx | 1 - .../channel_info_rhs/about_area_gm.test.tsx | 2 +- .../channel_info_rhs/about_area_gm.tsx | 2 - .../components/channel_members_rhs/member.tsx | 161 +- .../__snapshots__/panel_body.test.tsx.snap | 816 ++-- .../src/components/post/user_profile.tsx | 7 - .../post_edit_history.test.tsx.snap | 1 - .../post_profile_picture.test.tsx | 3 +- .../post_profile_picture.tsx | 3 - .../channel_intro_message.test.tsx | 4 +- .../channel_intro_message.tsx | 2 - .../__snapshots__/commented_on.test.tsx.snap | 7 - .../post_view/commented_on/commented_on.tsx | 1 - .../profile_picture.test.tsx.snap | 63 +- .../src/components/profile_picture/index.tsx | 101 + .../profile_picture/profile_picture.scss | 3 - .../profile_picture/profile_picture.tsx | 136 - .../index.ts | 4 +- .../src/components/profile_popover/index.tsx | 335 -- .../profile_popover/profile_popover.scss | 297 +- ...ndex.test.tsx => profile_popover.test.tsx} | 2 +- .../profile_popover/profile_popover.tsx | 242 + ...tsx => profile_popover_add_to_channel.tsx} | 50 +- .../profile_popover_bot_description.tsx | 25 + .../index.test.tsx} | 2 +- .../index.tsx} | 4 +- .../profile_popover_call_button_wrapper.scss | 6 + .../profile_popover_calls_button}/index.tsx | 0 .../profile_popover_call_button.tsx | 1 - .../profile_popover_controller.tsx | 162 + .../profile_popover_custom_status.tsx | 24 +- .../profile_popover/profile_popover_email.tsx | 15 +- ...name.tsx => profile_popover_full_name.tsx} | 12 +- .../index.tsx => profile_popover_name.tsx} | 27 +- .../profile_popover_name/bot_description.tsx | 26 - .../profile_popover_name/position.tsx | 30 - ...tsx => profile_popover_other_user_row.tsx} | 37 +- .../profile_popover_override_disclaimer.tsx | 25 +- .../profile_popover_position.tsx | 29 + ....tsx => profile_popover_self_user_row.tsx} | 55 +- ...ezone.tsx => profile_popover_timezone.tsx} | 95 +- .../profile_popover/profile_popover_title.tsx | 62 +- ...name.tsx => profile_popover_user_name.tsx} | 15 +- .../sidebar_direct_channel.test.tsx.snap | 9 - .../at_mention_suggestion.test.tsx.snap | 2 - .../at_mention_suggestion.tsx | 1 - .../suggestion/search_user_provider.tsx | 1 - .../__snapshots__/thread_footer.test.tsx.snap | 1192 ++--- .../user_group_popover.test.tsx.snap | 3944 ++++++++--------- .../user_group_popover/constants.ts | 3 + .../group_member_list.test.tsx.snap | 435 +- .../group_member_list/group_member_list.tsx | 36 +- .../components/user_group_popover/index.ts | 33 +- .../user_group_popover/useShouldClose.ts | 25 - .../user_group_popover.scss | 5 + .../user_group_popover.test.tsx | 44 - .../user_group_popover/user_group_popover.tsx | 231 +- .../user_group_popover_controller.tsx | 112 + .../user_list_row/user_list_row.tsx | 1 - .../__snapshots__/user_profile.test.tsx.snap | 151 +- .../src/components/user_profile/index.ts | 22 +- .../user_profile/user_profile.test.tsx | 2 + .../components/user_profile/user_profile.tsx | 208 +- .../view_user_group_modal.scss | 1 + .../avatar/__snapshots__/avatar.test.tsx.snap | 2 - .../widgets/users/avatar/avatar.tsx | 28 +- .../__snapshots__/avatars.test.tsx.snap | 1754 ++------ .../widgets/users/avatars/avatars.test.tsx | 6 +- .../widgets/users/avatars/avatars.tsx | 126 +- webapp/channels/src/i18n/en.json | 10 +- .../src/sass/components/_buttons.scss | 4 + .../src/sass/components/_popover.scss | 106 - 91 files changed, 4932 insertions(+), 7148 deletions(-) create mode 100644 webapp/channels/src/components/profile_picture/index.tsx delete mode 100644 webapp/channels/src/components/profile_picture/profile_picture.scss delete mode 100644 webapp/channels/src/components/profile_picture/profile_picture.tsx rename webapp/channels/src/components/{profile_picture => profile_popover}/index.ts (50%) delete mode 100644 webapp/channels/src/components/profile_popover/index.tsx rename webapp/channels/src/components/profile_popover/{index.test.tsx => profile_popover.test.tsx} (99%) create mode 100644 webapp/channels/src/components/profile_popover/profile_popover.tsx rename webapp/channels/src/components/profile_popover/{profile_popover_actions/add_to_channel.tsx => profile_popover_add_to_channel.tsx} (65%) create mode 100644 webapp/channels/src/components/profile_popover/profile_popover_bot_description.tsx rename webapp/channels/src/components/profile_popover/{profile_popover_actions/call_button.test.tsx => profile_popover_call_button_wrapper/index.test.tsx} (97%) rename webapp/channels/src/components/profile_popover/{profile_popover_actions/call_button.tsx => profile_popover_call_button_wrapper/index.tsx} (96%) create mode 100644 webapp/channels/src/components/profile_popover/profile_popover_call_button_wrapper/profile_popover_call_button_wrapper.scss rename webapp/channels/src/components/{profile_popover_call_button => profile_popover/profile_popover_calls_button}/index.tsx (100%) rename webapp/channels/src/components/{profile_popover_call_button => profile_popover/profile_popover_calls_button}/profile_popover_call_button.tsx (97%) create mode 100644 webapp/channels/src/components/profile_popover/profile_popover_controller.tsx rename webapp/channels/src/components/profile_popover/{profile_popover_name/full_name.tsx => profile_popover_full_name.tsx} (79%) rename webapp/channels/src/components/profile_popover/{profile_popover_name/index.tsx => profile_popover_name.tsx} (53%) delete mode 100644 webapp/channels/src/components/profile_popover/profile_popover_name/bot_description.tsx delete mode 100644 webapp/channels/src/components/profile_popover/profile_popover_name/position.tsx rename webapp/channels/src/components/profile_popover/{profile_popover_actions/index.tsx => profile_popover_other_user_row.tsx} (63%) create mode 100644 webapp/channels/src/components/profile_popover/profile_popover_position.tsx rename webapp/channels/src/components/profile_popover/{profile_popover_edit.tsx => profile_popover_self_user_row.tsx} (58%) rename webapp/channels/src/components/profile_popover/{profile_timezone.tsx => profile_popover_timezone.tsx} (50%) rename webapp/channels/src/components/profile_popover/{profile_popover_name/user_name.tsx => profile_popover_user_name.tsx} (57%) delete mode 100644 webapp/channels/src/components/user_group_popover/useShouldClose.ts create mode 100644 webapp/channels/src/components/user_group_popover/user_group_popover_controller.tsx diff --git a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_image_spec.js b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_image_spec.js index 070d806477..c5963ef7e1 100644 --- a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_image_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_image_spec.js @@ -50,15 +50,18 @@ describe('Verify Accessibility Support in Different Images', () => { // # Open profile popover cy.getLastPostId().then((postId) => { cy.get(`#post_${postId}`).within(() => { - cy.get('.user-popover').click(); + cy.get('.status-wrapper').click(); }); // * Verify image alt in profile popover - cy.get('#user-profile-popover').within(() => { + cy.get('.user-profile-popover').within(() => { cy.get('.Avatar').should('have.attr', 'alt', `${otherUser.username} profile image`); }); }); + // # Close the profile popover + cy.get('body').click(); + // # Open Settings > Display > Themes cy.uiOpenSettingsModal('Display').within(() => { cy.get('#displayButton').click(); diff --git a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js index 3d6cf80930..624042d564 100644 --- a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js @@ -167,7 +167,7 @@ describe('Verify Accessibility Support in Post', () => { cy.focused().tab(); // * Verify focus is on the username - cy.get('button.user-popover').should('be.focused').and('have.attr', 'aria-label', otherUser.username); + cy.get('button.user-popover').should('be.focused'); cy.focused().tab(); // * Verify focus is on the time @@ -188,10 +188,6 @@ describe('Verify Accessibility Support in Post', () => { cy.get(`#CENTER_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message'); cy.focused().tab(); - // * Verify focus is on message actions button - cy.get(`#CENTER_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions'); - cy.focused().tab(); - // * Verify focus is on the comment button cy.get(`#CENTER_commentIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'reply'); cy.focused().tab(); @@ -238,10 +234,6 @@ describe('Verify Accessibility Support in Post', () => { cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more'); cy.focused().tab({shift: true}); - // * Verify focus is on message actions button - cy.get(`#RHS_COMMENT_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions'); - cy.focused().tab({shift: true}); - // * Verify focus is on the save icon cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message'); cy.focused().tab({shift: true}); @@ -259,7 +251,7 @@ describe('Verify Accessibility Support in Post', () => { cy.focused().tab({shift: true}); // * Verify focus is on the username - cy.get('button.user-popover').should('be.focused').and('have.attr', 'aria-label', otherUser.username); + cy.get('button.user-popover').should('be.focused'); cy.focused().tab({shift: true}); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/account_settings/profile/account_settings_position_spec.ts b/e2e-tests/cypress/tests/integration/channels/account_settings/profile/account_settings_position_spec.ts index ca9c602388..4f8e01eeb4 100644 --- a/e2e-tests/cypress/tests/integration/channels/account_settings/profile/account_settings_position_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/account_settings/profile/account_settings_position_spec.ts @@ -45,7 +45,7 @@ describe('Profile > Profile Settings > Position', () => { cy.get('.profile-icon > img').as('profileIconForPopover').click(); // # Verify that the popover is visible and contains position - cy.contains('#user-profile-popover', position).should('be.visible'); + cy.contains('div.user-profile-popover', position).should('be.visible'); }); it('MM-T2064 Position / 128 characters', () => { diff --git a/e2e-tests/cypress/tests/integration/channels/account_settings/profile/fullname_truncate_spec.ts b/e2e-tests/cypress/tests/integration/channels/account_settings/profile/fullname_truncate_spec.ts index 78a0f2a8b2..1f9a900c8d 100644 --- a/e2e-tests/cypress/tests/integration/channels/account_settings/profile/fullname_truncate_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/account_settings/profile/fullname_truncate_spec.ts @@ -60,10 +60,11 @@ describe('Profile > Profile Settings> Full Name', () => { cy.getLastPostId().then((postId) => { cy.get(`#post_${postId}`).should('be.visible'); cy.get(`#post_${postId} img`).click(); - cy.get('#user-profile-popover').should('be.visible'); + cy.get('div.user-profile-popover').should('be.visible'); + cy.get('button.closeButtonRelativePosition').click(); // * Popover user name should show truncated to 'This Is a Long Name That Should Tr...' - cy.findByTestId(`popover-fullname-${firstUser.username}`).should('have.css', 'text-overflow', 'ellipsis'); + cy.findByTestId(`popover-fullname-${firstUser.username}`).should('have.css', 'text-overflow', 'clip'); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/account_settings/profile/username_spec.ts b/e2e-tests/cypress/tests/integration/channels/account_settings/profile/username_spec.ts index ff3f9d16d5..7fe8a4d767 100644 --- a/e2e-tests/cypress/tests/integration/channels/account_settings/profile/username_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/account_settings/profile/username_spec.ts @@ -205,7 +205,7 @@ describe('Settings > Sidebar > General > Edit', () => { }); // * Verify username in profile popover - cy.get('#user-profile-popover').within(() => { + cy.get('div.user-profile-popover').within(() => { cy.get('#userPopoverUsername').should('be.visible').and('contain', `${testUser.username}`); }); }); @@ -238,7 +238,7 @@ describe('Settings > Sidebar > General > Edit', () => { }); // * Verify that new username is in profile popover - cy.get('#user-profile-popover').within(() => { + cy.get('div.user-profile-popover').within(() => { cy.get('#userPopoverUsername').should('be.visible').and('contain', `${otherUser.username}-${randomId}`); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/bot_accounts/display_name_spec.js b/e2e-tests/cypress/tests/integration/channels/bot_accounts/display_name_spec.js index 93bb855787..694793ccae 100644 --- a/e2e-tests/cypress/tests/integration/channels/bot_accounts/display_name_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/bot_accounts/display_name_spec.js @@ -67,7 +67,7 @@ describe('Bot display name', () => { cy.get('@botPost').then((postIdA) => { cy.get(`#post_${postIdA} button.user-popover`).click(); - cy.get('#user-profile-popover'). + cy.get('div.user-profile-popover'). should('be.visible'); cy.findByTestId(`popover-fullname-${bot.username}`). @@ -83,7 +83,7 @@ describe('Bot display name', () => { // * Verify changed display name cy.get('@newBotPost').then(() => { - cy.get('#user-profile-popover'). + cy.get('div.user-profile-popover'). should('be.visible'); cy.findByTestId(`popover-fullname-${bot.username}`). diff --git a/e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts index 544a82b96f..5da4bf1899 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts @@ -356,10 +356,11 @@ function verifyMentionedUserAndProfilePopover(postId: string) { cy.wrap($el).click(); // * Profile popover should be visible - cy.get('#user-profile-popover').should('be.visible'); + cy.get('div.user-profile-popover').should('be.visible'); // * The username in the popover the same as the username link for each user - cy.get('#userPopoverUsername').should('contain', userName); + cy.get('div.user-profile-popover').should('contain', userName); + cy.get('button.closeButtonRelativePosition').click(); // Click anywhere to close profile popover cy.get('#channelHeaderInfo').click(); diff --git a/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts b/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts index 66d21becc9..9b6a11fb9f 100644 --- a/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts @@ -117,9 +117,9 @@ describe('MM-T4064 Status expiry visibility', () => { it('MM-T4064_7 should show custom status expiry time in the user popover', () => { // # Click on the post header of the last post by the current user and open profile popover cy.get('.post.current--user .post__header .user-popover').first().click(); - cy.get('#user-profile-popover').should('exist'); + cy.get('div.user-profile-popover').should('exist'); // * Check if the profile popover contains custom status expiry time in the Status heading - cy.get('#user-profile-popover #user-popover-status .user-popover__subtitle time').should('have.text', expiresAt.format(expiryTimeFormat)); + cy.get('div.user-profile-popover #user-popover-status .user-popover__subtitle time').should('have.text', expiresAt.format(expiryTimeFormat)); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_experience_ui_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_experience_ui_spec.ts index a1d49c9747..cba8cd6db5 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_experience_ui_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_experience_ui_spec.ts @@ -108,9 +108,10 @@ describe('Guest Account - Guest User Experience', () => { }); // * Verify Guest Badge in Guest User's Profile Popover - cy.get('#user-profile-popover').should('be.visible').within(($el) => { + cy.get('div.user-profile-popover').should('be.visible').within(($el) => { cy.wrap($el).find('.GuestTag').should('be.visible').and('have.text', 'GUEST'); }); + cy.get('button.closeButtonRelativePosition').click(); // # Close the profile popover cy.get('#channel-header').click(); @@ -168,9 +169,10 @@ describe('Guest Account - Guest User Experience', () => { }); // * Verify Guest Badge is not displayed in User's Profile Popover - cy.get('#user-profile-popover').should('be.visible').within(($el) => { + cy.get('div.user-profile-popover').should('be.visible').within(($el) => { cy.wrap($el).find('.user-popover__role').should('not.exist'); }); + cy.get('button.closeButtonRelativePosition').click(); // # Close the profile popover cy.get('#channel-header').click(); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts index fd1e615db2..fffa302100 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts @@ -106,9 +106,10 @@ describe('Verify Guest User Identification in different screens', () => { }); // * Verify Guest Badge in Guest User's Profile Popover - cy.get('#user-profile-popover').should('be.visible').within(($el) => { + cy.get('div.user-profile-popover').should('be.visible').within(($el) => { cy.wrap($el).find('.GuestTag').should('be.visible').and('have.text', 'GUEST'); }); + cy.get('button.closeButtonRelativePosition').click(); // # Close the profile popover cy.get('#channel-header').click(); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/profile_popover/profile_popover_spec_user_a_b_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/profile_popover/profile_popover_spec_user_a_b_spec.ts index 949f20b5f1..bdd57ad3e7 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/profile_popover/profile_popover_spec_user_a_b_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/enterprise/profile_popover/profile_popover_spec_user_a_b_spec.ts @@ -76,7 +76,7 @@ describe('Profile popover User A & B', () => { find(`[data-mention=${otherUser.username}]`). should('be.visible'). click(); - cy.get('#user-profile-popover').should('be.visible'); + cy.get('div.user-profile-popover').should('be.visible'); }); // # Add to a Channel should not be shown. diff --git a/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/inapp_username_profile_override_spec.js b/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/inapp_username_profile_override_spec.js index 8772016fb5..ad7e980ac9 100644 --- a/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/inapp_username_profile_override_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/integrations/incoming_webhook/inapp_username_profile_override_spec.js @@ -160,7 +160,7 @@ function verifyLastPost(owner, username, iconUrl) { function verifyProfilePopover(owner, username, iconUrl) { // * Verify that the profile popover is shown - cy.get('#user-profile-popover').should('be.visible').within(() => { + cy.get('div.user-profile-popover').should('be.visible').within(() => { // * Verify username from payload cy.get('.user-profile-popover__heading').should('be.visible').and('have.text', username); diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/mobile_profile_popover_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/mobile_profile_popover_spec.js index 9a7e2246af..bfdbbaad0d 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/mobile_profile_popover_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/mobile_profile_popover_spec.js @@ -37,7 +37,7 @@ describe('Profile popover', () => { cy.get(`#post_${postId}`).find('.profile-icon > img').click({force: true}); // * Popover should have rendered to screen - cy.get('#user-profile-popover').should('be.visible'); + cy.get('div.user-profile-popover').should('be.visible'); cy.get('body').type('{esc}'); }); }); @@ -50,7 +50,7 @@ describe('Profile popover', () => { cy.get(`#post_${postId}`).find('.user-popover').click({force: true}); // * Popover should have rendered to screen - cy.get('#user-profile-popover').should('be.visible'); + cy.get('div.user-profile-popover').should('be.visible'); }); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/scroll/fixed_width_spec.js b/e2e-tests/cypress/tests/integration/channels/scroll/fixed_width_spec.js index c7305c4fb9..e5f2a0930b 100644 --- a/e2e-tests/cypress/tests/integration/channels/scroll/fixed_width_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/scroll/fixed_width_spec.js @@ -60,7 +60,7 @@ describe('Scroll', () => { cy.getLastPostId().as('lastPostId'); // Getting height of each post before applying 'Fixed width, centered' option and assigning to alias - cy.findAllByLabelText('sysadmin').eq(0).invoke('height').then((height) => { + cy.get('button.user-popover.style--none').eq(0).invoke('height').then((height) => { cy.wrap(height).as('initialUserNameHeight'); }); getComponentByText('@firstPostId', firstMessage).invoke('height').then((height) => { @@ -72,10 +72,10 @@ describe('Scroll', () => { getFileThumbnail('mpeg-video-file.mpg').invoke('height').then((height) => { cy.wrap(height).as('initialMpgHeight'); }); - getFileThumbnail('gif-image-file.gif').invoke('height').then((height) => { + getImageThumbnail('gif-image-file.gif').invoke('height').then((height) => { cy.wrap(height).as('initialGifHeight'); }); - getFileThumbnail('jpg-image-file.jpg').invoke('height').then((height) => { + getImageThumbnail('jpg-image-file.jpg').invoke('height').then((height) => { cy.wrap(height).as('initialJpgHeight'); }); getComponentBySelector('@linkPreviewPostId', '.PostAttachmentOpenGraph__image').invoke('height').then((height) => { @@ -105,7 +105,7 @@ describe('Scroll', () => { // * Verify there is no scroll pop cy.get('#post-list').should('exist').within(() => { cy.get('@initialUserNameHeight').then((originalHeight) => { - cy.findAllByLabelText('sysadmin').eq(0).invoke('height').should('be.equal', originalHeight); + cy.get('button.user-popover.style--none').eq(0).invoke('height').should('be.equal', originalHeight); }); cy.get('@initialFirstPostHeight').then((originalHeight) => { getComponentByText('@firstPostId', firstMessage).invoke('height').should('be.equal', originalHeight); @@ -120,10 +120,10 @@ describe('Scroll', () => { getFileThumbnail('mpeg-video-file.mpg').invoke('height').should('be.equal', originalHeight); }); cy.get('@initialGifHeight').then((originalHeight) => { - getFileThumbnail('gif-image-file.gif').invoke('height').should('be.equal', originalHeight); + getImageThumbnail('gif-image-file.gif').invoke('height').should('be.equal', originalHeight); }); cy.get('@initialJpgHeight').then((originalHeight) => { - getFileThumbnail('jpg-image-file.jpg').invoke('height').should('be.equal', originalHeight); + getImageThumbnail('jpg-image-file.jpg').invoke('height').should('be.equal', originalHeight); }); cy.get('@initialInlineImgHeight').then((originalHeight) => { getComponentBySelector('@gifLinkPostId', 'img[aria-label="file thumbnail"]').invoke('height').should('be.equal', originalHeight); @@ -136,6 +136,13 @@ describe('Scroll', () => { // Get thumbnail component based on filename const getFileThumbnail = (filename) => { + return cy.get(`@${filename}PostId`).then((postId) => { + cy.get(`#${postId}_message a.post-image__name`); + }); + }; + + // Get image component based on filename + const getImageThumbnail = (filename) => { return cy.get(`@${filename}PostId`).then((postId) => { cy.get(`#${postId}_message`).findByLabelText(`file thumbnail ${filename}`); }); diff --git a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap index 8668b1edc2..f8b543c9e9 100644 --- a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap +++ b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap @@ -9,7 +9,9 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match d class="AdminUserCard__header" >