Remove global issues page and start using popup instead

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

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;
+}

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,27 +219,23 @@ 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);
     return client.onIssuesChange(update);
   }, [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>
   );
 }

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>

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,21 +130,30 @@ 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"
           aria-label={_("Show global options")}
           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}

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>
       </>
     );