Skip to content

Commit f562259

Browse files
ryanschuhlerbrianchandotcom
ryanschuhler
authored and
brianchandotcom
committed
LRSD-6992 Refactor
1 parent f23d0ae commit f562259

File tree

33 files changed

+580
-557
lines changed

33 files changed

+580
-557
lines changed

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/common/I18n/Language.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -429,8 +429,8 @@
429429
"select-a-file": "Select a file",
430430
"select-a-local-file-to-upload-only-one-file-can-be-attached-at-a-time": "Select a local file to upload. Only one file can be attached at a time.",
431431
"select-a-server-location-for-your-data-to-be-stored": "Select a server location for your data to be stored.",
432-
"select-an-active-liferay-x-subscription-to-download-the-activation-key": "Select an active Liferay {0} subscription to download the activation key",
433432
"select-all": "Select All",
433+
"select-an-active-liferay-x-subscription-to-download-the-activation-key": "Select an active Liferay {0} subscription to download the activation key",
434434
"select-team-member": "Select team member",
435435
"select-team-members": "Select team member(s)...",
436436
"select-the-activation-key-you-want-to-deactivate": "Select the activation key you want to deactivate.",

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/main.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import AttachmentFileUploader from './routes/attachment-uploader';
2121
import CustomerPortal from './routes/customer-portal';
2222
import Home from './routes/home';
2323
import Onboarding from './routes/onboarding';
24-
import SecurityVulnerability from './routes/security-vulnerability';
24+
import SecurityVulnerabilities from './routes/security-vulnerabilities';
2525

2626
const ELEMENT_ID = 'liferay-customer-custom-element';
2727

@@ -30,7 +30,7 @@ const AppRoutes = {
3030
home: Home,
3131
onboarding: Onboarding,
3232
portal: CustomerPortal,
33-
securityVulnerability: SecurityVulnerability,
33+
securityVulnerabilities: SecurityVulnerabilities,
3434
};
3535

