mirror of https://github.com/grafana/grafana
Fix: Show an ellipsis if Query row title is too long (#27648)
* add overflow hidden to titleWrapper * show ellipsis and css labels for components * readd drag handle after bad merge * rewrite userpicker test with rtl * update test after adding css label to icon component * fix more tests..pull/27681/head
Peter Holmberg
5 years ago
committed by
GitHub
parent
1e5309a788
commit
6a14f830ba
@ -1,112 +0,0 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`TeamPicker renders correctly 1`] = ` |
||||
<div |
||||
className="user-picker" |
||||
> |
||||
<div> |
||||
<div |
||||
className="gf-form-input gf-form-input--form-dropdown css-at6rp9-SelectContainer" |
||||
onKeyDown={[Function]} |
||||
> |
||||
<div |
||||
className="gf-form-select-box__control css-ia584n-Control" |
||||
onMouseDown={[Function]} |
||||
onTouchEnd={[Function]} |
||||
> |
||||
<div |
||||
className="gf-form-select-box__value-container css-1q9zhbr-ValueContainer" |
||||
> |
||||
<div |
||||
className="gf-form-select-box__placeholder css-d8h0m4-Placeholder" |
||||
> |
||||
Select a team |
||||
</div> |
||||
<div |
||||
className="css-zz0hea-Input" |
||||
> |
||||
<div |
||||
className="gf-form-select-box__input" |
||||
style={ |
||||
Object { |
||||
"display": "inline-block", |
||||
} |
||||
} |
||||
> |
||||
<input |
||||
aria-autocomplete="list" |
||||
autoCapitalize="none" |
||||
autoComplete="off" |
||||
autoCorrect="off" |
||||
disabled={false} |
||||
id="react-select-2-input" |
||||
onBlur={[Function]} |
||||
onChange={[Function]} |
||||
onFocus={[Function]} |
||||
spellCheck="false" |
||||
style={ |
||||
Object { |
||||
"background": 0, |
||||
"border": 0, |
||||
"boxSizing": "content-box", |
||||
"color": "inherit", |
||||
"fontSize": "inherit", |
||||
"label": "input", |
||||
"opacity": 1, |
||||
"outline": 0, |
||||
"padding": 0, |
||||
"width": "1px", |
||||
} |
||||
} |
||||
tabIndex="0" |
||||
type="text" |
||||
value="" |
||||
/> |
||||
<div |
||||
style={ |
||||
Object { |
||||
"height": 0, |
||||
"left": 0, |
||||
"overflow": "scroll", |
||||
"position": "absolute", |
||||
"top": 0, |
||||
"visibility": "hidden", |
||||
"whiteSpace": "pre", |
||||
} |
||||
} |
||||
> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="gf-form-select-box__indicators css-q46mcr-IndicatorsContainer" |
||||
> |
||||
<div |
||||
className="css-1cvxpvr" |
||||
> |
||||
<svg |
||||
className="css-sr6nr" |
||||
fill="currentColor" |
||||
height={16} |
||||
style={ |
||||
Object { |
||||
"marginTop": "7px", |
||||
} |
||||
} |
||||
viewBox="0 0 24 24" |
||||
width={16} |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z" |
||||
/> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,112 +0,0 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`UserPicker renders correctly 1`] = ` |
||||
<div |
||||
className="user-picker" |
||||
> |
||||
<div> |
||||
<div |
||||
className="gf-form-input gf-form-input--form-dropdown css-at6rp9-SelectContainer" |
||||
onKeyDown={[Function]} |
||||
> |
||||
<div |
||||
className="gf-form-select-box__control css-ia584n-Control" |
||||
onMouseDown={[Function]} |
||||
onTouchEnd={[Function]} |
||||
> |
||||
<div |
||||
className="gf-form-select-box__value-container css-1q9zhbr-ValueContainer" |
||||
> |
||||
<div |
||||
className="gf-form-select-box__placeholder css-d8h0m4-Placeholder" |
||||
> |
||||
Select user |
||||
</div> |
||||
<div |
||||
className="css-zz0hea-Input" |
||||
> |
||||
<div |
||||
className="gf-form-select-box__input" |
||||
style={ |
||||
Object { |
||||
"display": "inline-block", |
||||
} |
||||
} |
||||
> |
||||
<input |
||||
aria-autocomplete="list" |
||||
autoCapitalize="none" |
||||
autoComplete="off" |
||||
autoCorrect="off" |
||||
disabled={false} |
||||
id="react-select-2-input" |
||||
onBlur={[Function]} |
||||
onChange={[Function]} |
||||
onFocus={[Function]} |
||||
spellCheck="false" |
||||
style={ |
||||
Object { |
||||
"background": 0, |
||||
"border": 0, |
||||
"boxSizing": "content-box", |
||||
"color": "inherit", |
||||
"fontSize": "inherit", |
||||
"label": "input", |
||||
"opacity": 1, |
||||
"outline": 0, |
||||
"padding": 0, |
||||
"width": "1px", |
||||
} |
||||
} |
||||
tabIndex="0" |
||||
type="text" |
||||
value="" |
||||
/> |
||||
<div |
||||
style={ |
||||
Object { |
||||
"height": 0, |
||||
"left": 0, |
||||
"overflow": "scroll", |
||||
"position": "absolute", |
||||
"top": 0, |
||||
"visibility": "hidden", |
||||
"whiteSpace": "pre", |
||||
} |
||||
} |
||||
> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="gf-form-select-box__indicators css-q46mcr-IndicatorsContainer" |
||||
> |
||||
<div |
||||
className="css-1cvxpvr" |
||||
> |
||||
<svg |
||||
className="css-sr6nr" |
||||
fill="currentColor" |
||||
height={16} |
||||
style={ |
||||
Object { |
||||
"marginTop": "7px", |
||||
} |
||||
} |
||||
viewBox="0 0 24 24" |
||||
width={16} |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z" |
||||
/> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,55 +0,0 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Aggregations renders correctly 1`] = ` |
||||
Array [ |
||||
<div |
||||
className="gf-form-inline" |
||||
> |
||||
<label |
||||
className="gf-form-label query-keyword width-9" |
||||
> |
||||
Aggregation |
||||
</label> |
||||
<div |
||||
className="gf-form" |
||||
onClick={[Function]} |
||||
> |
||||
<a |
||||
className="gf-form-label query-part query-placeholder" |
||||
> |
||||
Select Reducer |
||||
</a> |
||||
</div> |
||||
<div |
||||
className="gf-form gf-form--grow" |
||||
> |
||||
<label |
||||
className="gf-form-label gf-form-label--grow" |
||||
> |
||||
<a |
||||
onClick={[Function]} |
||||
> |
||||
<div |
||||
className="css-1cvxpvr" |
||||
> |
||||
<svg |
||||
className="css-sr6nr" |
||||
fill="currentColor" |
||||
height={16} |
||||
viewBox="0 0 24 24" |
||||
width={16} |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
d="M14.83,11.29,10.59,7.05a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41L12.71,12,9.17,15.54a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l4.24-4.24A1,1,0,0,0,14.83,11.29Z" |
||||
/> |
||||
</svg> |
||||
</div> |
||||
Advanced Options |
||||
</a> |
||||
</label> |
||||
</div> |
||||
</div>, |
||||
<div />, |
||||
] |
||||
`; |
||||
@ -1,21 +1,19 @@ |
||||
import React from 'react'; |
||||
import renderer from 'react-test-renderer'; |
||||
import { render, screen } from '@testing-library/react'; |
||||
import { Stats } from './Stats'; |
||||
|
||||
const toOption = (value: any) => ({ label: value, value }); |
||||
|
||||
describe('Stats', () => { |
||||
it('should render component', () => { |
||||
const tree = renderer |
||||
.create( |
||||
<Stats |
||||
values={['Average', 'Minimum']} |
||||
variableOptionGroup={{ label: 'templateVar', value: 'templateVar' }} |
||||
onChange={() => {}} |
||||
stats={['Average', 'Maximum', 'Minimum', 'Sum', 'SampleCount'].map(toOption)} |
||||
/> |
||||
) |
||||
.toJSON(); |
||||
expect(tree).toMatchSnapshot(); |
||||
render( |
||||
<Stats |
||||
values={['Average', 'Minimum']} |
||||
variableOptionGroup={{ label: 'templateVar', value: 'templateVar' }} |
||||
onChange={() => {}} |
||||
stats={['Average', 'Maximum', 'Minimum', 'Sum', 'SampleCount'].map(toOption)} |
||||
/> |
||||
); |
||||
expect(screen.getByTestId('stats')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
|
||||
@ -1,51 +0,0 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Stats should render component 1`] = ` |
||||
Array [ |
||||
<div |
||||
className="gf-form" |
||||
onClick={[Function]} |
||||
> |
||||
<a |
||||
className="gf-form-label query-part" |
||||
> |
||||
Average |
||||
</a> |
||||
</div>, |
||||
<div |
||||
className="gf-form" |
||||
onClick={[Function]} |
||||
> |
||||
<a |
||||
className="gf-form-label query-part" |
||||
> |
||||
Minimum |
||||
</a> |
||||
</div>, |
||||
<div |
||||
className="gf-form" |
||||
onClick={[Function]} |
||||
> |
||||
<a |
||||
className="gf-form-label query-part" |
||||
> |
||||
<div |
||||
className="css-1cvxpvr" |
||||
> |
||||
<svg |
||||
className="css-sr6nr" |
||||
fill="currentColor" |
||||
height={16} |
||||
viewBox="0 0 24 24" |
||||
width={16} |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
d="M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z" |
||||
/> |
||||
</svg> |
||||
</div> |
||||
</a> |
||||
</div>, |
||||
] |
||||
`; |
||||
Loading…
Reference in new issue