Remove global issues page and start using popup instead

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>
 

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

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:not(:last-child) {
+    margin-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;

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;

web/src/components/core/InstallButton.jsx

@@ -23,30 +23,27 @@ 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";
 
 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 them in the previous steps before proceeding with the installation.") }
         </strong>
       </p>
     );
   };
 
+  const Cancel = hasIssues ? Popup.PrimaryAction : Popup.SecondaryAction;
+  const Continue = hasIssues ? Popup.SecondaryAction : Popup.PrimaryAction;
+
   return (
     <Popup
       title={_("Confirm Installation")}
@@ -63,11 +60,14 @@ according to the provided installation settings.") }
         </p>
       </div>
       <Popup.Actions>
-        <Popup.Confirm onClick={onAccept}>
+        <Cancel key="cancel" onClick={onClose} autoFocus={hasIssues}>
+          {/* TRANSLATORS: button label */}
+          {_("Cancel")}
+        </Cancel>
+        <Continue key="confirm" onClick={onAccept} autoFocus={!hasIssues}>
           {/* TRANSLATORS: button label */}
           {_("Continue")}
-        </Popup.Confirm>
-        <Popup.Cancel onClick={onClose} autoFocus />
+        </Continue>
       </Popup.Actions>
     </Popup>
   );

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();
       });
     });
   });

web/src/components/core/IssuesDialog.jsx

@@ -0,0 +1,123 @@
+/*
+ * 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, useEffect, useState } from "react";
+
+import { partition, useCancellablePromise } from "~/utils";
+import { If, Popup } from "~/components/core";
+import { Icon } from "~/components/layout";
+import { useInstallerClient } from "~/context/installer";
+import { _ } from "~/i18n";
+
+/**
+ * Item representing an issue.
+ * @component
+ *
+ * @param {object} props
+ * @param {import ("~/client/mixins").Issue} props.issue
+ */
+const IssueItem = ({ issue }) => {
+  const hasDetails = issue.details.length > 0;
+
+  return (
+    <li>
+      {issue.description}
+      <If
+        condition={hasDetails}
+        then={<pre>{issue.details}</pre>}
+      />
+    </li>
+  );
+};
+
+/**
+ * Generates issue items sorted by severity.
+ * @component
+ *
+ * @param {object} props
+ * @param {import ("~/client/mixins").Issue[]} props.issues
+ */
+const IssueItems = ({ issues = [] }) => {
+  const sortedIssues = partition(issues, i => i.severity === "error").flat();
+
+  const items = sortedIssues.map((issue, index) => {
+    return <IssueItem key={`issue-${index}`} issue={issue} />;
+  });
+
+  return <ul>{items}</ul>;
+};
+
+/**
+ * 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 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.
+ *
+ * @component
+ *
+ * @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 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, title }) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [issues, setIssues] = useState([]);
+  const client = useInstallerClient();
+  const { cancellablePromise } = useCancellablePromise();
+
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    const issues = await cancellablePromise(client.issues());
+    setIsLoading(false);
+    return issues;
+  }, [client, cancellablePromise, setIsLoading]);
+
+  const update = useCallback((issues) => {
+    setIssues(current => ([...current, ...(issues[sectionId] || [])]));
+  }, [setIssues, sectionId]);
+
+  useEffect(() => {
+    load().then(update);
+    return client.onIssuesChange(update);
+  }, [client, load, update]);
+
+  return (
+    <Popup
+      isOpen={isOpen}
+      title={title}
+      data-content="issues-summary"
+    >
+      <If
+        condition={isLoading}
+        then={<Icon name="loading" className="icon-xxxl" />}
+        else={<IssueItems issues={issues} />}
+      />
+      <Popup.Actions>
+        <Popup.Confirm onClick={onClose} autoFocus>{_("Close")}</Popup.Confirm>
+      </Popup.Actions>
+    </Popup>
+  );
+}

web/src/components/core/IssuesDialog.test.jsx

@@ -0,0 +1,73 @@
+/*
+ * 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 } from "@testing-library/react";
+import { installerRender } from "~/test-utils";
+import { createClient } from "~/client";
+import { IssuesDialog } from "~/components/core";
+
+jest.mock("~/client");
+jest.mock("@patternfly/react-core", () => {
+  return {
+    ...jest.requireActual("@patternfly/react-core"),
+    Skeleton: () => <div>PFSkeleton</div>
+  };
+});
+jest.mock("~/components/core/Sidebar", () => () => <div>Agama sidebar</div>);
+
+const issues = {
+  product: [],
+  storage: [
+    { description: "storage issue 1", details: "Details 1", source: "system", severity: "warn" },
+    { description: "storage issue 2", details: "Details 2", source: "config", severity: "error" }
+  ],
+  software: [
+    { description: "software issue 1", details: "Details 1", source: "system", severity: "warn" }
+  ]
+};
+
+let mockIssues;
+
+beforeEach(() => {
+  mockIssues = { ...issues };
+
+  createClient.mockImplementation(() => {
+    return {
+      issues: jest.fn().mockResolvedValue(mockIssues),
+      onIssuesChange: jest.fn()
+    };
+  });
+});
+
+it("loads the issues", async () => {
+  installerRender(<IssuesDialog isOpen sectionId="storage" title="Storage issues" />);
+
+  await screen.findByText(/storage 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();
+});