diff --git a/e2e/dashboards-suite/load-options-from-url.spec.ts b/e2e/dashboards-suite/load-options-from-url.spec.ts index 4c03e37675b..d4e2f486eed 100644 --- a/e2e/dashboards-suite/load-options-from-url.spec.ts +++ b/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); }); }); }); diff --git a/e2e/dashboards-suite/new-query-variable.spec.ts b/e2e/dashboards-suite/new-query-variable.spec.ts index 40956de18f4..4ef03f29168 100644 --- a/e2e/dashboards-suite/new-query-variable.spec.ts +++ b/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'); diff --git a/e2e/dashboards-suite/set-options-from-ui.spec.ts b/e2e/dashboards-suite/set-options-from-ui.spec.ts index f62eee52e3e..94d1fbe60fd 100644 --- a/e2e/dashboards-suite/set-options-from-ui.spec.ts +++ b/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'); diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 26b53b7168d..50b2645979f 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/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', + }, }; 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 914343221b0..56122ca09a2 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/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; 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 1d88a8a3b24..f1b1b1baa4d 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/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; diff --git a/public/app/features/variables/pickers/shared/VariableOptions.tsx b/public/app/features/variables/pickers/shared/VariableOptions.tsx index ad538e2a408..e5f7214c9d2 100644 --- a/public/app/features/variables/pickers/shared/VariableOptions.tsx +++ b/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 { 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 ( -
-
+
+
    @@ -60,22 +61,34 @@ class VariableOptions extends PureComponent { } renderOption(option: VariableOption, index: number) { - const { highlightIndex, theme } = this.props; - const selectClass = option.selected ? 'variable-option pointer selected' : 'variable-option pointer'; - const highlightClass = index === highlightIndex ? `${selectClass} highlighted` : selectClass; + const { highlightIndex, multi, theme } = this.props; + const styles = getStyles(theme); const isAllOption = option.value === ALL_VARIABLE_VALUE; return (
  • @@ -115,16 +134,74 @@ class VariableOptions extends PureComponent { } } -const listStyles = cx( - 'variable-options-column', - css` - list-style-type: none; - ` -); +const getStyles = stylesFactory((theme: GrafanaTheme2) => { + const checkboxImageUrl = theme.isDark ? 'public/img/checkbox.png' : 'public/img/checkbox_white.png'; -const noStyledButton = css` - width: 100%; - text-align: left; -`; + return { + hideVariableOptionIcon: css({ + 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); diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 2d8026af48b..e1197d4f35e 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/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; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index c7022ca3136..84147e39fc4 100644 --- a/public/sass/_variables.light.generated.scss +++ b/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; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index b253b8b86be..3b97b28a940 100644 --- a/public/sass/components/_submenu.scss +++ b/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; -}