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

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