Chore: convert VariableOptions to use emotion instead of scss (#64135)

convert VariableOptions to use emotion instead of scss

e2e/dashboards-suite/load-options-from-url.spec.ts

@@ -20,7 +20,7 @@ describe('Variables - Load options from Url', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -33,7 +33,7 @@ describe('Variables - Load options from Url', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -46,7 +46,7 @@ describe('Variables - Load options from Url', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -72,7 +72,7 @@ describe('Variables - Load options from Url', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -85,7 +85,7 @@ describe('Variables - Load options from Url', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -98,7 +98,7 @@ describe('Variables - Load options from Url', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -135,7 +135,7 @@ describe('Variables - Load options from Url', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -147,7 +147,7 @@ describe('Variables - Load options from Url', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 65);
+        e2e.components.Variables.variableOption().should('have.length', 65);
       });
   });
 });

e2e/dashboards-suite/new-query-variable.spec.ts

@@ -123,7 +123,7 @@ describe('Variables - Query - Add variable', () => {
         e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
           .should('be.visible')
           .within(() => {
-            e2e().get('.variable-option').should('have.length', 1);
+            e2e.components.Variables.variableOption().should('have.length', 1);
           });
 
         e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('C').should('be.visible');
@@ -195,7 +195,7 @@ describe('Variables - Query - Add variable', () => {
         e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
           .should('be.visible')
           .within(() => {
-            e2e().get('.variable-option').should('have.length', 2);
+            e2e.components.Variables.variableOption().should('have.length', 2);
           });
 
         e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');

e2e/dashboards-suite/set-options-from-ui.spec.ts

@@ -33,7 +33,7 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -46,7 +46,7 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 65);
+        e2e.components.Variables.variableOption().should('have.length', 65);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -89,7 +89,7 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 17);
+        e2e.components.Variables.variableOption().should('have.length', 17);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -105,7 +105,7 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -147,7 +147,7 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
@@ -160,7 +160,7 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
       .should('be.visible')
       .within(() => {
-        e2e().get('.variable-option').should('have.length', 9);
+        e2e.components.Variables.variableOption().should('have.length', 9);
       });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBA').should('be.visible');

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -403,4 +403,7 @@ export const Components = {
   AnalyticsToolbarButton: {
     button: 'Dashboard insights',
   },
+  Variables: {
+    variableOption: 'data-testid variable-option',
+  },
 };

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -354,9 +354,6 @@ $diff-json-changed-num: $text-color;
 
 $diff-json-icon: $gray-5;
 
-//Submenu
-$variable-option-bg: $dropdownLinkBackgroundHover;
-
 //Switch Slider
 // -------------------------
 $switch-bg: $input-bg;

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -353,9 +353,6 @@ $diff-json-changed-num: $gray-4;
 
 $diff-json-icon: $gray-4;
 
-//Submenu
-$variable-option-bg: $dropdownLinkBackgroundHover;
-
 //Switch Slider
 // -------------------------
 $switch-bg: $white;

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

@@ -1,9 +1,9 @@
 import { css, cx } from '@emotion/css';
-import classNames from 'classnames';
 import React, { PureComponent } from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Tooltip, Themeable2, withTheme2, clearButtonStyles } from '@grafana/ui';
+import { Tooltip, Themeable2, withTheme2, clearButtonStyles, stylesFactory } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
 import { ALL_VARIABLE_VALUE } from '../../constants';
@@ -41,13 +41,14 @@ class VariableOptions extends PureComponent<Props> {
 
   render() {
     // Don't want to pass faulty rest props to the div
-    const { multi, values, highlightIndex, selectedValues, onToggle, onToggleAll, ...restProps } = this.props;
+    const { multi, values, highlightIndex, selectedValues, onToggle, onToggleAll, theme, ...restProps } = this.props;
+    const styles = getStyles(theme);
 
     return (
-      <div className={`${multi ? 'variable-value-dropdown multi' : 'variable-value-dropdown single'}`}>
+      <div className={styles.variableValueDropdown}>
-        <div className="variable-options-wrapper">
+        <div className={styles.variableOptionsWrapper}>
           <ul
-            className={listStyles}
+            className={styles.variableOptionsColumn}
             aria-label={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown}
             {...restProps}
           >
@@ -60,22 +61,34 @@ class VariableOptions extends PureComponent<Props> {
   }
 
   renderOption(option: VariableOption, index: number) {
-    const { highlightIndex, theme } = this.props;
+    const { highlightIndex, multi, theme } = this.props;
-    const selectClass = option.selected ? 'variable-option pointer selected' : 'variable-option pointer';
+    const styles = getStyles(theme);
-    const highlightClass = index === highlightIndex ? `${selectClass} highlighted` : selectClass;
 
     const isAllOption = option.value === ALL_VARIABLE_VALUE;
 
     return (
       <li key={`${option.value}`}>
         <button
+          data-testid={selectors.components.Variables.variableOption}
           role="checkbox"
           type="button"
           aria-checked={option.selected}
-          className={classNames(highlightClass, clearButtonStyles(theme), noStyledButton)}
+          className={cx(
+            clearButtonStyles(theme),
+            styles.variableOption,
+            {
+              [styles.highlighted]: index === highlightIndex,
+            },
+            styles.noStyledButton
+          )}
           onClick={this.onToggle(option)}
         >
-          <span className="variable-option-icon"></span>
+          <span
+            className={cx(styles.variableOptionIcon, {
+              [styles.variableOptionIconSelected]: option.selected,
+              [styles.hideVariableOptionIcon]: !multi,
+            })}
+          ></span>
           <span data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(`${option.text}`)}>
             {isAllOption ? t('variable.picker.option-all', 'All') : option.text}
           </span>
@@ -86,6 +99,7 @@ class VariableOptions extends PureComponent<Props> {
 
   renderMultiToggle() {
     const { multi, selectedValues, theme } = this.props;
+    const styles = getStyles(theme);
 
     if (!multi) {
       return null;
@@ -96,18 +110,23 @@ class VariableOptions extends PureComponent<Props> {
     return (
       <Tooltip content={tooltipContent} placement={'top'}>
         <button
-          className={`${
+          className={cx(
-            selectedValues.length > 1
+            clearButtonStyles(theme),
-              ? 'variable-options-column-header many-selected'
+            styles.variableOption,
-              : 'variable-options-column-header'
+            styles.variableOptionColumnHeader,
-          } ${noStyledButton} ${clearButtonStyles(theme)}`}
+            styles.noStyledButton
+          )}
           role="checkbox"
           aria-checked={selectedValues.length > 1 ? 'mixed' : 'false'}
           onClick={this.onToggleAll}
           aria-label="Toggle all values"
           data-placement="top"
         >
-          <span className="variable-option-icon"></span>
+          <span
+            className={cx(styles.variableOptionIcon, {
+              [styles.variableOptionIconManySelected]: selectedValues.length > 1,
+            })}
+          ></span>
           <Trans i18nKey="variable.picker.option-selected-values">Selected</Trans> ({selectedValues.length})
         </button>
       </Tooltip>
@@ -115,16 +134,74 @@ class VariableOptions extends PureComponent<Props> {
   }
 }
 
-const listStyles = cx(
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  'variable-options-column',
+  const checkboxImageUrl = theme.isDark ? 'public/img/checkbox.png' : 'public/img/checkbox_white.png';
-  css`
-    list-style-type: none;
-  `
-);
 
-const noStyledButton = css`
+  return {
-  width: 100%;
+    hideVariableOptionIcon: css({
-  text-align: left;
+      display: 'none',
-`;
+    }),
+    highlighted: css({
+      backgroundColor: theme.colors.action.hover,
+    }),
+    noStyledButton: css({
+      width: '100%',
+      textAlign: 'left',
+    }),
+    variableOption: css({
+      display: 'block',
+      padding: '2px 27px 0 8px',
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      minWidth: '115px',
+      ['&:hover']: {
+        backgroundColor: theme.colors.action.hover,
+      },
+    }),
+    variableOptionColumnHeader: css({
+      paddingTop: '5px',
+      paddingBottom: '5px',
+      marginBottom: '5px',
+    }),
+    variableOptionIcon: css({
+      display: 'inline-block',
+      width: '24px',
+      height: '18px',
+      position: 'relative',
+      top: '4px',
+      background: `url(${checkboxImageUrl}) left top no-repeat`,
+    }),
+    variableOptionIconManySelected: css({
+      background: `url(${checkboxImageUrl}) 0px -36px no-repeat`,
+    }),
+    variableOptionIconSelected: css({
+      background: `url(${checkboxImageUrl}) 0px -18px no-repeat`,
+    }),
+    variableValueDropdown: css({
+      backgroundColor: theme.colors.background.primary,
+      border: `1px solid ${theme.colors.border.weak}`,
+      borderRadius: theme.shape.borderRadius(2),
+      boxShadow: theme.shadows.z2,
+      position: 'absolute',
+      top: theme.spacing(theme.components.height.md),
+      maxHeight: '400px',
+      minHeight: '150px',
+      minWidth: '150px',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      zIndex: theme.zIndex.typeahead,
+    }),
+    variableOptionsColumn: css({
+      maxHeight: '350px',
+      display: 'table-cell',
+      lineHeight: '26px',
+      listStyleType: 'none',
+    }),
+    variableOptionsWrapper: css({
+      display: 'table',
+      width: '100%',
+    }),
+  };
+});
 
 export default withTheme2(VariableOptions);

public/sass/_variables.dark.generated.scss

@@ -356,9 +356,6 @@ $diff-json-changed-num: $text-color;
 
 $diff-json-icon: $gray-5;
 
-//Submenu
-$variable-option-bg: $dropdownLinkBackgroundHover;
-
 //Switch Slider
 // -------------------------
 $switch-bg: $input-bg;

public/sass/_variables.light.generated.scss

@@ -353,9 +353,6 @@ $diff-json-changed-num: $gray-4;
 
 $diff-json-icon: $gray-4;
 
-//Submenu
-$variable-option-bg: $dropdownLinkBackgroundHover;
-
 //Switch Slider
 // -------------------------
 $switch-bg: $white;

public/sass/components/_submenu.scss

@@ -8,15 +8,6 @@
   padding: 0 0 $space-sm 0;
 }
 
-.annotation-segment {
-  padding: 8px 7px;
-
-  label.cr1 {
-    margin-left: 5px;
-    margin-top: 3px;
-  }
-}
-
 .submenu-item {
   display: inline-block;
 
@@ -30,114 +21,7 @@
   }
 }
 
-.variable-value-link {
-  max-width: 500px;
-  padding-right: 10px;
-  padding: 0 $space-sm;
-  background-color: $input-bg;
-  border: 1px solid $input-border-color;
-  border-radius: $input-border-radius;
-  display: flex;
-  align-items: center;
-  color: $text-color;
-  height: $input-height;
-
-  .label-tag {
-    margin: 0 5px;
-  }
-}
-
 .variable-link-wrapper {
   display: inline-block;
   position: relative;
 }
-
-.variable-value-dropdown {
-  position: absolute;
-  top: $input-height;
-  min-width: 150px;
-  max-height: 400px;
-  min-height: 150px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: $dropdownBackground;
-  box-shadow: $dropdownShadow;
-  z-index: $zindex-typeahead;
-  font-size: $font-size-base;
-  border-radius: 3px 3px 0 0;
-  border: 1px solid $tight-form-func-bg;
-
-  &.multi {
-    .selected {
-      .variable-option-icon {
-        background: url($checkboxImageUrl) 0px -18px no-repeat;
-      }
-    }
-  }
-
-  &.single {
-    .variable-option-icon {
-      display: none;
-    }
-    .selected {
-      background-color: $tight-form-func-highlight-bg;
-    }
-  }
-}
-
-.variable-options-wrapper {
-  display: table;
-  width: 100%;
-}
-
-.variable-options-column {
-  max-height: 350px;
-  display: table-cell;
-  line-height: 26px;
-  &:nth-child(2) {
-    border-left: 1px solid $tight-form-func-bg;
-  }
-}
-
-.variable-option-tag,
-.variable-option,
-.variable-options-column-header {
-  display: block;
-  padding: 2px 27px 0 8px;
-  position: relative;
-  white-space: nowrap;
-  min-width: 115px;
-}
-
-.variable-options-column-header {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  &.many-selected {
-    .variable-option-icon {
-      background: url($checkboxImageUrl) 0px -36px no-repeat;
-    }
-  }
-}
-
-.variable-option-icon {
-  display: inline-block;
-  width: 24px;
-  height: 18px;
-  position: relative;
-  top: 4px;
-  background: url($checkboxImageUrl) left top no-repeat;
-}
-
-.variable-option {
-  &:hover,
-  &.highlighted {
-    background-color: $variable-option-bg;
-  }
-}
-
-.dash-nav-link {
-  padding: 8px 7px;
-  display: inline-block;
-  color: $text-color;
-}