refactor(web): UI code pruning and clean up round #2 (#1494)

Related to #1441, just another round of UI code improvements and clean
up.

web/src/App.jsx

@@ -30,7 +30,9 @@ import { useProduct, useProductChanges } from "./queries/software";
 import { CONFIG, INSTALL, STARTUP } from "~/client/phase";
 import { BUSY } from "~/client/status";
 import { useL10nConfigChanges } from "~/queries/l10n";
-import { useIssues, useIssuesChanges } from "./queries/issues";
+import { useIssuesChanges } from "./queries/issues";
+import { PATHS as PRODUCT_PATHS } from "./routes/products";
+import SimpleLayout from "./SimpleLayout";
 
 /**
  * Main application component.
@@ -55,18 +57,23 @@ function App() {
       return <Installation status={status} />;
     }
 
-    if (!products || !connected) return <Loading />;
+    if (!products || !connected)
+      return (
+        <SimpleLayout showOutlet={false}>
+          <Loading />
+        </SimpleLayout>
+      );
 
     if ((phase === STARTUP && status === BUSY) || phase === undefined || status === undefined) {
       return <Loading />;
     }
 
-    if (selectedProduct === undefined && location.pathname !== "/products") {
+    if (selectedProduct === undefined && location.pathname !== PRODUCT_PATHS.root) {
       return <Navigate to="/products" />;
     }
 
-    if (phase === CONFIG && status === BUSY && location.pathname !== "/products/progress") {
-      return <Navigate to="/products/progress" />;
+    if (phase === CONFIG && status === BUSY && location.pathname !== PRODUCT_PATHS.progress) {
+      return <Navigate to={PRODUCT_PATHS.progress} />;
     }
 
     return <Outlet />;

web/src/assets/styles/global.scss

@@ -44,6 +44,14 @@ button.pf-m-link {
   }
 }
 
+.pf-v5-c-page__sidebar {
+  button.pf-m-link,
+  a.pf-m-link {
+    color: white;
+    text-decoration: underline;
+  }
+}
+
 // Do not reserve space for empty nodes.
 div:empty {
   display: none;

web/src/components/core/About.test.jsx → web/src/components/core/About.test.tsx

@@ -20,7 +20,6 @@
  */
 
 import React from "react";
-
 import { screen, waitFor, within } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
 
@@ -50,10 +49,11 @@ describe("About", () => {
     screen.getByRole("button", { name: "What is this?" });
   });
 
-  it("allows setting its button variant", () => {
-    plainRender(<About buttonVariant="tertiary" />);
+  it("allows setting button props", () => {
+    plainRender(<About buttonProps={{ variant: "link", isInline: true }} />);
     const button = screen.getByRole("button", { name: "About" });
-    expect(button.classList.contains("pf-m-tertiary")).toBe(true);
+    expect(button.classList.contains("pf-m-link")).toBe(true);
+    expect(button.classList.contains("pf-m-inline")).toBe(true);
   });
 
   it("allows user to read 'About Agama'", async () => {

web/src/components/core/About.jsx → web/src/components/core/About.tsx

@@ -19,37 +19,33 @@
  * find current contact information at www.suse.com.
  */
 
-// @ts-check
-
 import React, { useState } from "react";
-import { Button, Text } from "@patternfly/react-core";
-import { _ } from "~/i18n";
-import { sprintf } from "sprintf-js";
+import { Button, ButtonProps, Text } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { Popup } from "~/components/core";
+import { sprintf } from "sprintf-js";
+import { _ } from "~/i18n";
 
-/**
- * @typedef {import("@patternfly/react-core").ButtonProps} ButtonProps
- */
+export type AboutProps = {
+  /** Whether render a "help" icon into the button */
+  showIcon?: boolean;
+  /** The size for the button icon, if any */
+  iconSize?: string;
+  /** The text for the button */
+  buttonText?: string;
+  /** Props for the button, see {@link https://www.patternfly.org/components/button PF/Button} */
+  buttonProps?: ButtonProps;
+} & ButtonProps;
 
 /**
  * Renders a button and a dialog to allow user read about what Agama is
- * @component
- *
- * @param {object} props
- * @param {boolean} [props.showIcon=true] - Whether render a "help" icon into the button.
- * @param {string} [props.iconSize="s"] - The size for the button icon.
- * @param {string} [props.buttonText="About"] - The text for the button.
- * @param {ButtonProps["variant"]} [props.buttonVariant="link"] - The button variant.
- *   See {@link https://www.patternfly.org/components/button#variant-examples PF/Button}.
  */
 export default function About({
   showIcon = true,
   iconSize = "s",
   buttonText = _("About"),
-  buttonVariant = "link",
-  ...props
-}) {
+  buttonProps = { variant: "link" },
+}: AboutProps) {
   const [isOpen, setIsOpen] = useState(false);
 
   const open = () => setIsOpen(true);
@@ -58,10 +54,9 @@ export default function About({
   return (
     <>
       <Button
-        variant={buttonVariant}
         icon={showIcon && <Icon name="help" size={iconSize} />}
         onClick={open}
-        {...props}
+        {...buttonProps}
       >
         {buttonText}
       </Button>

web/src/components/core/ButtonLink.jsx → web/src/components/core/ButtonLink.tsx

@@ -19,8 +19,6 @@
  * find current contact information at www.suse.com.
  */
 
-// @ts-check
-
 import React from "react";
 import { Link } from "react-router-dom";
 import buttonStyles from "@patternfly/react-styles/css/components/Button/button";
@@ -32,10 +30,9 @@ export default function ButtonLink({ to, isPrimary = false, children, ...props }
   return (
     <Link
       to={to}
-      className={[
-        buttonStyles.button,
-        buttonStyles.modifiers[isPrimary ? "primary" : "secondary"],
-      ].join(" ")}
+      className={[buttonStyles.button, buttonStyles.modifiers[isPrimary ? "primary" : "scondary"]]
+        .join(" ")
+        .trim()}
       {...props}
     >
       {children}

web/src/components/core/ChangeProductLink.test.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) [2024] 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 { PATHS } from "~/routes/products";
+import { Product } from "~/types/software";
+import ChangeProductLink from "./ChangeProductLink";
+
+const tumbleweedProduct = {
+  id: "Tumbleweed",
+  name: "openSUSE Tumbleweed",
+  description: "Tumbleweed description...",
+};
+const microosProduct = {
+  id: "MicroOS",
+  name: "openSUSE MicroOS",
+  description: "MicroOS description",
+};
+
+let mockUseProduct: { products: Product[]; selectedProduct?: Product };
+
+jest.mock("~/queries/software", () => ({
+  useProduct: () => mockUseProduct,
+}));
+
+describe("ChangeProductLink", () => {
+  describe("when there is more than one product available", () => {
+    beforeEach(() => {
+      mockUseProduct = { products: [tumbleweedProduct, microosProduct] };
+    });
+
+    it("renders a link for navigating to product selection page", () => {
+      installerRender(<ChangeProductLink />);
+      const link = screen.getByRole("link", { name: "Change product" });
+      expect(link).toHaveAttribute("href", PATHS.changeProduct);
+    });
+  });
+
+  describe("when there is only one product available", () => {
+    beforeEach(() => {
+      mockUseProduct = { products: [tumbleweedProduct] };
+    });
+
+    it("renders nothing", () => {
+      const { container } = installerRender(<ChangeProductLink />);
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+});