Merge branch 'master' into MM-25640-leave-private-channel-bug

mattermost · Jun 18, 2020 · acbd25a · acbd25a
2 parents 055b1b4 + e094319
commit acbd25a
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 9 deletions.
diff --git a/components/link_tooltip/__snapshots__/link_tooltip.test.tsx.snap b/components/link_tooltip/__snapshots__/link_tooltip.test.tsx.snap
@@ -31,3 +31,43 @@ exports[`components/link_tooltip/link_tooltip should match snapshot 1`] = `
  </span>
 </Fragment>
 `;
+
+exports[`components/link_tooltip/link_tooltip should match snapshot with uncommon link structure 1`] = `
+<Fragment>
+ <div
+ style={
+ Object {
+ "alignItems": "center",
+ "display": "flex",
+ "flexDirection": "column",
+ "zIndex": 10,
+ }
+ }
+ >
+ <Connect(Pluggable)
+ href="https://www.google.com"
+ pluggableName="LinkTooltip"
+ />
+ </div>
+ <span
+ onMouseLeave={[Function]}
+ onMouseOver={[Function]}
+ >
+ <span
+ className="codespan__pre-wrap"
+ >
+ <code>
+ foo
+ </code>
+ </span>
+ and 
+ <span
+ className="codespan__pre-wrap"
+ >
+ <code>
+ bar
+ </code>
+ </span>
+ </span>
+</Fragment>
+`;
diff --git a/components/link_tooltip/link_tooltip.test.tsx b/components/link_tooltip/link_tooltip.test.tsx
@@ -13,17 +13,39 @@ describe('components/link_tooltip/link_tooltip', () => {
  const wrapper: ShallowWrapper<{}, {}, LinkTooltip> = shallow(
  <LinkTooltip
  href={'www.test.com'}
- title={'test title'}
  attributes={{
  class: 'mention-highlight',
  'data-hashtag': '#somehashtag',
  'data-link': 'somelink',
  'data-channel-mention': 'somechannel',
  }}
- />,
+ >
+ {'test title'}
+ </LinkTooltip>
  );
 
  expect(wrapper).toMatchSnapshot();
  expect(wrapper.find('span').text()).toBe('test title');
  });
+
+ test('should match snapshot with uncommon link structure', () => {
+ ReactDOM.createPortal = (node) => node as ReactPortal;
+ const wrapper: ShallowWrapper<{}, {}, LinkTooltip> = shallow(
+ <LinkTooltip
+ href={'https://www.google.com'}
+ attributes={{}}
+ >
+ <span className='codespan__pre-wrap'>
+ <code>{'foo'}</code>
+ </span>
+ {' and '}
+ <span className='codespan__pre-wrap'>
+ <code>{'bar'}</code>
+ </span>
+ </LinkTooltip>
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ expect(wrapper.find('span').at(0).text()).toBe('foo and bar');
+ });
 });
diff --git a/components/link_tooltip/link_tooltip.tsx b/components/link_tooltip/link_tooltip.tsx
@@ -20,7 +20,6 @@ const tooltipContainerStyles: CSSProperties = {
 
 type Props = {
  href: string;
- title: string;
  attributes: {[attribute: string]: string};
 }
 
@@ -90,7 +89,7 @@ export default class LinkTooltip extends React.PureComponent<Props> {
  };
 
  public render() {
- const {href, title, attributes} = this.props;
+ const {href, children, attributes} = this.props;
 
  const dataAttributes = {
  'data-hashtag': attributes['data-hashtag'],
@@ -116,7 +115,7 @@ export default class LinkTooltip extends React.PureComponent<Props> {
  onMouseLeave={this.hideTooltip}
  {...dataAttributes}
  >
- {title}
+ {children}
  </span>
  </React.Fragment>
  );

diff --git a/utils/__snapshots__/message_html_to_component.test.jsx.snap b/utils/__snapshots__/message_html_to_component.test.jsx.snap
@@ -162,8 +162,9 @@ exports[`messageHtmlToComponent link with enabled a tooltip plugin 1`] = `
  }
  }
  href="http:https://www.dolor.com"
- title="www.dolor.com"
- />
+ >
+ www.dolor.com
+ </LinkTooltip>
  </a>
  sit amet
 </p>

diff --git a/utils/message_html_to_component.jsx b/utils/message_html_to_component.jsx
@@ -59,9 +59,10 @@ export function messageHtmlToComponent(html, isRHS, options = {}) {
  return (
  <LinkTooltip
  href={node.attribs[hrefAttrib]}
- title={children[0]}
  attributes={node.attribs}
- />
+ >
+ {children}
+ </LinkTooltip>
  );
  },
  });