chore(web): improve product selection

web/src/components/overview/OverviewPage.jsx

@@ -43,7 +43,7 @@ import SoftwareSection from "./SoftwareSection";
 import { _ } from "~/i18n";
 
 const SCOPE_HEADERS = {
-  user: _("Users"),
+  users: _("Users"),
   storage: _("Storage"),
   software: _("Software")
 };

web/src/components/overview/SoftwareSection.jsx

@@ -54,23 +54,37 @@ export default function SoftwareSection() {
     return;
   }
 
-  // TRANSLATORS: %s will be replaced with the installation size, example:
-  // "5GiB".
-  const [msg1, msg2] = _("The installation will take %s including:").split("%s");
+  const TextWithoutList = () => {
+    return (
+      <>
+        {_("The installation will take")} <Em>{proposal.size}</Em>
+      </>
+    );
+  };
+
+  const TextWithList = () => {
+    // TRANSLATORS: %s will be replaced with the installation size, example: "5GiB".
+    const [msg1, msg2] = _("The installation will take %s including:").split("%s");
+    return (
+      <>
+        <Text>
+          {msg1}
+          <Em>{proposal.size}</Em>
+          {msg2}
+        </Text>
+        <List>
+          {selectedPatterns.map(p => (
+            <ListItem key={p.name}>{p.summary}</ListItem>
+          ))}
+        </List>
+      </>
+    );
+  };
 
   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.summary}</ListItem>
-        ))}
-      </List>
+      {selectedPatterns.length ? <TextWithList /> : <TextWithoutList />}
     </TextContent>
   );
 }

web/src/components/product/ProductSelectionPage.jsx

@@ -23,7 +23,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   Card, CardBody,
-  Flex, FlexItem,
+  Flex,
   Form,
   Grid, GridItem,
   Radio
@@ -46,7 +46,7 @@ function ProductSelectionPage() {
   const navigate = useNavigate();
   const { manager, product } = useInstallerClient();
   const { products, selectedProduct } = useProduct();
-  const [nextProduct, setNextProduct] = useState(selectedProduct || products[0]);
+  const [nextProduct, setNextProduct] = useState(selectedProduct);
 
   const onSubmit = async (e) => {
     e.preventDefault();
@@ -72,50 +72,44 @@ function ProductSelectionPage() {
     );
   };
 
+  const isSelectionDisabled = !nextProduct || (nextProduct === selectedProduct);
+
   return (
-    <>
-      <Page.MainContent>
-        <Center>
-          <Form id="productSelectionForm" onSubmit={onSubmit}>
-            <Grid hasGutter>
-              {products.map((product, index) => (
-                <Item key={index}>
-                  <Card key={index} isRounded>
-                    <CardBody>
-                      <Radio
-                        key={index}
-                        name="product"
-                        id={product.name}
-                        label={<Label>{product.name}</Label>}
-                        body={product.description}
-                        isChecked={nextProduct === product}
-                        onChange={() => setNextProduct(product)}
-                      />
-                    </CardBody>
-                  </Card>
-                </Item>
-              ))}
-              <Item>
-                <Flex>
-                  <FlexItem align={{ default: 'alignRight' }}>
-                    {selectedProduct && <Page.CancelAction navigateTo={-1} />}
-                  </FlexItem>
-                  <FlexItem>
-                    <Page.Action
-                      type="submit"
-                      form="productSelectionForm"
-                      isDisabled={selectedProduct === nextProduct}
-                    >
-                      {_("Select")}
-                    </Page.Action>
-                  </FlexItem>
-                </Flex>
-              </Item>
-            </Grid>
-          </Form>
-        </Center>
-      </Page.MainContent>
-    </>
+    <Center>
+      <Form id="productSelectionForm" onSubmit={onSubmit}>
+        <Grid hasGutter>
+          {products.map((product, index) => (
+            <Item key={index}>
+              <Card key={index} isRounded>
+                <CardBody>
+                  <Radio
+                    key={index}
+                    name="product"
+                    id={product.name}
+                    label={<Label>{product.name}</Label>}
+                    body={product.description}
+                    isChecked={nextProduct === product}
+                    onChange={() => setNextProduct(product)}
+                  />
+                </CardBody>
+              </Card>
+            </Item>
+          ))}
+          <Item>
+            <Flex justifyContent={{ default: "justifyContentFlexEnd" }}>
+              {selectedProduct && <Page.CancelAction navigateTo={-1} />}
+              <Page.Action
+                type="submit"
+                form="productSelectionForm"
+                isDisabled={isSelectionDisabled}
+              >
+                {_("Select")}
+              </Page.Action>
+            </Flex>
+          </Item>
+        </Grid>
+      </Form>
+    </Center>
   );
 }
 

