Skip to content

fix(components/TDP-9660): lint errors RatioBar/QualityBar #3158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
trob-tlnd merged 5 commits into from
Jan 11, 2021
Merged

fix(components/TDP-9660): lint errors RatioBar/QualityBar #3158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
918f3b8
feature(TDP-9660) : Add menu dropdown on quality bar component
trob-tlnd Dec 21, 2020
9609f93
fix lint
trob-tlnd Jan 11, 2021
650c6ce
Merge branch 'master' into trob-tlnd/feature/TDP-9660_support_popover…
trob-tlnd Jan 11, 2021
604fa57
chore(ci): update code style outputs
Jan 11, 2021
c84c17d
chore(ci): prettier
Jan 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 4 additions & 13 deletions output/components.eslint.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,16 +214,6 @@
347:2 error defaultProp "minimumPercentage" has no corresponding propTypes declaration react/default-props-match-prop-types
348:2 error defaultProp "display" has no corresponding propTypes declaration react/default-props-match-prop-types

/home/travis/build/Talend/ui/packages/components/src/QualityBar/QualityBar.stories.js
15:6 error Empty components are self-closing react/self-closing-comp
17:6 error Empty components are self-closing react/self-closing-comp
19:6 error Empty components are self-closing react/self-closing-comp
21:6 error Empty components are self-closing react/self-closing-comp
23:6 error Empty components are self-closing react/self-closing-comp
25:6 error Empty components are self-closing react/self-closing-comp
27:6 error Empty components are self-closing react/self-closing-comp
29:6 error Empty components are self-closing react/self-closing-comp

/home/travis/build/Talend/ui/packages/components/src/RadarChart/RadarChart.stories.js
31:7 error 'activeAxis' is assigned a value but never used @typescript-eslint/no-unused-vars
45:6 error Value must be omitted for boolean attributes react/jsx-boolean-value
Expand Down Expand Up @@ -291,7 +281,8 @@
54:6 error The autoFocus prop should not be used, as it can reduce usability and accessibility for users jsx-a11y/no-autofocus

/home/travis/build/Talend/ui/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.component.js
16:18 error React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
17:18 error React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
21:18 error React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks

/home/travis/build/Talend/ui/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js
34:7 error Use callback in setState when referencing the previous state react/no-access-state-in-setstate
Expand All @@ -316,5 +307,5 @@
673:44 error ["icon"] is better written in dot notation dot-notation
679:56 error ["resizable"] is better written in dot notation dot-notation

✖ 155 problems (135 errors, 20 warnings)
15 errors and 0 warnings potentially fixable with the `--fix` option.
✖ 148 problems (128 errors, 20 warnings)
7 errors and 0 warnings potentially fixable with the `--fix` option.
35 changes: 25 additions & 10 deletions packages/components/src/QualityBar/QualityBar.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,27 +53,42 @@ export function QualityBar({ invalid, valid, empty, onClick, getDataFeature, dig
return (
<RatioBar.Composition>
<QualityInvalidLine
onClick={onClick ? (e) => onClick(e, {
type: QualityType.INVALID
}) : null}
onClick={
onClick
? e =>
onClick(e, {
type: QualityType.INVALID,
})
: null
}
Comment on lines +56 to +63
Copy link
Contributor

@romainseb romainseb Jan 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a formating issue ? It's looking weird to me

Copy link
Contributor Author

@trob-tlnd trob-tlnd Jan 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

problem of linter ?

Copy link
Contributor

@romainseb romainseb Jan 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Forget about it, looks good now, it was the code that was not formatted well before

dataFeature={getDataFeature ? getDataFeature(QualityType.INVALID) : null}
value={invalid}
percentage={invalidPercentage}
t={t}
/>
<QualityEmptyLine
onClick={onClick ? (e) => onClick(e, {
type: QualityType.EMPTY
}) : null}
onClick={
onClick
? e =>
onClick(e, {
type: QualityType.EMPTY,
})
: null
}
dataFeature={getDataFeature ? getDataFeature(QualityType.EMPTY) : null}
value={empty}
percentage={emptyPercentage}
t={t}
/>
<QualityValidLine
onClick={onClick ? (e) => onClick(e, {
type: QualityType.VALID
}) : null}
onClick={
onClick
? e =>
onClick(e, {
type: QualityType.VALID,
})
: null
}
dataFeature={getDataFeature ? getDataFeature(QualityType.VALID) : null}
value={valid}
percentage={validPercentage}
Expand All @@ -88,6 +103,6 @@ QualityBar.propTypes = {
empty: PropTypes.number.isRequired,
valid: PropTypes.number.isRequired,
onClick: PropTypes.func,
dataFeature: PropTypes.func,
getDataFeature: PropTypes.func,
digits: PropTypes.number,
};
39 changes: 25 additions & 14 deletions packages/components/src/QualityBar/QualityBar.component.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,24 +29,35 @@ describe('QualityBar', () => {
invalid: 123,
empty: 332,
onClick: mockFunctionAction,
getDataFeature: (qualityType) => { return `data-feature-${qualityType}` },
getDataFeature: qualityType => {
return `data-feature-${qualityType}`;
},
};
// when
const wrapper = mount(<QualityBar {...props} />);
wrapper.find('div').filterWhere((item) => {
return item.prop('data-feature') === 'data-feature-valid';
}).simulate('click');
wrapper
.find('div')
.filterWhere(item => {
return item.prop('data-feature') === 'data-feature-valid';
})
.simulate('click');
// then
expect(mockFunctionAction).toHaveBeenCalled();;
expect(wrapper.find('div').filterWhere((item) => {
return item.prop('data-feature') === 'data-feature-valid';
}).length).toBe(1);
expect(wrapper.find('div').filterWhere((item) => {
return item.prop('data-feature') === 'data-feature-invalid';
}).length).toBe(1);
expect(wrapper.find('div').filterWhere((item) => {
return item.prop('data-feature') === 'data-feature-empty';
}).length).toBe(1);
expect(mockFunctionAction).toHaveBeenCalled();
expect(
wrapper.find('div').filterWhere(item => {
return item.prop('data-feature') === 'data-feature-valid';
}).length,
).toBe(1);
expect(
wrapper.find('div').filterWhere(item => {
return item.prop('data-feature') === 'data-feature-invalid';
}).length,
).toBe(1);
expect(
wrapper.find('div').filterWhere(item => {
return item.prop('data-feature') === 'data-feature-empty';
}).length,
).toBe(1);
});
});
});
4 changes: 3 additions & 1 deletion packages/components/src/QualityBar/QualityBar.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ stories
valid={88}
empty={3}
onClick={action('onClickAction')}
getDataFeature={(qualityType) => { return `data-feature.${qualityType}` }}
getDataFeature={qualityType => {
return `data-feature.${qualityType}`;
}}
/>
</div>
</section>
Expand Down
32 changes: 7 additions & 25 deletions packages/components/src/QualityBar/QualityRatioBar.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,12 @@ function formatNumber(value = '') {
}

