From a81ca03302be99440845317095bd3b985179cf08 Mon Sep 17 00:00:00 2001
From: Tim Levett <tim.levett@gmail.com>
Date: Mon, 1 Nov 2021 09:14:53 -0500
Subject: [PATCH] Tooltips : Add ability to flag anchor tag as external link in
 a tooltip (#41014)

* sass: add in the option for extneral link color to tooltip anchor tag

* variable editor: change the link in the tool tip to external styling

* fixed class name to be the same as other instances of this
---
 packages/grafana-ui/src/components/Tooltip/_Tooltip.scss     | 5 ++++-
 packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts  | 1 +
 packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts | 1 +
 public/app/features/variables/query/QueryVariableEditor.tsx  | 1 +
 public/sass/_variables.dark.generated.scss                   | 1 +
 public/sass/_variables.light.generated.scss                  | 1 +
 public/sass/components/_tooltip.scss                         | 4 ++++
 7 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
index a6719615dc4..0288c42ee98 100644
--- a/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
+++ b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
@@ -19,9 +19,12 @@ $popper-margin-from-ref: 5px;
     color: lighten($textColor, 20%);
   }
   a {
-    color: $white;
+    color: $tooltipLinkColor;
     text-decoration: underline;
   }
+  a.external-link {
+    color: $tooltipExternalLinkColor;
+  }
 }
 
 .popper {
diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index 03f27053bf9..3a807f5e695 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -282,6 +282,7 @@ $alert-info-bg: ${theme.colors.warning.main};
 // -------------------------
 $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
+$tooltipExternalLinkColor: $external-link-color;
 $graph-tooltip-bg: $dark-1;
 
 $tooltipBackground: ${theme.components.tooltip.background};
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index ab97bed8cd1..57392812dce 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -293,6 +293,7 @@ $graph-tooltip-bg: $gray-5;
 
 $tooltipArrowWidth: 5px;
 $tooltipLinkColor: lighten($tooltipColor, 5%);
+$tooltipExternalLinkColor: #6E9FFF;
 
 $popover-error-bg: $btn-danger-bg;
 $popover-help-bg: $tooltipBackground;
diff --git a/public/app/features/variables/query/QueryVariableEditor.tsx b/public/app/features/variables/query/QueryVariableEditor.tsx
index fc63ac1a5c7..4530df24aa2 100644
--- a/public/app/features/variables/query/QueryVariableEditor.tsx
+++ b/public/app/features/variables/query/QueryVariableEditor.tsx
@@ -190,6 +190,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
                   Optional, if you want to extract part of a series name or metric node segment. Named capture groups
                   can be used to separate the display text and value (
                   <a
+                    className="external-link"
                     href="https://grafana.com/docs/grafana/latest/variables/filter-variables-with-regex#filter-and-modify-using-named-text-and-value-capture-groups"
                     target="__blank"
                   >
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index e3671331bc9..e98249f9b4a 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -285,6 +285,7 @@ $alert-info-bg: #F5B73D;
 // -------------------------
 $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
+$tooltipExternalLinkColor: $external-link-color;
 $graph-tooltip-bg: $dark-1;
 
 $tooltipBackground: #22252b;
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index e4c91c0e09f..e9782c8c8f8 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -295,6 +295,7 @@ $graph-tooltip-bg: $gray-5;
 
 $tooltipArrowWidth: 5px;
 $tooltipLinkColor: lighten($tooltipColor, 5%);
+$tooltipExternalLinkColor: #6E9FFF;
 
 $popover-error-bg: $btn-danger-bg;
 $popover-help-bg: $tooltipBackground;
diff --git a/public/sass/components/_tooltip.scss b/public/sass/components/_tooltip.scss
index f0b3e11b461..42ceb6e95fb 100644
--- a/public/sass/components/_tooltip.scss
+++ b/public/sass/components/_tooltip.scss
@@ -111,6 +111,10 @@
   a {
     color: $tooltipLinkColor;
   }
+
+  a.external-link {
+    color: $tooltipExternalLinkColor;
+  }
 }
 
 .grafana-tip {