Add tooltip around links

elastic · Oct 20, 2020 · 68143c4 · 68143c4
1 parent a73e977
commit 68143c4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/markdown_editor/markdown_link.tsx b/x-pack/plugins/security_solution/public/common/components/markdown_editor/markdown_link.tsx
@@ -5,32 +5,30 @@
  */
 
 import React, { memo } from 'react';
-import { EuiLink, EuiLinkAnchorProps } from '@elastic/eui';
+import { EuiLink, EuiLinkAnchorProps, EuiToolTip } from '@elastic/eui';
 
 type MarkdownLinkProps = { disableLinks?: boolean } & EuiLinkAnchorProps;
 
+/** prevents search engine manipulation by noting the linked document is not trusted or endorsed by us */
+const REL_NOFOLLOW = 'nofollow';
+
 const MarkdownLinkComponent: React.FC<MarkdownLinkProps> = ({
   disableLinks,
   href,
   target,
   children,
   ...props
 }) => (
-  <>
-    {disableLinks ? (
-      <span>{children}</span>
-    ) : (
-      <EuiLink
-        {...props}
-        target="_blank"
-        data-test-subj="markdown-link"
-        href={disableLinks ? undefined : href}
-        rel="nofollow"
-      >
-        {children}
-      </EuiLink>
-    )}
-  </>
+  <EuiToolTip content={href}>
+    <EuiLink
+      href={disableLinks ? undefined : href}
+      data-test-subj="markdown-link"
+      rel={`${REL_NOFOLLOW}`}
+      target="_blank"
+    >
+      {children}
+    </EuiLink>
+  </EuiToolTip>
 );
 
 export const MarkdownLink = memo(MarkdownLinkComponent);
diff --git a/x-pack/plugins/security_solution/public/common/components/markdown_editor/renderer.test.tsx b/x-pack/plugins/security_solution/public/common/components/markdown_editor/renderer.test.tsx
@@ -35,7 +35,9 @@ describe('Markdown', () => {
         <MarkdownRenderer disableLinks={true}>{markdownWithLink}</MarkdownRenderer>
       );
 
-      expect(wrapper.find('[data-test-subj="markdown-link"]').exists()).toBeFalsy();
+      expect(
+        wrapper.find('[data-test-subj="markdown-link"]').first().getDOMNode()
+      ).not.toHaveProperty('href');
     });
 
     test('it opens links in a new tab via target="_blank"', () => {