From c520b562e40f5a083fb67fe6d5c62647e984a296 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Sat, 18 Nov 2023 22:23:04 +0100
Subject: [PATCH 01/65] removed IssuesLink from App.jsx

---
 web/src/App.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 4099afcd10..614f26fc6f 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -33,7 +33,6 @@ import {
   DBusError,
   Disclosure,
   Installation,
-  IssuesLink,
   LogsButton,
   ShowLogButton,
   ShowTerminalButton,
@@ -106,7 +105,6 @@ function App() {
     <>
       <Sidebar>
         <div className="flex-stack">
-          <IssuesLink />
           <Disclosure label={_("Diagnostic tools")} data-keep-sidebar-open>
             <ShowLogButton />
             <LogsButton data-keep-sidebar-open="true" />

From 47d04f4b5c74db9b6d1485e3901189a1c15aafba Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 23 Nov 2023 00:29:18 +0100
Subject: [PATCH 02/65] added class for highlighting

---
 web/src/assets/styles/utilities.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
index 1f84016877..517aea8b34 100644
--- a/web/src/assets/styles/utilities.scss
+++ b/web/src/assets/styles/utilities.scss
@@ -164,3 +164,17 @@
 .cursor-pointer {
   cursor: pointer;
 }
+
+@keyframes fadeHighlight {
+  from {
+      background-color: yellow;
+  }
+
+  to {
+      background-color: transparent;
+  }
+}
+
+.highlighted {
+  animation: fadeHighlight 2s ease forwards;
+}

From 65b2ccb1ef30764c8e29ddf21c34a01312ded2c4 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 23 Nov 2023 00:33:44 +0100
Subject: [PATCH 03/65] added warning button to siderbar

Also removed notification mark
---
 web/src/components/core/Sidebar.jsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
index 4c385ff7e2..9b28596c40 100644
--- a/web/src/components/core/Sidebar.jsx
+++ b/web/src/components/core/Sidebar.jsx
@@ -22,7 +22,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
 import { Icon, AppActions } from "~/components/layout";
-import { If, NotificationMark } from "~/components/core";
+import { If, IssuesPage } from "~/components/core";
 import { useNotification } from "~/context/notification";
 import useNodeSiblings from "~/hooks/useNodeSiblings";
 import { _ } from "~/i18n";
@@ -40,6 +40,7 @@ export default function Sidebar ({ children }) {
   const closeButtonRef = useRef(null);
   const [notification] = useNotification();
   const [addAttribute, removeAttribute] = useNodeSiblings(asideRef.current);
+  const [showWarningPopup, setShowWarningPopup] = useState(false);
 
   /**
    * Set siblings as not interactive and not discoverable
@@ -129,6 +130,17 @@ export default function Sidebar ({ children }) {
   return (
     <>
       <AppActions>
+        <If
+          condition={notification.issues}
+          then={
+            <Button
+              aria-label={_("Show issues popup")}
+              variant="warning"
+              icon={<Icon name="warning" />}
+              onClick={() => setShowWarningPopup(prev => !prev)}
+            />
+          }
+        />
         <button
           onClick={open}
           className="plain-control"
@@ -136,14 +148,12 @@ export default function Sidebar ({ children }) {
           aria-controls="global-options"
           aria-expanded={isOpen}
         >
-          <If
-            condition={notification.issues}
-            then={<NotificationMark data-variant="sidebar" aria-label={_("New issues found")} />}
-          />
           <Icon name="menu" />
         </button>
       </AppActions>
 
+      {showWarningPopup && <IssuesPage close={() => setShowWarningPopup(false)} />}
+
       <aside
         id="global-options"
         ref={asideRef}

From 8a68dcc90f243cfa7ccdac42385ebf1bf4e4a3df Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 23 Nov 2023 00:49:20 +0100
Subject: [PATCH 04/65] added className prop for styling

Removed title prop as popover is no longer used.
Added sectionName prop used to determine highlighting on the issues popup
---
 web/src/components/core/Section.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
index 99a219eb6c..dcb82e6e3f 100644
--- a/web/src/components/core/Section.jsx
+++ b/web/src/components/core/Section.jsx
@@ -52,6 +52,7 @@ import { ValidationErrors } from "~/components/core";
  * @property {string} [path] - Path where the section links to.
  *  when user clicks on the title, used for opening a dialog.
  * @property {boolean} [loading] - Whether the section is busy loading its content or not.
+ * @property {string} [className] - Class name for section html tag.
  * @property {import("~/client/mixins").ValidationError[]} [props.errors] - Validation errors to be shown before the title.
  * @property {React.ReactElement} [children] - The section content.
  * @property {string} [aria-label] - aria-label attribute, required if title if not given
@@ -64,6 +65,7 @@ export default function Section({
   name,
   path,
   loading,
+  className,
   errors,
   children,
   "aria-label": ariaLabel
@@ -89,6 +91,7 @@ export default function Section({
 
   return (
     <section
+      className={className}
       aria-live="polite"
       aria-busy={loading}
       aria-label={ariaLabel || undefined}
@@ -97,7 +100,7 @@ export default function Section({
       <Header />
       <div className="stack content">
         {errors?.length > 0 &&
-          <ValidationErrors errors={errors} title={`${title} errors`} />}
+          <ValidationErrors errors={errors} sectionName={title} />}
         {children}
       </div>
     </section>

From 3754f477c044abbb96af2d96cd4e953c6575ec0a Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 23 Nov 2023 00:51:57 +0100
Subject: [PATCH 05/65] removed title prop from ValidationErrors

---
 web/src/components/software/PatternSelector.jsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/web/src/components/software/PatternSelector.jsx b/web/src/components/software/PatternSelector.jsx
index 30b550a947..a54a936509 100644
--- a/web/src/components/software/PatternSelector.jsx
+++ b/web/src/components/software/PatternSelector.jsx
@@ -21,7 +21,6 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { SearchInput } from "@patternfly/react-core";
-import { sprintf } from "sprintf-js";
 
 import { useInstallerClient } from "~/context/installer";
 import { Section, ValidationErrors } from "~/components/core";
@@ -202,10 +201,6 @@ function PatternSelector() {
     );
   });
 
-  // TRANSLATORS: error summary, always plural, %d is replaced by number of errors (2 or more)
-  // if there is just a single error then the error is displayed directly instead of this summary
-  const errorLabel = sprintf(_("%d errors"), errors.length);
-
   // 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(toValidationError);
@@ -214,7 +209,7 @@ function PatternSelector() {
     <>
       <Section aria-label={_("Software summary and filter options")}>
         <UsedSize size={used} />
-        <ValidationErrors errors={validationErrors} title={errorLabel} />
+        <ValidationErrors errors={validationErrors} sectionName="Software" />
         <SearchInput
           // TRANSLATORS: search field placeholder text
           placeholder={_("Search")}

From c73c8cdf7bed0b30ad882482a7a7fbc2d5db53e2 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 23 Nov 2023 01:01:21 +0100
Subject: [PATCH 06/65] converted page to popup

Added prop for closing popup
Added sectionHighlight prop used to determine which section to highlight
Added autoscroll to the appropriate section based on sectionHighlight
---
 web/src/components/core/IssuesPage.jsx | 108 ++++++++++++++++++-------
 1 file changed, 80 insertions(+), 28 deletions(-)

diff --git a/web/src/components/core/IssuesPage.jsx b/web/src/components/core/IssuesPage.jsx
index f076c6aece..5d9c44fd1a 100644
--- a/web/src/components/core/IssuesPage.jsx
+++ b/web/src/components/core/IssuesPage.jsx
@@ -19,15 +19,14 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { HelperText, HelperTextItem } from "@patternfly/react-core";
 
 import { partition, useCancellablePromise } from "~/utils";
-import { If, Page, Section, SectionSkeleton } from "~/components/core";
+import { If, Section, SectionSkeleton, Popup } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
-import { useNotification } from "~/context/notification";
 import { _ } from "~/i18n";
 
 /**
@@ -78,36 +77,82 @@ const IssueItems = ({ issues = [] }) => {
  *
  * @param {object} props
  * @param {import ("~/client/issues").ClientsIssues} props.issues
+ * @param {string} [props.sectionHighLight] - A string which indicites which issues section should be highlighted.
  */
-const IssuesSections = ({ issues }) => {
+const IssuesSections = ({ issues, sectionHighLight = "" }) => {
   const productIssues = issues.product || [];
   const storageIssues = issues.storage || [];
   const softwareIssues = issues.software || [];
+  const productSectionRef = useRef(null);
+  const storageSectionRef = useRef(null);
+  const softwareSectionRef = useRef(null);
+
+  useEffect(() => {
+    let selectedRef;
+    switch (sectionHighLight) {
+      case 'Product':
+        selectedRef = productSectionRef;
+        break;
+      case 'Storage':
+        selectedRef = storageSectionRef;
+        break;
+      case 'Software':
+        selectedRef = softwareSectionRef;
+        break;
+      default:
+        selectedRef = null;
+    }
+
+    if (selectedRef && selectedRef.current) {
+      selectedRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [sectionHighLight]);
 
   return (
     <>
       <If
         condition={productIssues.length > 0}
         then={
-          <Section key="product-issues" title={_("Product")} icon="inventory_2">
-            <IssueItems issues={productIssues} />
-          </Section>
+          <div ref={productSectionRef}>
+            <Section
+              key="product-issues"
+              title={_("Product")}
+              icon="inventory_2"
+              className={sectionHighLight === "Product" ? "highlighted" : ""}
+            >
+              <IssueItems issues={productIssues} />
+            </Section>
+          </div>
         }
       />
       <If
         condition={storageIssues.length > 0}
         then={
-          <Section key="storage-issues" title={_("Storage")} icon="hard_drive">
-            <IssueItems issues={storageIssues} />
-          </Section>
+          <div ref={storageSectionRef}>
+            <Section
+              key="storage-issues"
+              title={_("Storage")}
+              icon="hard_drive"
+              className={sectionHighLight === "Storage" ? "highlighted" : ""}
+            >
+              <IssueItems issues={storageIssues} />
+            </Section>
+          </div>
         }
       />
       <If
         condition={softwareIssues.length > 0}
         then={
-          <Section key="software-issues" title={_("Software")} icon="apps">
-            <IssueItems issues={softwareIssues} />
-          </Section>
+          <div ref={softwareSectionRef}>
+            <Section
+              key="software-issues"
+              title={_("Software")}
+              icon="apps"
+              className={sectionHighLight === "Software" ? "highlighted" : ""}
+            >
+              <IssueItems issues={softwareIssues} />
+            </Section>
+          </div>
         }
       />
     </>
@@ -120,8 +165,9 @@ const IssuesSections = ({ issues }) => {
  *
  * @param {object} props
  * @param {import ("~/client").Issues} props.issues
+ * @param {string} [props.sectionHighLight] - A string which indicites which issues section should be highlighted.
  */
-const IssuesContent = ({ issues }) => {
+const IssuesContent = ({ issues, sectionHighLight = "" }) => {
   const NoIssues = () => {
     return (
       <HelperText className="issue">
@@ -138,21 +184,31 @@ const IssuesContent = ({ issues }) => {
     <If
       condition={allIssues.length === 0}
       then={<NoIssues />}
-      else={<IssuesSections issues={issues} />}
+      else={<IssuesSections issues={issues} sectionHighLight={sectionHighLight} />}
     />
   );
 };
 
 /**
  * Page to show all issues.
+ *
+ * It initially shows a loading state,
+ * then fetches and displays a list of issues grouped by categories such as 'product', 'storage', and 'software'.
+ *
+ * It uses a Popup component to display the issues, and an If component to toggle between
+ * a loading state and the content state.
+ *
  * @component
+ *
+ * @param {object} props
+ * @param {function} props.close - A function to call when the close action is triggered.
+ * @param {string} [props.sectionHighLight] - A string which indicites which issues section should be highlighted.
  */
-export default function IssuesPage() {
+export default function IssuesPage({ close, sectionHighLight = "" }) {
   const [isLoading, setIsLoading] = useState(true);
   const [issues, setIssues] = useState();
   const client = useInstallerClient();
   const { cancellablePromise } = useCancellablePromise();
-  const [notification, updateNotification] = useNotification();
 
   const load = useCallback(async () => {
     setIsLoading(true);
@@ -163,8 +219,7 @@ export default function IssuesPage() {
 
   const update = useCallback((issues) => {
     setIssues(current => ({ ...current, ...issues }));
-    if (notification.issues) updateNotification({ issues: false });
-  }, [notification, setIssues, updateNotification]);
+  }, [setIssues]);
 
   useEffect(() => {
     load().then(update);
@@ -172,18 +227,15 @@ export default function IssuesPage() {
   }, [client, load, update]);
 
   return (
-    <Page
-      title="Issues"
-      icon="problem"
-      actionLabel="Back"
-      actionVariant="secondary"
-      navigateTo={-1}
-    >
+    <Popup isOpen title={_("Issues")}>
       <If
         condition={isLoading}
         then={<SectionSkeleton numRows={4} />}
-        else={<IssuesContent issues={issues} />}
+        else={<IssuesContent issues={issues} sectionHighLight={sectionHighLight} />}
       />
-    </Page>
+      <Popup.Actions>
+        <Popup.Confirm onClick={close} autoFocus>{_("Close")}</Popup.Confirm>
+      </Popup.Actions>
+    </Popup>
   );
 }

From 951fe016d35de3a830766994dd6a56459c1a7700 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 23 Nov 2023 01:04:53 +0100
Subject: [PATCH 07/65] Removed popover, now it opens Issues popup

Added sectionName prop to determine which section is rendering the comp
Removed title prop as it is not used anymore
---
 web/src/components/core/ValidationErrors.jsx | 45 ++++++--------------
 1 file changed, 12 insertions(+), 33 deletions(-)

diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index 74a19e06c6..4035371a03 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -22,27 +22,11 @@
 // @ts-check
 
 import React, { useState } from "react";
-import {
-  Button,
-  List,
-  ListItem,
-  Popover
-} from "@patternfly/react-core";
 import { sprintf } from "sprintf-js";
 
 import { Icon } from '~/components/layout';
-import { _, n_ } from "~/i18n";
-
-/**
- * @param {import("~/client/mixins").ValidationError[]} errors - Validation errors
- * @return React.JSX
- */
-const popoverContent = (errors) => {
-  const items = errors.map((e, i) => <ListItem key={i}>{e.message}</ListItem>);
-  return (
-    <List>{items}</List>
-  );
-};
+import { IssuesPage } from "~/components/core";
+import { n_ } from "~/i18n";
 
 /**
  * Displays a list of validation errors
@@ -56,11 +40,11 @@ const popoverContent = (errors) => {
  * @todo Improve the contents of the Popover (e.g., using a list)
  *
  * @param {object} props
- * @param {string} props.title - A title for the Popover
+ * @param {string} [props.sectionName] - Name of the section which is displaying errors. (product, software, storage, ...)
  * @param {import("~/client/mixins").ValidationError[]} props.errors - Validation errors
  */
-const ValidationErrors = ({ title = _("Errors"), errors }) => {
-  const [popoverVisible, setPopoverVisible] = useState(false);
+const ValidationErrors = ({ errors, sectionName = "" }) => {
+  const [showIssuesPopUp, setshowIssuesPopUp] = useState(false);
 
   if (!errors || errors.length === 0) return null;
 
@@ -77,7 +61,7 @@ const ValidationErrors = ({ title = _("Errors"), errors }) => {
           <button
             style={{ padding: "0", borderBottom: "1px solid" }}
             className="plain-control color-warn"
-            onClick={() => setPopoverVisible(true)}
+            onClick={() => setshowIssuesPopUp(true)}
           >
             { warningIcon } {
               sprintf(
@@ -87,17 +71,12 @@ const ValidationErrors = ({ title = _("Errors"), errors }) => {
               )
             }
           </button>
-          <Popover
-            isVisible={popoverVisible}
-            position="right"
-            shouldClose={() => setPopoverVisible(false)}
-            shouldOpen={() => setPopoverVisible(true)}
-            aria-label={_("Basic popover")}
-            headerContent={title}
-            bodyContent={popoverContent(errors)}
-          >
-            <Button className="hidden-popover-button" variant="link" />
-          </Popover>
+
+          {showIssuesPopUp &&
+            <IssuesPage
+              close={() => setshowIssuesPopUp(false)}
+              sectionHighLight={sectionName}
+            />}
         </div>
       </>
     );

From e5e85bc77c5b878615e8930181e1206ab438b539 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 23 Nov 2023 01:09:58 +0100
Subject: [PATCH 08/65] typo correction in prop naming

---
 web/src/components/core/IssuesPage.jsx       | 26 ++++++++++----------
 web/src/components/core/ValidationErrors.jsx |  2 +-
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/src/components/core/IssuesPage.jsx b/web/src/components/core/IssuesPage.jsx
index 5d9c44fd1a..2d7ee678a9 100644
--- a/web/src/components/core/IssuesPage.jsx
+++ b/web/src/components/core/IssuesPage.jsx
@@ -77,9 +77,9 @@ const IssueItems = ({ issues = [] }) => {
  *
  * @param {object} props
  * @param {import ("~/client/issues").ClientsIssues} props.issues
- * @param {string} [props.sectionHighLight] - A string which indicites which issues section should be highlighted.
+ * @param {string} [props.sectionHighlight] - A string which indicites which issues section should be highlighted.
  */
-const IssuesSections = ({ issues, sectionHighLight = "" }) => {
+const IssuesSections = ({ issues, sectionHighlight = "" }) => {
   const productIssues = issues.product || [];
   const storageIssues = issues.storage || [];
   const softwareIssues = issues.software || [];
@@ -89,7 +89,7 @@ const IssuesSections = ({ issues, sectionHighLight = "" }) => {
 
   useEffect(() => {
     let selectedRef;
-    switch (sectionHighLight) {
+    switch (sectionHighlight) {
       case 'Product':
         selectedRef = productSectionRef;
         break;
@@ -106,7 +106,7 @@ const IssuesSections = ({ issues, sectionHighLight = "" }) => {
     if (selectedRef && selectedRef.current) {
       selectedRef.current.scrollIntoView({ behavior: 'smooth' });
     }
-  }, [sectionHighLight]);
+  }, [sectionHighlight]);
 
   return (
     <>
@@ -118,7 +118,7 @@ const IssuesSections = ({ issues, sectionHighLight = "" }) => {
               key="product-issues"
               title={_("Product")}
               icon="inventory_2"
-              className={sectionHighLight === "Product" ? "highlighted" : ""}
+              className={sectionHighlight === "Product" ? "highlighted" : ""}
             >
               <IssueItems issues={productIssues} />
             </Section>
@@ -133,7 +133,7 @@ const IssuesSections = ({ issues, sectionHighLight = "" }) => {
               key="storage-issues"
               title={_("Storage")}
               icon="hard_drive"
-              className={sectionHighLight === "Storage" ? "highlighted" : ""}
+              className={sectionHighlight === "Storage" ? "highlighted" : ""}
             >
               <IssueItems issues={storageIssues} />
             </Section>
@@ -148,7 +148,7 @@ const IssuesSections = ({ issues, sectionHighLight = "" }) => {
               key="software-issues"
               title={_("Software")}
               icon="apps"
-              className={sectionHighLight === "Software" ? "highlighted" : ""}
+              className={sectionHighlight === "Software" ? "highlighted" : ""}
             >
               <IssueItems issues={softwareIssues} />
             </Section>
@@ -165,9 +165,9 @@ const IssuesSections = ({ issues, sectionHighLight = "" }) => {
  *
  * @param {object} props
  * @param {import ("~/client").Issues} props.issues
- * @param {string} [props.sectionHighLight] - A string which indicites which issues section should be highlighted.
+ * @param {string} [props.sectionHighlight] - A string which indicites which issues section should be highlighted.
  */
-const IssuesContent = ({ issues, sectionHighLight = "" }) => {
+const IssuesContent = ({ issues, sectionHighlight = "" }) => {
   const NoIssues = () => {
     return (
       <HelperText className="issue">
@@ -184,7 +184,7 @@ const IssuesContent = ({ issues, sectionHighLight = "" }) => {
     <If
       condition={allIssues.length === 0}
       then={<NoIssues />}
-      else={<IssuesSections issues={issues} sectionHighLight={sectionHighLight} />}
+      else={<IssuesSections issues={issues} sectionHighlight={sectionHighlight} />}
     />
   );
 };
@@ -202,9 +202,9 @@ const IssuesContent = ({ issues, sectionHighLight = "" }) => {
  *
  * @param {object} props
  * @param {function} props.close - A function to call when the close action is triggered.
- * @param {string} [props.sectionHighLight] - A string which indicites which issues section should be highlighted.
+ * @param {string} [props.sectionHighlight] - A string which indicites which issues section should be highlighted.
  */
-export default function IssuesPage({ close, sectionHighLight = "" }) {
+export default function IssuesPage({ close, sectionHighlight = "" }) {
   const [isLoading, setIsLoading] = useState(true);
   const [issues, setIssues] = useState();
   const client = useInstallerClient();
@@ -231,7 +231,7 @@ export default function IssuesPage({ close, sectionHighLight = "" }) {
       <If
         condition={isLoading}
         then={<SectionSkeleton numRows={4} />}
-        else={<IssuesContent issues={issues} sectionHighLight={sectionHighLight} />}
+        else={<IssuesContent issues={issues} sectionHighlight={sectionHighlight} />}
       />
       <Popup.Actions>
         <Popup.Confirm onClick={close} autoFocus>{_("Close")}</Popup.Confirm>
diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index 4035371a03..68c36d92a4 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -75,7 +75,7 @@ const ValidationErrors = ({ errors, sectionName = "" }) => {
           {showIssuesPopUp &&
             <IssuesPage
               close={() => setshowIssuesPopUp(false)}
-              sectionHighLight={sectionName}
+              sectionHighlight={sectionName}
             />}
         </div>
       </>

From dfdfd9dd49708d0c68d47a311bdaf0885e7e1cdc Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 7 Dec 2023 22:29:55 +0100
Subject: [PATCH 09/65] changed name of comp IssuesPage to IssuesDialog

---
 service/Gemfile.lock                                   |  6 +++---
 web/po/cs.po                                           |  2 +-
 web/po/de.po                                           |  2 +-
 web/po/es.po                                           |  2 +-
 web/po/fr.po                                           |  2 +-
 web/po/ja.po                                           |  2 +-
 web/po/mk.po                                           |  2 +-
 web/po/nl.po                                           |  2 +-
 web/po/pt_BR.po                                        |  2 +-
 web/po/ru.po                                           |  2 +-
 web/po/sv.po                                           |  2 +-
 web/po/uk.po                                           |  2 +-
 .../core/{IssuesPage.jsx => IssuesDialog.jsx}          |  2 +-
 .../{IssuesPage.test.jsx => IssuesDialog.test.jsx}     | 10 +++++-----
 web/src/components/core/Sidebar.jsx                    |  4 ++--
 web/src/components/core/ValidationErrors.jsx           |  4 ++--
 web/src/components/core/index.js                       |  2 +-
 web/src/index.js                                       |  4 ++--
 18 files changed, 27 insertions(+), 27 deletions(-)
 rename web/src/components/core/{IssuesPage.jsx => IssuesDialog.jsx} (98%)
 rename web/src/components/core/{IssuesPage.test.jsx => IssuesDialog.test.jsx} (91%)

diff --git a/service/Gemfile.lock b/service/Gemfile.lock
index 89fdf2541e..bcabea2723 100644
--- a/service/Gemfile.lock
+++ b/service/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    agama (3)
+    agama (0)
       cfa (~> 1.0.2)
       cfa_grub2 (~> 2.0.0)
       cheetah (~> 1.0.0)
@@ -26,13 +26,13 @@ GEM
     docile (1.4.0)
     eventmachine (1.2.7)
     fast_gettext (2.2.0)
-    mini_portile2 (2.8.4)
+    mini_portile2 (2.8.5)
     nokogiri (1.13.10)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
     packaging_rake_tasks (1.5.1)
       rake
-    racc (1.7.1)
+    racc (1.7.3)
     rake (13.0.6)
     rexml (3.2.6)
     rspec (3.11.0)
diff --git a/web/po/cs.po b/web/po/cs.po
index 18fa976e5f..2fab4003a5 100644
--- a/web/po/cs.po
+++ b/web/po/cs.po
@@ -193,7 +193,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/po/de.po b/web/po/de.po
index ca1e44c6e6..5f8984f931 100644
--- a/web/po/de.po
+++ b/web/po/de.po
@@ -190,7 +190,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/po/es.po b/web/po/es.po
index 63dcfe787e..68445986f1 100644
--- a/web/po/es.po
+++ b/web/po/es.po
@@ -207,7 +207,7 @@ msgstr "Mostrar los problemas"
 msgid "There are new issues"
 msgstr "Hay nuevos problemas"
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "No se encontraron problemas. Todo parece estar bien."
 
diff --git a/web/po/fr.po b/web/po/fr.po
index e24bf389ea..fbc2a7f2fe 100644
--- a/web/po/fr.po
+++ b/web/po/fr.po
@@ -207,7 +207,7 @@ msgstr "Montrer les problèmes"
 msgid "There are new issues"
 msgstr "Il y a de nouveaux problèmes"
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "Aucun problème n'a été détecté. Tout semble correct."
 
diff --git a/web/po/ja.po b/web/po/ja.po
index 26db6fb39b..2c34eb152f 100644
--- a/web/po/ja.po
+++ b/web/po/ja.po
@@ -204,7 +204,7 @@ msgstr "問題点の表示"
 msgid "There are new issues"
 msgstr "新しい問題点があります"
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 "問題点は見つかりませんでした。インストールに支障はないものと思われます。"
diff --git a/web/po/mk.po b/web/po/mk.po
index 80184f36df..1451b54ed2 100644
--- a/web/po/mk.po
+++ b/web/po/mk.po
@@ -197,7 +197,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/po/nl.po b/web/po/nl.po
index 928ac4d54c..8adbb4a948 100644
--- a/web/po/nl.po
+++ b/web/po/nl.po
@@ -203,7 +203,7 @@ msgstr "Toon issues"
 msgid "There are new issues"
 msgstr "Er zijn nieuwe issues"
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "Geen issues gevonden. Alles ziet er ok uit."
 
diff --git a/web/po/pt_BR.po b/web/po/pt_BR.po
index 56fee82352..8b0b9944e3 100644
--- a/web/po/pt_BR.po
+++ b/web/po/pt_BR.po
@@ -192,7 +192,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/po/ru.po b/web/po/ru.po
index 2aa9dd8489..c93403fb6b 100644
--- a/web/po/ru.po
+++ b/web/po/ru.po
@@ -207,7 +207,7 @@ msgstr "Показать ошибки"
 msgid "There are new issues"
 msgstr "Есть новые ошибки"
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "Проблем не обнаружено. Все выглядит нормально."
 
diff --git a/web/po/sv.po b/web/po/sv.po
index db664c6e06..c0b1d5702a 100644
--- a/web/po/sv.po
+++ b/web/po/sv.po
@@ -205,7 +205,7 @@ msgstr "Visa problem"
 msgid "There are new issues"
 msgstr "Det finns nya problem"
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "Inga problem hittades. Allt ser ok ut."
 
diff --git a/web/po/uk.po b/web/po/uk.po
index 6c0254a32e..e93399c2ca 100644
--- a/web/po/uk.po
+++ b/web/po/uk.po
@@ -193,7 +193,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesPage.jsx:115
+#: src/components/core/IssuesDialog.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/src/components/core/IssuesPage.jsx b/web/src/components/core/IssuesDialog.jsx
similarity index 98%
rename from web/src/components/core/IssuesPage.jsx
rename to web/src/components/core/IssuesDialog.jsx
index 2d7ee678a9..94c23ef3cd 100644
--- a/web/src/components/core/IssuesPage.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -204,7 +204,7 @@ const IssuesContent = ({ issues, sectionHighlight = "" }) => {
  * @param {function} props.close - A function to call when the close action is triggered.
  * @param {string} [props.sectionHighlight] - A string which indicites which issues section should be highlighted.
  */
-export default function IssuesPage({ close, sectionHighlight = "" }) {
+export default function IssuesDialog({ close, sectionHighlight = "" }) {
   const [isLoading, setIsLoading] = useState(true);
   const [issues, setIssues] = useState();
   const client = useInstallerClient();
diff --git a/web/src/components/core/IssuesPage.test.jsx b/web/src/components/core/IssuesDialog.test.jsx
similarity index 91%
rename from web/src/components/core/IssuesPage.test.jsx
rename to web/src/components/core/IssuesDialog.test.jsx
index 97badf900d..5abf7d6d56 100644
--- a/web/src/components/core/IssuesPage.test.jsx
+++ b/web/src/components/core/IssuesDialog.test.jsx
@@ -23,7 +23,7 @@ import React from "react";
 import { act, screen, waitFor, within } from "@testing-library/react";
 import { installerRender, createCallbackMock, withNotificationProvider } from "~/test-utils";
 import { createClient } from "~/client";
-import { IssuesPage } from "~/components/core";
+import { IssuesDialog } from "~/components/core";
 
 jest.mock("~/client");
 
@@ -62,14 +62,14 @@ beforeEach(() => {
 });
 
 it("loads the issues", async () => {
-  installerRender(withNotificationProvider(<IssuesPage />));
+  installerRender(withNotificationProvider(<IssuesDialog />));
 
   screen.getAllByText(/PFSkeleton/);
   await screen.findByText(/storage issue 1/);
 });
 
 it("renders sections with issues", async () => {
-  installerRender(withNotificationProvider(<IssuesPage />));
+  installerRender(withNotificationProvider(<IssuesDialog />));
 
   await waitFor(() => expect(screen.queryByText("Product")).not.toBeInTheDocument());
 
@@ -87,7 +87,7 @@ describe("if there are not issues", () => {
   });
 
   it("renders a success message", async () => {
-    installerRender(withNotificationProvider(<IssuesPage />));
+    installerRender(withNotificationProvider(<IssuesDialog />));
 
     await screen.findByText(/No issues found/);
   });
@@ -98,7 +98,7 @@ describe("if the issues change", () => {
     const [mockFunction, callbacks] = createCallbackMock();
     mockOnIssuesChange = mockFunction;
 
-    installerRender(withNotificationProvider(<IssuesPage />));
+    installerRender(withNotificationProvider(<IssuesDialog />));
 
     await screen.findByText("Storage");
 
diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
index 9b28596c40..9e3e99970a 100644
--- a/web/src/components/core/Sidebar.jsx
+++ b/web/src/components/core/Sidebar.jsx
@@ -22,7 +22,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
 import { Icon, AppActions } from "~/components/layout";
-import { If, IssuesPage } from "~/components/core";
+import { If, IssuesDialog } from "~/components/core";
 import { useNotification } from "~/context/notification";
 import useNodeSiblings from "~/hooks/useNodeSiblings";
 import { _ } from "~/i18n";
@@ -152,7 +152,7 @@ export default function Sidebar ({ children }) {
         </button>
       </AppActions>
 
-      {showWarningPopup && <IssuesPage close={() => setShowWarningPopup(false)} />}
+      {showWarningPopup && <IssuesDialog close={() => setShowWarningPopup(false)} />}
 
       <aside
         id="global-options"
diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index 68c36d92a4..117177f9a9 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -25,7 +25,7 @@ import React, { useState } from "react";
 import { sprintf } from "sprintf-js";
 
 import { Icon } from '~/components/layout';
-import { IssuesPage } from "~/components/core";
+import { IssuesDialog } from "~/components/core";
 import { n_ } from "~/i18n";
 
 /**
@@ -73,7 +73,7 @@ const ValidationErrors = ({ errors, sectionName = "" }) => {
           </button>
 
           {showIssuesPopUp &&
-            <IssuesPage
+            <IssuesDialog
               close={() => setshowIssuesPopUp(false)}
               sectionHighlight={sectionName}
             />}
diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js
index 73593f96ed..dcfe8f63c4 100644
--- a/web/src/components/core/index.js
+++ b/web/src/components/core/index.js
@@ -37,7 +37,7 @@ export { default as InstallationFinished } from "./InstallationFinished";
 export { default as InstallationProgress } from "./InstallationProgress";
 export { default as InstallButton } from "./InstallButton";
 export { default as IssuesLink } from "./IssuesLink";
-export { default as IssuesPage } from "./IssuesPage";
+export { default as IssuesDialog } from "./IssuesDialog";
 export { default as SectionSkeleton } from "./SectionSkeleton";
 export { default as LogsButton } from "./LogsButton";
 export { default as FileViewer } from "./FileViewer";
diff --git a/web/src/index.js b/web/src/index.js
index 86d91f1097..1f9a03df1f 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -41,7 +41,7 @@ import { ProposalPage as StoragePage, ISCSIPage, DASDPage, ZFCPPage } from "~/co
 import { UsersPage } from "~/components/users";
 import { L10nPage } from "~/components/l10n";
 import { NetworkPage } from "~/components/network";
-import { IssuesPage } from "~/components/core";
+import { IssuesDialog } from "~/components/core";
 
 /**
  * As JSX components might import CSS stylesheets, our styles must be imported
@@ -84,7 +84,7 @@ root.render(
               <Route path="/storage/zfcp" element={<ZFCPPage />} />
               <Route path="/network" element={<NetworkPage />} />
               <Route path="/users" element={<UsersPage />} />
-              <Route path="/issues" element={<IssuesPage />} />
+              <Route path="/issues" element={<IssuesDialog />} />
             </Route>
             <Route path="products" element={<ProductSelectionPage />} />
           </Route>

From eff9b1517f4ca08a80b176e19a0112858bf6e6d7 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 7 Dec 2023 22:37:25 +0100
Subject: [PATCH 10/65] changed comp name IssuesPage to IssuesDialog

---
 .../core/{IssuesPage.jsx => IssuesDialog.jsx}          |  2 +-
 .../{IssuesPage.test.jsx => IssuesDialog.test.jsx}     | 10 +++++-----
 web/src/components/core/Sidebar.jsx                    |  4 ++--
 web/src/components/core/ValidationErrors.jsx           |  4 ++--
 web/src/components/core/index.js                       |  2 +-
 web/src/index.js                                       |  4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)
 rename web/src/components/core/{IssuesPage.jsx => IssuesDialog.jsx} (98%)
 rename web/src/components/core/{IssuesPage.test.jsx => IssuesDialog.test.jsx} (91%)

diff --git a/web/src/components/core/IssuesPage.jsx b/web/src/components/core/IssuesDialog.jsx
similarity index 98%
rename from web/src/components/core/IssuesPage.jsx
rename to web/src/components/core/IssuesDialog.jsx
index 2d7ee678a9..94c23ef3cd 100644
--- a/web/src/components/core/IssuesPage.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -204,7 +204,7 @@ const IssuesContent = ({ issues, sectionHighlight = "" }) => {
  * @param {function} props.close - A function to call when the close action is triggered.
  * @param {string} [props.sectionHighlight] - A string which indicites which issues section should be highlighted.
  */
-export default function IssuesPage({ close, sectionHighlight = "" }) {
+export default function IssuesDialog({ close, sectionHighlight = "" }) {
   const [isLoading, setIsLoading] = useState(true);
   const [issues, setIssues] = useState();
   const client = useInstallerClient();
diff --git a/web/src/components/core/IssuesPage.test.jsx b/web/src/components/core/IssuesDialog.test.jsx
similarity index 91%
rename from web/src/components/core/IssuesPage.test.jsx
rename to web/src/components/core/IssuesDialog.test.jsx
index 97badf900d..5abf7d6d56 100644
--- a/web/src/components/core/IssuesPage.test.jsx
+++ b/web/src/components/core/IssuesDialog.test.jsx
@@ -23,7 +23,7 @@ import React from "react";
 import { act, screen, waitFor, within } from "@testing-library/react";
 import { installerRender, createCallbackMock, withNotificationProvider } from "~/test-utils";
 import { createClient } from "~/client";
-import { IssuesPage } from "~/components/core";
+import { IssuesDialog } from "~/components/core";
 
 jest.mock("~/client");
 
@@ -62,14 +62,14 @@ beforeEach(() => {
 });
 
 it("loads the issues", async () => {
-  installerRender(withNotificationProvider(<IssuesPage />));
+  installerRender(withNotificationProvider(<IssuesDialog />));
 
   screen.getAllByText(/PFSkeleton/);
   await screen.findByText(/storage issue 1/);
 });
 
 it("renders sections with issues", async () => {
-  installerRender(withNotificationProvider(<IssuesPage />));
+  installerRender(withNotificationProvider(<IssuesDialog />));
 
   await waitFor(() => expect(screen.queryByText("Product")).not.toBeInTheDocument());
 
@@ -87,7 +87,7 @@ describe("if there are not issues", () => {
   });
 
   it("renders a success message", async () => {
-    installerRender(withNotificationProvider(<IssuesPage />));
+    installerRender(withNotificationProvider(<IssuesDialog />));
 
     await screen.findByText(/No issues found/);
   });
@@ -98,7 +98,7 @@ describe("if the issues change", () => {
     const [mockFunction, callbacks] = createCallbackMock();
     mockOnIssuesChange = mockFunction;
 
-    installerRender(withNotificationProvider(<IssuesPage />));
+    installerRender(withNotificationProvider(<IssuesDialog />));
 
     await screen.findByText("Storage");
 
diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
index 9b28596c40..9e3e99970a 100644
--- a/web/src/components/core/Sidebar.jsx
+++ b/web/src/components/core/Sidebar.jsx
@@ -22,7 +22,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
 import { Icon, AppActions } from "~/components/layout";
-import { If, IssuesPage } from "~/components/core";
+import { If, IssuesDialog } from "~/components/core";
 import { useNotification } from "~/context/notification";
 import useNodeSiblings from "~/hooks/useNodeSiblings";
 import { _ } from "~/i18n";
@@ -152,7 +152,7 @@ export default function Sidebar ({ children }) {
         </button>
       </AppActions>
 
-      {showWarningPopup && <IssuesPage close={() => setShowWarningPopup(false)} />}
+      {showWarningPopup && <IssuesDialog close={() => setShowWarningPopup(false)} />}
 
       <aside
         id="global-options"
diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index 68c36d92a4..117177f9a9 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -25,7 +25,7 @@ import React, { useState } from "react";
 import { sprintf } from "sprintf-js";
 
 import { Icon } from '~/components/layout';
-import { IssuesPage } from "~/components/core";
+import { IssuesDialog } from "~/components/core";
 import { n_ } from "~/i18n";
 
 /**
@@ -73,7 +73,7 @@ const ValidationErrors = ({ errors, sectionName = "" }) => {
           </button>
 
           {showIssuesPopUp &&
-            <IssuesPage
+            <IssuesDialog
               close={() => setshowIssuesPopUp(false)}
               sectionHighlight={sectionName}
             />}
diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js
index 73593f96ed..dcfe8f63c4 100644
--- a/web/src/components/core/index.js
+++ b/web/src/components/core/index.js
@@ -37,7 +37,7 @@ export { default as InstallationFinished } from "./InstallationFinished";
 export { default as InstallationProgress } from "./InstallationProgress";
 export { default as InstallButton } from "./InstallButton";
 export { default as IssuesLink } from "./IssuesLink";
-export { default as IssuesPage } from "./IssuesPage";
+export { default as IssuesDialog } from "./IssuesDialog";
 export { default as SectionSkeleton } from "./SectionSkeleton";
 export { default as LogsButton } from "./LogsButton";
 export { default as FileViewer } from "./FileViewer";
diff --git a/web/src/index.js b/web/src/index.js
index 86d91f1097..1f9a03df1f 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -41,7 +41,7 @@ import { ProposalPage as StoragePage, ISCSIPage, DASDPage, ZFCPPage } from "~/co
 import { UsersPage } from "~/components/users";
 import { L10nPage } from "~/components/l10n";
 import { NetworkPage } from "~/components/network";
-import { IssuesPage } from "~/components/core";
+import { IssuesDialog } from "~/components/core";
 
 /**
  * As JSX components might import CSS stylesheets, our styles must be imported
@@ -84,7 +84,7 @@ root.render(
               <Route path="/storage/zfcp" element={<ZFCPPage />} />
               <Route path="/network" element={<NetworkPage />} />
               <Route path="/users" element={<UsersPage />} />
-              <Route path="/issues" element={<IssuesPage />} />
+              <Route path="/issues" element={<IssuesDialog />} />
             </Route>
             <Route path="products" element={<ProductSelectionPage />} />
           </Route>

From 3df181b15d86b280685a15132adaf66eee6eb68e Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 7 Dec 2023 22:48:01 +0100
Subject: [PATCH 11/65] Reverting changes to PO files due to conflicts

---
 service/Gemfile.lock | 2 +-
 web/po/cs.po         | 2 +-
 web/po/de.po         | 2 +-
 web/po/es.po         | 2 +-
 web/po/fr.po         | 2 +-
 web/po/ja.po         | 2 +-
 web/po/mk.po         | 2 +-
 web/po/nl.po         | 2 +-
 web/po/pt_BR.po      | 2 +-
 web/po/ru.po         | 2 +-
 web/po/sv.po         | 2 +-
 web/po/uk.po         | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/service/Gemfile.lock b/service/Gemfile.lock
index bcabea2723..51a839d002 100644
--- a/service/Gemfile.lock
+++ b/service/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    agama (0)
+    agama (3)
       cfa (~> 1.0.2)
       cfa_grub2 (~> 2.0.0)
       cheetah (~> 1.0.0)
diff --git a/web/po/cs.po b/web/po/cs.po
index 2fab4003a5..18fa976e5f 100644
--- a/web/po/cs.po
+++ b/web/po/cs.po
@@ -193,7 +193,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/po/de.po b/web/po/de.po
index 5f8984f931..ca1e44c6e6 100644
--- a/web/po/de.po
+++ b/web/po/de.po
@@ -190,7 +190,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/po/es.po b/web/po/es.po
index 68445986f1..63dcfe787e 100644
--- a/web/po/es.po
+++ b/web/po/es.po
@@ -207,7 +207,7 @@ msgstr "Mostrar los problemas"
 msgid "There are new issues"
 msgstr "Hay nuevos problemas"
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "No se encontraron problemas. Todo parece estar bien."
 
diff --git a/web/po/fr.po b/web/po/fr.po
index fbc2a7f2fe..e24bf389ea 100644
--- a/web/po/fr.po
+++ b/web/po/fr.po
@@ -207,7 +207,7 @@ msgstr "Montrer les problèmes"
 msgid "There are new issues"
 msgstr "Il y a de nouveaux problèmes"
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "Aucun problème n'a été détecté. Tout semble correct."
 
diff --git a/web/po/ja.po b/web/po/ja.po
index 2c34eb152f..26db6fb39b 100644
--- a/web/po/ja.po
+++ b/web/po/ja.po
@@ -204,7 +204,7 @@ msgstr "問題点の表示"
 msgid "There are new issues"
 msgstr "新しい問題点があります"
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 "問題点は見つかりませんでした。インストールに支障はないものと思われます。"
diff --git a/web/po/mk.po b/web/po/mk.po
index 1451b54ed2..80184f36df 100644
--- a/web/po/mk.po
+++ b/web/po/mk.po
@@ -197,7 +197,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/po/nl.po b/web/po/nl.po
index 8adbb4a948..928ac4d54c 100644
--- a/web/po/nl.po
+++ b/web/po/nl.po
@@ -203,7 +203,7 @@ msgstr "Toon issues"
 msgid "There are new issues"
 msgstr "Er zijn nieuwe issues"
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "Geen issues gevonden. Alles ziet er ok uit."
 
diff --git a/web/po/pt_BR.po b/web/po/pt_BR.po
index 8b0b9944e3..56fee82352 100644
--- a/web/po/pt_BR.po
+++ b/web/po/pt_BR.po
@@ -192,7 +192,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 
diff --git a/web/po/ru.po b/web/po/ru.po
index c93403fb6b..2aa9dd8489 100644
--- a/web/po/ru.po
+++ b/web/po/ru.po
@@ -207,7 +207,7 @@ msgstr "Показать ошибки"
 msgid "There are new issues"
 msgstr "Есть новые ошибки"
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "Проблем не обнаружено. Все выглядит нормально."
 
diff --git a/web/po/sv.po b/web/po/sv.po
index c0b1d5702a..db664c6e06 100644
--- a/web/po/sv.po
+++ b/web/po/sv.po
@@ -205,7 +205,7 @@ msgstr "Visa problem"
 msgid "There are new issues"
 msgstr "Det finns nya problem"
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr "Inga problem hittades. Allt ser ok ut."
 
diff --git a/web/po/uk.po b/web/po/uk.po
index e93399c2ca..6c0254a32e 100644
--- a/web/po/uk.po
+++ b/web/po/uk.po
@@ -193,7 +193,7 @@ msgstr ""
 msgid "There are new issues"
 msgstr ""
 
-#: src/components/core/IssuesDialog.jsx:115
+#: src/components/core/IssuesPage.jsx:115
 msgid "No issues found. Everything looks ok."
 msgstr ""
 

From 4b92d6b4cfa648173e85db8452d665e1803e79f0 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 7 Dec 2023 22:49:11 +0100
Subject: [PATCH 12/65] gemfile.lock reverts

---
 service/Gemfile.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/service/Gemfile.lock b/service/Gemfile.lock
index 51a839d002..89fdf2541e 100644
--- a/service/Gemfile.lock
+++ b/service/Gemfile.lock
@@ -26,13 +26,13 @@ GEM
     docile (1.4.0)
     eventmachine (1.2.7)
     fast_gettext (2.2.0)
-    mini_portile2 (2.8.5)
+    mini_portile2 (2.8.4)
     nokogiri (1.13.10)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
     packaging_rake_tasks (1.5.1)
       rake
-    racc (1.7.3)
+    racc (1.7.1)
     rake (13.0.6)
     rexml (3.2.6)
     rspec (3.11.0)

From 3f011a0641bf9977c7a8275e8b66ba30a8ada3ba Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 8 Dec 2023 00:12:04 +0100
Subject: [PATCH 13/65] changed color for highlighting added class for warning
 icon color

---
 web/src/assets/styles/utilities.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
index 517aea8b34..95045c6da5 100644
--- a/web/src/assets/styles/utilities.scss
+++ b/web/src/assets/styles/utilities.scss
@@ -167,7 +167,7 @@
 
 @keyframes fadeHighlight {
   from {
-      background-color: yellow;
+      background-color: var(--color-primary-lighter);
   }
 
   to {
@@ -178,3 +178,9 @@
 .highlighted {
   animation: fadeHighlight 2s ease forwards;
 }
+
+.warning-icon {
+  svg {
+    fill: var(--warning-icon-color);
+  }
+}

From 8223e4fbb1bdddafe4c1bf6fc997c96056ac8a29 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 8 Dec 2023 00:12:26 +0100
Subject: [PATCH 14/65] added new variable for warning icon color

---
 web/src/assets/styles/variables.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/assets/styles/variables.scss b/web/src/assets/styles/variables.scss
index 670e87510c..d049bea4a5 100644
--- a/web/src/assets/styles/variables.scss
+++ b/web/src/assets/styles/variables.scss
@@ -54,6 +54,8 @@
   --color-success: #30ba78;
   --color-warn: #d4351c; // #FE7C3F; // Persimmon
 
+  --warning-icon-color: orange;
+
   --focus-color: #00b2e2; //cerulean 500
 
   --gradient-border-angle: 45deg;

From d91647438ceef97af7ea74dad89a82d5612da72c Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 8 Dec 2023 00:14:50 +0100
Subject: [PATCH 15/65] switched to using a single ref hook This ref is passed
 to section comp which now takes it as a prop

---
 web/src/components/core/IssuesDialog.jsx | 81 +++++++++---------------
 1 file changed, 31 insertions(+), 50 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index 94c23ef3cd..c4dacf60a2 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -83,76 +83,57 @@ const IssuesSections = ({ issues, sectionHighlight = "" }) => {
   const productIssues = issues.product || [];
   const storageIssues = issues.storage || [];
   const softwareIssues = issues.software || [];
-  const productSectionRef = useRef(null);
-  const storageSectionRef = useRef(null);
-  const softwareSectionRef = useRef(null);
+  const selectedRef = useRef(null);
+  const openBy = sectionHighlight;
 
   useEffect(() => {
-    let selectedRef;
-    switch (sectionHighlight) {
-      case 'Product':
-        selectedRef = productSectionRef;
-        break;
-      case 'Storage':
-        selectedRef = storageSectionRef;
-        break;
-      case 'Software':
-        selectedRef = softwareSectionRef;
-        break;
-      default:
-        selectedRef = null;
-    }
-
     if (selectedRef && selectedRef.current) {
       selectedRef.current.scrollIntoView({ behavior: 'smooth' });
     }
-  }, [sectionHighlight]);
+  }, [issues]);
 
   return (
     <>
       <If
         condition={productIssues.length > 0}
         then={
-          <div ref={productSectionRef}>
-            <Section
-              key="product-issues"
-              title={_("Product")}
-              icon="inventory_2"
-              className={sectionHighlight === "Product" ? "highlighted" : ""}
-            >
-              <IssueItems issues={productIssues} />
-            </Section>
-          </div>
+          <Section
+            ref={openBy === "Product" ? selectedRef : null}
+            key="product-issues"
+            title={_("Product")}
+            icon="inventory_2"
+            className={sectionHighlight === "Product" ? "highlighted" : ""}
+          >
+            <IssueItems issues={productIssues} />
+          </Section>
         }
       />
       <If
         condition={storageIssues.length > 0}
         then={
-          <div ref={storageSectionRef}>
-            <Section
-              key="storage-issues"
-              title={_("Storage")}
-              icon="hard_drive"
-              className={sectionHighlight === "Storage" ? "highlighted" : ""}
-            >
-              <IssueItems issues={storageIssues} />
-            </Section>
-          </div>
+          <Section
+            ref={openBy === "Storage" ? selectedRef : null}
+            key="storage-issues"
+            title={_("Storage")}
+            icon="hard_drive"
+            className={sectionHighlight === "Storage" ? "highlighted" : ""}
+          >
+            <IssueItems issues={storageIssues} />
+          </Section>
         }
       />
       <If
         condition={softwareIssues.length > 0}
         then={
-          <div ref={softwareSectionRef}>
-            <Section
-              key="software-issues"
-              title={_("Software")}
-              icon="apps"
-              className={sectionHighlight === "Software" ? "highlighted" : ""}
-            >
-              <IssueItems issues={softwareIssues} />
-            </Section>
-          </div>
+          <Section
+            ref={openBy === "Software" ? selectedRef : null}
+            key="software-issues"
+            title={_("Software")}
+            icon="apps"
+            className={sectionHighlight === "Software" ? "highlighted" : ""}
+          >
+            <IssueItems issues={softwareIssues} />
+          </Section>
         }
       />
     </>
@@ -227,7 +208,7 @@ export default function IssuesDialog({ close, sectionHighlight = "" }) {
   }, [client, load, update]);
 
   return (
-    <Popup isOpen title={_("Issues")}>
+    <Popup isOpen title={_("Issues")} data-content="issues-summary">
       <If
         condition={isLoading}
         then={<SectionSkeleton numRows={4} />}

From cd0a59e75519a4832670c338ee53746ac6d4e85f Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 8 Dec 2023 00:15:17 +0100
Subject: [PATCH 16/65] Section component now uses forwardRef

---
 web/src/components/core/Section.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
index dcb82e6e3f..80d5019071 100644
--- a/web/src/components/core/Section.jsx
+++ b/web/src/components/core/Section.jsx
@@ -21,7 +21,7 @@
 
 // @ts-check
 
-import React from "react";
+import React, { forwardRef } from "react";
 import { Link } from "react-router-dom";
 import { Icon } from '~/components/layout';
 import { ValidationErrors } from "~/components/core";
@@ -58,8 +58,10 @@ import { ValidationErrors } from "~/components/core";
  * @property {string} [aria-label] - aria-label attribute, required if title if not given
  *
  * @param { SectionProps } props
+ *
+ * @type {React.FC<SectionProps>}
  */
-export default function Section({
+const Section = forwardRef(function({
   icon,
   title,
   name,
@@ -69,7 +71,7 @@ export default function Section({
   errors,
   children,
   "aria-label": ariaLabel
-}) {
+}, ref) {
   const headerId = `${name || crypto.randomUUID()}-section-header`;
 
   if (!title && !ariaLabel) {
@@ -91,6 +93,7 @@ export default function Section({
 
   return (
     <section
+      ref={ref}
       className={className}
       aria-live="polite"
       aria-busy={loading}
@@ -105,4 +108,6 @@ export default function Section({
       </div>
     </section>
   );
-}
+});
+
+export default Section;

From ef57b49f11d085b838f6e0dbdce692e7adfd3dec Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 8 Dec 2023 00:15:55 +0100
Subject: [PATCH 17/65] changed the look of the issues button Uses orange color
 for warning icon

---
 web/src/components/core/Sidebar.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
index 9e3e99970a..333564ad4c 100644
--- a/web/src/components/core/Sidebar.jsx
+++ b/web/src/components/core/Sidebar.jsx
@@ -135,7 +135,8 @@ export default function Sidebar ({ children }) {
           then={
             <Button
               aria-label={_("Show issues popup")}
-              variant="warning"
+              variant="link"
+              className="warning-icon"
               icon={<Icon name="warning" />}
               onClick={() => setShowWarningPopup(prev => !prev)}
             />

From 5cff43da2dffa3f0c5355c589c5fdc65018b3e6e Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Mon, 25 Dec 2023 19:35:16 +0100
Subject: [PATCH 18/65] styling for issues dialog titles

---
 web/src/assets/styles/blocks.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
index 66775b89ef..8141e1ad7e 100644
--- a/web/src/assets/styles/blocks.scss
+++ b/web/src/assets/styles/blocks.scss
@@ -442,3 +442,16 @@ ul[data-of="agama/timezones"] {
     text-align: end;
   }
 }
+
+[role="dialog"] {
+  section:not([class^="pf-c"]) {
+    > svg:first-child {
+    block-size: 24px;
+    inline-size: 24px;
+    }
+
+    h2 {
+      font-size: var(--fs-h3);
+    }
+  }
+}

From 12a17efab97a2732bacaa27ce89ea4e8c9eab382 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Mon, 25 Dec 2023 19:35:39 +0100
Subject: [PATCH 19/65] added variable --fs-h3 for size 1rem

---
 web/src/assets/styles/variables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/assets/styles/variables.scss b/web/src/assets/styles/variables.scss
index c3423968ab..4dbae66eb5 100644
--- a/web/src/assets/styles/variables.scss
+++ b/web/src/assets/styles/variables.scss
@@ -13,6 +13,7 @@
   --fs-large: 1rem;
   --fs-h1: 1.5rem;
   --fs-h2: 1.2rem;
+  --fs-h3: 1rem;
 
   --lh-normal: 1.5;
   --lh-medium: 1.6;

From 1d2817853cfbb4baa8aaaa4e4f3dc9342c5296a9 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Mon, 25 Dec 2023 19:38:01 +0100
Subject: [PATCH 20/65] changes prop name from sectionHighlight to openFrom

removed skeleton and replaced it with big icon loading

added <div classname="stack> to sections part
---
 web/src/components/core/IssuesDialog.jsx | 32 ++++++++++++------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index ff73bd8950..07d6e11a2b 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -24,7 +24,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { HelperText, HelperTextItem } from "@patternfly/react-core";
 
 import { partition, useCancellablePromise } from "~/utils";
-import { If, Section, SectionSkeleton, Popup } from "~/components/core";
+import { If, Section, Popup } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 import { _ } from "~/i18n";
@@ -77,14 +77,14 @@ const IssueItems = ({ issues = [] }) => {
  *
  * @param {object} props
  * @param {import ("~/client/issues").ClientsIssues} props.issues
- * @param {string} [props.sectionHighlight] - A string which indicites which issues section should be highlighted.
+ * @param {string} [props.openFrom] - A string which indicites which issues section should be highlighted.
  */
-const IssuesSections = ({ issues, sectionHighlight = "" }) => {
+const IssuesSections = ({ issues, openFrom = "" }) => {
   const productIssues = issues.product || [];
   const storageIssues = issues.storage || [];
   const softwareIssues = issues.software || [];
   const selectedRef = useRef(null);
-  const openBy = sectionHighlight;
+  const openBy = openFrom;
 
   useEffect(() => {
     if (selectedRef && selectedRef.current) {
@@ -93,7 +93,7 @@ const IssuesSections = ({ issues, sectionHighlight = "" }) => {
   }, [issues]);
 
   return (
-    <>
+    <div className="stack">
       <If
         condition={productIssues.length > 0}
         then={
@@ -102,7 +102,7 @@ const IssuesSections = ({ issues, sectionHighlight = "" }) => {
             key="product-issues"
             title={_("Product")}
             icon="inventory_2"
-            className={sectionHighlight === "Product" ? "highlighted" : ""}
+            className={openFrom === "Product" ? "highlighted" : ""}
           >
             <IssueItems issues={productIssues} />
           </Section>
@@ -116,7 +116,7 @@ const IssuesSections = ({ issues, sectionHighlight = "" }) => {
             key="storage-issues"
             title={_("Storage")}
             icon="hard_drive"
-            className={sectionHighlight === "Storage" ? "highlighted" : ""}
+            className={openFrom === "Storage" ? "highlighted" : ""}
           >
             <IssueItems issues={storageIssues} />
           </Section>
@@ -130,13 +130,13 @@ const IssuesSections = ({ issues, sectionHighlight = "" }) => {
             key="software-issues"
             title={_("Software")}
             icon="apps"
-            className={sectionHighlight === "Software" ? "highlighted" : ""}
+            className={openFrom === "Software" ? "highlighted" : ""}
           >
             <IssueItems issues={softwareIssues} />
           </Section>
         }
       />
-    </>
+    </div>
   );
 };
 
@@ -146,9 +146,9 @@ const IssuesSections = ({ issues, sectionHighlight = "" }) => {
  *
  * @param {object} props
  * @param {import ("~/client").Issues} props.issues
- * @param {string} [props.sectionHighlight] - A string which indicites which issues section should be highlighted.
+ * @param {string} [props.openFrom] - A string which indicites which issues section should be highlighted.
  */
-const IssuesContent = ({ issues, sectionHighlight = "" }) => {
+const IssuesContent = ({ issues, openFrom = "" }) => {
   const NoIssues = () => {
     return (
       <HelperText className="issue">
@@ -165,7 +165,7 @@ const IssuesContent = ({ issues, sectionHighlight = "" }) => {
     <If
       condition={allIssues.length === 0}
       then={<NoIssues />}
-      else={<IssuesSections issues={issues} sectionHighlight={sectionHighlight} />}
+      else={<IssuesSections issues={issues} openFrom={openFrom} />}
     />
   );
 };
@@ -183,9 +183,9 @@ const IssuesContent = ({ issues, sectionHighlight = "" }) => {
  *
  * @param {object} props
  * @param {function} props.close - A function to call when the close action is triggered.
- * @param {string} [props.sectionHighlight] - A string which indicites which issues section should be highlighted.
+ * @param {string} [props.openFrom] - A string which indicites which issues section should be highlighted.
  */
-export default function IssuesDialog({ onClose, sectionHighlight = "" }) {
+export default function IssuesDialog({ onClose, openFrom = "" }) {
   const [isLoading, setIsLoading] = useState(true);
   const [issues, setIssues] = useState();
   const client = useInstallerClient();
@@ -211,8 +211,8 @@ export default function IssuesDialog({ onClose, sectionHighlight = "" }) {
     <Popup isOpen title={_("Issues")} data-content="issues-summary">
       <If
         condition={isLoading}
-        then={<SectionSkeleton numRows={4} />}
-        else={<IssuesContent issues={issues} sectionHighlight={sectionHighlight} />}
+        then={<Icon name="loading" className="icon-big" />}
+        else={<IssuesContent issues={issues} openFrom={openFrom} />}
       />
       <Popup.Actions>
         <Popup.Confirm onClick={onClose} autoFocus>{_("Close")}</Popup.Confirm>

From a68509f8e17ca12ebcbf1c038d41d200ad49c372 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Mon, 25 Dec 2023 19:38:33 +0100
Subject: [PATCH 21/65] sectionHighlight prop to openFrom

adjusted prop description
---
 web/src/components/core/ValidationErrors.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index 7d8f08d1dc..b081a54ad1 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -29,15 +29,14 @@ import { IssuesDialog } from "~/components/core";
 import { n_ } from "~/i18n";
 
 /**
- * Displays a list of validation errors
+ * Displays validation errors
  *
  * When there is only one error, it displays its message. Otherwise, it displays a generic message
- * and the details in an Popover component.
+ * which can be clicked and more error details will be shown in a popup dialog.
  *
  * @component
  *
  * @todo This component might be more generic.
- * @todo Improve the contents of the Popover (e.g., using a list)
  *
  * @param {object} props
  * @param {string} [props.sectionName] - Name of the section which is displaying errors. (product, software, storage, ...)
@@ -75,7 +74,7 @@ const ValidationErrors = ({ errors, sectionName = "" }) => {
           {showIssuesPopUp &&
             <IssuesDialog
               close={() => setshowIssuesPopUp(false)}
-              sectionHighlight={sectionName}
+              openFrom={sectionName}
             />}
         </div>
       </>

From 221cb19752a63b7463b45872c65f3f39c31d3ce0 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Mon, 25 Dec 2023 19:55:50 +0100
Subject: [PATCH 22/65] added isOpen prop to issuesDialog

---
 web/src/components/core/IssuesDialog.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index 07d6e11a2b..32f0e56449 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -185,7 +185,7 @@ const IssuesContent = ({ issues, openFrom = "" }) => {
  * @param {function} props.close - A function to call when the close action is triggered.
  * @param {string} [props.openFrom] - A string which indicites which issues section should be highlighted.
  */
-export default function IssuesDialog({ onClose, openFrom = "" }) {
+export default function IssuesDialog({ isOpen = false, onClose, openFrom = "" }) {
   const [isLoading, setIsLoading] = useState(true);
   const [issues, setIssues] = useState();
   const client = useInstallerClient();
@@ -208,7 +208,7 @@ export default function IssuesDialog({ onClose, openFrom = "" }) {
   }, [client, load, update]);
 
   return (
-    <Popup isOpen title={_("Issues")} data-content="issues-summary">
+    <Popup isOpen={isOpen} title={_("Issues")} data-content="issues-summary">
       <If
         condition={isLoading}
         then={<Icon name="loading" className="icon-big" />}

From e27ff67fa9c99dc6949e24868d459585138af819 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Mon, 25 Dec 2023 19:56:08 +0100
Subject: [PATCH 23/65] now using isOpen prop for rendering

---
 web/src/components/core/Page.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/core/Page.jsx b/web/src/components/core/Page.jsx
index fde7a818b9..5b5dad669c 100644
--- a/web/src/components/core/Page.jsx
+++ b/web/src/components/core/Page.jsx
@@ -248,7 +248,7 @@ const Page = ({ icon, title = "Agama", children }) => {
       </footer>
 
       <Sidebar isOpen={sidebarOpen} onClose={closeSidebar} />
-      <If condition={issuesDialogOpen} then={<IssuesDialog onClose={closeIssuesDialog} />} />
+      <IssuesDialog isOpen={issuesDialogOpen} onClose={closeIssuesDialog} />
     </div>
   );
 };

From fdd374d956fe6f6c7b83fe3289c5e5311a1d5065 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 26 Dec 2023 13:33:29 +0100
Subject: [PATCH 24/65] removed IssuesLink from sidebar

---
 web/src/components/core/Sidebar.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
index 1d9fd88e22..2c499c0183 100644
--- a/web/src/components/core/Sidebar.jsx
+++ b/web/src/components/core/Sidebar.jsx
@@ -26,7 +26,6 @@ import {
   About,
   DevelopmentInfo,
   Disclosure,
-  IssuesLink,
   // FIXME: unify names here by renaming LogsButton -> LogButton or ShowLogButton -> ShowLogsButton
   LogsButton,
   ShowLogButton,
@@ -134,7 +133,6 @@ export default function Sidebar ({ children, isOpen, onClose = noop }) {
 
       <div className="flex-stack justify-between" onClick={onClick}>
         <div className="flex-stack">
-          <IssuesLink />
           <Disclosure label={_("Diagnostic tools")} data-keep-sidebar-open>
             <ShowLogButton />
             <LogsButton data-keep-sidebar-open="true" />

From 50f5d42f2e3674874a84b44dc3c52dd5641e9048 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 26 Dec 2023 13:39:52 +0100
Subject: [PATCH 25/65] removed IssuesLink from sidebar test

---
 web/src/components/core/Sidebar.test.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/core/Sidebar.test.jsx b/web/src/components/core/Sidebar.test.jsx
index 577c50abc5..5d714ea32d 100644
--- a/web/src/components/core/Sidebar.test.jsx
+++ b/web/src/components/core/Sidebar.test.jsx
@@ -27,7 +27,6 @@ import { If, Sidebar } from "~/components/core";
 // Mock some components
 jest.mock("~/components/core/About", () => () => <div>About link mock</div>);
 jest.mock("~/components/core/DevelopmentInfo", () => () => <div>DevelopmentInfo mock</div>);
-jest.mock("~/components/core/IssuesLink", () => () => <div>IssuesLink mock</div>);
 jest.mock("~/components/core/LogsButton", () => () => <div>LogsButton mock</div>);
 jest.mock("~/components/core/ShowLogButton", () => () => <div>ShowLogButton mock</div>);
 jest.mock("~/components/core/ShowTerminalButton", () => () => <div>ShowTerminalButton mock</div>);

From 15e06146b94c18a378b15851fe010ad87c8d4fc4 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 26 Dec 2023 22:15:46 +0100
Subject: [PATCH 26/65] removed the global show issues button from Page comp

---
 web/src/components/core/Page.jsx | 33 +-------------------------------
 1 file changed, 1 insertion(+), 32 deletions(-)

diff --git a/web/src/components/core/Page.jsx b/web/src/components/core/Page.jsx
index 5b5dad669c..72123d843c 100644
--- a/web/src/components/core/Page.jsx
+++ b/web/src/components/core/Page.jsx
@@ -25,9 +25,8 @@ import { Button } from "@patternfly/react-core";
 
 import { _ } from "~/i18n";
 import { partition } from "~/utils";
-import { useNotification } from "~/context/notification";
 import { Icon } from "~/components/layout";
-import { IssuesDialog, If, PageMenu, Sidebar } from "~/components/core";
+import { If, PageMenu, Sidebar } from "~/components/core";
 import logoUrl from "~/assets/suse-horizontal-logo.svg";
 
 /**
@@ -95,30 +94,6 @@ const BackAction = () => {
   );
 };
 
-/**
- * Internal component for displaying a button to show IssuesDialog when there
- * are issues
- *
- * FIXME: move to its own component and import it instead (?)
- *
- * @param {object} [props] - {@link Action} props
- * @param {boolean} props.issues - Whether there is a notification for pending to read issues
- * @param {function} props.onClick - callback to be triggered on user click
- */
-const IssuesDialogButton = ({ issues, onClick }) => {
-  if (!issues) return;
-
-  return (
-    <Button
-      aria-label={_("Show issues popup")}
-      variant="link"
-      className="warning-icon"
-      icon={<Icon name="warning" />}
-      onClick={onClick}
-    />
-  );
-};
-
 /**
  * Displays an installation page
  * @component
@@ -180,9 +155,7 @@ const IssuesDialogButton = ({ issues, onClick }) => {
  *
  */
 const Page = ({ icon, title = "Agama", children }) => {
-  const [notification] = useNotification();
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [issuesDialogOpen, setIssuesDialogOpen] = useState(false);
 
   /**
    * To make possible placing everything in the right place, it's
@@ -211,8 +184,6 @@ const Page = ({ icon, title = "Agama", children }) => {
 
   const openSidebar = () => setSidebarOpen(true);
   const closeSidebar = () => setSidebarOpen(false);
-  const openIssuesDialog = () => setIssuesDialogOpen(true);
-  const closeIssuesDialog = () => setIssuesDialogOpen(false);
 
   return (
     <div data-type="agama/page" data-layout="agama/base">
@@ -222,7 +193,6 @@ const Page = ({ icon, title = "Agama", children }) => {
           <span>{title}</span>
         </h1>
         <div data-type="agama/header-actions">
-          <IssuesDialogButton issues={notification.issues} onClick={openIssuesDialog} />
           { menu }
           <button
             onClick={openSidebar}
@@ -248,7 +218,6 @@ const Page = ({ icon, title = "Agama", children }) => {
       </footer>
 
       <Sidebar isOpen={sidebarOpen} onClose={closeSidebar} />
-      <IssuesDialog isOpen={issuesDialogOpen} onClose={closeIssuesDialog} />
     </div>
   );
 };

From 3dbd8e6cecc329bba5fea7d5d97247e355cabd02 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 26 Dec 2023 22:45:19 +0100
Subject: [PATCH 27/65] IssuesDialog now only shows issues from a single
 section

Removed both highlighting and scrolling mechanisms
Since only one section is shown, they make no sense
---
 web/src/components/core/IssuesDialog.jsx | 24 ++++++------------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index 32f0e56449..85c4be65e7 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { HelperText, HelperTextItem } from "@patternfly/react-core";
 
@@ -83,54 +83,41 @@ const IssuesSections = ({ issues, openFrom = "" }) => {
   const productIssues = issues.product || [];
   const storageIssues = issues.storage || [];
   const softwareIssues = issues.software || [];
-  const selectedRef = useRef(null);
   const openBy = openFrom;
 
-  useEffect(() => {
-    if (selectedRef && selectedRef.current) {
-      selectedRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [issues]);
-
   return (
     <div className="stack">
       <If
-        condition={productIssues.length > 0}
+        condition={productIssues.length > 0 && openBy === "Product"}
         then={
           <Section
-            ref={openBy === "Product" ? selectedRef : null}
             key="product-issues"
             title={_("Product")}
             icon="inventory_2"
-            className={openFrom === "Product" ? "highlighted" : ""}
           >
             <IssueItems issues={productIssues} />
           </Section>
         }
       />
       <If
-        condition={storageIssues.length > 0}
+        condition={storageIssues.length > 0 && openBy === "Storage"}
         then={
           <Section
-            ref={openBy === "Storage" ? selectedRef : null}
             key="storage-issues"
             title={_("Storage")}
             icon="hard_drive"
-            className={openFrom === "Storage" ? "highlighted" : ""}
           >
             <IssueItems issues={storageIssues} />
           </Section>
         }
       />
       <If
-        condition={softwareIssues.length > 0}
+        condition={softwareIssues.length > 0 && openBy === "Software"}
         then={
           <Section
-            ref={openBy === "Software" ? selectedRef : null}
             key="software-issues"
             title={_("Software")}
             icon="apps"
-            className={openFrom === "Software" ? "highlighted" : ""}
           >
             <IssueItems issues={softwareIssues} />
           </Section>
@@ -182,7 +169,8 @@ const IssuesContent = ({ issues, openFrom = "" }) => {
  * @component
  *
  * @param {object} props
- * @param {function} props.close - A function to call when the close action is triggered.
+ * @param {boolean} [props.isOpen] - A boolean value used to determine wether to show the popup or not.
+ * @param {function} props.onClose - A function to call when the close action is triggered.
  * @param {string} [props.openFrom] - A string which indicites which issues section should be highlighted.
  */
 export default function IssuesDialog({ isOpen = false, onClose, openFrom = "" }) {

From f9f85a81a459c08ecd2964abcee675947a8f4167 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 26 Dec 2023 22:46:42 +0100
Subject: [PATCH 28/65] removed warning icon from "N problems found" link

---
 web/src/components/core/ValidationErrors.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index b081a54ad1..1815dddc37 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -62,7 +62,7 @@ const ValidationErrors = ({ errors, sectionName = "" }) => {
             className="plain-control color-warn"
             onClick={() => setshowIssuesPopUp(true)}
           >
-            { warningIcon } {
+            {
               sprintf(
                 // TRANSLATORS: %d is replaced with the number of errors found
                 n_("%d error found", "%d errors found", errors.length),
@@ -71,11 +71,11 @@ const ValidationErrors = ({ errors, sectionName = "" }) => {
             }
           </button>
 
-          {showIssuesPopUp &&
-            <IssuesDialog
-              close={() => setshowIssuesPopUp(false)}
-              openFrom={sectionName}
-            />}
+          <IssuesDialog
+            isOpen={showIssuesPopUp}
+            onClose={() => setshowIssuesPopUp(false)}
+            openFrom={sectionName}
+          />
         </div>
       </>
     );

From eb24b4cc1bd9ef676e3d6583a5e331231cca1d65 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 26 Dec 2023 23:34:46 +0100
Subject: [PATCH 29/65] Removed link to Issues page which no longer exists

Reworded the message to encourage the users to go back and check in case of issues

Set Cancel as primary action and Accept as secondary action
---
 web/src/components/core/InstallButton.jsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/web/src/components/core/InstallButton.jsx b/web/src/components/core/InstallButton.jsx
index dbd348d85c..dbb59aa756 100644
--- a/web/src/components/core/InstallButton.jsx
+++ b/web/src/components/core/InstallButton.jsx
@@ -23,7 +23,6 @@ import React, { useState } from "react";
 import { useInstallerClient } from "~/context/installer";
 
 import { Button } from "@patternfly/react-core";
-import { Link } from "react-router-dom";
 
 import { If, Popup } from "~/components/core";
 import { _ } from "~/i18n";
@@ -31,17 +30,12 @@ import { _ } from "~/i18n";
 const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
   const IssuesWarning = () => {
     // TRANSLATORS: the installer reports some errors,
-    // the text in square brackets [] is a clickable link
-    const [msgStart, msgLink, msgEnd] = _("There are some reported issues. \
-Please, check [the list of issues] \
-before proceeding with the installation.").split(/[[\]]/);
 
     return (
       <p>
         <strong>
-          {msgStart}
-          <Link to="/issues">{msgLink}</Link>
-          {msgEnd}
+          { _("There are some reported issues. \
+          Please review any identified concerns in the previous steps before proceeding with the installation.") }
         </strong>
       </p>
     );
@@ -63,11 +57,14 @@ according to the provided installation settings.") }
         </p>
       </div>
       <Popup.Actions>
-        <Popup.Confirm onClick={onAccept}>
+        <Popup.PrimaryAction key="cancel" onClick={onClose} autoFocus>
+          {/* TRANSLATORS: button label */}
+          {_("Cancel")}
+        </Popup.PrimaryAction>
+        <Popup.SecondaryAction key="confirm" onClick={onAccept}>
           {/* TRANSLATORS: button label */}
           {_("Continue")}
-        </Popup.Confirm>
-        <Popup.Cancel onClick={onClose} autoFocus />
+        </Popup.SecondaryAction>
       </Popup.Actions>
     </Popup>
   );

From 97f134367642287933b20c36ee73150e3061e40c Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Thu, 28 Dec 2023 16:40:20 +0100
Subject: [PATCH 30/65] classes no longer used

---
 web/src/assets/styles/utilities.scss | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
index 6c14f6f7d9..4452ec0c22 100644
--- a/web/src/assets/styles/utilities.scss
+++ b/web/src/assets/styles/utilities.scss
@@ -162,23 +162,3 @@
   display: flex;
   gap: var(--spacer-smaller);
 }
-
-@keyframes fadeHighlight {
-  from {
-      background-color: var(--color-primary-lighter);
-  }
-
-  to {
-      background-color: transparent;
-  }
-}
-
-.highlighted {
-  animation: fadeHighlight 2s ease forwards;
-}
-
-.warning-icon {
-  svg {
-    fill: var(--warning-icon-color);
-  }
-}

From ae4971e08d9f7da54cfbf9270f257de6f8a045bc Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Thu, 28 Dec 2023 16:40:59 +0100
Subject: [PATCH 31/65] variable no longer used

---
 web/src/assets/styles/variables.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/assets/styles/variables.scss b/web/src/assets/styles/variables.scss
index 4dbae66eb5..fb96b3058f 100644
--- a/web/src/assets/styles/variables.scss
+++ b/web/src/assets/styles/variables.scss
@@ -71,8 +71,6 @@
   --color-success: #30ba78;
   --color-warn: #d4351c; // #FE7C3F; // Persimmon
 
-  --warning-icon-color: orange;
-
   --focus-color: #00b2e2; //cerulean 500
 
   --gradient-border-angle: 45deg;

From 4089b088d2447dd04b63d8a4dcaaa4fac9fe615b Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Thu, 28 Dec 2023 16:42:08 +0100
Subject: [PATCH 32/65] adjusted message text regarding the issues

---
 web/src/components/core/InstallButton.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/core/InstallButton.jsx b/web/src/components/core/InstallButton.jsx
index dbb59aa756..f5c6f1d08b 100644
--- a/web/src/components/core/InstallButton.jsx
+++ b/web/src/components/core/InstallButton.jsx
@@ -35,7 +35,7 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
       <p>
         <strong>
           { _("There are some reported issues. \
-          Please review any identified concerns in the previous steps before proceeding with the installation.") }
+          Please review them in the previous steps before proceeding with the installation.") }
         </strong>
       </p>
     );

From 9ff2b8f911acc8d6ecdf44563d6e7024862863a2 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Thu, 28 Dec 2023 23:16:21 +0100
Subject: [PATCH 33/65] cancel primary if there are issues, otherwise continue
 primary

---
 web/src/components/core/InstallButton.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/core/InstallButton.jsx b/web/src/components/core/InstallButton.jsx
index f5c6f1d08b..07dc87326c 100644
--- a/web/src/components/core/InstallButton.jsx
+++ b/web/src/components/core/InstallButton.jsx
@@ -41,6 +41,9 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
     );
   };
 
+  const Cancel = hasIssues ? Popup.PrimaryAction : Popup.SecondaryAction;
+  const Continue = hasIssues ? Popup.SecondaryAction : Popup.PrimaryAction;
+
   return (
     <Popup
       title={_("Confirm Installation")}
@@ -57,14 +60,14 @@ according to the provided installation settings.") }
         </p>
       </div>
       <Popup.Actions>
-        <Popup.PrimaryAction key="cancel" onClick={onClose} autoFocus>
+        <Cancel key="cancel" onClick={onClose} autoFocus={hasIssues}>
           {/* TRANSLATORS: button label */}
           {_("Cancel")}
-        </Popup.PrimaryAction>
-        <Popup.SecondaryAction key="confirm" onClick={onAccept}>
+        </Cancel>
+        <Continue key="confirm" onClick={onAccept} autoFocus={!hasIssues}>
           {/* TRANSLATORS: button label */}
           {_("Continue")}
-        </Popup.SecondaryAction>
+        </Continue>
       </Popup.Actions>
     </Popup>
   );

From 2f62c18392111868a01c07e24634f8a0ee8a9d63 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:13:28 +0100
Subject: [PATCH 34/65] removed the use of forward ref, added sectionId prop

---
 web/src/components/core/Section.jsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
index c0f5155b04..ceb0bcb6d0 100644
--- a/web/src/components/core/Section.jsx
+++ b/web/src/components/core/Section.jsx
@@ -21,7 +21,7 @@
 
 // @ts-check
 
-import React, { forwardRef } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import { Icon } from '~/components/layout';
 import { ValidationErrors } from "~/components/core";
@@ -53,25 +53,25 @@ import { ValidationErrors } from "~/components/core";
  *  when user clicks on the title, used for opening a dialog.
  * @property {boolean} [loading] - Whether the section is busy loading its content or not.
  * @property {string} [className] - Class name for section html tag.
+ * @property {string} [sectionId] - Id of the type of the section, software, product, storage, ...
  * @property {import("~/client/mixins").ValidationError[]} [props.errors] - Validation errors to be shown before the title.
  * @property {React.ReactElement} [children] - The section content.
  * @property {string} [aria-label] - aria-label attribute, required if title if not given
  *
  * @param { SectionProps } props
- *
- * @type {React.FC<SectionProps>}
  */
-const Section = forwardRef(function({
+export default function Section({
   icon,
   title,
   name,
   path,
   loading,
   className,
+  sectionId,
   errors,
   children,
   "aria-label": ariaLabel
-}, ref) {
+}) {
   const headerId = `${name || crypto.randomUUID()}-section-header`;
 
   if (!title && !ariaLabel) {
@@ -92,22 +92,19 @@ const Section = forwardRef(function({
 
   return (
     <section
-      ref={ref}
       className={className}
       aria-live="polite"
       aria-busy={loading}
       aria-label={ariaLabel || undefined}
-      aria-labelledby={ title && !ariaLabel ? headerId : undefined}
+      aria-labelledby={title && !ariaLabel ? headerId : undefined}
       data-type="agama/section"
     >
       <Header />
       <div className="stack">
         {errors?.length > 0 &&
-          <ValidationErrors errors={errors} sectionName={title} />}
+          <ValidationErrors errors={errors} sectionId={sectionId} />}
         {children}
       </div>
     </section>
   );
-});
-
-export default Section;
+}

From 3a6a1267bccb3be7d73855248ce5eb3994470d5f Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:14:20 +0100
Subject: [PATCH 35/65] adding sectionId prop value

---
 web/src/components/overview/L10nSection.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/overview/L10nSection.jsx b/web/src/components/overview/L10nSection.jsx
index de6d1b5eb5..819546e6ea 100644
--- a/web/src/components/overview/L10nSection.jsx
+++ b/web/src/components/overview/L10nSection.jsx
@@ -53,6 +53,7 @@ export default function L10nSection() {
       loading={isLoading}
       icon="globe"
       path="/l10n"
+      sectionId="l10n"
     >
       <If
         condition={isLoading}

From bc464b20082559b423a4f982284ba83d863bb632 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:14:34 +0100
Subject: [PATCH 36/65] adding sectionId prop value

---
 web/src/components/overview/NetworkSection.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/overview/NetworkSection.jsx b/web/src/components/overview/NetworkSection.jsx
index bba8796141..adfda4edcf 100644
--- a/web/src/components/overview/NetworkSection.jsx
+++ b/web/src/components/overview/NetworkSection.jsx
@@ -103,6 +103,7 @@ export default function NetworkSection() {
       icon="settings_ethernet"
       loading={!initialized}
       path="/network"
+      sectionId="network"
     >
       <Content />
     </Section>

From f272ef3d011959be0f5c1c72573d1673bacfe8ea Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:14:40 +0100
Subject: [PATCH 37/65] adding sectionId prop value

---
 web/src/components/overview/ProductSection.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/overview/ProductSection.jsx b/web/src/components/overview/ProductSection.jsx
index 83121fab21..23db6d7bb8 100644
--- a/web/src/components/overview/ProductSection.jsx
+++ b/web/src/components/overview/ProductSection.jsx
@@ -73,6 +73,7 @@ export default function ProductSection() {
       errors={errors}
       loading={isLoading}
       path="/product"
+      sectionId="product"
     >
       <Content isLoading={isLoading} />
     </Section>

From bc693bdcfc153fd546a38ec6b0edfda32289ad40 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:14:50 +0100
Subject: [PATCH 38/65] adding sectionId prop value

---
 web/src/components/overview/SoftwareSection.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/overview/SoftwareSection.jsx b/web/src/components/overview/SoftwareSection.jsx
index 1408f791c4..1022e94e41 100644
--- a/web/src/components/overview/SoftwareSection.jsx
+++ b/web/src/components/overview/SoftwareSection.jsx
@@ -146,6 +146,7 @@ export default function SoftwareSection({ showErrors }) {
       errors={errors.map(toValidationError)}
       // do not display the pattern selector when there are no patterns to display
       path={Object.keys(state.patterns).length > 0 ? "/software" : null}
+      sectionId="software"
     >
       <SectionContent />
     </Section>

From bf745c8a69df159606b97c08773ed947ad54b60d Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:15:01 +0100
Subject: [PATCH 39/65] adding sectionId prop value

---
 web/src/components/overview/StorageSection.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/overview/StorageSection.jsx b/web/src/components/overview/StorageSection.jsx
index adbe1978d8..26f44d2072 100644
--- a/web/src/components/overview/StorageSection.jsx
+++ b/web/src/components/overview/StorageSection.jsx
@@ -210,6 +210,7 @@ export default function StorageSection({ showErrors = false }) {
       icon="hard_drive"
       loading={busy}
       errors={errors}
+      sectionId="storage"
     >
       <SectionContent />
     </Section>

From afc7dae6bb435bfab46d8201b9f45c87ac9e8801 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:15:19 +0100
Subject: [PATCH 40/65] adding sectionId prop value

---
 web/src/components/overview/UsersSection.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/overview/UsersSection.jsx b/web/src/components/overview/UsersSection.jsx
index 433f557864..892169a847 100644
--- a/web/src/components/overview/UsersSection.jsx
+++ b/web/src/components/overview/UsersSection.jsx
@@ -122,6 +122,7 @@ export default function UsersSection({ showErrors }) {
       loading={state.busy}
       errors={errors}
       path="/users"
+      sectionId="users"
     >
       { state.busy ? <SectionSkeleton /> : <Summary /> }
     </Section>

From dcfc69aefea8066d5041e1f9d66a46247d1f3f12 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:16:38 +0100
Subject: [PATCH 41/65] changed prop name to sectionId

---
 web/src/components/core/ValidationErrors.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index 1815dddc37..76e738d21b 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -39,10 +39,10 @@ import { n_ } from "~/i18n";
  * @todo This component might be more generic.
  *
  * @param {object} props
- * @param {string} [props.sectionName] - Name of the section which is displaying errors. (product, software, storage, ...)
+ * @param {string} props.sectionId - Name of the section which is displaying errors. (product, software, storage, ...)
  * @param {import("~/client/mixins").ValidationError[]} props.errors - Validation errors
  */
-const ValidationErrors = ({ errors, sectionName = "" }) => {
+const ValidationErrors = ({ errors, sectionId }) => {
   const [showIssuesPopUp, setshowIssuesPopUp] = useState(false);
 
   if (!errors || errors.length === 0) return null;
@@ -74,7 +74,7 @@ const ValidationErrors = ({ errors, sectionName = "" }) => {
           <IssuesDialog
             isOpen={showIssuesPopUp}
             onClose={() => setshowIssuesPopUp(false)}
-            openFrom={sectionName}
+            sectionId={sectionId}
           />
         </div>
       </>

From bd4c91aba39f4c4e9b9063c918f9e3efc966c3d8 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Sat, 30 Dec 2023 15:18:19 +0100
Subject: [PATCH 42/65] simplified issuesSection comp; no conditions, just a
 single section

---
 web/src/components/core/IssuesDialog.jsx | 93 +++++++++---------------
 1 file changed, 36 insertions(+), 57 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index 85c4be65e7..ec4f0b993a 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -77,53 +77,13 @@ const IssueItems = ({ issues = [] }) => {
  *
  * @param {object} props
  * @param {import ("~/client/issues").ClientsIssues} props.issues
- * @param {string} [props.openFrom] - A string which indicites which issues section should be highlighted.
+ * @param {string} props.sectionId - A string which indicites which issues section should be highlighted.
  */
-const IssuesSections = ({ issues, openFrom = "" }) => {
-  const productIssues = issues.product || [];
-  const storageIssues = issues.storage || [];
-  const softwareIssues = issues.software || [];
-  const openBy = openFrom;
-
+const IssuesSections = ({ issues }) => {
   return (
-    <div className="stack">
-      <If
-        condition={productIssues.length > 0 && openBy === "Product"}
-        then={
-          <Section
-            key="product-issues"
-            title={_("Product")}
-            icon="inventory_2"
-          >
-            <IssueItems issues={productIssues} />
-          </Section>
-        }
-      />
-      <If
-        condition={storageIssues.length > 0 && openBy === "Storage"}
-        then={
-          <Section
-            key="storage-issues"
-            title={_("Storage")}
-            icon="hard_drive"
-          >
-            <IssueItems issues={storageIssues} />
-          </Section>
-        }
-      />
-      <If
-        condition={softwareIssues.length > 0 && openBy === "Software"}
-        then={
-          <Section
-            key="software-issues"
-            title={_("Software")}
-            icon="apps"
-          >
-            <IssueItems issues={softwareIssues} />
-          </Section>
-        }
-      />
-    </div>
+    <Section aria-label="issues-section">
+      <IssueItems issues={issues} />
+    </Section>
   );
 };
 
@@ -133,9 +93,9 @@ const IssuesSections = ({ issues, openFrom = "" }) => {
  *
  * @param {object} props
  * @param {import ("~/client").Issues} props.issues
- * @param {string} [props.openFrom] - A string which indicites which issues section should be highlighted.
+ * @param {string} props.sectionId - A string which indicites which issues section should be highlighted.
  */
-const IssuesContent = ({ issues, openFrom = "" }) => {
+const IssuesContent = ({ issues }) => {
   const NoIssues = () => {
     return (
       <HelperText className="issue">
@@ -152,16 +112,16 @@ const IssuesContent = ({ issues, openFrom = "" }) => {
     <If
       condition={allIssues.length === 0}
       then={<NoIssues />}
-      else={<IssuesSections issues={issues} openFrom={openFrom} />}
+      else={<IssuesSections issues={issues} />}
     />
   );
 };
 
 /**
- * Page to show all issues.
+ * Popup to show more issues details from the installation overview page.
  *
  * It initially shows a loading state,
- * then fetches and displays a list of issues grouped by categories such as 'product', 'storage', and 'software'.
+ * then fetches and displays a list of issues of the selected category, either 'product' or 'storage' or 'software'.
  *
  * It uses a Popup component to display the issues, and an If component to toggle between
  * a loading state and the content state.
@@ -171,13 +131,27 @@ const IssuesContent = ({ issues, openFrom = "" }) => {
  * @param {object} props
  * @param {boolean} [props.isOpen] - A boolean value used to determine wether to show the popup or not.
  * @param {function} props.onClose - A function to call when the close action is triggered.
- * @param {string} [props.openFrom] - A string which indicites which issues section should be highlighted.
+ * @param {string} props.sectionId - A string which indicites which type of issues is going to be shown in the popup.
  */
-export default function IssuesDialog({ isOpen = false, onClose, openFrom = "" }) {
+export default function IssuesDialog({ isOpen = false, onClose, sectionId }) {
   const [isLoading, setIsLoading] = useState(true);
-  const [issues, setIssues] = useState();
+  const [issues, setIssues] = useState([]);
   const client = useInstallerClient();
   const { cancellablePromise } = useCancellablePromise();
+  const titles = {
+    software: {
+      text: _("Software issues"),
+      icon: () => <Icon name="apps" />
+    },
+    product: {
+      text: _("Product issues"),
+      icon: () => <Icon name="inventory_2" />
+    },
+    storage: {
+      text: _("Storage issues"),
+      icon: () => <Icon name="hard_drive" />
+    }
+  };
 
   const load = useCallback(async () => {
     setIsLoading(true);
@@ -187,8 +161,8 @@ export default function IssuesDialog({ isOpen = false, onClose, openFrom = "" })
   }, [client, cancellablePromise, setIsLoading]);
 
   const update = useCallback((issues) => {
-    setIssues(current => ({ ...current, ...issues }));
-  }, [setIssues]);
+    setIssues(current => ([...current, ...(issues[sectionId] || [])]));
+  }, [setIssues, sectionId]);
 
   useEffect(() => {
     load().then(update);
@@ -196,11 +170,16 @@ export default function IssuesDialog({ isOpen = false, onClose, openFrom = "" })
   }, [client, load, update]);
 
   return (
-    <Popup isOpen={isOpen} title={_("Issues")} data-content="issues-summary">
+    <Popup
+      isOpen={isOpen}
+      title={titles[sectionId].text}
+      titleIconVariant={titles[sectionId].icon}
+      data-content="issues-summary"
+    >
       <If
         condition={isLoading}
         then={<Icon name="loading" className="icon-big" />}
-        else={<IssuesContent issues={issues} openFrom={openFrom} />}
+        else={<IssuesContent issues={issues} />}
       />
       <Popup.Actions>
         <Popup.Confirm onClick={onClose} autoFocus>{_("Close")}</Popup.Confirm>

From 6705f817624037da25f104cff6e615fb3165cace Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 17:12:36 +0100
Subject: [PATCH 43/65] removed red color and warning icon from issueItem

set aria-label to "List of issues"
---
 web/src/components/core/IssuesDialog.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index ec4f0b993a..2df4353073 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -37,14 +37,12 @@ import { _ } from "~/i18n";
  * @param {import ("~/client/mixins").Issue} props.issue
  */
 const IssueItem = ({ issue }) => {
-  const variant = issue.severity === "warn" ? "warning" : "error";
-  const icon = issue.severity === "warn" ? "warning" : "error";
   const hasDetails = issue.details.length > 0;
 
   return (
     <div>
       <HelperText className="issue">
-        <HelperTextItem variant={variant} hasIcon icon={<Icon name={icon} />}>
+        <HelperTextItem>
           {issue.description}
         </HelperTextItem>
         <If
@@ -81,7 +79,8 @@ const IssueItems = ({ issues = [] }) => {
  */
 const IssuesSections = ({ issues }) => {
   return (
-    <Section aria-label="issues-section">
+    /* TRANSLATORS: Aria label */
+    <Section aria-label={_("List of issues")}>
       <IssueItems issues={issues} />
     </Section>
   );

From 9a6aa2925add8517ba82011cf740118fbc3951e6 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 20:55:14 +0100
Subject: [PATCH 44/65] removed code for IssuesLink

---
 web/src/components/core/IssuesLink.jsx      | 47 --------------
 web/src/components/core/IssuesLink.test.jsx | 72 ---------------------
 2 files changed, 119 deletions(-)
 delete mode 100644 web/src/components/core/IssuesLink.jsx
 delete mode 100644 web/src/components/core/IssuesLink.test.jsx

diff --git a/web/src/components/core/IssuesLink.jsx b/web/src/components/core/IssuesLink.jsx
deleted file mode 100644
index ca9c851267..0000000000
--- a/web/src/components/core/IssuesLink.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright (c) [2023] SUSE LLC
- *
- * All Rights Reserved.
- *
- * This program is free software; you can redistribute it and/or modify it
- * under the terms of version 2 of the GNU General Public License as published
- * by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along
- * with this program; if not, contact SUSE LLC.
- *
- * To contact SUSE LLC about this file by physical or electronic mail, you may
- * find current contact information at www.suse.com.
- */
-
-import React from "react";
-import { Link } from "react-router-dom";
-
-import { Icon } from "~/components/layout";
-import { If, NotificationMark } from "~/components/core";
-import { useNotification } from "~/context/notification";
-import { _ } from "~/i18n";
-
-/**
- * Link to go to the issues page
- * @component
- */
-export default function IssuesLink() {
-  const [notification] = useNotification();
-
-  return (
-    <Link to="/issues">
-      <Icon name="problem" size="s" />
-      {_("Show issues")}
-      <If
-        condition={notification.issues}
-        then={<NotificationMark aria-label={_("There are new issues")} />}
-      />
-    </Link>
-  );
-}
diff --git a/web/src/components/core/IssuesLink.test.jsx b/web/src/components/core/IssuesLink.test.jsx
deleted file mode 100644
index 8073276beb..0000000000
--- a/web/src/components/core/IssuesLink.test.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright (c) [2023] SUSE LLC
- *
- * All Rights Reserved.
- *
- * This program is free software; you can redistribute it and/or modify it
- * under the terms of version 2 of the GNU General Public License as published
- * by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along
- * with this program; if not, contact SUSE LLC.
- *
- * To contact SUSE LLC about this file by physical or electronic mail, you may
- * find current contact information at www.suse.com.
- */
-
-import React from "react";
-import { screen, within } from "@testing-library/react";
-import { installerRender, withNotificationProvider } from "~/test-utils";
-import { createClient } from "~/client";
-import { IssuesLink } from "~/components/core";
-
-let mockIssues = {};
-
-jest.mock("~/client");
-
-beforeEach(() => {
-  createClient.mockImplementation(() => {
-    return {
-      issues: jest.fn().mockResolvedValue(mockIssues),
-      onIssuesChange: jest.fn()
-    };
-  });
-});
-
-it("renders a link for navigating to the issues page", async () => {
-  installerRender(withNotificationProvider(<IssuesLink />));
-  const link = await screen.findByRole("link", { name: "Show issues" });
-  expect(link).toHaveAttribute("href", "/issues");
-});
-
-describe("if there are issues", () => {
-  beforeEach(() => {
-    mockIssues = {
-      storage: [{ description: "issue 1" }]
-    };
-  });
-
-  it("includes a notification mark", async () => {
-    installerRender(withNotificationProvider(<IssuesLink />));
-    const link = await screen.findByRole("link", { name: /new issues/ });
-    within(link).getByRole("status", { name: /new issues/ });
-  });
-});
-
-describe("if there are not issues", () => {
-  beforeEach(() => {
-    mockIssues = {};
-  });
-
-  it("does not include a notification mark", async () => {
-    installerRender(withNotificationProvider(<IssuesLink />));
-    const link = await screen.findByRole("link", { name: "Show issues" });
-    const mark = within(link).queryByRole("status", { name: /new issues/ });
-    expect(mark).toBeNull();
-  });
-});

From 16e6b9cfc48ca3a5f0e23801c49b5b63d2674ae5 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 20:55:42 +0100
Subject: [PATCH 45/65] removed IssuesLink

---
 web/src/components/core/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js
index 982350463b..45558fe8dc 100644
--- a/web/src/components/core/index.js
+++ b/web/src/components/core/index.js
@@ -36,7 +36,6 @@ export { default as Installation } from "./Installation";
 export { default as InstallationFinished } from "./InstallationFinished";
 export { default as InstallationProgress } from "./InstallationProgress";
 export { default as InstallButton } from "./InstallButton";
-export { default as IssuesLink } from "./IssuesLink";
 export { default as IssuesDialog } from "./IssuesDialog";
 export { default as SectionSkeleton } from "./SectionSkeleton";
 export { default as ListSearch } from "./ListSearch";

From d0ffa4f4e9c19b014b6c195ab8fe13bbd9f715a4 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 20:56:11 +0100
Subject: [PATCH 46/65] changed prop name from sectionId to id

---
 web/src/components/core/Section.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
index ceb0bcb6d0..1d3e49a293 100644
--- a/web/src/components/core/Section.jsx
+++ b/web/src/components/core/Section.jsx
@@ -53,7 +53,7 @@ import { ValidationErrors } from "~/components/core";
  *  when user clicks on the title, used for opening a dialog.
  * @property {boolean} [loading] - Whether the section is busy loading its content or not.
  * @property {string} [className] - Class name for section html tag.
- * @property {string} [sectionId] - Id of the type of the section, software, product, storage, ...
+ * @property {string} [id] - Id of the section ("software", "product", "storage", ...)
  * @property {import("~/client/mixins").ValidationError[]} [props.errors] - Validation errors to be shown before the title.
  * @property {React.ReactElement} [children] - The section content.
  * @property {string} [aria-label] - aria-label attribute, required if title if not given
@@ -67,7 +67,7 @@ export default function Section({
   path,
   loading,
   className,
-  sectionId,
+  id,
   errors,
   children,
   "aria-label": ariaLabel
@@ -102,7 +102,7 @@ export default function Section({
       <Header />
       <div className="stack">
         {errors?.length > 0 &&
-          <ValidationErrors errors={errors} sectionId={sectionId} />}
+          <ValidationErrors errors={errors} sectionId={id} />}
         {children}
       </div>
     </section>

From dc803360656e600667ed66581e6e4abd734d2dc3 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 20:57:34 +0100
Subject: [PATCH 47/65] prop name change from sectionId to id

---
 web/src/components/overview/L10nSection.jsx     | 2 +-
 web/src/components/overview/NetworkSection.jsx  | 2 +-
 web/src/components/overview/ProductSection.jsx  | 2 +-
 web/src/components/overview/SoftwareSection.jsx | 2 +-
 web/src/components/overview/StorageSection.jsx  | 2 +-
 web/src/components/overview/UsersSection.jsx    | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/overview/L10nSection.jsx b/web/src/components/overview/L10nSection.jsx
index 819546e6ea..fb74076cac 100644
--- a/web/src/components/overview/L10nSection.jsx
+++ b/web/src/components/overview/L10nSection.jsx
@@ -53,7 +53,7 @@ export default function L10nSection() {
       loading={isLoading}
       icon="globe"
       path="/l10n"
-      sectionId="l10n"
+      id="l10n"
     >
       <If
         condition={isLoading}
diff --git a/web/src/components/overview/NetworkSection.jsx b/web/src/components/overview/NetworkSection.jsx
index adfda4edcf..2eca68e522 100644
--- a/web/src/components/overview/NetworkSection.jsx
+++ b/web/src/components/overview/NetworkSection.jsx
@@ -103,7 +103,7 @@ export default function NetworkSection() {
       icon="settings_ethernet"
       loading={!initialized}
       path="/network"
-      sectionId="network"
+      id="network"
     >
       <Content />
     </Section>
diff --git a/web/src/components/overview/ProductSection.jsx b/web/src/components/overview/ProductSection.jsx
index 23db6d7bb8..ad8481645d 100644
--- a/web/src/components/overview/ProductSection.jsx
+++ b/web/src/components/overview/ProductSection.jsx
@@ -73,7 +73,7 @@ export default function ProductSection() {
       errors={errors}
       loading={isLoading}
       path="/product"
-      sectionId="product"
+      id="product"
     >
       <Content isLoading={isLoading} />
     </Section>
diff --git a/web/src/components/overview/SoftwareSection.jsx b/web/src/components/overview/SoftwareSection.jsx
index 1022e94e41..a5ac99b8fc 100644
--- a/web/src/components/overview/SoftwareSection.jsx
+++ b/web/src/components/overview/SoftwareSection.jsx
@@ -146,7 +146,7 @@ export default function SoftwareSection({ showErrors }) {
       errors={errors.map(toValidationError)}
       // do not display the pattern selector when there are no patterns to display
       path={Object.keys(state.patterns).length > 0 ? "/software" : null}
-      sectionId="software"
+      id="software"
     >
       <SectionContent />
     </Section>
diff --git a/web/src/components/overview/StorageSection.jsx b/web/src/components/overview/StorageSection.jsx
index 26f44d2072..1246183b4e 100644
--- a/web/src/components/overview/StorageSection.jsx
+++ b/web/src/components/overview/StorageSection.jsx
@@ -210,7 +210,7 @@ export default function StorageSection({ showErrors = false }) {
       icon="hard_drive"
       loading={busy}
       errors={errors}
-      sectionId="storage"
+      id="storage"
     >
       <SectionContent />
     </Section>
diff --git a/web/src/components/overview/UsersSection.jsx b/web/src/components/overview/UsersSection.jsx
index 892169a847..fc9d64b50a 100644
--- a/web/src/components/overview/UsersSection.jsx
+++ b/web/src/components/overview/UsersSection.jsx
@@ -122,7 +122,7 @@ export default function UsersSection({ showErrors }) {
       loading={state.busy}
       errors={errors}
       path="/users"
-      sectionId="users"
+      id="users"
     >
       { state.busy ? <SectionSkeleton /> : <Summary /> }
     </Section>

From 27a0127e2ecb0e482b99f110701a51cfd3de85e8 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 20:58:24 +0100
Subject: [PATCH 48/65] more simplification of IssuesDialog code

removed internal components

added Title as prop
---
 web/src/components/core/IssuesDialog.jsx | 82 ++++--------------------
 1 file changed, 12 insertions(+), 70 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index 2df4353073..e1fa182cb1 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -69,53 +69,6 @@ const IssueItems = ({ issues = [] }) => {
   });
 };
 
-/**
- * Generates the sections with issues.
- * @component
- *
- * @param {object} props
- * @param {import ("~/client/issues").ClientsIssues} props.issues
- * @param {string} props.sectionId - A string which indicites which issues section should be highlighted.
- */
-const IssuesSections = ({ issues }) => {
-  return (
-    /* TRANSLATORS: Aria label */
-    <Section aria-label={_("List of issues")}>
-      <IssueItems issues={issues} />
-    </Section>
-  );
-};
-
-/**
- * Generates sections with issues. If there are no issues, then a success message is shown.
- * @component
- *
- * @param {object} props
- * @param {import ("~/client").Issues} props.issues
- * @param {string} props.sectionId - A string which indicites which issues section should be highlighted.
- */
-const IssuesContent = ({ issues }) => {
-  const NoIssues = () => {
-    return (
-      <HelperText className="issue">
-        <HelperTextItem variant="success" hasIcon icon={<Icon name="task_alt" />}>
-          {_("No issues found. Everything looks ok.")}
-        </HelperTextItem>
-      </HelperText>
-    );
-  };
-
-  const allIssues = Object.values(issues).flat();
-
-  return (
-    <If
-      condition={allIssues.length === 0}
-      then={<NoIssues />}
-      else={<IssuesSections issues={issues} />}
-    />
-  );
-};
-
 /**
  * Popup to show more issues details from the installation overview page.
  *
@@ -130,27 +83,14 @@ const IssuesContent = ({ issues }) => {
  * @param {object} props
  * @param {boolean} [props.isOpen] - A boolean value used to determine wether to show the popup or not.
  * @param {function} props.onClose - A function to call when the close action is triggered.
- * @param {string} props.sectionId - A string which indicites which type of issues is going to be shown in the popup.
+ * @param {string} props.sectionId - A string which indicates what type of issues are going to be shown in the popup.
+ * @param {string} props.title - Title of the popup.
  */
-export default function IssuesDialog({ isOpen = false, onClose, sectionId }) {
+export default function IssuesDialog({ isOpen = false, onClose, sectionId, title }) {
   const [isLoading, setIsLoading] = useState(true);
   const [issues, setIssues] = useState([]);
   const client = useInstallerClient();
   const { cancellablePromise } = useCancellablePromise();
-  const titles = {
-    software: {
-      text: _("Software issues"),
-      icon: () => <Icon name="apps" />
-    },
-    product: {
-      text: _("Product issues"),
-      icon: () => <Icon name="inventory_2" />
-    },
-    storage: {
-      text: _("Storage issues"),
-      icon: () => <Icon name="hard_drive" />
-    }
-  };
 
   const load = useCallback(async () => {
     setIsLoading(true);
@@ -171,15 +111,17 @@ export default function IssuesDialog({ isOpen = false, onClose, sectionId }) {
   return (
     <Popup
       isOpen={isOpen}
-      title={titles[sectionId].text}
-      titleIconVariant={titles[sectionId].icon}
+      title={title}
       data-content="issues-summary"
     >
-      <If
-        condition={isLoading}
-        then={<Icon name="loading" className="icon-big" />}
-        else={<IssuesContent issues={issues} />}
-      />
+      {/* TRANSLATORS: Aria label */}
+      <Section aria-label={_("List of issues")}>
+        <If
+          condition={isLoading}
+          then={<Icon name="loading" className="icon-big" />}
+          else={<IssueItems issues={issues} />}
+        />
+      </Section>
       <Popup.Actions>
         <Popup.Confirm onClick={onClose} autoFocus>{_("Close")}</Popup.Confirm>
       </Popup.Actions>

From bd72c6eb2dd4ed8c9791ecac5689d1fa2d4e1120 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 21:00:44 +0100
Subject: [PATCH 49/65] passing title to IssuesDialog based on sectionId

---
 web/src/components/core/ValidationErrors.jsx | 64 +++++++++++---------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index 76e738d21b..b30203fa42 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -26,7 +26,7 @@ import { sprintf } from "sprintf-js";
 
 import { Icon } from '~/components/layout';
 import { IssuesDialog } from "~/components/core";
-import { n_ } from "~/i18n";
+import { _, n_ } from "~/i18n";
 
 /**
  * Displays validation errors
@@ -43,7 +43,14 @@ import { n_ } from "~/i18n";
  * @param {import("~/client/mixins").ValidationError[]} props.errors - Validation errors
  */
 const ValidationErrors = ({ errors, sectionId }) => {
-  const [showIssuesPopUp, setshowIssuesPopUp] = useState(false);
+  const [showIssuesPopUp, setShowIssuesPopUp] = useState(false);
+  const dialogTitles = {
+    /* TRANSLATORS: Popup titles */
+    software: _("Software issues"),
+    product: _("Product issues"),
+    storage: _("Storage issues")
+  };
+  const dialogTitle = dialogTitles[sectionId] || "";
 
   if (!errors || errors.length === 0) return null;
 
@@ -53,33 +60,34 @@ const ValidationErrors = ({ errors, sectionId }) => {
     return (
       <div className="color-warn">{warningIcon} {errors[0].message}</div>
     );
-  } else {
-    return (
-      <>
-        <div className="color-warn">
-          <button
-            style={{ padding: "0", borderBottom: "1px solid" }}
-            className="plain-control color-warn"
-            onClick={() => setshowIssuesPopUp(true)}
-          >
-            {
-              sprintf(
-                // TRANSLATORS: %d is replaced with the number of errors found
-                n_("%d error found", "%d errors found", errors.length),
-                errors.length
-              )
-            }
-          </button>
-
-          <IssuesDialog
-            isOpen={showIssuesPopUp}
-            onClose={() => setshowIssuesPopUp(false)}
-            sectionId={sectionId}
-          />
-        </div>
-      </>
-    );
   }
+
+  return (
+    <>
+      <div className="color-warn">
+        <button
+          style={{ padding: "0", borderBottom: "1px solid" }}
+          className="plain-control color-warn"
+          onClick={() => setShowIssuesPopUp(true)}
+        >
+          {
+            sprintf(
+              // TRANSLATORS: %d is replaced with the number of errors found
+              n_("%d error found", "%d errors found", errors.length),
+              errors.length
+            )
+          }
+        </button>
+
+        <IssuesDialog
+          isOpen={showIssuesPopUp}
+          onClose={() => setShowIssuesPopUp(false)}
+          sectionId={sectionId}
+          title={dialogTitle}
+        />
+      </div>
+    </>
+  );
 };
 
 export default ValidationErrors;

From 651211f886ce3c38db198bfa1292e081e6d965f8 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 21:04:03 +0100
Subject: [PATCH 50/65] removing the use of notificationProvider

---
 web/src/context/agama.jsx |  5 +----
 web/src/test-utils.js     | 18 +-----------------
 2 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/web/src/context/agama.jsx b/web/src/context/agama.jsx
index 5ee0b7d22e..c17f6a8803 100644
--- a/web/src/context/agama.jsx
+++ b/web/src/context/agama.jsx
@@ -26,7 +26,6 @@ import { InstallerClientProvider } from "./installer";
 import { InstallerL10nProvider } from "./installerL10n";
 import { L10nProvider } from "./l10n";
 import { ProductProvider } from "./product";
-import { NotificationProvider } from "./notification";
 
 /**
  * Combines all application providers.
@@ -40,9 +39,7 @@ function AgamaProviders({ children }) {
       <InstallerL10nProvider>
         <L10nProvider>
           <ProductProvider>
-            <NotificationProvider>
-              {children}
-            </NotificationProvider>
+            {children}
           </ProductProvider>
         </L10nProvider>
       </InstallerL10nProvider>
diff --git a/web/src/test-utils.js b/web/src/test-utils.js
index 6175e3022f..ea41f8c730 100644
--- a/web/src/test-utils.js
+++ b/web/src/test-utils.js
@@ -32,7 +32,6 @@ import { render } from "@testing-library/react";
 
 import { createClient } from "~/client/index";
 import { InstallerClientProvider } from "~/context/installer";
-import { NotificationProvider } from "~/context/notification";
 import { noop } from "./utils";
 import cockpit from "./lib/cockpit";
 import { InstallerL10nProvider } from "./context/installerL10n";
@@ -164,20 +163,6 @@ const createCallbackMock = () => {
   return [on, callbacks];
 };
 
-/**
- * Wraps the content with a notification provider
- *
- * @param {React.ReactNode} content
- * @returns {React.ReactNode}
- */
-const withNotificationProvider = (content) => {
-  return (
-    <NotificationProvider>
-      {content}
-    </NotificationProvider>
-  );
-};
-
 /**
  * Mocks the cockpit.gettext() method with an identity function (returns
  * the original untranslated text)
@@ -197,6 +182,5 @@ export {
   createCallbackMock,
   mockGettext,
   mockNavigateFn,
-  mockRoutes,
-  withNotificationProvider
+  mockRoutes
 };

From f5dad31ce3db0de21daa1cb21ea94aef49ae0543 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 21:12:20 +0100
Subject: [PATCH 51/65] removing the use of notificationProvider

---
 web/src/components/core/IssuesDialog.test.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.test.jsx b/web/src/components/core/IssuesDialog.test.jsx
index f7c4907c07..1690485a26 100644
--- a/web/src/components/core/IssuesDialog.test.jsx
+++ b/web/src/components/core/IssuesDialog.test.jsx
@@ -21,7 +21,7 @@
 
 import React from "react";
 import { act, screen, waitFor, within } from "@testing-library/react";
-import { installerRender, createCallbackMock, withNotificationProvider } from "~/test-utils";
+import { installerRender, createCallbackMock } from "~/test-utils";
 import { createClient } from "~/client";
 import { IssuesDialog } from "~/components/core";
 
@@ -62,14 +62,14 @@ beforeEach(() => {
 });
 
 it("loads the issues", async () => {
-  installerRender(withNotificationProvider(<IssuesDialog />));
+  installerRender(<IssuesDialog />);
 
   screen.getAllByText(/PFSkeleton/);
   await screen.findByText(/storage issue 1/);
 });
 
 it("renders sections with issues", async () => {
-  installerRender(withNotificationProvider(<IssuesDialog />));
+  installerRender(<IssuesDialog />);
 
   await waitFor(() => expect(screen.queryByText("Product")).not.toBeInTheDocument());
 
@@ -87,7 +87,7 @@ describe("if there are not issues", () => {
   });
 
   it("renders a success message", async () => {
-    installerRender(withNotificationProvider(<IssuesDialog />));
+    installerRender(<IssuesDialog />);
 
     await screen.findByText(/No issues found/);
   });
@@ -98,7 +98,7 @@ describe("if the issues change", () => {
     const [mockFunction, callbacks] = createCallbackMock();
     mockOnIssuesChange = mockFunction;
 
-    installerRender(withNotificationProvider(<IssuesDialog />));
+    installerRender(<IssuesDialog />);
 
     await screen.findByText("Storage");
 

From 5ea7aabfc9c004d1d2cd39cc12e2f004dcf3cc8c Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 21:15:04 +0100
Subject: [PATCH 52/65] droping the whole notification code

---
 web/src/context/notification.jsx | 80 --------------------------------
 1 file changed, 80 deletions(-)
 delete mode 100644 web/src/context/notification.jsx

diff --git a/web/src/context/notification.jsx b/web/src/context/notification.jsx
deleted file mode 100644
index d04df31486..0000000000
--- a/web/src/context/notification.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright (c) [2023] SUSE LLC
- *
- * All Rights Reserved.
- *
- * This program is free software; you can redistribute it and/or modify it
- * under the terms of version 2 of the GNU General Public License as published
- * by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along
- * with this program; if not, contact SUSE LLC.
- *
- * To contact SUSE LLC about this file by physical or electronic mail, you may
- * find current contact information at www.suse.com.
- */
-
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import { useCancellablePromise } from "~/utils";
-import { useInstallerClient } from "./installer";
-
-const NotificationContext = React.createContext([{ issues: false }]);
-
-function NotificationProvider({ children }) {
-  const client = useInstallerClient();
-  const { cancellablePromise } = useCancellablePromise();
-  const [state, setState] = useState({ issues: false });
-
-  const update = useCallback(({ issues }) => {
-    setState(s => ({ ...s, issues }));
-  }, [setState]);
-
-  const load = useCallback(async () => {
-    if (!client) return;
-
-    const issues = await cancellablePromise(client.issues());
-    const hasIssues = Object.values(issues).flat().length > 0;
-    update({ issues: hasIssues });
-  }, [client, cancellablePromise, update]);
-
-  useEffect(() => {
-    if (!client) return;
-
-    load();
-    return client.onIssuesChange(load);
-  }, [client, load]);
-
-  const value = [state, update];
-
-  return <NotificationContext.Provider value={value}>{children}</NotificationContext.Provider>;
-}
-
-/**
- * Returns the current notification state and a function to update the state
- * @function
- *
- * @typedef {object} NotificationState
- * @property {boolean} [issues] - Whether there is a notification for pending to read issues
- *
- * @callback NotificationStateUpdater
- * @param {NotificationState} state
- * @return {void}
- *
- * @returns {[NotificationState, NotificationStateUpdater]}
- */
-function useNotification() {
-  const context = useContext(NotificationContext);
-
-  if (!context) {
-    throw new Error("useNotification must be used within a NotificationProvider");
-  }
-
-  return context;
-}
-
-export { NotificationProvider, useNotification };

From 0df8a30eb03c78363d92e88f70aaf7fab0043a07 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 3 Jan 2024 22:47:04 +0100
Subject: [PATCH 53/65] removed old tests, added two basic tests

---
 web/src/components/core/IssuesDialog.test.jsx | 50 +++----------------
 1 file changed, 7 insertions(+), 43 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.test.jsx b/web/src/components/core/IssuesDialog.test.jsx
index 1690485a26..1bb149a80c 100644
--- a/web/src/components/core/IssuesDialog.test.jsx
+++ b/web/src/components/core/IssuesDialog.test.jsx
@@ -62,51 +62,15 @@ beforeEach(() => {
 });
 
 it("loads the issues", async () => {
-  installerRender(<IssuesDialog />);
+  installerRender(<IssuesDialog isOpen sectionId="storage" title="Storage issues" />);
 
-  screen.getAllByText(/PFSkeleton/);
   await screen.findByText(/storage issue 1/);
 });
 
-it("renders sections with issues", async () => {
-  installerRender(<IssuesDialog />);
-
-  await waitFor(() => expect(screen.queryByText("Product")).not.toBeInTheDocument());
-
-  const storageSection = await screen.findByText(/Storage/);
-  within(storageSection).findByText(/storage issue 1/);
-  within(storageSection).findByText(/storage issue 2/);
-
-  const softwareSection = await screen.findByText(/Software/);
-  within(softwareSection).findByText(/software issue 1/);
-});
-
-describe("if there are not issues", () => {
-  beforeEach(() => {
-    mockIssues = { product: [], storage: [], software: [] };
-  });
-
-  it("renders a success message", async () => {
-    installerRender(<IssuesDialog />);
-
-    await screen.findByText(/No issues found/);
-  });
-});
-
-describe("if the issues change", () => {
-  it("shows the new issues", async () => {
-    const [mockFunction, callbacks] = createCallbackMock();
-    mockOnIssuesChange = mockFunction;
-
-    installerRender(<IssuesDialog />);
-
-    await screen.findByText("Storage");
-
-    mockIssues.storage = [];
-    act(() => callbacks.forEach(c => c({ storage: mockIssues.storage })));
-
-    await waitFor(() => expect(screen.queryByText("Storage")).not.toBeInTheDocument());
-    const softwareSection = await screen.findByText(/Software/);
-    within(softwareSection).findByText(/software issue 1/);
-  });
+it('calls onClose callback when close button is clicked', async () => {
+  const mockOnClose = jest.fn();
+  const { user } = installerRender(<IssuesDialog isOpen onClose={mockOnClose} sectionId="software" title="Software issues" />);
+  
+  await user.click(screen.getByText("Close"));
+  expect(mockOnClose).toHaveBeenCalled();
 });

From bddb6b8413db1d04708fee497e2b85a7d44296e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 08:45:49 +0000
Subject: [PATCH 54/65] [web] Please linters

---
 web/src/components/core/IssuesDialog.test.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.test.jsx b/web/src/components/core/IssuesDialog.test.jsx
index 1bb149a80c..90f9aa5dde 100644
--- a/web/src/components/core/IssuesDialog.test.jsx
+++ b/web/src/components/core/IssuesDialog.test.jsx
@@ -20,8 +20,8 @@
  */
 
 import React from "react";
-import { act, screen, waitFor, within } from "@testing-library/react";
-import { installerRender, createCallbackMock } from "~/test-utils";
+import { screen } from "@testing-library/react";
+import { installerRender } from "~/test-utils";
 import { createClient } from "~/client";
 import { IssuesDialog } from "~/components/core";
 
@@ -70,7 +70,7 @@ it("loads the issues", async () => {
 it('calls onClose callback when close button is clicked', async () => {
   const mockOnClose = jest.fn();
   const { user } = installerRender(<IssuesDialog isOpen onClose={mockOnClose} sectionId="software" title="Software issues" />);
-  
+
   await user.click(screen.getByText("Close"));
   expect(mockOnClose).toHaveBeenCalled();
 });

From 4e97140dc49cba3ce5ae042fd7cae04f4fbbb267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 09:01:20 +0000
Subject: [PATCH 55/65] [web] Fix InstallButton indentation and test

---
 web/src/components/core/InstallButton.jsx      |  2 +-
 web/src/components/core/InstallButton.test.jsx | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/src/components/core/InstallButton.jsx b/web/src/components/core/InstallButton.jsx
index 07dc87326c..ed969a0ac1 100644
--- a/web/src/components/core/InstallButton.jsx
+++ b/web/src/components/core/InstallButton.jsx
@@ -35,7 +35,7 @@ const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => {
       <p>
         <strong>
           { _("There are some reported issues. \
-          Please review them in the previous steps before proceeding with the installation.") }
+Please review them in the previous steps before proceeding with the installation.") }
         </strong>
       </p>
     );
diff --git a/web/src/components/core/InstallButton.test.jsx b/web/src/components/core/InstallButton.test.jsx
index 4e0937d7b0..6762fa0afb 100644
--- a/web/src/components/core/InstallButton.test.jsx
+++ b/web/src/components/core/InstallButton.test.jsx
@@ -85,23 +85,22 @@ describe("when the button is clicked and there are not errors", () => {
       };
     });
 
-    it("shows a link to go to the issues page", async () => {
+    it("shows a message encouraging the user to review them", async () => {
       const { user } = installerRender(<InstallButton />);
       const button = await screen.findByRole("button", { name: "Install" });
       await user.click(button);
-
-      await screen.findByRole("link", { name: /list of issues$/ });
+      await screen.findByText(/There are some reported issues/);
     });
   });
 
   describe("if there are not issues", () => {
-    it("does not show a link to go to the issues page", async () => {
+    it("doest not show the message encouraging the user to review them", async () => {
       const { user } = installerRender(<InstallButton />);
       const button = await screen.findByRole("button", { name: "Install" });
       await user.click(button);
       await waitFor(() => {
-        const link = screen.queryByRole("link", { name: /list of issues$/ });
-        expect(link).toBeNull();
+        const text = screen.queryByText(/There are some reported issues/);
+        expect(text).toBeNull();
       });
     });
   });

From 8a45d9b24956e28497f1de5ba241cf351a68ba65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 09:57:46 +0000
Subject: [PATCH 56/65] [web] Update ValidationErrors component test

It was needed to mock the core/IssuesDialog component to keep the test
simple instead of mocking the client and having to test things that
actually belongs to IssuesDialog component
---
 web/src/components/core/IssuesDialog.test.jsx |  5 +-
 web/src/components/core/ValidationErrors.jsx  | 61 ++++++++-----------
 .../components/core/ValidationErrors.test.jsx | 40 ++++++++----
 3 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/web/src/components/core/IssuesDialog.test.jsx b/web/src/components/core/IssuesDialog.test.jsx
index 90f9aa5dde..df3ea86970 100644
--- a/web/src/components/core/IssuesDialog.test.jsx
+++ b/web/src/components/core/IssuesDialog.test.jsx
@@ -47,16 +47,13 @@ const issues = {
 
 let mockIssues;
 
-let mockOnIssuesChange;
-
 beforeEach(() => {
   mockIssues = { ...issues };
-  mockOnIssuesChange = jest.fn();
 
   createClient.mockImplementation(() => {
     return {
       issues: jest.fn().mockResolvedValue(mockIssues),
-      onIssuesChange: mockOnIssuesChange
+      onIssuesChange: jest.fn()
     };
   });
 });
diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index b30203fa42..d98f32e63d 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -24,28 +24,25 @@
 import React, { useState } from "react";
 import { sprintf } from "sprintf-js";
 
-import { Icon } from '~/components/layout';
-import { IssuesDialog } from "~/components/core";
 import { _, n_ } from "~/i18n";
+import { IssuesDialog } from "~/components/core";
 
 /**
- * Displays validation errors
+ * Displays validation errors for given section
  *
  * When there is only one error, it displays its message. Otherwise, it displays a generic message
- * which can be clicked and more error details will be shown in a popup dialog.
+ * which can be clicked to see more details in a popup dialog.
  *
  * @component
  *
- * @todo This component might be more generic.
- *
  * @param {object} props
- * @param {string} props.sectionId - Name of the section which is displaying errors. (product, software, storage, ...)
+ * @param {string} props.sectionId - Id of the section which is displaying errors. (product, software, storage, ...)
  * @param {import("~/client/mixins").ValidationError[]} props.errors - Validation errors
  */
 const ValidationErrors = ({ errors, sectionId }) => {
   const [showIssuesPopUp, setShowIssuesPopUp] = useState(false);
   const dialogTitles = {
-    /* TRANSLATORS: Popup titles */
+    // TRANSLATORS: Titles used for the popup displaying found section issues
     software: _("Software issues"),
     product: _("Product issues"),
     storage: _("Storage issues")
@@ -54,39 +51,35 @@ const ValidationErrors = ({ errors, sectionId }) => {
 
   if (!errors || errors.length === 0) return null;
 
-  const warningIcon = <Icon name="warning" size="xxs" />;
-
   if (errors.length === 1) {
     return (
-      <div className="color-warn">{warningIcon} {errors[0].message}</div>
+      <div className="color-warn">{errors[0].message}</div>
     );
   }
 
   return (
-    <>
-      <div className="color-warn">
-        <button
-          style={{ padding: "0", borderBottom: "1px solid" }}
-          className="plain-control color-warn"
-          onClick={() => setShowIssuesPopUp(true)}
-        >
-          {
-            sprintf(
-              // TRANSLATORS: %d is replaced with the number of errors found
-              n_("%d error found", "%d errors found", errors.length),
-              errors.length
-            )
-          }
-        </button>
+    <div className="color-warn">
+      <button
+        style={{ padding: "0", borderBottom: "1px solid" }}
+        className="plain-control color-warn"
+        onClick={() => setShowIssuesPopUp(true)}
+      >
+        {
+          sprintf(
+            // TRANSLATORS: %d is replaced with the number of errors found
+            n_("%d error found", "%d errors found", errors.length),
+            errors.length
+          )
+        }
+      </button>
 
-        <IssuesDialog
-          isOpen={showIssuesPopUp}
-          onClose={() => setShowIssuesPopUp(false)}
-          sectionId={sectionId}
-          title={dialogTitle}
-        />
-      </div>
-    </>
+      <IssuesDialog
+        isOpen={showIssuesPopUp}
+        onClose={() => setShowIssuesPopUp(false)}
+        sectionId={sectionId}
+        title={dialogTitle}
+      />
+    </div>
   );
 };
 
diff --git a/web/src/components/core/ValidationErrors.test.jsx b/web/src/components/core/ValidationErrors.test.jsx
index b7fe95f52c..74fdfda223 100644
--- a/web/src/components/core/ValidationErrors.test.jsx
+++ b/web/src/components/core/ValidationErrors.test.jsx
@@ -22,32 +22,48 @@
 import React from "react";
 import { screen, waitFor } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
-import ValidationErrors from "./ValidationErrors";
+import { ValidationErrors } from "~/components/core";
+
+jest.mock("~/components/core/IssuesDialog", () => ({ isOpen }) => isOpen && <div>IssuesDialog</div>);
+
+let issues = [];
+
+describe("when there are no errors", () => {
+  it("renders nothing", async () => {
+    const { container } = plainRender(<ValidationErrors sectionId="storage" errors={issues} />);
+    await waitFor(() => expect(container).toBeEmptyDOMElement());
+  });
+});
 
 describe("when there is a single error", () => {
+  beforeEach(() => {
+    issues = [{ severity: 0, message: "It is wrong" }];
+  });
+
   it("renders a list containing the given errors", () => {
-    const errors = [
-      { severity: 0, message: "It is wrong" },
-    ];
-    plainRender(<ValidationErrors title="Errors" errors={errors} />);
+    plainRender(<ValidationErrors sectionId="storage" errors={issues} />);
 
     expect(screen.queryByText("It is wrong")).toBeInTheDocument();
   });
 });
 
 describe("when there are multiple errors", () => {
-  it("renders a list containing the given errors", async () => {
-    const errors = [
+  beforeEach(() => {
+    issues = [
       { severity: 0, message: "It is wrong" },
       { severity: 1, message: "It might be better" }
     ];
+  });
 
-    const { user } = plainRender(<ValidationErrors title="Errors" errors={errors} />);
+  it("shows a button for listing them and opens a dialog when user clicks on it", async () => {
+    const { user } = plainRender(<ValidationErrors sectionId="storage" errors={issues} />);
     const button = await screen.findByRole("button", { name: "2 errors found" });
-    await user.click(button);
 
-    await waitFor(() => {
-      expect(screen.queryByText(/It is wrong/)).toBeInTheDocument();
-    });
+    // See IssuesDialog mock at the top of the file
+    const dialog = await screen.queryByText("IssuesDialog");
+    expect(dialog).toBeNull();
+
+    await user.click(button);
+    await screen.findByText("IssuesDialog");
   });
 });

From d4a99e181d822057f7b00480ff049cdb5fdf706b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 10:46:38 +0000
Subject: [PATCH 57/65] [web] Do not use core/Section for list of issues

Since core/Section is reserving space for icons, it looks a bit weird
when used inside a dialog for displaying a list of items. Too much space
on the left.

Thus, stop using it by now until the component allows conditionally
reserve such an space or not depending on whatever, a prop or parent.

Also, start using a plain HTML <ul> element instead of the PF/HelperText
for wrapping the list of issues.
---
 .../assets/styles/patternfly-overrides.scss   |  9 +++++
 web/src/components/core/IssuesDialog.jsx      | 39 ++++++++-----------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss
index 47afc4c496..0a8aa243d3 100644
--- a/web/src/assets/styles/patternfly-overrides.scss
+++ b/web/src/assets/styles/patternfly-overrides.scss
@@ -236,6 +236,15 @@ table td > .pf-v5-c-empty-state {
   padding-inline: 0;
 }
 
+ul {
+  list-style: initial;
+  margin-inline: var(--spacer-normal);
+
+  li {
+    padding-block-end: var(--spacer-small);
+  }
+}
+
 @media screen and (width <= 768px) {
   .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
     padding-inline: 0;
diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index e1fa182cb1..3c792d5bf7 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -21,10 +21,8 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 
-import { HelperText, HelperTextItem } from "@patternfly/react-core";
-
 import { partition, useCancellablePromise } from "~/utils";
-import { If, Section, Popup } from "~/components/core";
+import { If, Popup } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 import { _ } from "~/i18n";
@@ -40,17 +38,13 @@ const IssueItem = ({ issue }) => {
   const hasDetails = issue.details.length > 0;
 
   return (
-    <div>
-      <HelperText className="issue">
-        <HelperTextItem>
-          {issue.description}
-        </HelperTextItem>
-        <If
-          condition={hasDetails}
-          then={<HelperTextItem><pre>{issue.details}</pre></HelperTextItem>}
-        />
-      </HelperText>
-    </div>
+    <li>
+      {issue.description}
+      <If
+        condition={hasDetails}
+        then={<pre>{issue.details}</pre>}
+      />
+    </li>
   );
 };
 
@@ -64,9 +58,11 @@ const IssueItem = ({ issue }) => {
 const IssueItems = ({ issues = [] }) => {
   const sortedIssues = partition(issues, i => i.severity === "error").flat();
 
-  return sortedIssues.map((issue, index) => {
+  const items = sortedIssues.map((issue, index) => {
     return <IssueItem key={`issue-${index}`} issue={issue} />;
   });
+
+  return <ul>{items}</ul>;
 };
 
 /**
@@ -114,14 +110,11 @@ export default function IssuesDialog({ isOpen = false, onClose, sectionId, title
       title={title}
       data-content="issues-summary"
     >
-      {/* TRANSLATORS: Aria label */}
-      <Section aria-label={_("List of issues")}>
-        <If
-          condition={isLoading}
-          then={<Icon name="loading" className="icon-big" />}
-          else={<IssueItems issues={issues} />}
-        />
-      </Section>
+      <If
+        condition={isLoading}
+        then={<Icon name="loading" className="icon-big" />}
+        else={<IssueItems issues={issues} />}
+      />
       <Popup.Actions>
         <Popup.Confirm onClick={onClose} autoFocus>{_("Close")}</Popup.Confirm>
       </Popup.Actions>

From e1b7f79e75a70cf4612caeb53d4c097a1e328091 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 10:54:27 +0000
Subject: [PATCH 58/65] [web] Allow ValidationErrors guess the right issues key

There are some use cases where the IssuesDialog can be open for a
"subsection" of a big area. E.g., the "storage-actions" section could
link to the "storage" issues.

Thus, split the `sectionId` to use only the text found before the first
dash.
---
 web/src/components/core/Section.jsx          |  2 +-
 web/src/components/core/Section.test.jsx     |  2 +-
 web/src/components/core/ValidationErrors.jsx | 13 ++++++++++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
index 1d3e49a293..0a6b755740 100644
--- a/web/src/components/core/Section.jsx
+++ b/web/src/components/core/Section.jsx
@@ -53,7 +53,7 @@ import { ValidationErrors } from "~/components/core";
  *  when user clicks on the title, used for opening a dialog.
  * @property {boolean} [loading] - Whether the section is busy loading its content or not.
  * @property {string} [className] - Class name for section html tag.
- * @property {string} [id] - Id of the section ("software", "product", "storage", ...)
+ * @property {string} [id] - Id of the section ("software", "product", "storage", "storage-actions", ...)
  * @property {import("~/client/mixins").ValidationError[]} [props.errors] - Validation errors to be shown before the title.
  * @property {React.ReactElement} [children] - The section content.
  * @property {string} [aria-label] - aria-label attribute, required if title if not given
diff --git a/web/src/components/core/Section.test.jsx b/web/src/components/core/Section.test.jsx
index da9c53bfd8..d7d5db2a81 100644
--- a/web/src/components/core/Section.test.jsx
+++ b/web/src/components/core/Section.test.jsx
@@ -121,7 +121,7 @@ describe("Section", () => {
 
   it("renders given errors", () => {
     plainRender(
-      <Section title="Awesome settings" errors={[{ message: "Something went wrong" }]} />
+      <Section id="settings" title="Awesome settings" errors={[{ message: "Something went wrong" }]} />
     );
 
     screen.getByText("Something went wrong");
diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx
index d98f32e63d..01c70cf781 100644
--- a/web/src/components/core/ValidationErrors.jsx
+++ b/web/src/components/core/ValidationErrors.jsx
@@ -33,21 +33,28 @@ import { IssuesDialog } from "~/components/core";
  * When there is only one error, it displays its message. Otherwise, it displays a generic message
  * which can be clicked to see more details in a popup dialog.
  *
+ * @note It will retrieve issues for the area matching the first part of the
+ * given sectionId. I.e., given an `storage-actions` id it will retrieve and
+ * display issues for the `storage` area. If `software-patterns-conflicts` is
+ * given instead, it will retrieve and display errors for the `software` area.
+ *
  * @component
  *
  * @param {object} props
- * @param {string} props.sectionId - Id of the section which is displaying errors. (product, software, storage, ...)
+ * @param {string} props.sectionId - Id of the section which is displaying errors. ("product", "software", "storage", "storage-actions", ...)
  * @param {import("~/client/mixins").ValidationError[]} props.errors - Validation errors
  */
-const ValidationErrors = ({ errors, sectionId }) => {
+const ValidationErrors = ({ errors, sectionId: sectionKey }) => {
   const [showIssuesPopUp, setShowIssuesPopUp] = useState(false);
+
+  const [sectionId,] = sectionKey?.split("-") || "";
   const dialogTitles = {
     // TRANSLATORS: Titles used for the popup displaying found section issues
     software: _("Software issues"),
     product: _("Product issues"),
     storage: _("Storage issues")
   };
-  const dialogTitle = dialogTitles[sectionId] || "";
+  const dialogTitle = dialogTitles[sectionId] || _("Found Issues");
 
   if (!errors || errors.length === 0) return null;
 

From 1260990cf8fa61e9ca7af1be6c08b07f014fe2d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 10:58:25 +0000
Subject: [PATCH 59/65] [web] Add an id to the storage actions section

---
 web/src/components/storage/ProposalActionsSection.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/storage/ProposalActionsSection.jsx b/web/src/components/storage/ProposalActionsSection.jsx
index a7a66bd346..e6a272b8e5 100644
--- a/web/src/components/storage/ProposalActionsSection.jsx
+++ b/web/src/components/storage/ProposalActionsSection.jsx
@@ -123,7 +123,7 @@ export default function ProposalActionsSection({ actions = [], errors = [], isLo
   return (
     // TRANSLATORS: section title, list of planned actions for the selected device,
     // e.g. "delete partition A", "create partition B with filesystem C", ...
-    <Section title={_("Planned Actions")} errors={errors}>
+    <Section title={_("Planned Actions")} id="storage-actions" errors={errors}>
       <If
         condition={isLoading}
         then={<ActionsSkeleton />}

From b67cf7dd3018b3fbabe9fb26be9b1955a85a7f3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 11:07:16 +0000
Subject: [PATCH 60/65] [web] Fix loading icon size in IssuesDialog

---
 web/src/components/core/IssuesDialog.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx
index 3c792d5bf7..42e30d20b2 100644
--- a/web/src/components/core/IssuesDialog.jsx
+++ b/web/src/components/core/IssuesDialog.jsx
@@ -112,7 +112,7 @@ export default function IssuesDialog({ isOpen = false, onClose, sectionId, title
     >
       <If
         condition={isLoading}
-        then={<Icon name="loading" className="icon-big" />}
+        then={<Icon name="loading" className="icon-xxxl" />}
         else={<IssueItems issues={issues} />}
       />
       <Popup.Actions>

From 5ab2ae454d1189bac5c467fd8d83fa6f5365a2bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 11:20:45 +0000
Subject: [PATCH 61/65] [web] Fix sectionId prop in software/PatternSelector

---
 web/src/components/software/PatternSelector.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/software/PatternSelector.jsx b/web/src/components/software/PatternSelector.jsx
index a54a936509..06de61c3b0 100644
--- a/web/src/components/software/PatternSelector.jsx
+++ b/web/src/components/software/PatternSelector.jsx
@@ -209,7 +209,7 @@ function PatternSelector() {
     <>
       <Section aria-label={_("Software summary and filter options")}>
         <UsedSize size={used} />
-        <ValidationErrors errors={validationErrors} sectionName="Software" />
+        <ValidationErrors errors={validationErrors} sectionId="software" />
         <SearchInput
           // TRANSLATORS: search field placeholder text
           placeholder={_("Search")}

From 0e84d9b232dda8824b653588ae56835fb8996aa7 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Thu, 4 Jan 2024 22:39:33 +0100
Subject: [PATCH 62/65] removed route for Issues Dialog

Issues Dialog is not a page and therefore the route is not needed
---
 web/src/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/index.js b/web/src/index.js
index 88e04fc33f..b02eba1aba 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -84,7 +84,6 @@ root.render(
               <Route path="/storage/zfcp" element={<ZFCPPage />} />
               <Route path="/network" element={<NetworkPage />} />
               <Route path="/users" element={<UsersPage />} />
-              <Route path="/issues" element={<IssuesDialog />} />
             </Route>
             <Route path="products" element={<ProductSelectionPage />} />
           </Route>

From 75d87a140e6ed97784cf1a08af87664cff16a1bb Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Thu, 4 Jan 2024 22:49:49 +0100
Subject: [PATCH 63/65] changes file update

---
 web/package/cockpit-agama.changes | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index 5902146b4a..6c06495717 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,10 @@
+-------------------------------------------------------------------
+Thu Jan 04 21:44:32 UTC 2024 - Balsa Asanovic <balsaasanovic95@gmail.com>
+
+- Removing global issues page and using popup dialog instead.
+  It shows issues only from a specific category (software,
+  product, storage, ...) and not all at once. (gh#openSUSE/agama#886).
+
 -------------------------------------------------------------------
 Tue Dec 26 11:12:45 UTC 2023 - David Diaz <dgonzalez@suse.com>
 

From a1a04a5d0a33effa57bd5ec0fd349a395123dafb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 15:10:03 +0000
Subject: [PATCH 64/65] [web] Fix styles

Using margin instead of padding
---
 web/src/assets/styles/patternfly-overrides.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss
index 0a8aa243d3..5e2d2f9fe5 100644
--- a/web/src/assets/styles/patternfly-overrides.scss
+++ b/web/src/assets/styles/patternfly-overrides.scss
@@ -240,8 +240,8 @@ ul {
   list-style: initial;
   margin-inline: var(--spacer-normal);
 
-  li {
-    padding-block-end: var(--spacer-small);
+  li:not(:last-child) {
+    margin-block-end: var(--spacer-small);
   }
 }
 

From e4431240147ff10eb46e7e268c054102bf468883 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 4 Jan 2024 23:22:16 +0000
Subject: [PATCH 65/65] [web] Please ESLint

---
 web/src/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/index.js b/web/src/index.js
index b02eba1aba..1762013289 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -41,7 +41,6 @@ import { ProposalPage as StoragePage, ISCSIPage, DASDPage, ZFCPPage } from "~/co
 import { UsersPage } from "~/components/users";
 import { L10nPage } from "~/components/l10n";
 import { NetworkPage } from "~/components/network";
-import { IssuesDialog } from "~/components/core";
 
 /**
  * As JSX components might import CSS stylesheets, our styles must be imported