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

@@ -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 {

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};

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;

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"
                   >

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;

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;

public/sass/components/_tooltip.scss

@@ -111,6 +111,10 @@
   a {
     color: $tooltipLinkColor;
   }
+
+  a.external-link {
+    color: $tooltipExternalLinkColor;
+  }
 }
 
 .grafana-tip {