LRSD-6992 Refactor

liferay · Nov 12, 2024 · f562259 · f562259
1 parent f23d0ae
commit f562259
Show file tree

Hide file tree

Showing 33 changed files with 580 additions and 557 deletions.
diff --git a/...workspace/client-extensions/liferay-customer-custom-element/src/common/I18n/Language.json b/...workspace/client-extensions/liferay-customer-custom-element/src/common/I18n/Language.json
@@ -429,8 +429,8 @@
 	"select-a-file": "Select a file",
 	"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.",
 	"select-a-server-location-for-your-data-to-be-stored": "Select a server location for your data to be stored.",
-	"select-an-active-liferay-x-subscription-to-download-the-activation-key": "Select an active Liferay {0} subscription to download the activation key",
 	"select-all": "Select All",
+	"select-an-active-liferay-x-subscription-to-download-the-activation-key": "Select an active Liferay {0} subscription to download the activation key",
 	"select-team-member": "Select team member",
 	"select-team-members": "Select team member(s)...",
 	"select-the-activation-key-you-want-to-deactivate": "Select the activation key you want to deactivate.",

diff --git a/...liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/main.tsx b/...liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/main.tsx
@@ -21,7 +21,7 @@ import AttachmentFileUploader from './routes/attachment-uploader';
 import CustomerPortal from './routes/customer-portal';
 import Home from './routes/home';
 import Onboarding from './routes/onboarding';
-import SecurityVulnerability from './routes/security-vulnerability';
+import SecurityVulnerabilities from './routes/security-vulnerabilities';
 
 const ELEMENT_ID = 'liferay-customer-custom-element';
 
