feat: Add tooltips to channel info RHS top buttons (#29170)

* feat: Add tooltips to channel info RHS top buttons

* style: address linting issues

* feat: Add accessibility ids to Tooltips in top_buttons.tsx

* leverage WithTooltip for standardized styling

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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

@@ -91,6 +91,31 @@ describe('Channel Info RHS', () => {
 
     describe('regular channel', () => {
         describe('top buttons', () => {
+            it('should show correct tooltips for all buttons', () => {
+                // # Go to test channel
+                cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
+
+                // # Click on the channel info button
+                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('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('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('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');
+            });
+
             it('should be able to toggle favorite on a channel', () => {
                 // # Go to test channel
                 cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);

webapp/channels/src/components/channel_info_rhs/top_buttons.tsx

@@ -6,6 +6,7 @@ import {useIntl, FormattedMessage} from 'react-intl';
 import styled from 'styled-components';
 
 import useCopyText from 'components/common/hooks/useCopyText';
+import WithTooltip from 'components/with_tooltip';
 
 import Constants from 'utils/constants';
 
@@ -122,50 +123,94 @@ export default function TopButtons({
 
     return (
         <ChannelInfoRhsTopButtons>
-            <Button
+            <WithTooltip
-                onClick={actions.toggleFavorite}
+                placement='top'
-                className={isFavorite ? 'active' : ''}
+                id='favorite-tooltip'
+                title={
+                    <FormattedMessage
+                        id='channel_info_rhs.top_buttons.favorite.tooltip'
+                        defaultMessage='Add this channel to favorites'
+                    />
+                }
             >
-                <div>
-                    <i className={'icon ' + favoriteIcon}/>
-                </div>
-                <span>{favoriteText}</span>
-            </Button>
-            <Button
-                onClick={actions.toggleMute}
-                className={isMuted ? 'active' : ''}
-            >
-                <div>
-                    <i className={'icon ' + mutedIcon}/>
-                </div>
-                <span>{mutedText}</span>
-            </Button>
-            {canAddPeople && (
                 <Button
-                    onClick={actions.addPeople}
+                    onClick={actions.toggleFavorite}
-                    className={isInvitingPeople ? 'active' : ''}
+                    className={isFavorite ? 'active' : ''}
                 >
                     <div>
-                        <i className='icon icon-account-plus-outline'/>
+                        <i className={'icon ' + favoriteIcon}/>
                     </div>
-                    <span>
+                    <span>{favoriteText}</span>
-                        <FormattedMessage
-                            id='channel_info_rhs.top_buttons.add_people'
-                            defaultMessage='Add People'
-                        />
-                    </span>
                 </Button>
+            </WithTooltip>
+            <WithTooltip
+                placement='top'
+                id='mute-tooltip'
+                title={
+                    <FormattedMessage
+                        id='channel_info_rhs.top_buttons.mute.tooltip'
+                        defaultMessage='Mute notifications for this channel'
+                    />
+                }
+            >
+                <Button
+                    onClick={actions.toggleMute}
+                    className={isMuted ? 'active' : ''}
+                >
+                    <div>
+                        <i className={'icon ' + mutedIcon}/>
+                    </div>
+                    <span>{mutedText}</span>
+                </Button>
+            </WithTooltip>
+            {canAddPeople && (
+                <WithTooltip
+                    id='add-people-tooltip'
+                    placement='top'
+                    title={
+                        <FormattedMessage
+                            id='channel_info_rhs.top_buttons.add_people.tooltip'
+                            defaultMessage='Add team members to this channel'
+                        />
+                    }
+                >
+                    <Button
+                        onClick={actions.addPeople}
+                        className={isInvitingPeople ? 'active' : ''}
+                    >
+                        <div>
+                            <i className='icon icon-account-plus-outline'/>
+                        </div>
+                        <span>
+                            <FormattedMessage
+                                id='channel_info_rhs.top_buttons.add_people'
+                                defaultMessage='Add People'
+                            />
+                        </span>
+                    </Button>
+                </WithTooltip>
             )}
             {canCopyLink && (
-                <CopyButton
+                <WithTooltip
-                    onClick={copyLink.onClick}
+                    id='copy-link-tooltip'
-                    className={copyLink.copiedRecently ? 'success' : ''}
+                    placement='top'
+                    title={
+                        <FormattedMessage
+                            id='channel_info_rhs.top_buttons.copy_link.tooltip'
+                            defaultMessage='Copy link to this channel'
+                        />
+                    }
                 >
-                    <div>
+                    <CopyButton
-                        <i className={'icon ' + copyIcon}/>
+                        onClick={copyLink.onClick}
-                    </div>
+                        className={copyLink.copiedRecently ? 'success' : ''}
-                    <span>{copyText}</span>
+                    >
-                </CopyButton>
+                        <div>
+                            <i className={'icon ' + copyIcon}/>
+                        </div>
+                        <span>{copyText}</span>
+                    </CopyButton>
+                </WithTooltip>
             )}
         </ChannelInfoRhsTopButtons>
     );

webapp/channels/src/i18n/en.json

@@ -3237,11 +3237,15 @@
   "channel_info_rhs.menu.notification_preferences": "Notification Preferences",
   "channel_info_rhs.menu.pinned": "Pinned messages",
   "channel_info_rhs.top_buttons.add_people": "Add People",
+  "channel_info_rhs.top_buttons.add_people.tooltip": "Add team members to this channel",
   "channel_info_rhs.top_buttons.copied": "Copied",
   "channel_info_rhs.top_buttons.copy": "Copy Link",
+  "channel_info_rhs.top_buttons.copy_link.tooltip": "Copy link to this channel",
   "channel_info_rhs.top_buttons.favorite": "Favorite",
+  "channel_info_rhs.top_buttons.favorite.tooltip": "Add this channel to favorites",
   "channel_info_rhs.top_buttons.favorited": "Favorited",
   "channel_info_rhs.top_buttons.mute": "Mute",
+  "channel_info_rhs.top_buttons.mute.tooltip": "Mute notifications for this channel",
   "channel_info_rhs.top_buttons.muted": "Muted",
   "channel_invite.addNewMembers": "Add people to {channel}",
   "channel_invite.invite_guest": "Invite as a Guest",