[web] Some code improvements

web/src/components/overview/ProductSection.jsx

@@ -21,15 +21,15 @@
 
 import React, { useEffect, useState } from "react";
 import { Text } from "@patternfly/react-core";
-import { useCancellablePromise } from "~/utils";
+import { toValidationError, useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
 import { useProduct } from "~/context/product";
-import { Section, SectionSkeleton } from "~/components/core";
+import { If, Section, SectionSkeleton } from "~/components/core";
 import { _ } from "~/i18n";
 
 const errorsFrom = (issues) => {
   const errors = issues.filter(i => i.severity === "error");
-  return errors.map(e => ({ message: e.description }));
+  return errors.map(toValidationError);
 };
 
 export default function ProductSection() {
@@ -44,12 +44,16 @@ export default function ProductSection() {
   }, [cancellablePromise, setIssues, software]);
 
   const Content = ({ isLoading = false }) => {
-    if (isLoading) return <SectionSkeleton numRows={1} />;
-
     return (
-      <Text>
-        {selectedProduct?.name}
-      </Text>
+      <If
+        condition={isLoading}
+        then={<SectionSkeleton numRows={1} />}
+        else={
+          <Text>
+            {selectedProduct?.name}
+          </Text>
+        }
+      />
     );
   };
 

web/src/components/overview/SoftwareSection.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022] SUSE LLC
+ * Copyright (c) [2022-2023] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -20,13 +20,13 @@
  */
 
 import React, { useReducer, useEffect } from "react";
+import { BUSY } from "~/client/status";
 import { Button } from "@patternfly/react-core";
-import { ProgressText, Section } from "~/components/core";
 import { Icon } from "~/components/layout";
+import { ProgressText, Section } from "~/components/core";
+import { toValidationError, useCancellablePromise } from "~/utils";
 import { UsedSize } from "~/components/software";
-import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
-import { BUSY } from "~/client/status";
 import { _ } from "~/i18n";
 
 const initialState = {
@@ -78,10 +78,6 @@ export default function SoftwareSection({ showErrors }) {
     return client.onStatusChange(updateStatus);
   }, [client, cancellablePromise]);
 
-  useEffect(() => {
-    cancellablePromise(client.getStatus()).then(updateStatus);
-  }, [client, cancellablePromise]);
-
   useEffect(() => {
     const updateProposal = async () => {
       const errors = await cancellablePromise(client.getIssues());
@@ -145,7 +141,7 @@ export default function SoftwareSection({ showErrors }) {
       title={_("Software")}
       icon="apps"
       loading={state.busy}
-      errors={errors.map(e => ({ message: e.description }))}
+      errors={errors.map(toValidationError)}
       path="/software"
     >
       <SectionContent />

web/src/components/software/PatternSelector.jsx

@@ -27,6 +27,7 @@ import { useInstallerClient } from "~/context/installer";
 import { ValidationErrors } from "~/components/core";
 import PatternGroup from "./PatternGroup";
 import PatternItem from "./PatternItem";
+import { toValidationError } from "~/utils";
 import UsedSize from "./UsedSize";
 import { _ } from "~/i18n";
 
@@ -207,7 +208,7 @@ function PatternSelector() {
 
   // FIXME: ValidationErrors should be replaced by an equivalent component to show issues.
   // Note that only the Users client uses the old Validation D-Bus interface.
-  const validationErrors = errors.map(e => ({ message: e.description }));
+  const validationErrors = errors.map(toValidationError);
 
   return (
     <>