From aff9e27309fc59401923c52508df4a4aa31ee99d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ladislav=20Slez=C3=A1k?= Date: Wed, 4 Oct 2023 16:27:08 +0200 Subject: [PATCH] cleanup --- web/src/assets/styles/app.scss | 4 ---- web/src/components/software/PatternItem.jsx | 22 ++++++++++++++---- .../components/software/PatternSelector.jsx | 23 ++++++++++++------- web/src/components/software/index.js | 1 + web/src/index.js | 3 +-- 5 files changed, 34 insertions(+), 19 deletions(-) diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss index 7bb91b5d10..8df5bcf579 100644 --- a/web/src/assets/styles/app.scss +++ b/web/src/assets/styles/app.scss @@ -165,7 +165,3 @@ button.kebab-toggler { .pattern-group-name { font-size: 120%; } - -.search-summary { - color: #666; -} diff --git a/web/src/components/software/PatternItem.jsx b/web/src/components/software/PatternItem.jsx index 2301733d8d..796dd0ae6a 100644 --- a/web/src/components/software/PatternItem.jsx +++ b/web/src/components/software/PatternItem.jsx @@ -20,10 +20,11 @@ */ import React, { useEffect, useState } from "react"; -import { useInstallerClient } from "~/context/installer"; import { sprintf } from "sprintf-js"; import cockpit from "../../lib/cockpit"; + +import { useInstallerClient } from "~/context/installer"; import { Icon } from "~/components/layout"; import { _ } from "~/i18n"; @@ -31,10 +32,16 @@ import iconAvailable from "./icons/package-available.svg"; import iconInstall from "./icons/package-install.svg"; import iconAutoInstall from "./icons/package-install-auto.svg"; +// path to pattern icons const ICON_PATH = "/usr/share/icons/hicolor/scalable/apps/%s.svg"; -function stateIcon(selected) { - switch (selected) { +/** + * Get checkbox status icon for the required pattern installation status + * @param {number} state pattern selection status + * @returns {string} Raw SVG icon data + */ +function stateIcon(state) { + switch (state) { case 0: return iconInstall; case 1: @@ -44,6 +51,11 @@ function stateIcon(selected) { } } +/** + * Get ARIA label for the required pattern installation status + * @param {number} state pattern selection status + * @returns {string} Label + */ function stateAriaLabel(selected) { switch (selected) { case 0: @@ -66,12 +78,12 @@ function PatternItem({ pattern, onChange }) { switch (pattern.selected) { // available pattern (not selected) case undefined: - console.log("Selecting pattern ", pattern.name); + if (process.env.NODE_ENV !== "production") console.log("Selecting pattern ", pattern.name); client.software.addPattern(pattern.name).then(() => onChange()); break; // user selected case 0: - console.log("Removing pattern ", pattern.name); + if (process.env.NODE_ENV !== "production") console.log("Removing pattern ", pattern.name); client.software.removePattern(pattern.name).then(() => onChange()); break; // auto selected diff --git a/web/src/components/software/PatternSelector.jsx b/web/src/components/software/PatternSelector.jsx index a6536b3b0b..fe267740f6 100644 --- a/web/src/components/software/PatternSelector.jsx +++ b/web/src/components/software/PatternSelector.jsx @@ -31,8 +31,6 @@ import UsedSize from "./UsedSize"; import { _ } from "~/i18n"; function convert(pattern_data, selected) { - console.log("selected: ", selected); - const patterns = []; Object.keys(pattern_data).forEach((name) => { @@ -98,22 +96,27 @@ function PatternSelector() { setSearchValue(value); }; + // refresh the page content after changing a pattern status const refreshCb = useCallback(() => { - client.software.selectedPatterns().then((sel) => setSelected(sel)); - client.software.getUsedSpace().then((sp) => setUsed(sp)); + const refresh = async () => { + setSelected(await client.software.selectedPatterns()); + setUsed(await client.software.getUsedSpace()); + }; + + refresh(); }, [client.software]); useEffect(() => { // patterns already loaded if (patterns) return; - const refresh = async () => { + const loadData = async () => { setPatterns(await client.software.patterns(true)); setSelected(await client.software.selectedPatterns()); setUsed(await client.software.getUsedSpace()); }; - refresh(); + loadData(); }, [patterns, client.software]); if (!patterns || !selected) { @@ -121,8 +124,11 @@ function PatternSelector() { } let patternsData = convert(patterns, selected); + + // count the number of selected patterns const numSelected = patternsData.reduce((acc, pat) => acc + (pat.selected === undefined ? 0 : 1), 0); + // filtering - search the required text in the name and pattern description if (searchValue !== "") { const searchData = searchValue.toUpperCase(); patternsData = patternsData.filter((p) => @@ -132,10 +138,10 @@ function PatternSelector() { } const groups = groupPatterns(patternsData); - console.log("patterns: ", groups); + if (process.env.NODE_ENV !== "production") console.log("patterns: ", groups); const sortedGroups = sortGroups(groups); - console.log("sorted groups: ", sortedGroups); + if (process.env.NODE_ENV !== "production") console.log("sorted groups: ", sortedGroups); const selector = sortGroups(groups).map((group) => { return ( @@ -159,6 +165,7 @@ function PatternSelector() { value={searchValue} onChange={(_event, value) => onSearchChange(value)} onClear={() => onSearchChange("")} + // do not display the counter when search filter is empty resultsCount={searchValue === "" ? 0 : patternsData.length} /> diff --git a/web/src/components/software/index.js b/web/src/components/software/index.js index 49a6259cc4..55098e4104 100644 --- a/web/src/components/software/index.js +++ b/web/src/components/software/index.js @@ -23,3 +23,4 @@ export { default as ProductSelectionPage } from "./ProductSelectionPage"; export { default as ChangeProductLink } from "./ChangeProductLink"; export { default as PatternSelector } from "./PatternSelector"; export { default as UsedSize } from "./UsedSize"; +export { default as SoftwareSelectionPage } from "./SoftwareSelectionPage"; diff --git a/web/src/index.js b/web/src/index.js index 0d805ea56a..cd23777397 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -41,9 +41,8 @@ import Main from "~/Main"; import DevServerWrapper from "~/DevServerWrapper"; import L10nWrapper from "~/L10nWrapper"; import L10nBackendWrapper from "~/L10nBackendWrapper"; -import SoftwareSelectionPage from "~/components/software/SoftwareSelectionPage"; import { Overview } from "~/components/overview"; -import { ProductSelectionPage } from "~/components/software"; +import { ProductSelectionPage, SoftwareSelectionPage } from "~/components/software"; import { ProposalPage as StoragePage, ISCSIPage, DASDPage, ZFCPPage } from "~/components/storage"; import { UsersPage } from "~/components/users"; import { L10nPage } from "~/components/l10n";