- add tooltip on chat hover (#340)

- render name when we have it in the dm response

package.json

@@ -42,6 +42,7 @@
     "lodash.kebabcase": "^4.1.1",
     "moment": "^2.29.4",
     "normalizr": "^3.6.2",
+    "rc-tooltip": "^5.3.1",
     "react": "^17.0.2",
     "react-collapsible": "^2.10.0",
     "react-dom": "^17.0.2",

src/_variables.scss

@@ -1,3 +1,4 @@
 $font-size-small: 12px;
+$font-size-medium: 14px;
 $font-size-large: 16px;
 $font-size-xl: 20px;

src/components/tooltip/index.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Tooltip, { Properties } from './';
+import { default as ReactTooltip } from 'rc-tooltip';
+
+const OVERLAY_TEST = 'overlay-test';
+const CHILDREN_TEST = 'children';
+
+describe('Tooltip', () => {
+  const subject = (props: Partial<Properties>) => {
+    const allProps: Properties = {
+      overlay: OVERLAY_TEST,
+      ...props,
+    };
+
+    return shallow(
+      <Tooltip {...allProps}>
+        <>{CHILDREN_TEST}</>
+      </Tooltip>
+    );
+  };
+
+  it('render', function () {
+    const wrapper = subject({});
+
+    expect(wrapper.find(ReactTooltip).exists()).toBe(true);
+  });
+
+  it('renders all props', function () {
+    const wrapper = subject({});
+
+    expect(wrapper.find(ReactTooltip).props()).toEqual({
+      children: <React.Fragment>children</React.Fragment>,
+      destroyTooltipOnHide: true,
+      mouseEnterDelay: 0.1,
+      mouseLeaveDelay: 0.2,
+      overlay: 'overlay-test',
+      overlayClassName: 'tooltip',
+      showArrow: false,
+    });
+  });
+});

src/components/tooltip/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+import { default as ReactTooltip } from 'rc-tooltip';
+import { TooltipProps } from 'rc-tooltip/lib/Tooltip';
+import './styles.scss';
+
+export interface Properties extends TooltipProps {
+  className?: string;
+}
+
+export default class Tooltip extends React.Component<Properties> {
+  render() {
+    return (
+      <ReactTooltip
+        overlayClassName={classNames('tooltip', this.props.className)}
+        showArrow={false}
+        mouseEnterDelay={0.1}
+        mouseLeaveDelay={0.2}
+        destroyTooltipOnHide={true}
+        {...this.props}
+      >
+        {this.props.children}
+      </ReactTooltip>
+    );
+  }
+}

src/components/tooltip/styles.scss

@@ -0,0 +1,21 @@
+@use '../../shared-components/theme-engine/theme' as theme;
+@import 'rc-tooltip/assets/bootstrap.css';
+@import '../../variables';
+
+.tooltip {
+  .rc-tooltip-inner {
+    color: #ccc;
+    border-radius: 4px;
+    box-shadow: 2px 4px 5px 0 rgb(0 0 0 / 50%);
+    background: theme.$background-color-primary;
+    padding: 5px;
+    min-height: unset;
+    font-size: $font-size-medium;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  &.rc-tooltip-placement-left {
+    padding: 0;
+  }
+}

src/platform-apps/channels/direct-message-members/index.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Container as DirectMessageChat, Properties } from './';
 import { DIRECT_MESSAGES_TEST } from '../../../store/direct-messages/saga.test';
+import Tooltip from '../../../components/tooltip';
 
 describe('direct-message-members', () => {
   const subject = (props: Partial<Properties>) => {
@@ -36,7 +37,7 @@ describe('direct-message-members', () => {
 
     expect(displayChatNames).toStrictEqual([
       'Charles Diya, Eric',
-      'Eric',
+      'daily chat',
     ]);
   });
 
@@ -76,4 +77,53 @@ describe('direct-message-members', () => {
 
     expect(wrapper.find('.direct-message-members__user-unread-count').text()).toEqual(unreadCount.toString());
   });
+
+  describe('tooltip', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = subject({});
+    });
+
+    afterEach(() => {
+      wrapper = null;
+    });
+
+    const getFirstTooltip = () => {
+      return wrapper.find(Tooltip).first();
+    };
+
+    it('renders', function () {
+      expect(getFirstTooltip().exists()).toBe(true);
+    });
+
+    it('renders placement to left', function () {
+      const placement = 'left';
+
+      expect(getFirstTooltip().prop('placement')).toEqual(placement);
+    });
+
+    it('renders class name', function () {
+      const className = 'direct-message-members__user-tooltip';
+
+      expect(getFirstTooltip().prop('className')).toEqual(className);
+    });
+
+    it('renders align prop', function () {
+      const align = {
+        offset: [
+          10,
+          0,
+        ],
+      };
+
+      expect(getFirstTooltip().prop('align')).toEqual(align);
+    });
+
+    it('renders content', function () {
+      const content = 'Charles Diya, Eric';
+
+      expect(getFirstTooltip().prop('overlay')).toEqual(content);
+    });
+  });
 });