@@ -30,7 +30,7 @@ const AppRoutes = {
 	home: Home,
 	onboarding: Onboarding,
 	portal: CustomerPortal,
-	securityVulnerability: SecurityVulnerability,
+	securityVulnerabilities: SecurityVulnerabilities,
 };
 
 type Properties = {

diff --git a/...y-vulnerability/SecurityVulnerability.tsx → ...lnerabilities/SecurityVulnerabilities.tsx b/...y-vulnerability/SecurityVulnerability.tsx → ...lnerabilities/SecurityVulnerabilities.tsx
@@ -4,18 +4,17 @@
  */
 
 import {BrowserRouter} from 'react-router-dom';
-import './app.scss';
 
 import Pages from './pages';
 
-const SecurityVulnerability = () => {
+const SecurityVulnerabilities = () => {
 	return (
 		<div>
-			<BrowserRouter basename="/web/customer-portal/security-vulnerability">
+			<BrowserRouter basename="/web/customer-portal/security-vulnerabilities">
 				<Pages />
 			</BrowserRouter>
 		</div>
 	);
 };
 
-export default SecurityVulnerability;
+export default SecurityVulnerabilities;
diff --git a/...tomer-custom-element/src/routes/security-vulnerabilities/components/SVFilter/SVFilter.css b/...tomer-custom-element/src/routes/security-vulnerabilities/components/SVFilter/SVFilter.css
@@ -0,0 +1,28 @@
+.sv-filter-content {
+	.custom-control-input {
+		accent-color:var(--color-action-primary-default);
+		opacity: 1;
+	}
+
+	.disabled.sv-clear-button {
+		color: var(--color-action-neutral-disabled);
+	}
+
+	.sv-filter-box {
+		background-color: var(--color-neutral-1);
+		border-radius: var(--border-radius-lg);
+		margin-bottom: var(--spacer-3);
+		padding: var(--spacer-3);
+
+		& label span {
+			color: var(--color-neutral-10);
+			font-size: var(--font-size-sm);
+		}
+	}
+
+	.sv-select-all-button, .sv-clear-button {
+		color: var(--color-action-neutral-default);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-semi-bold);
+	}
+}
diff --git a/...tomer-custom-element/src/routes/security-vulnerabilities/components/SVFilter/SVFilter.tsx b/...tomer-custom-element/src/routes/security-vulnerabilities/components/SVFilter/SVFilter.tsx
@@ -0,0 +1,251 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import {Button as ClayButton} from '@clayui/core';
+import {ClayCheckbox, ClayRadio} from '@clayui/form';
+import i18n from '~/common/I18n';
+
+import {
+	IFilterOptions,
+	IFilters,
+} from '../../pages/SecurityVulnerabilitiesList/SecurityVulnerabilitiesList';
+
+import './SVFilter.css';
+
+interface IProps {
+	filterOptions: IFilterOptions;
+	filters: IFilters;
+	onChange: (filters: IFilters) => void;
+}
+
+const SVFilter = ({filterOptions, filters, onChange}: IProps) => {
+	const toggleFilterValue = (filter: keyof IFilters, value: string) => {
+		const currentFilterValues = filters[filter];
+
+		if (Array.isArray(currentFilterValues)) {
+			if (currentFilterValues.includes(value)) {
+				onChange({
+					...filters,
+					[filter]: currentFilterValues.filter((v) => v !== value),
+				});
+			}
+			else {
+				onChange({
+					...filters,
+					[filter]: [...currentFilterValues, value],
+				});
+			}
+		}
+		else {
+			onChange({
+				...filters,
+				[filter]: value,
+			});
+		}
+	};
+
+	const updateFilterValues = (
+		filterKey: keyof IFilters,
+		values: string[] | null
+	) => {
+		const newFilters = {...filters, [filterKey]: values ?? []};
+		onChange({
+			...filters,
+			...newFilters,
+		});
+	};
+
+	return (
+		<div className="sv-filter-content">
+			<div className="sv-filter-box">
+				<h5 className="pb-2">{i18n.translate('sort-by')}</h5>
+
+				<div className="align-items-center justify-content-center">
+					{filterOptions.sorts.map((sort) => (
+						<ClayRadio
+							aria-label={sort}
+							checked={filters.sort === sort}
+							key="sort"
+							label={i18n.translate(sort)}
+							onChange={() => {
+								toggleFilterValue('sort', sort);
+							}}
+							value={sort}
+						/>
+					))}
+				</div>
+			</div>
+
+			<div className="sv-filter-box sv-severities">
+				<h5>{i18n.translate('severity')}</h5>
+
+				<div className="d-flex my-2">
+					<ClayButton
+						aria-label="Select All"
+						className="mr-3 p-0 sv-select-all-button"
+						displayType="link"
+						onClick={() =>
+							updateFilterValues('severities', [
+								...filterOptions.severities,
+							])
+						}
+					>
+						{i18n.translate('select-all')}
+					</ClayButton>
+
+					<ClayButton
+						aria-label="Clear"
+						className="p-0 sv-clear-button"
+						displayType="link"
+						onClick={() => updateFilterValues('severities', null)}
+					>
+						{i18n.translate('clear')}
+					</ClayButton>
+				</div>
+
+				{filterOptions.severities.map((severity) => (
+					<ClayCheckbox
+						aria-label={severity}
+						checked={filters.severities.includes(severity)}
+						key={severity}
+						label={severity}
+						onChange={() => {
+							toggleFilterValue('severities', severity);
+						}}
+					/>
+				))}
+			</div>
+
+			<div className="sv-categories sv-filter-box">
+				<h5>{i18n.translate('category')}</h5>
+
+				<div className="d-flex my-2">
+					<ClayButton
+						aria-label="Select All"
+						className="mr-3 p-0 sv-select-all-button"
+						displayType="link"
+						onClick={() =>
+							updateFilterValues('categories', [
+								...filterOptions.categories,
+							])
+						}
+					>
+						{i18n.translate('select-all')}
+					</ClayButton>
+
+					<ClayButton
+						aria-label="Clear"
+						className="p-0 sv-clear-button"
+						displayType="link"
+						onClick={() => updateFilterValues('categories', null)}
+					>
+						{i18n.translate('clear')}
+					</ClayButton>
+				</div>
+
+				{filterOptions.categories.map((category) => (
+					<ClayCheckbox
+						aria-label={category}
+						checked={filters.categories.includes(category)}
+						key={category}
+						label={category}
+						onChange={() => {
+							toggleFilterValue('categories', category);
+						}}
+					/>
+				))}
+			</div>
+
+			<div className="sv-classifications sv-filter-box">
+				<h5>{i18n.translate('issue-classification')}</h5>
+
+				<div className="d-flex my-2">
+					<ClayButton
+						aria-label="Select All"
+						className="mr-3 p-0 sv-select-all-button"
+						displayType="link"
+						onClick={() =>
+							updateFilterValues('classifications', [
+								...filterOptions.classifications,
+							])
+						}
+					>
+						{i18n.translate('select-all')}
+					</ClayButton>
+
+					<ClayButton
+						aria-label="Clear"
+						className="p-0 sv-clear-button"
+						displayType="link"
+						onClick={() =>
+							updateFilterValues('classifications', null)
+						}
+					>
+						{i18n.translate('clear')}
+					</ClayButton>
+				</div>
+
+				{filterOptions.classifications.map((classification) => (
+					<ClayCheckbox
+						aria-label={classification}
+						checked={filters.classifications.includes(
+							classification
+						)}
+						key={classification}
+						label={classification}
+						onChange={() => {
+							toggleFilterValue(
+								'classifications',
+								classification
+							);
+						}}
+					/>
+				))}
+			</div>
+
+			<div className="sv-filter-box sv-versions">
+				<h5>{i18n.translate('affected-version')}</h5>
+
+				<div className="d-flex my-2">
+					<ClayButton
+						aria-label="Select All"
+						className="mr-3 p-0 sv-select-all-button"
+						displayType="link"
+						onClick={() =>
+							updateFilterValues('versions', [
+								...filterOptions.versions,
+							])
+						}
+					>
+						{i18n.translate('select-all')}
+					</ClayButton>
+
+					<ClayButton
+						aria-label="Clear"
+						className="p-0 sv-clear-button"
+						displayType="link"
+						onClick={() => updateFilterValues('versions', null)}
+					>
+						{i18n.translate('clear')}
+					</ClayButton>
+				</div>
+
+				{filterOptions.versions.map((version) => (
+					<ClayCheckbox
+						aria-label={version}
+						checked={filters.versions.includes(version)}
+						key={version}
+						label={version}
+						onChange={() => {
+							toggleFilterValue('versions', version);
+						}}
+					/>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default SVFilter;
diff --git a/...rc/routes/security-vulnerability/index.ts → ...nerabilities/components/SVFilter/index.ts b/...rc/routes/security-vulnerability/index.ts → ...nerabilities/components/SVFilter/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
  */
 
-export {default} from './SecurityVulnerability';
+export {default} from './SVFilter';
diff --git a/...tomer-custom-element/src/routes/security-vulnerabilities/components/SVSearch/SVSearch.css b/...tomer-custom-element/src/routes/security-vulnerabilities/components/SVSearch/SVSearch.css
@@ -0,0 +1,14 @@
+.sv-search {
+	width: var(--container-max-md);
+
+	.sv-search-icon {
+		bottom: calc(50% - var(--font-size-base)/2);
+		font-size: var(--font-size-base);
+		right: var(--spacer-4);
+	}
+
+	.sv-search-input {
+		color: var(--color-neutral-8);
+		width: 100%;
+	}
+}
diff --git a/...bility/components/SearchBar/SearchBar.tsx → ...bilities/components/SVSearch/SVSearch.tsx b/...bility/components/SearchBar/SearchBar.tsx → ...bilities/components/SVSearch/SVSearch.tsx
@@ -7,22 +7,24 @@ import {ClayInput} from '@clayui/form';
 import ClayIcon from '@clayui/icon';
 import i18n from '~/common/I18n';
 
-interface SearchBarProps {
-	searchTerm: string;
-	onSearchChange: (term: string) => void;
+import './SVSearch.css';
+
+interface IProps {
+	onChange: (term: string) => void;
+	term: string;
 }
 
-const SearchBar = ({searchTerm, onSearchChange}: SearchBarProps) => {
+const SVSearch = ({onChange, term}: IProps) => {
 	return (
-		<div className="flex-grow-1 mr-3 position-relative">
+		<div className="flex-grow-1 mr-3 position-relative sv-search">
 			<ClayInput
-				className="border border-brand-primary-lighten-4 font-weight-semi-bold px-5 py-3 rounded-pill shadow-lg sv-search"
-				onChange={(event) => onSearchChange(event.target.value)}
+				className="border border-brand-primary-lighten-4 font-weight-semi-bold px-5 py-3 rounded-pill shadow-lg sv-search-input"
+				onChange={(event) => onChange(event.target.value)}
 				placeholder={i18n.translate(
 					'search-for-sves-by-keyword-or-cve-id'
 				)}
 				type="text"
-				value={searchTerm}
+				value={term}
 			/>
 
 			<ClayIcon
@@ -33,4 +35,4 @@ const SearchBar = ({searchTerm, onSearchChange}: SearchBarProps) => {
 	);
 };
 
-export default SearchBar;
+export default SVSearch;
diff --git a/...-customer-custom-element/src/routes/security-vulnerabilities/components/SVSearch/index.ts b/...-customer-custom-element/src/routes/security-vulnerabilities/components/SVSearch/index.ts
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+export {default} from './SVSearch';