Skip to content

Commit 30401d5

Browse files
a-h-abdelsalambjoernricks
a-h-abdelsalam
and
bjoernricks
authored
Use new badges for compliance labels (#4288)
* Fix: Use new badges for compliance labels * Add comment for translations --------- Co-authored-by: Björn Ricks <[email protected]>
1 parent 39758cf commit 30401d5

File tree

5 files changed

+85
-91
lines changed

5 files changed

+85
-91
lines changed

‎src/web/components/label/compliancestate.jsx

Lines changed: 30 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,41 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55

6-
import styled from 'styled-components';
7-
import useTranslation from 'web/hooks/useTranslation';
8-
import PropTypes from 'web/utils/proptypes';
6+
import createLabel from 'web/components/label/label';
97
import Theme from 'web/utils/theme';
108

11-
const Label = styled.div`
12-
text-align: center;
13-
font-weight: normal;
14-
font-style: normal;
15-
color: white;
16-
padding: 1px;
17-
display: inline-block;
18-
width: 70px;
19-
height: 1.5em;
20-
font-size: 0.8em;
21-
background-color: ${props => props.$backgroundColor};
22-
border-color: ${props => props.$borderColor};
23-
`;
24-
25-
const ComplianceLabel = ({text, color, ...props}) => {
26-
const [_] = useTranslation();
27-
return (
28-
<Label
29-
{...props}
30-
$backgroundColor={Theme[color]}
31-
$borderColor={Theme[color]}
32-
data-testid={`compliance-state-${text}`}
33-
>
34-
{_(text)}
35-
</Label>
36-
);
37-
};
38-
39-
ComplianceLabel.propTypes = {
40-
text: PropTypes.string,
41-
color: PropTypes.string,
42-
};
43-
44-
const YesLabel = props => (
45-
<ComplianceLabel {...props} color="complianceYes" data-testid="compliance-state-yes" text="Yes"/>
9+
const YesLabel = createLabel(
10+
Theme.complianceYes,
11+
Theme.complianceYes,
12+
Theme.white,
13+
'compliance-state-yes',
14+
// _('Yes')
15+
'Yes',
4616
);
47-
const NoLabel = props => (
48-
<ComplianceLabel {...props} color="complianceNo" data-testid="compliance-state-no" text="No"/>
17+
18+
const NoLabel = createLabel(
19+
Theme.complianceNo,
20+
Theme.complianceNo,
21+
Theme.white,
22+
'compliance-state-no',
23+
// _('No')
24+
'No',
4925
);
50-
const IncompleteLabel = props => (
51-
<ComplianceLabel {...props} color="complianceIncomplete" data-testid="compliance-state-incomplete" text="Incomplete"/>
26+
const IncompleteLabel = createLabel(
27+
Theme.complianceIncomplete,
28+
Theme.complianceIncomplete,
29+
Theme.white,
30+
'compliance-state-incomplete',
31+
// _('Incomplete')
32+
'Incomplete',
5233
);
53-
const UndefinedLabel = props => (
54-
<ComplianceLabel {...props} color="complianceUndefined" data-testid="compliance-state-undefined" text="Undefined"/>
34+
const UndefinedLabel = createLabel(
35+
Theme.complianceUndefined,
36+
Theme.complianceUndefined,
37+
Theme.white,
38+
'compliance-state-undefined',
39+
// _('Undefined')
40+
'Undefined',
5541
);
5642

5743
export const ComplianceStateLabels = {

‎src/web/components/label/label.jsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/* SPDX-FileCopyrightText: 2025 Greenbone AG
2+
*
3+
* SPDX-License-Identifier: AGPL-3.0-or-later
4+
*/
5+
6+
import {useTranslation} from 'react-i18next';
7+
import styled from 'styled-components';
8+
9+
const Label = styled.div`
10+
box-sizing: border-box;
11+
position: relative;
12+
font-weight: normal;
13+
font-style: normal;
14+
color: white;
15+
padding: 1px;
16+
display: inline-flex;
17+
align-items: center;
18+
justify-content: center;
19+
width: 70px;
20+
height: 1.5em;
21+
font-size: 0.8em;
22+
text-align: center;
23+
color: ${props => props.$textColor};
24+
background-color: ${props => props.$backgroundColor};
25+
border-radius: 5px;
26+
overflow: hidden;
27+
border-color: ${props => props.$borderColor};
28+
`;
29+
30+
const createLabel =
31+
(backgroundColor, borderColor, textColor, testId, text) => props => {
32+
const [_] = useTranslation();
33+
return (
34+
<Label
35+
{...props}
36+
$backgroundColor={backgroundColor}
37+
$borderColor={borderColor}
38+
$textColor={textColor}
39+
data-testid={testId}
40+
>
41+
{_(text)}
42+
</Label>
43+
);
44+
};
45+
46+
export default createLabel;

‎src/web/components/label/severityclass.jsx

Lines changed: 1 addition & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,9 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55

6-
import {useTranslation} from 'react-i18next';
7-
import styled from 'styled-components';
6+
import createLabel from 'web/components/label/label';
87
import Theme from 'web/utils/theme';
98

10-
const Label = styled.div`
11-
box-sizing: border-box;
12-
position: relative;
13-
font-weight: normal;
14-
font-style: normal;
15-
color: white;
16-
padding: 1px;
17-
display: inline-flex;
18-
align-items: center;
19-
justify-content: center;
20-
width: 70px;
21-
height: 1.5em;
22-
font-size: 0.8em;
23-
text-align: center;
24-
color: ${props => props.$textColor};
25-
background-color: ${props => props.$backgroundColor};
26-
border-radius: 5px;
27-
overflow: hidden;
28-
border-color: ${props => props.$borderColor};
29-
`;
30-
31-
const createLabel =
32-
(backgroundColor, borderColor, textColor, testId, text) => props => {
33-
const [_] = useTranslation();
34-
return (
35-
<Label
36-
{...props}
37-
$backgroundColor={backgroundColor}
38-
$borderColor={borderColor}
39-
$textColor={textColor}
40-
data-testid={testId}
41-
>
42-
{_(text)}
43-
</Label>
44-
);
45-
};
46-
479
const HighLabel = createLabel(
4810
Theme.errorRed,
4911
Theme.errorRed,

‎src/web/pages/reports/__tests__/auditfilterdialog.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@ describe('Filter Dialog for Audit report', () => {
5454
const filterGroup = getByTestId('compliance-levels-filter-group');
5555
const {queryByTestId, queryAllByRole} = within(filterGroup);
5656

57-
const yesCheckbox = queryByTestId('compliance-state-Yes');
58-
const noCheckbox = queryByTestId('compliance-state-No');
59-
const incompleteCheckbox = queryByTestId('compliance-state-Incomplete');
60-
const undefinedCheckbox = queryByTestId('compliance-state-Undefined');
57+
const yesCheckbox = queryByTestId('compliance-state-yes');
58+
const noCheckbox = queryByTestId('compliance-state-no');
59+
const incompleteCheckbox = queryByTestId('compliance-state-incomplete');
60+
const undefinedCheckbox = queryByTestId('compliance-state-undefined');
6161

6262
expect(yesCheckbox).toHaveTextContent('Yes');
6363
expect(noCheckbox).toHaveTextContent('No');

‎src/web/pages/reports/__tests__/detailsfilterdialog.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,10 @@ describe('Details Filter Dialog for Audit report', () => {
5858
const filterGroup = getByTestId('compliance-levels-filter-group');
5959
const {queryAllByRole} = within(filterGroup);
6060

61-
const yesCheckbox = getByTestId('compliance-state-Yes');
62-
const noCheckbox = getByTestId('compliance-state-No');
63-
const incompleteCheckbox = getByTestId('compliance-state-Incomplete');
64-
const undefinedCheckbox = getByTestId('compliance-state-Undefined');
61+
const yesCheckbox = getByTestId('compliance-state-yes');
62+
const noCheckbox = getByTestId('compliance-state-no');
63+
const incompleteCheckbox = getByTestId('compliance-state-incomplete');
64+
const undefinedCheckbox = getByTestId('compliance-state-undefined');
6565

6666
expect(yesCheckbox).toHaveTextContent('Yes');
6767
expect(noCheckbox).toHaveTextContent('No');

0 commit comments

Comments
 (0)