cleanup

web/src/assets/styles/app.scss

@@ -165,7 +165,3 @@ button.kebab-toggler {
 .pattern-group-name {
   font-size: 120%;
 }
-
-.search-summary {
-  color: #666;
-}

web/src/components/software/PatternItem.jsx

@@ -20,21 +20,28 @@
  */
 
 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";
 
 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

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,31 +96,39 @@ 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) {
     return <></>;
   }
 
   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}
         />
 

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";

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";