[MM-13274] Show a tooltip with the full channel name when hovering ov…

…er group message channels in the sidebar (#2775)

components/sidebar/sidebar_channel_button_or_link/__snapshots__/sidebar_channel_button_or_link.test.jsx.snap

@@ -104,6 +104,65 @@ exports[`component/sidebar/sidebar_channel_button_or_link/SidebarChannelButtonOr
 </Link>
 `;
 
+exports[`component/sidebar/sidebar_channel_button_or_link/SidebarChannelButtonOrLink should match snapshot, on group channel with tooltip 1`] = `
+<OverlayTrigger
+ defaultOverlayShown={false}
+ delayShow={400}
+ overlay={
+ <Tooltip
+ bsClass="tooltip"
+ id="channel-displayname__tooltip"
+ placement="right"
+ style={
+ Object {
+ "maxWidth": "228px",
+ "paddingLeft": "8px",
+ }
+ }
+ >
+ test-channel-name
+ </Tooltip>
+ }
+ placement="top"
+ trigger={
+ Array [
+ "hover",
+ "focus",
+ ]
+ }
+>
+ <Link
+ className="test-class"
+ id="sidebarItem_test-channel-name"
+ onClick={[Function]}
+ to="test-link"
+ >
+ <SidebarChannelButtonOrLinkIcon
+ channelIsArchived={false}
+ channelStatus="test"
+ channelType="G"
+ hasDraft={false}
+ membersCount={3}
+ teammateDeletedAt={1}
+ teammateId="test-teammate-id"
+ />
+ <span
+ className="sidebar-item__name"
+ >
+ <span>
+ test-channel-name
+ </span>
+ </span>
+ <SidebarChannelButtonOrLinkCloseButton
+ channelId="test-channel-id"
+ channelType="G"
+ handleClose={[MockFunction]}
+ teammateId="test-teammate-id"
+ />
+ </Link>
+</OverlayTrigger>
+`;
+
 exports[`component/sidebar/sidebar_channel_button_or_link/SidebarChannelButtonOrLink should match snapshot, on non-desktop with mentions badge 1`] = `
 <Link
  className="test-class"

components/sidebar/sidebar_channel_button_or_link/sidebar_channel_button_or_link.jsx

@@ -4,10 +4,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Link} from 'react-router-dom';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 import {browserHistory} from 'utils/browser_history';
 import {mark, trackEvent} from 'actions/diagnostics_actions.jsx';
 import {isDesktopApp} from 'utils/user_agent.jsx';
+import Constants from 'utils/constants.jsx';
 import CopyUrlContextMenu from 'components/copy_url_context_menu';
 
 import SidebarChannelButtonOrLinkIcon from './sidebar_channel_button_or_link_icon.jsx';
@@ -36,6 +38,8 @@ export default class SidebarChannelButtonOrLink extends React.PureComponent {
  channelIsArchived: PropTypes.bool.isRequired,
  }
 
+ overlayTriggerAttr = ['hover', 'focus']
+
  trackChannelSelectedEvent = () => {
  mark('SidebarChannelLink#click');
  trackEvent('ui', 'ui_channel_selected');
@@ -88,17 +92,19 @@ export default class SidebarChannelButtonOrLink extends React.PureComponent {
  let element;
  if (isDesktopApp()) {
  element = (
- <CopyUrlContextMenu
- link={this.props.link}
- menuId={this.props.channelId}
- >
- <button
- className={'btn btn-link ' + this.props.rowClass}
- onClick={this.handleClick}
+ <div>
+ <CopyUrlContextMenu
+ link={this.props.link}
+ menuId={this.props.channelId}
  >
- {content}
- </button>
- </CopyUrlContextMenu>
+ <button
+ className={'btn btn-link ' + this.props.rowClass}
+ onClick={this.handleClick}
+ >
+ {content}
+ </button>
+ </CopyUrlContextMenu>
+ </div>
  );
  } else {
  element = (
@@ -113,6 +119,32 @@ export default class SidebarChannelButtonOrLink extends React.PureComponent {
  );
  }
 
+ if (this.props.channelType === Constants.GM_CHANNEL) {
+ const displayNameToolTip = (
+ <Tooltip
+ id='channel-displayname__tooltip'
+ style={style.channelTooltip}
+ >
+ {this.props.displayName}
+ </Tooltip>
+ );
+ element = (
+ <OverlayTrigger
+ trigger={this.overlayTriggerAttr}
+ delayShow={Constants.OVERLAY_TIME_DELAY}
+ placement='top'
+ overlay={displayNameToolTip}
+ >
+ {element}
+ </OverlayTrigger>
+ );
+ }
  return element;
  }
 }
+
+const style = {
+ channelTooltip: {
+ paddingLeft: '8px',
+ maxWidth: '228px'},
+};

components/sidebar/sidebar_channel_button_or_link/sidebar_channel_button_or_link.test.jsx

@@ -145,4 +145,26 @@ describe('component/sidebar/sidebar_channel_button_or_link/SidebarChannelButtonO
  expect(diagnosticsActionsMock.mark).not.toBeCalled();
  expect(browserHistoryMock.browserHistory.push).not.toBeCalled();
  });
+
+ test('should match snapshot, on group channel with tooltip', () => {
+ const wrapper = shallow(
+ <SidebarChannelButtonOrLink
+ channelType={Constants.GM_CHANNEL}
+ channelId={'test-channel-id'}
+ channelName={'test-channel-name'}
+ channelStatus={'test'}
+ link={'test-link'}
+ rowClass={'test-class'}
+ displayName={'test-channel-name'}
+ handleClose={jest.fn()}
+ hasDraft={false}
+ membersCount={3}
+ unreadMentions={6}
+ teammateId={'test-teammate-id'}
+ teammateDeletedAt={1}
+ channelIsArchived={false}
+ />
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
 });