export const QualityType = {
VALID: "valid",
INVALID: "invalid",
EMPTY: "empty"
}
VALID: 'valid',
INVALID: 'invalid',
EMPTY: 'empty',
};

export function QualityInvalidLine({
value,
percentage,
t,
dataFeature,
onClick,
}) {
export function QualityInvalidLine({ value, percentage, t, dataFeature, onClick }) {
return (
<RatioBar.Line
percentage={percentage}
Expand All @@ -60,13 +54,7 @@ export function QualityInvalidLine({
}
QualityInvalidLine.propTypes = qualityBarLinePropTypes;

export function QualityValidLine({
value,
percentage,
t,
dataFeature,
onClick,
}) {
export function QualityValidLine({ value, percentage, t, dataFeature, onClick }) {
return (
<RatioBar.Line
percentage={percentage}
Expand All @@ -86,13 +74,7 @@ export function QualityValidLine({
}
QualityValidLine.propTypes = qualityBarLinePropTypes;

export function QualityEmptyLine({
value,
percentage,
t,
dataFeature,
onClick,
}) {
export function QualityEmptyLine({ value, percentage, t, dataFeature, onClick }) {
return (
<RatioBar.Line
percentage={percentage}
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/QualityBar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { QualityBar } from './QualityBar.component';
import { QualityType } from './QualityRatioBar.component';
QualityBar.QualityType = QualityType

QualityBar.QualityType = QualityType;
export default QualityBar;
16 changes: 5 additions & 11 deletions packages/components/src/RatioBar/RatioBarComposition.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,7 @@ import ratioBarTheme from './RatioBar.scss';
const theme = getTheme(ratioBarTheme);
const minPercentage = 5;

export function RatioBarLine({
percentage,
tooltipLabel,
className,
value,
dataFeature,
onClick,
}) {
export function RatioBarLine({ percentage, tooltipLabel, className, value, dataFeature, onClick }) {
const canGrow = percentage >= minPercentage;

if (!value || value < 0) return null;
Expand All @@ -33,9 +26,10 @@ export function RatioBarLine({
default:
break;
}
};
}

const content = (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className={theme(
'tc-ratio-bar-line',
Expand All @@ -49,10 +43,10 @@ export function RatioBarLine({
style={{
flexBasis: `${Math.max(percentage, minPercentage)}%`,
}}
role={onClick && "button"}
role={onClick && 'button'}
data-feature={dataFeature}
onClick={onClick}
onKeyDown={onClick}
onKeyDown={onKeyDown}
/>
);

Expand Down