Skip to content

Commit 08e87bf

Browse files
trob-tlndtrob-tlnd
committed
feature(TDP-9660) : Add menu dropdown on quality bar component
1 parent a47f26a commit 08e87bf

File tree

5 files changed

+187
-12
lines changed

5 files changed

+187
-12
lines changed

‎packages/datagrid/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,5 +76,5 @@
7676
"publishConfig": {
7777
"access": "public"
7878
},
79-
"version": "6.5.0"
79+
"version": "6.4.0"
8080
}

‎packages/datagrid/src/components/DefaultHeaderRenderer/DefaultHeaderRenderer.test.js‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { shallow } from 'enzyme';
2+
import { mount, shallow } from 'enzyme';
33

44
import {
55
QUALITY_KEY,
@@ -42,6 +42,54 @@ describe('#DefaultHeaderGrid', () => {
4242
expect(onKeyDown).toHaveBeenCalledWith(event, 'colId');
4343
});
4444

45+
it('should render DefaultHeaderGrid with filter button on quality Bar', () => {
46+
const onFocusedColumn = jest.fn();
47+
const onKeyDown = jest.fn();
48+
const wrapper = mount(
49+
<DefaultHeaderRenderer
50+
onFocusedColumn={onFocusedColumn}
51+
onKeyDown={onKeyDown}
52+
column={{
53+
colId: 'colId',
54+
colDef: {
55+
type: 'string',
56+
[QUALITY_KEY]: {
57+
[QUALITY_INVALID_KEY]: {
58+
total: 50,
59+
percentage: 34,
60+
buttonFilter: {
61+
onClick: () => null,
62+
dataFeature: 'data-feature filter button valid value',
63+
title: 'data-feature filter button valid value'
64+
}
65+
},
66+
[QUALITY_EMPTY_KEY]: {
67+
total: 50,
68+
percentage: 33,
69+
buttonFilter: {
70+
onClick: () => null,
71+
dataFeature: 'data-feature filter button empty value',
72+
title: 'data-feature filter button empty value'
73+
}
74+
},
75+
[QUALITY_VALID_KEY]: {
76+
total: 50,
77+
percentage: 33,
78+
buttonFilter: {
79+
onClick: () => null,
80+
dataFeature: 'data-feature filter button valid value',
81+
title: 'data-feature filter button valid value'
82+
}
83+
},
84+
},
85+
},
86+
}}
87+
displayName="Title"
88+
/>,
89+
);
90+
expect(wrapper.find('.button-filter-quality-bar').length).toBe(6);
91+
});
92+
4593
it('should render DefaultHeaderGrid without QualityBar', () => {
4694
const onFocusedColumn = jest.fn();
4795
const wrapper = shallow(

‎packages/datagrid/src/components/DefaultHeaderRenderer/QualityBar.component.js‎

Lines changed: 57 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
44
import { useTranslation } from 'react-i18next';
5-
5+
import { Action } from '@talend/react-components';
66
import I18N_DOMAIN_DATAGRID from '../../constant';
77
import getDefaultT from '../../translate';
88

@@ -34,23 +34,47 @@ function QualityBar(props) {
3434
style={{ width: `${props.invalid.percentage}%`, minWidth: `${QUALITY_BAR_MIN_WIDTH}%` }}
3535
title={t('QUALITY_BAR_INVALID', {
3636
count: props.invalid.total,
37-
defaultValue: '{{total}} invalid values ({{percentage}}%)',
37+
defaultValue: '{{total}} invalid {{values}} ({{percentage}}%)',
3838
percentage: props.invalid.percentage,
3939
total: formatNumber(props.invalid.total),
40+
values: props.invalid.total > 1 ? 'values' : 'value'
4041
})}
41-
/>
42+
>
43+
{
44+
props.invalid.buttonFilter &&
45+
<Action
46+
className={classNames(theme['button-filter-quality-bar'], 'button-filter-quality-bar')}
47+
data-feature={props.invalid.buttonFilter.dataFeature}
48+
onClick={props.invalid.buttonFilter.onClick}
49+
title={props.invalid.buttonFilter.title}
50+
buttonRef={props.invalid.buttonFilter.buttonRef}
51+
/>
52+
}
53+
</span>
4254
)}
4355
{!!props.empty.total && (
4456
<span
4557
className={classNames(theme['td-quality-bar-empty'], 'td-quality-bar-empty')}
4658
style={{ width: `${props.empty.percentage}%`, minWidth: `${QUALITY_BAR_MIN_WIDTH}%` }}
4759
title={t('QUALITY_BAR_EMPTY', {
4860
count: props.empty.total,
49-
defaultValue: '{{total}} empty values ({{percentage}}%)',
61+
defaultValue: '{{total}} empty {{values}} ({{percentage}}%)',
5062
percentage: props.empty.percentage,
5163
total: formatNumber(props.empty.total),
64+
values: props.empty.total > 1 ? 'values' : 'value'
5265
})}
53-
/>
66+
>
67+
{
68+
props.empty.buttonFilter &&
69+
<Action
70+
className={classNames(theme['button-filter-quality-bar'], 'button-filter-quality-bar')}
71+
data-feature={props.empty.buttonFilter.dataFeature}
72+
onClick={props.empty.buttonFilter.onClick}
73+
title={props.empty.buttonFilter.title}
74+
buttonRef={props.empty.buttonFilter.buttonRef}
75+
/>
76+
}
77+
</span>
5478
)}
5579
{!!props.valid.total && (
5680
<span
@@ -60,23 +84,46 @@ function QualityBar(props) {
6084
count: props.valid.total,
6185
total: formatNumber(props.valid.total),
6286
percentage: props.valid.percentage,
63-
defaultValue: '{{total}} valid values ({{percentage}}%)',
87+
values: props.valid.total > 1 ? 'values' : 'value',
88+
defaultValue: '{{total}} valid {{values}} ({{percentage}}%)'
6489
})}
65-
/>
90+
>
91+
{
92+
props.valid.buttonFilter &&
93+
<Action
94+
className={classNames(theme['button-filter-quality-bar'], 'button-filter-quality-bar')}
95+
data-feature={props.valid.buttonFilter.dataFeature}
96+
onClick={props.valid.buttonFilter.onClick}
97+
title={props.valid.buttonFilter.title}
98+
buttonRef={props.valid.buttonFilter.buttonRef}
99+
/>
100+
}
101+
</span>
66102
)}
67103
</div>
68104
);
69105
}
70106

