feat(web): add real data to the overview page (#1301)

The data shown in the overview in the new UI branch is just hard-coded.
This PR aims to add some real data to it. At this point we are only
considering three sections: localization, storage and software.

<details>
<summary>The overview page displaying real data</summary>

![Captura desde 2024-06-11
00-03-24](https://github.com/openSUSE/agama/assets/15836/02d2c6a1-ae92-48ab-a06f-7a0f574fcccc)
</details>

## (Not) Adopting a state management library

As part of this PR, we experimented with [Jotai](https://jotai.org/).
However, we decided to postpone the adoption of a state management
library because we might need to do some further research and consider
other options. If you are curious, you can checkout to commit
cfe8d82.

We need to decide how much logic we want to move out of our React code.
For having kind of a "shared" `useState`, Jotai is great. If you want to
put some logic to load and synchronize the state, then perhaps we should
go with another option (e.g.,
[zustand](https://docs.pmnd.rs/zustand/getting-started/introduction),
[recoil](https://recoiljs.org/), or even
[react-query](https://tanstack.com/query/v4/docs/framework/react/overview)).

web/src/components/overview/L10nSection.jsx

@@ -20,48 +20,31 @@
  */
 
 import React from "react";
-import { Text } from "@patternfly/react-core";
-import { Em, If, Section, SectionSkeleton } from "~/components/core";
-import { useL10n } from "~/context/l10n";
+import { TextContent, Text, TextVariants } from "@patternfly/react-core";
+import { Em } from "~/components/core";
 import { _ } from "~/i18n";
+import { useL10n } from "~/context/l10n";
+
+export default function L10nSection() {
+  const { selectedLocales } = useL10n();
 
-const Content = ({ locales }) => {
-  // Only considering the first locale.
-  const locale = locales[0];
+  const locale = selectedLocales[0];
+  if (locale === undefined) {
+    return;
+  }
 
   // TRANSLATORS: %s will be replaced by a language name and territory, example:
   // "English (United States)".
   const [msg1, msg2] = _("The system will use %s as its default language.").split("%s");
 
   return (
-    <Text>
-      {msg1}
-      <Em>{`${locale.name} (${locale.territory})`}</Em>
-      {msg2}
-    </Text>
-  );
-};
-
-export default function L10nSection() {
-  const { selectedLocales } = useL10n();
-
-  const isLoading = selectedLocales.length === 0;
-
-  return (
-    <Section
-      key="l10n-section"
-      // TRANSLATORS: page section
-      title={_("Localization")}
-      loading={isLoading}
-      icon="globe"
-      path="/l10n"
-      id="l10n"
-    >
-      <If
-        condition={isLoading}
-        then={<SectionSkeleton numRows={1} />}
-        else={<Content locales={selectedLocales} />}
-      />
-    </Section>
+    <TextContent>
+      <Text component={TextVariants.h3}>{_("Localization")}</Text>
+      <Text>
+        {msg1}
+        <Em>{`${locale.name} (${locale.territory})`}</Em>
+        {msg2}
+      </Text>
+    </TextContent>
   );
 }

web/src/components/overview/L10nSection.test.jsx

@@ -29,7 +29,7 @@ jest.mock("~/client");
 
 const locales = [
   { id: "en_US", name: "English", territory: "United States" },
-  { id: "de_DE", name: "German", territory: "Germany" },
+  { id: "de_DE", name: "German", territory: "Germany" }
 ];
 
 const l10nClientMock = {
@@ -43,14 +43,14 @@ const l10nClientMock = {
   getTimezone: jest.fn().mockResolvedValue(undefined),
   onLocalesChange: jest.fn(),
   onKeymapChange: jest.fn(),
-  onTimezoneChange: jest.fn(),
+  onTimezoneChange: jest.fn()
 };
 
 beforeEach(() => {
   // if defined outside, the mock is cleared automatically
   createClient.mockImplementation(() => {
     return {
-      l10n: l10nClientMock,
+      l10n: l10nClientMock
     };
   });
 });

web/src/components/overview/OverviewPage.jsx

@@ -28,23 +28,19 @@ import {
   HintBody,
   List,
   ListItem,
-  Stack,
-  Text,
-  TextVariants,
-  TextContent
+  Stack
 } from "@patternfly/react-core";
 import { useProduct } from "~/context/product";
 import { useInstallerClient } from "~/context/installer";
 import { Navigate, Link } from "react-router-dom";
 import { CardField, EmptyState, Page, InstallButton } from "~/components/core";
+import L10nSection from "./L10nSection";
+import StorageSection from "./StorageSection";
+import SoftwareSummary from "./SoftwareSummary";
 import { _ } from "~/i18n";
 
 const ReadyForInstallation = () => (
-  <EmptyState
-    title={_("Ready for installation")}
-    icon="check_circle"
-    color="success-color-100"
-  >
+  <EmptyState title={_("Ready for installation")} icon="check_circle" color="success-color-100">
     <InstallButton />
   </EmptyState>
 );
@@ -70,52 +66,19 @@ const IssuesList = ({ issues }) => {
       icon="error"
       color="danger-color-100"
     >
-      <List isPlain>
-        {list}
-      </List>
+      <List isPlain>{list}</List>
     </EmptyState>
   );
 };
 
-const SoftwareSummary = () => (
-  <TextContent>
-    <Text component={TextVariants.h3}>{_("Software")}</Text>
-    <Text>{_("The installation will take 5 GiB including:")}</Text>
-    <List>
-      <ListItem>{_("GNOME Desktop")}</ListItem>
-      <ListItem>{_("YaST Basic")}</ListItem>
-    </List>
-  </TextContent>
-);
-
-const StorageSummary = () => (
-  <TextContent>
-    <Text component={TextVariants.h3}>{_("Storage")}</Text>
-    <Text>{_("The system will be installed on /dev/vda deleting all its content.")}</Text>
-  </TextContent>
-);
-
-const LocalizationSummary = () => (
-  <TextContent>
-    <Text component={TextVariants.h3}>{_("Localization")}</Text>
-    <Text>{_("The system will use English (United States).")}</Text>
-  </TextContent>
-);
-
 export default function OverviewPage() {
-  const { selectedProduct } = useProduct();
   const [issues, setIssues] = useState([]);
   const client = useInstallerClient();
 
   useEffect(() => {
     client.issues().then(setIssues);
   }, [client]);
 
-  // FIXME: this check could be no longer needed
-  if (selectedProduct === null) {
-    return <Navigate to="/products" />;
-  }
-
   return (
     <>
       <Page.MainContent>
@@ -133,13 +96,13 @@ export default function OverviewPage() {
             <CardField
               label="Overview"
               description={_(
-                "These are the most relevant installation settings. Fell free to browse the sections in the menu for further details."
+                "These are the most relevant installation settings. Feel free to browse the sections in the menu for further details."
               )}
             >
               <CardBody>
                 <Stack hasGutter>
-                  <LocalizationSummary />
-                  <StorageSummary />
+                  <L10nSection />
+                  <StorageSection />
                   <SoftwareSummary />
                 </Stack>
               </CardBody>

web/src/components/overview/OverviewPage.test.jsx

@@ -21,72 +21,33 @@
 
 import React from "react";
 import { screen } from "@testing-library/react";
-import { plainRender } from "~/test-utils";
+import { installerRender } from "~/test-utils";
 import { createClient } from "~/client";
 import { OverviewPage } from "~/components/overview";
 
-let mockProduct;
-const mockProducts = [
-  { id: "openSUSE", name: "openSUSE Tumbleweed" },
-  { id: "Leap Micro", name: "openSUSE Micro" }
-];
 const startInstallationFn = jest.fn();
 
 jest.mock("~/client");
-jest.mock("~/context/product", () => ({
-  ...jest.requireActual("~/context/product"),
-  useProduct: () => {
-    return {
-      products: mockProducts,
-      selectedProduct: mockProduct
-    };
-  }
-}));
-jest.mock("~/components/overview/ProductSection", () => () => <div>Product Section</div>);
 jest.mock("~/components/overview/L10nSection", () => () => <div>Localization Section</div>);
 jest.mock("~/components/overview/StorageSection", () => () => <div>Storage Section</div>);
-jest.mock("~/components/overview/NetworkSection", () => () => <div>Network Section</div>);
-jest.mock("~/components/overview/UsersSection", () => () => <div>Users Section</div>);
-jest.mock("~/components/overview/SoftwareSection", () => () => <div>Software Section</div>);
+jest.mock("~/components/overview/SoftwareSummary", () => () => <div>Software Section</div>);
 jest.mock("~/components/core/InstallButton", () => () => <div>Install Button</div>);
-jest.mock("~/components/core/Sidebar", () => () => <div>Agama sidebar</div>);
 
 beforeEach(() => {
-  mockProduct = { id: "openSUSE", name: "openSUSE Tumbleweed" };
   createClient.mockImplementation(() => {
     return {
-      software: {
-        onProductChange: jest.fn()
-      },
       manager: {
-        startInstallation: startInstallationFn,
-      }
+        startInstallation: startInstallationFn
+      },
+      issues: jest.fn().mockResolvedValue({ isEmpty: true })
     };
   });
 });
 
-describe("when product is selected", () => {
-  it("renders the overview page content and the Install button", () => {
-    plainRender(<OverviewPage />);
-    screen.getByRole("heading", { name: "Installation Summary", level: 1 });
-    screen.getByText("Product Section");
-    screen.getByText("Localization Section");
-    screen.getByText("Network Section");
-    screen.getByText("Storage Section");
-    screen.getByText("Users Section");
-    screen.getByText("Software Section");
-    screen.getByText("Install Button");
-  });
-});
-
-describe("when no product is selected", () => {
-  beforeEach(() => {
-    mockProduct = null;
-  });
-
-  it("redirects to the product selection page", async () => {
-    plainRender(<OverviewPage />);
-    // react-router-dom Navigate is mocked. See test-utils for more details.
-    await screen.findByText("Navigating to /products");
-  });
+it("renders the overview page content and the Install button", async () => {
+  installerRender(<OverviewPage />);
+  screen.getByText("Localization Section");
+  screen.getByText("Storage Section");
+  screen.getByText("Software Section");
+  screen.findByText("Install Button");
 });

web/src/components/overview/SoftwareSummary.jsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) [2022-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, { useEffect, useState } from "react";
+import { _ } from "~/i18n";
+import { useInstallerClient } from "~/context/installer";
+import { List, ListItem, Text, TextContent, TextVariants } from "@patternfly/react-core";
+import { Em } from "~/components/core";
+
+export default function SoftwareSummary() {
+  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;
+
+    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]);
+
+  if (selectedPatterns === undefined) {
+    return;
+  }
+
+  // TRANSLATORS: %s will be replaced with the installation size, example:
+  // "5GiB".
+  const [msg1, msg2] = _("The installation will take %s including:").split("%s");
+
+  return (
+    <TextContent>
+      <Text component={TextVariants.h3}>{_("Software")}</Text>
+      <Text>
+        {msg1}
+        <Em>{`${proposal.size}`}</Em>
+        {msg2}
+      </Text>
+      <List>
+        {selectedPatterns.map(p => (
+          <ListItem key={p.name}>{p.description}</ListItem>
+        ))}
+      </List>
+    </TextContent>
+  );
+}