diff --git a/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts index 4311d1fce37..8657d687d40 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts +++ b/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}`); diff --git a/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx b/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx index cdc30eeaf5e..51920eb6364 100644 --- a/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx +++ b/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 ( - - - {canAddPeople && ( + + + } + > + + + {canAddPeople && ( + + } + > + + )} {canCopyLink && ( - + } > -
- -
- {copyText} -
+ +
+ +
+ {copyText} +
+ )}
); diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index 246cafc30c5..aab13955a47 100644 --- a/webapp/channels/src/i18n/en.json +++ b/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",