107+
export const BUTTON_FILTER_PROPTYPE = {
108+
onClick: PropTypes.func.isRequired,
109+
dataFeature: PropTypes.string,
110+
title: PropTypes.string.isRequired,
111+
buttonRef: PropTypes.oneOfType([
112+
PropTypes.func,
113+
PropTypes.shape({ current: PropTypes.instanceOf(Element) })
114+
])
115+
};
116+
71117
export const QUALITY_PROPTYPE = {
72-
total: PropTypes.number,
73-
percentage: PropTypes.number,
118+
total: PropTypes.number.isRequired,
119+
percentage: PropTypes.number.isRequired,
120+
buttonFilter: PropTypes.shape(BUTTON_FILTER_PROPTYPE)
74121
};
75122

76123
QualityBar.propTypes = {
77124
valid: PropTypes.shape(QUALITY_PROPTYPE),
78125
empty: PropTypes.shape(QUALITY_PROPTYPE),
79-
invalid: PropTypes.shape(QUALITY_PROPTYPE),
126+
invalid: PropTypes.shape(QUALITY_PROPTYPE)
80127
};
81128

82129
export default QualityBar;

‎packages/datagrid/src/components/DefaultHeaderRenderer/QualityBar.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,28 @@ $td-quality-bar-height: 0.5rem !default;
2020
background-color: $td-quality-bar-empty-background-color;
2121
}
2222
}
23+
24+
.button-filter-quality-bar {
25+
min-height: stretch;
26+
height: stretch;
27+
display: block;
28+
width: stretch;
29+
outline: none;
30+
color: transparent;
31+
background-color: transparent;
32+
&:hover {
33+
outline: none;
34+
&:active {
35+
outline: none;
36+
}
37+
}
38+
&:active {
39+
outline: none;
40+
&:hover {
41+
outline: none;
42+
}
43+
}
44+
&:focus {
45+
outline: none;
46+
}
47+
}

‎packages/datagrid/src/components/datagrid.component.stories.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import sample2 from '../../stories/sample2.json';
1414
import sample3 from '../../stories/sample3.json';
1515
import sampleWithoutQuality from '../../stories/sampleWithoutQuality.json';
1616
import getComponent from '../../stories/getComponent';
17+
import QualityBar from './DefaultHeaderRenderer/QualityBar.component';
1718

1819
// eslint-disable-next-line no-irregular-whitespace
1920
sample.data[0].value.field0.value = ` loreum lo
@@ -210,3 +211,57 @@ storiesOf('Data/Datagrid/Datagrid', module)
210211
</div>
211212
))
212213
.add('datagrid with immutable data', () => <ImmutableDataGrid />);
214+
storiesOf('Data/Datagrid/QualityBar', module)
215+
.add('default', () => (
216+
<QualityBar
217+
style={{ position: 'inherit' }}
218+
{...{
219+
valid: {
220+
total: 50,
221+
percentage: 33,
222+
},
223+
empty: {
224+
total: 50,
225+
percentage: 33,
226+
},
227+
invalid: {
228+
total: 50,
229+
percentage: 34,
230+
},
231+
}}
232+
/>
233+
))
234+
.add('default with button filter', () => (
235+
<QualityBar
236+
style={{ position: 'inherit' }}
237+
{...{
238+
valid: {
239+
total: 50,
240+
percentage: 33,
241+
buttonFilter: {
242+
onClick: () => console.log('filter valide value'),
243+
dataFeature: 'data-feature filter button valid value',
244+
title: 'data-feature filter button valid value'
245+
}
246+
},
247+
empty: {
248+
total: 50,
249+
percentage: 33,
250+
buttonFilter: {
251+
onClick: () => console.log('filter empty value'),
252+
dataFeature: 'data-feature filter button empty value',
253+
title: 'data-feature filter button empty value'
254+
}
255+
},
256+
invalid: {
257+
total: 50,
258+
percentage: 34,
259+
buttonFilter: {
260+
onClick: () => console.log('filter empty invalid'),
261+
dataFeature: 'data-feature filter button empty invalid',
262+
title: 'data-feature filter button empty invalid'
263+
}
264+
},
265+
}}
266+
/>
267+
));

0 commit comments

Comments
 (0)