Template variable filters: Hide overflowing text (#25801)

* Add a span as a flex item

* Add max-width

* Removed old angular directive remnant

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/variables/pickers/shared/VariableLink.tsx

@@ -3,6 +3,7 @@ import { getTagColorsFromName, Icon } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { VariableTag } from '../../types';
+import { css } from 'emotion';
 
 interface Props {
   onClick: () => void;
@@ -24,20 +25,29 @@ export class VariableLink extends PureComponent<Props> {
         onClick={this.onClick}
         className="variable-value-link"
         aria-label={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${text}`)}
+        title={text}
       >
-        {text}
-        {tags.map(tag => {
-          const { color, borderColor } = getTagColorsFromName(tag.text.toString());
-          return (
-            <span bs-tooltip="tag.valuesText" data-placement="bottom" key={`${tag.text}`}>
-              <span className="label-tag" style={{ backgroundColor: color, borderColor }}>
-                &nbsp;&nbsp;
-                <Icon name="tag-alt" />
-                &nbsp; {tag.text}
+        <span
+          className={css`
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          `}
+        >
+          {text}
+          {tags.map(tag => {
+            const { color, borderColor } = getTagColorsFromName(tag.text.toString());
+            return (
+              <span key={`${tag.text}`}>
+                <span className="label-tag" style={{ backgroundColor: color, borderColor }}>
+                  &nbsp;&nbsp;
+                  <Icon name="tag-alt" />
+                  &nbsp; {tag.text}
+                </span>
               </span>
-            </span>
-          );
-        })}
+            );
+          })}
+        </span>
         <Icon name="angle-down" size="sm" />
       </a>
     );

public/sass/components/_submenu.scss

@@ -24,7 +24,6 @@
 .submenu-item {
   display: inline-block;
   margin-right: 15px;
-  float: left;
 
   .fa-caret-down {
     font-size: 75%;
@@ -37,6 +36,7 @@
 }
 
 .variable-value-link {
+  max-width: 500px;
   padding-right: 10px;
   padding: 0 $space-sm;
   background-color: $input-bg;