[MM-62074] Move tooltips with withTooltip to new Tooltip component (#29528)

* replace inside of comp/withtooltip

* remove overlay trigger eslint rl

* update location of prev migrated new tooltips

* copy button

* shared_channel_indicator, shared_user_indicator.tsx, size_aware_image

* actions_menu, old_admin_settings, schema_admin_settings, admin_settings

* billing_summary, brand_image_setting, edit_section_edit_table_row, elapsed_duration_cell

* permissions_scheme_summary,secure_connections/controls,system_users_column_toggler_menu,system_users_export,group/group_users/users_to_remove_groups

* team_profile,user_grid_role_dropdown,priority_labels,toggle_formatting_bar,use_emoji_picker,formatting_icon

* show_formatting,alert_banner others

* more

* snap fix

* add disabled prop to menu

* test fix for avatar

feat: Add id to WithTooltip in Avatars component to fix test failures

* combine refs in withtooltip

* channel header title favorite test fix

* priority label comp changes

* types check for children

* Update avatar.tsx

* e2e fixes

* fix E2E tests

* Remove memo from WithTooltip

I found that the web app leaks a fair bit less memory when this is removed. See https://community.mattermost.com/core/pl/gwyyoww9gtbg8fddoic9meq84y for more information

* e2e lint fixes

* e2e fixes

* Fix test style issue

---------

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts

@@ -99,21 +99,21 @@ describe('Channel Info RHS', () => {
                 cy.get('#channel-info-btn').click();
 
                 // * Verify tooltips appear with correct text
-                cy.uiGetRHS().findByText('Favorite').trigger('mouseover');
-                cy.get('#favorite-tooltip').should('be.visible').and('have.text', 'Add this channel to favorites');
-                cy.uiGetRHS().findByText('Favorite').trigger('mouseout');
+                cy.uiGetRHS().findByText('Favorite').trigger('mouseenter');
+                cy.findByText('Add this channel to favorites').should('be.visible');
+                cy.uiGetRHS().findByText('Favorite').trigger('mouseleave');
 
-                cy.uiGetRHS().findByText('Mute').trigger('mouseover');
-                cy.get('#mute-tooltip').should('be.visible').and('have.text', 'Mute notifications for this channel');
-                cy.uiGetRHS().findByText('Mute').trigger('mouseout');
+                cy.uiGetRHS().findByText('Mute').trigger('mouseenter');
+                cy.findByText('Mute notifications for this channel').should('be.visible');
+                cy.uiGetRHS().findByText('Mute').trigger('mouseleave');
 
-                cy.uiGetRHS().findByText('Add People').trigger('mouseover');
-                cy.get('#add-people-tooltip').should('be.visible').and('have.text', 'Add team members to this channel');
-                cy.uiGetRHS().findByText('Add People').trigger('mouseout');
+                cy.uiGetRHS().findByText('Add People').trigger('mouseenter');
+                cy.findByText('Add team members to this channel').should('be.visible');
+                cy.uiGetRHS().findByText('Add People').trigger('mouseleave');
 
-                cy.uiGetRHS().findByText('Copy Link').trigger('mouseover');
-                cy.get('#copy-link-tooltip').should('be.visible').and('have.text', 'Copy link to this channel');
-                cy.uiGetRHS().findByText('Copy Link').trigger('mouseout');
+                cy.uiGetRHS().findByText('Copy Link').trigger('mouseenter');
+                cy.findByText('Copy link to this channel').should('be.visible');
+                cy.uiGetRHS().findByText('Copy Link').trigger('mouseleave');
             });
 
             it('should be able to toggle favorite on a channel', () => {

e2e-tests/cypress/tests/integration/channels/channel/channel_members_rhs_spec.ts

@@ -235,6 +235,8 @@ describe('Channel members RHS', () => {
             // # Click on the Manage button
             cy.uiGetRHS().findByText('Manage').should('be.visible').click();
 
+            cy.wait(500);
+
             // * Can see user with their roles, and change it
             cy.uiGetRHS().findByTestId(`memberline-${user.id}`).should('be.visible').within(() => {
                 cy.contains(`${user.username}`).should('be.visible');

e2e-tests/cypress/tests/integration/channels/channel/channel_name_tooltips_spec.ts

@@ -17,26 +17,6 @@ import * as TIMEOUTS from '../../../fixtures/timeouts';
 
 const timestamp = Date.now();
 
-function verifyChannel(channel: Channel, verifyExistence = true) {
-    // # Wait for Channel to be created
-    cy.wait(TIMEOUTS.HALF_SEC);
-
-    // # Hover on the channel name
-    cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseover');
-
-    // * Verify that the tooltip is displayed
-    if (verifyExistence) {
-        cy.get('div.tooltip-inner').
-            should('be.visible').
-            and('contain', channel.display_name);
-    } else {
-        cy.get('div.tooltip-inner').should('not.exist');
-    }
-
-    // # Move cursor away from channel
-    cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseout');
-}
-
 describe('channel name tooltips', () => {
     let loggedUser: UserProfile;
     let longUser: UserProfile;
@@ -122,12 +102,30 @@ describe('channel name tooltips', () => {
         cy.uiGetButton('Go').click();
 
         // # Hover on the channel name
-        cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseover');
+        cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseenter');
 
         // * Verify that the tooltip is displayed
-        cy.get('div.tooltip-inner').should('be.visible');
+        cy.findByRole('tooltip').should('be.visible');
 
         // # Move cursor away from channel
-        cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseout');
+        cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseleave');
     });
 });
+
+function verifyChannel(channel: Channel, verifyExistence = true) {
+    // # Wait for Channel to be created
+    cy.wait(TIMEOUTS.HALF_SEC);
+
+    // # Hover on the channel name
+    cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseenter');
+
+    // * Verify that the tooltip is displayed
+    if (verifyExistence) {
+        cy.findByRole('tooltip').should('be.visible').and('have.text', channel.display_name);
+    } else {
+        cy.findByRole('tooltip').should('not.exist');
+    }
+
+    // # Move cursor away from channel
+    cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseleave');
+}