IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 08:56:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
convert VariableOptions to use emotion instead of scss
This commit is contained in:
Ashley Harrison 2023-03-07 11:13:57 +00:00 committed by GitHub
parent 7211422850
commit 5b8c2f494d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 123 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

4
e2e/dashboards-suite/new-query-variable.spec.ts
View File

@ -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');

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

@ -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');

3
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

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

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

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

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

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

131
public/app/features/variables/pickers/shared/VariableOptions.tsx
View File

@ -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="variable-options-wrapper">
<div className={styles.variableValueDropdown}>
<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 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 (
<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={`${
selectedValues.length > 1
? 'variable-options-column-header many-selected'
: 'variable-options-column-header'
} ${noStyledButton} ${clearButtonStyles(theme)}`}
className={cx(
clearButtonStyles(theme),
styles.variableOption,
styles.variableOptionColumnHeader,
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(
'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);

3
public/sass/_variables.dark.generated.scss
View File

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

3
public/sass/_variables.light.generated.scss
View File

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

116
public/sass/components/_submenu.scss
View File

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