From 011cf028ab93cddd0ec41324aa98db884e4d4238 Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Wed, 3 Feb 2021 12:57:19 -0500
Subject: [PATCH] fix(plugins/plugin-client-common): Markdown links should have
 a tooltip

This PR also exports the Tooltip spi from plugin-client-common.

Fixes #6939
---
 .../src/components/Content/Markdown.tsx                    | 7 ++++++-
 plugins/plugin-client-common/src/index.ts                  | 1 +
 .../web/scss/components/Tooltip/PatternFly.scss            | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/plugins/plugin-client-common/src/components/Content/Markdown.tsx b/plugins/plugin-client-common/src/components/Content/Markdown.tsx
index 6e5e191f72a..bc1f313a5e6 100644
--- a/plugins/plugin-client-common/src/components/Content/Markdown.tsx
+++ b/plugins/plugin-client-common/src/components/Content/Markdown.tsx
@@ -25,6 +25,7 @@ import { REPL, Tab as KuiTab, getPrimaryTabId } from '@kui-shell/core'
 // GitHub Flavored Markdown plugin; see https://github.com/IBM/kui/issues/6563
 import gfm from 'remark-gfm'
 
+import Tooltip from '../spi/Tooltip'
 import CodeSnippet from '../spi/CodeSnippet'
 const SimpleEditor = React.lazy(() => import('./Editor/SimpleEditor'))
 
@@ -176,7 +177,11 @@ export default class Markdown extends React.PureComponent<Props> {
             } else if (!isLocal && this.props.noExternalLinks) {
               return <span className={this.props.className}>{props.href}</span>
             } else {
-              return <a className="bx--link" {...props} target={target} onClick={onClick} />
+              return (
+                <Tooltip markdown={`### External Link\n#### ${props.href}\n\n\`Link will open in a separate window\``}>
+                  <a className="bx--link" {...props} target={target} onClick={onClick} />
+                </Tooltip>
+              )
             }
           },
           code: props => {
diff --git a/plugins/plugin-client-common/src/index.ts b/plugins/plugin-client-common/src/index.ts
index 4d218c66030..498e77050e1 100644
--- a/plugins/plugin-client-common/src/index.ts
+++ b/plugins/plugin-client-common/src/index.ts
@@ -58,6 +58,7 @@ export { default as Button } from './components/spi/Button'
 export { default as Card } from './components/spi/Card'
 export { default as Popover } from './components/spi/Popover'
 export { default as Tag } from './components/spi/Tag'
+export { default as Tooltip } from './components/spi/Tooltip'
 
 // Input components
 export {
diff --git a/plugins/plugin-client-common/web/scss/components/Tooltip/PatternFly.scss b/plugins/plugin-client-common/web/scss/components/Tooltip/PatternFly.scss
index eb10e57a88a..45c86c6e015 100644
--- a/plugins/plugin-client-common/web/scss/components/Tooltip/PatternFly.scss
+++ b/plugins/plugin-client-common/web/scss/components/Tooltip/PatternFly.scss
@@ -48,6 +48,10 @@ $bgcolor: var(--color-base06);
       color: var(--color-base02);
       font-family: var(--font-sans-serif);
     }
+
+    a[href] {
+      color: var(--color-base0F);
+    }
   }
 
   & > div {