web/src/components/product/ProductSelectionProgress.jsx

@@ -30,6 +30,7 @@ import {
 
 import { _ } from "~/i18n";
 import { Center } from "~/components/layout";
+import SimpleLayout from "~/SimpleLayout";
 import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
 import { useProduct } from "~/context/product";
@@ -136,26 +137,28 @@ function ProductSelectionProgress() {
   }, [cancellablePromise, setSoftwareProgress, software]);
 
   return (
-    <Center style={{ blockSize: "100vh" }}>
-      <Grid hasGutter>
-        <GridItem sm={8} smOffset={2}>
-          <Card isPlain>
-            <CardBody>
-              <Stack hasGutter>
-                <h1 style={{ textAlign: "center" }}>
-                  {_("Configuring the product, please wait ...")}
-                </h1>
-                <Progress
-                  selectedProduct={selectedProduct}
-                  storageProgress={storageProgress}
-                  softwareProgress={softwareProgress}
-                />
-              </Stack>
-            </CardBody>
-          </Card>
-        </GridItem>
-      </Grid>
-    </Center>
+    <SimpleLayout showOutlet={false}>
+      <Center>
+        <Grid hasGutter>
+          <GridItem sm={8} smOffset={2}>
+            <Card isPlain>
+              <CardBody>
+                <Stack hasGutter>
+                  <h1 style={{ textAlign: "center" }}>
+                    {_("Configuring the product, please wait ...")}
+                  </h1>
+                  <Progress
+                    selectedProduct={selectedProduct}
+                    storageProgress={storageProgress}
+                    softwareProgress={softwareProgress}
+                  />
+                </Stack>
+              </CardBody>
+            </Card>
+          </GridItem>
+        </Grid>
+      </Center>
+    </SimpleLayout>
   );
 }
 

web/src/components/product/routes.js

@@ -20,37 +20,13 @@
  */
 
 import React from "react";
-import { Page } from "~/components/core";
 import ProductSelectionPage from "./ProductSelectionPage";
-import ProductRegistrationPage from "./ProductRegistrationPage";
-import { _ } from "~/i18n";
 
-const registerRoute = {
-  path: "/product/register",
-  element: <Page />,
-  handle: {
-    name: _("Product registration"),
-    icon: "inventory_2",
-    hidden: true
-  },
-  children: [
-    {
-      index: true,
-      element: <ProductRegistrationPage />
-    }
-  ]
-};
-
-const selectionRoute = {
-  path: "/product/select",
-  element: <ProductSelectionPage />,
-  handle: {
-    name: _("Product selection"),
-    icon: "inventory_2"
-  }
+const productsRoute = {
+  path: "/products",
+  element: <ProductSelectionPage />
 };
 
 export {
-  registerRoute,
-  selectionRoute,
+  productsRoute
 };

web/src/router.js

@@ -25,29 +25,24 @@ import App from "~/App";
 import Protected from "~/Protected";
 import MainLayout from "~/MainLayout";
 import SimpleLayout from "./SimpleLayout";
-import { Page, LoginPage } from "~/components/core";
+import { LoginPage } from "~/components/core";
 import { OverviewPage } from "~/components/overview";
-import { ProductRegistrationPage, ProductSelectionPage } from "~/components/product";
 import { _ } from "~/i18n";
 import overviewRoutes from "~/components/overview/routes";
 import l10nRoutes from "~/components/l10n/routes";
 import networkRoutes from "~/components/network/routes";
+import { productsRoute } from "~/components/product/routes";
 import storageRoutes from "~/components/storage/routes";
 import softwareRoutes from "~/components/software/routes";
 import usersRoutes from "~/components/users/routes";
-import {
-  registerRoute as productRegistrationRoute,
-  selectionRoute as productSelectionRoute
-} from "~/components/product/routes";
 
 const rootRoutes = [
   overviewRoutes,
   l10nRoutes,
   networkRoutes,
   storageRoutes,
   softwareRoutes,
-  usersRoutes,
-  productRegistrationRoute
+  usersRoutes
 ];
 
 const protectedRoutes = [
@@ -67,13 +62,7 @@ const protectedRoutes = [
       },
       {
         element: <SimpleLayout />,
-        children: [
-          {
-            path: "products",
-            element: <ProductSelectionPage />
-          },
-          productSelectionRoute
-        ]
+        children: [productsRoute]
       }
     ]
   }