refactor(web): use queries for dealing with software (#1483)

Similar to #1439, #1452, and #1470, this set of changes aims to replace
the client/software with Tanstack queries.

Note that was not possible to fully drop the software client. It has to
wait until migration of
[`WithStatus`](https://github.com/openSUSE/agama/blob/bd2f35d0ead6d74931189f5619579f6c3ffa2770/web/src/client/mixins.js#L83)
and
[`WithProgress`](https://github.com/openSUSE/agama/blob/bd2f35d0ead6d74931189f5619579f6c3ffa2770/web/src/client/mixins.js#L147)
mixins too.

web/package.json

@@ -38,7 +38,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.12",

web/src/client/software.js

@@ -47,20 +47,6 @@ const SelectedBy = Object.freeze({
  * @property {string} description - Product description
  */
 
-/**
- * @typedef {object} Registration
- * @property {string} requirement - Registration requirement (i.e., "not-required", "optional",
- *  "mandatory").
- * @property {string|null} code - Registration code, if any.
- * @property {string|null} email - Registration email, if any.
- */
-
-/**
- * @typedef {object} RegistrationFailure
- * @property {Number} id - ID of error.
- * @property {string} message - Failure message.
- */
-
 /**
  * @typedef {object} ActionResult
  * @property {boolean} success - Whether the action was successfully done.
@@ -115,43 +101,6 @@ class SoftwareBaseClient {
     return this.client.post("/software/probe", {});
   }
 
-  /**
-   * Returns how much space installation takes on disk
-   *
-   * @return {Promise<SoftwareProposal>}
-   */
-  async getProposal() {
-    const response = await this.client.get("/software/proposal");
-    if (!response.ok) {
-      console.log("Failed to get software proposal: ", response);
-    }
-
-    return response.json();
-  }
-
-  /**
-   * Returns available patterns
-   *
-   * @return {Promise<Pattern[]>}
-   */
-  async getPatterns() {
-    const response = await this.client.get("/software/patterns");
-    if (!response.ok) {
-      console.log("Failed to get software patterns: ", response);
-      return [];
-    }
-    /** @type Array<{ name: string, category: string, summary: string, description: string, order: string, icon: string }> */
-    const patterns = await response.json();
-    return patterns.map((pattern) => ({
-      name: pattern.name,
-      category: pattern.category,
-      summary: pattern.summary,
-      description: pattern.description,
-      order: parseInt(pattern.order),
-      icon: pattern.icon,
-    }));
-  }
-
   /**
    * @return {Promise<SoftwareConfig>}
    */
@@ -251,7 +200,7 @@ class ProductClient {
   /**
    * Returns the registration of the selected product.
    *
-   * @return {Promise<Registration>}
+   * @return {Promise<import('~/types/registration').Registration>}
    */
   async getRegistration() {
     const response = await this.client.get("/software/registration");
@@ -280,7 +229,7 @@ class ProductClient {
   async register(code, email = "") {
     const response = await this.client.post("/software/registration", { key: code, email });
     if (response.status === 422) {
-      /**  @type RegistrationFailure */
+      /**  @type import('~/types/registration').RegistrationFailure */
       const body = await response.json();
       return {
         success: false,
@@ -303,7 +252,7 @@ class ProductClient {
     const response = await this.client.delete("/software/registration");
 
     if (response.status === 422) {
-      /**  @type RegistrationFailure */
+      /**  @type import('~/types/registration').RegistrationFailure */
       const body = await response.json();
       return {
         success: false,
@@ -320,7 +269,7 @@ class ProductClient {
   /**
    * Registers a callback to run when the registration changes.
    *
-   * @param {(registration: Registration) => void} handler - Callback function.
+   * @param {(registration: import('~/types/registration').Registration) => void} handler - Callback function.
    */
   onRegistrationChange(handler) {
     return this.client.ws().onEvent((event) => {

web/src/components/overview/SoftwareSection.test.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { act, screen } from "@testing-library/react";
+import { installerRender } from "~/test-utils";
+import mockTestingPatterns from "~/components/software/patterns.test.json";
+import testingProposal from "~/components/software/proposal.test.json";
+import SoftwareSection from "~/components/overview/SoftwareSection";
+import { SoftwareProposal } from "~/types/software";
+
+let mockTestingProposal: SoftwareProposal;
+
+jest.mock("~/queries/software", () => ({
+  usePatterns: () => mockTestingPatterns,
+  useProposal: () => mockTestingProposal,
+  useProposalChanges: jest.fn(),
+}));
+
+describe("SoftwareSection", () => {
+  describe("when the proposal does not have patterns to select", () => {
+    beforeEach(() => {
+      mockTestingProposal = { patterns: {}, size: "" };
+    });
+
+    it("renders nothing", () => {
+      const { container } = installerRender(<SoftwareSection />);
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+
+  describe("when the proposal has patterns to select", () => {
+    beforeEach(() => {
+      mockTestingProposal = testingProposal;
+    });
+
+    it("renders the required space and the selected patterns", () => {
+      installerRender(<SoftwareSection />);
+      screen.getByText("4.6 GiB");
+      screen.getAllByText(/GNOME/);
+      screen.getByText("YaST Base Utilities");
+      screen.getByText("YaST Desktop Utilities");
+      screen.getByText("Multimedia");
+      screen.getAllByText(/Office Software/);
+      expect(screen.queryByText("KDE")).toBeNull();
+      expect(screen.queryByText("XFCE")).toBeNull();
+      expect(screen.queryByText("YaST Server Utilities")).toBeNull();
+    });
+  });
+});

web/src/components/overview/SoftwareSection.jsx → web/src/components/overview/SoftwareSection.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022-2023] SUSE LLC
+ * Copyright (c) [2022-2024] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -19,40 +19,21 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useEffect, useState } from "react";
-import { _ } from "~/i18n";
-import { useInstallerClient } from "~/context/installer";
+import React from "react";
 import { List, ListItem, Text, TextContent, TextVariants } from "@patternfly/react-core";
 import { Em } from "~/components/core";
+import { SelectedBy } from "~/types/software";
+import { usePatterns, useProposal, useProposalChanges } from "~/queries/software";
+import { isObjectEmpty } from "~/utils";
+import { _ } from "~/i18n";
 
-export default function SoftwareSection() {
-  const [proposal, setProposal] = useState({});
-  const [patterns, setPatterns] = useState([]);
-  const [selectedPatterns, setSelectedPatterns] = useState(undefined);
-  const client = useInstallerClient();
-
-  useEffect(() => {
-    client.software.getProposal().then(setProposal);
-    client.software.getPatterns().then(setPatterns);
-  }, [client]);
-
-  useEffect(() => {
-    return client.software.onSelectedPatternsChanged(() => {
-      client.software.getProposal().then(setProposal);
-    });
-  }, [client, setProposal]);
-
-  useEffect(() => {
-    if (proposal.patterns === undefined) return;
+export default function SoftwareSection(): React.ReactNode {
+  const proposal = useProposal();
+  const patterns = usePatterns();
 
-    const ids = Object.keys(proposal.patterns);
-    const selected = patterns.filter((p) => ids.includes(p.name)).sort((a, b) => a.order - b.order);
-    setSelectedPatterns(selected);
-  }, [client, proposal, patterns]);
+  useProposalChanges();
 
-  if (selectedPatterns === undefined) {
-    return;
-  }
+  if (isObjectEmpty(proposal.patterns)) return;
 
   const TextWithoutList = () => {
     return (
@@ -65,6 +46,8 @@ export default function SoftwareSection() {
   const TextWithList = () => {
     // TRANSLATORS: %s will be replaced with the installation size, example: "5GiB".
     const [msg1, msg2] = _("The installation will take %s including:").split("%s");
+    const selectedPatterns = patterns.filter((p) => p.selectedBy !== SelectedBy.NONE);
+
     return (
       <>
         <Text>
@@ -84,7 +67,7 @@ export default function SoftwareSection() {
   return (
     <TextContent>
       <Text component={TextVariants.h3}>{_("Software")}</Text>
-      {selectedPatterns.length ? <TextWithList /> : <TextWithoutList />}
+      {patterns.length ? <TextWithList /> : <TextWithoutList />}
     </TextContent>
   );
 }