3636
type Properties = {

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerability/SecurityVulnerability.tsx‎ renamed to ‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerabilities/SecurityVulnerabilities.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@
44
*/
55

66
import {BrowserRouter} from 'react-router-dom';
7-
import './app.scss';
87

98
import Pages from './pages';
109

11-
const SecurityVulnerability = () => {
10+
const SecurityVulnerabilities = () => {
1211
return (
1312
<div>
14-
<BrowserRouter basename="/web/customer-portal/security-vulnerability">
13+
<BrowserRouter basename="/web/customer-portal/security-vulnerabilities">
1514
<Pages />
1615
</BrowserRouter>
1716
</div>
1817
);
1918
};
2019

21-
export default SecurityVulnerability;
20+
export default SecurityVulnerabilities;

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerabilities/components/SVFilter/SVFilter.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.sv-filter-content {
2+
.custom-control-input {
3+
accent-color:var(--color-action-primary-default);
4+
opacity: 1;
5+
}
6+
7+
.disabled.sv-clear-button {
8+
color: var(--color-action-neutral-disabled);
9+
}
10+
11+
.sv-filter-box {
12+
background-color: var(--color-neutral-1);
13+
border-radius: var(--border-radius-lg);
14+
margin-bottom: var(--spacer-3);
15+
padding: var(--spacer-3);
16+
17+
& label span {
18+
color: var(--color-neutral-10);
19+
font-size: var(--font-size-sm);
20+
}
21+
}
22+
23+
.sv-select-all-button, .sv-clear-button {
24+
color: var(--color-action-neutral-default);
25+
font-size: var(--font-size-sm);
26+
font-weight: var(--font-weight-semi-bold);
27+
}
28+
}

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerabilities/components/SVFilter/SVFilter.tsx‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
/**
2+
* SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
3+
* SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
4+
*/
5+
6+
import {Button as ClayButton} from '@clayui/core';
7+
import {ClayCheckbox, ClayRadio} from '@clayui/form';
8+
import i18n from '~/common/I18n';
9+
10+
import {
11+
IFilterOptions,
12+
IFilters,
13+
} from '../../pages/SecurityVulnerabilitiesList/SecurityVulnerabilitiesList';
14+
15+
import './SVFilter.css';
16+
17+
interface IProps {
18+
filterOptions: IFilterOptions;
19+
filters: IFilters;
20+
onChange: (filters: IFilters) => void;
21+
}
22+
23+
const SVFilter = ({filterOptions, filters, onChange}: IProps) => {
24+
const toggleFilterValue = (filter: keyof IFilters, value: string) => {
25+
const currentFilterValues = filters[filter];
26+
27+
if (Array.isArray(currentFilterValues)) {
28+
if (currentFilterValues.includes(value)) {
29+
onChange({
30+
...filters,
31+
[filter]: currentFilterValues.filter((v) => v !== value),
32+
});
33+
}
34+
else {
35+
onChange({
36+
...filters,
37+
[filter]: [...currentFilterValues, value],
38+
});
39+
}
40+
}
41+
else {
42+
onChange({
43+
...filters,
44+
[filter]: value,
45+
});
46+
}
47+
};
48+
49+
const updateFilterValues = (
50+
filterKey: keyof IFilters,
51+
values: string[] | null
52+
) => {
53+
const newFilters = {...filters, [filterKey]: values ?? []};
54+
onChange({
55+
...filters,
56+
...newFilters,
57+
});
58+
};
59+
60+
return (
61+
<div className="sv-filter-content">
62+
<div className="sv-filter-box">
63+
<h5 className="pb-2">{i18n.translate('sort-by')}</h5>
64+
65+
<div className="align-items-center justify-content-center">
66+
{filterOptions.sorts.map((sort) => (
67+
<ClayRadio
68+
aria-label={sort}
69+
checked={filters.sort === sort}
70+
key="sort"
71+
label={i18n.translate(sort)}
72+
onChange={() => {
73+
toggleFilterValue('sort', sort);
74+
}}
75+
value={sort}
76+
/>
77+
))}
78+
</div>
79+
</div>
80+
81+
<div className="sv-filter-box sv-severities">
82+
<h5>{i18n.translate('severity')}</h5>
83+
84+
<div className="d-flex my-2">
85+
<ClayButton
86+
aria-label="Select All"
87+
className="mr-3 p-0 sv-select-all-button"
88+
displayType="link"
89+
onClick={() =>
90+
updateFilterValues('severities', [
91+
...filterOptions.severities,
92+
])
93+
}
94+
>
95+
{i18n.translate('select-all')}
96+
</ClayButton>
97+
98+
<ClayButton
99+
aria-label="Clear"
100+
className="p-0 sv-clear-button"
101+
displayType="link"
102+
onClick={() => updateFilterValues('severities', null)}
103+
>
104+
{i18n.translate('clear')}
105+
</ClayButton>
106+
</div>
107+
108+
{filterOptions.severities.map((severity) => (
109+
<ClayCheckbox
110+
aria-label={severity}
111+
checked={filters.severities.includes(severity)}
112+
key={severity}
113+
label={severity}
114+
onChange={() => {
115+
toggleFilterValue('severities', severity);
116+
}}
117+
/>
118+
))}
119+
</div>
120+
121+
<div className="sv-categories sv-filter-box">
122+
<h5>{i18n.translate('category')}</h5>
123+
124+
<div className="d-flex my-2">
125+
<ClayButton
126+
aria-label="Select All"
127+
className="mr-3 p-0 sv-select-all-button"
128+
displayType="link"
129+
onClick={() =>
130+
updateFilterValues('categories', [
131+
...filterOptions.categories,
132+
])
133+
}
134+
>
135+
{i18n.translate('select-all')}
136+
</ClayButton>
137+
138+
<ClayButton
139+
aria-label="Clear"
140+
className="p-0 sv-clear-button"
141+
displayType="link"
142+
onClick={() => updateFilterValues('categories', null)}
143+
>
144+
{i18n.translate('clear')}
145+
</ClayButton>
146+
</div>
147+
148+
{filterOptions.categories.map((category) => (
149+
<ClayCheckbox
150+
aria-label={category}
151+
checked={filters.categories.includes(category)}
152+
key={category}
153+
label={category}
154+
onChange={() => {
155+
toggleFilterValue('categories', category);
156+
}}
157+
/>
158+
))}
159+
</div>
160+
161+
<div className="sv-classifications sv-filter-box">
162+
<h5>{i18n.translate('issue-classification')}</h5>
163+
164+
<div className="d-flex my-2">
165+
<ClayButton
166+
aria-label="Select All"
167+
className="mr-3 p-0 sv-select-all-button"
168+
displayType="link"
169+
onClick={() =>
170+
updateFilterValues('classifications', [
171+
...filterOptions.classifications,
172+
])
173+
}
174+
>
175+
{i18n.translate('select-all')}
176+
</ClayButton>
177+
178+
<ClayButton
179+
aria-label="Clear"
180+
className="p-0 sv-clear-button"
181+
displayType="link"
182+
onClick={() =>
183+
updateFilterValues('classifications', null)
184+
}
185+
>
186+
{i18n.translate('clear')}
187+
</ClayButton>
188+
</div>
189+
190+
{filterOptions.classifications.map((classification) => (
191+
<ClayCheckbox
192+
aria-label={classification}
193+
checked={filters.classifications.includes(
194+
classification
195+
)}
196+
key={classification}
197+
label={classification}
198+
onChange={() => {
199+
toggleFilterValue(
200+
'classifications',
201+
classification
202+
);
203+
}}
204+
/>
205+
))}
206+
</div>
207+
208+
<div className="sv-filter-box sv-versions">
209+
<h5>{i18n.translate('affected-version')}</h5>
210+
211+
<div className="d-flex my-2">
212+
<ClayButton
213+
aria-label="Select All"
214+
className="mr-3 p-0 sv-select-all-button"
215+
displayType="link"
216+
onClick={() =>
217+
updateFilterValues('versions', [
218+
...filterOptions.versions,
219+
])
220+
}
221+
>
222+
{i18n.translate('select-all')}
223+
</ClayButton>
224+
225+
<ClayButton
226+
aria-label="Clear"
227+
className="p-0 sv-clear-button"
228+
displayType="link"
229+
onClick={() => updateFilterValues('versions', null)}
230+
>
231+
{i18n.translate('clear')}
232+
</ClayButton>
233+
</div>
234+
235+
{filterOptions.versions.map((version) => (
236+
<ClayCheckbox
237+
aria-label={version}
238+
checked={filters.versions.includes(version)}
239+
key={version}
240+
label={version}
241+
onChange={() => {
242+
toggleFilterValue('versions', version);
243+
}}
244+
/>
245+
))}
246+
</div>
247+
</div>
248+
);
249+
};
250+
251+
export default SVFilter;

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerability/index.ts‎ renamed to ‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerabilities/components/SVFilter/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
* SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
44
*/
55

6-
export {default} from './SecurityVulnerability';
6+
export {default} from './SVFilter';

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerabilities/components/SVSearch/SVSearch.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.sv-search {
2+
width: var(--container-max-md);
3+
4+
.sv-search-icon {
5+
bottom: calc(50% - var(--font-size-base)/2);
6+
font-size: var(--font-size-base);
7+
right: var(--spacer-4);
8+
}
9+
10+
.sv-search-input {
11+
color: var(--color-neutral-8);
12+
width: 100%;
13+
}
14+
}

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerability/components/SearchBar/SearchBar.tsx‎ renamed to ‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerabilities/components/SVSearch/SVSearch.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,24 @@ import {ClayInput} from '@clayui/form';
77
import ClayIcon from '@clayui/icon';
88
import i18n from '~/common/I18n';
99

10-
interface SearchBarProps {
11-
searchTerm: string;
12-
onSearchChange: (term: string) => void;
10+
import './SVSearch.css';
11+
12+
interface IProps {
13+
onChange: (term: string) => void;
14+
term: string;
1315
}
1416

15-
const SearchBar = ({searchTerm, onSearchChange}: SearchBarProps) => {
17+
const SVSearch = ({onChange, term}: IProps) => {
1618
return (
17-
<div className="flex-grow-1 mr-3 position-relative">
19+
<div className="flex-grow-1 mr-3 position-relative sv-search">
1820
<ClayInput
19-
className="border border-brand-primary-lighten-4 font-weight-semi-bold px-5 py-3 rounded-pill shadow-lg sv-search"
20-
onChange={(event) => onSearchChange(event.target.value)}
21+
className="border border-brand-primary-lighten-4 font-weight-semi-bold px-5 py-3 rounded-pill shadow-lg sv-search-input"
22+
onChange={(event) => onChange(event.target.value)}
2123
placeholder={i18n.translate(
2224
'search-for-sves-by-keyword-or-cve-id'
2325
)}
2426
type="text"
25-
value={searchTerm}
27+
value={term}
2628
/>
2729

2830
<ClayIcon
@@ -33,4 +35,4 @@ const SearchBar = ({searchTerm, onSearchChange}: SearchBarProps) => {
3335
);
3436
};
3537

36-
export default SearchBar;
38+
export default SVSearch;

‎workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/routes/security-vulnerabilities/components/SVSearch/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/**
2+
* SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
3+
* SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
4+
*/
5+
6+
export {default} from './SVSearch';

0 commit comments

Comments
 (0)