web: few improvements regarding to layouts

web/src/Root.jsx

@@ -22,14 +22,13 @@
 import React from "react";
 import { Outlet, NavLink } from "react-router-dom";
 import {
-  Masthead, MastheadToggle, MastheadMain, MastheadBrand,
+  Masthead, MastheadContent, MastheadToggle, MastheadMain, MastheadBrand,
   Nav, NavItem, NavList,
   Page, PageSidebar, PageSidebarBody, PageToggleButton,
-  Stack
+  Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem
 } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
-import { About, LogsButton } from "~/components/core";
-import { InstallerKeymapSwitcher, InstallerLocaleSwitcher } from "~/components/l10n";
+import { About, InstallerOptions } from "~/components/core";
 import { _ } from "~/i18n";
 import { rootRoutes } from "~/router";
 import { useProduct } from "~/context/product";
@@ -55,6 +54,17 @@ const Header = () => {
       <MastheadMain>
         <MastheadBrand component="h1"><NavLink to="/">{title}</NavLink></MastheadBrand>
       </MastheadMain>
+      <MastheadContent>
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarGroup align={{ default: "alignRight" }}>
+              <ToolbarItem>
+                <InstallerOptions />
+              </ToolbarItem>
+            </ToolbarGroup>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
     </Masthead>
   );
 };
@@ -84,13 +94,8 @@ const Sidebar = () => {
           <NavList>{links}</NavList>
         </Nav>
       </PageSidebarBody>
-      <PageSidebarBody usePageInsets isFilled={false}>
-        <Stack hasGutter>
-          <InstallerLocaleSwitcher />
-          <InstallerKeymapSwitcher />
-          <About buttonVariant="tertiary" />
-          <LogsButton />
-        </Stack>
+      <PageSidebarBody isFilled={false}>
+        <About buttonVariant="plain" style={{ color: "white" }} />
       </PageSidebarBody>
     </PageSidebar>
   );

web/src/SimpleLayout.jsx

@@ -21,7 +21,12 @@
 
 import React from "react";
 import { Outlet } from "react-router-dom";
-import { Page } from "@patternfly/react-core";
+import {
+  Masthead, MastheadContent,
+  Page,
+  Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem
+} from "@patternfly/react-core";
+import { InstallerOptions } from "~/components/core";
 import { _ } from "~/i18n";
 
 /**
@@ -31,6 +36,19 @@ import { _ } from "~/i18n";
 export default function SimpleLayout() {
   return (
     <Page>
+      <Masthead backgroundColor="light200">
+        <MastheadContent>
+          <Toolbar>
+            <ToolbarContent>
+              <ToolbarGroup align={{ default: "alignRight" }}>
+                <ToolbarItem>
+                  <InstallerOptions />
+                </ToolbarItem>
+              </ToolbarGroup>
+            </ToolbarContent>
+          </Toolbar>
+        </MastheadContent>
+      </Masthead>
       <Outlet />
     </Page>
   );

web/src/assets/styles/patternfly-overrides.scss

@@ -303,3 +303,8 @@ table td > .pf-v5-c-empty-state {
 .pf-v5-c-masthead {
   fill: white;
 }
+
+.pf-v5-c-masthead .pf-v5-c-button.pf-m-link,
+.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
+  color: white;
+}

web/src/components/core/About.jsx

@@ -39,15 +39,16 @@ import { Popup } from "~/components/core";
  * @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 Agama"] - The text for the button.
+ * @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 Agama"),
-  buttonVariant = "link"
+  buttonText = _("About"),
+  buttonVariant = "link",
+  ...props
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -60,8 +61,9 @@ export default function About({
         variant={buttonVariant}
         icon={showIcon && <Icon name="help" size={iconSize} />}
         onClick={open}
+        {...props}
       >
-        { buttonText }
+        {buttonText}
       </Button>
 
       <Popup

web/src/components/core/InstallerOptions.jsx

@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+
+// @ts-check
+
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { Button, Stack } from "@patternfly/react-core";
+import { Icon } from "~/components/layout";
+import { LogsButton, Popup } from "~/components/core";
+import { InstallerLocaleSwitcher, InstallerKeymapSwitcher } from "~/components/l10n";
+import { _ } from "~/i18n";
+
+/**
+ * @typedef {import("@patternfly/react-core").ButtonProps} ButtonProps
+ */
+
+/**
+ * Renders the installer options
+ *
+ * @todo Write documentation
+ */
+export default function InstallerOptions() {
+  const location = useLocation();
+  const [isOpen, setIsOpen] = useState(false);
+
+  // FIXME: Installer options should be available in the login too.
+  if (location.pathname.includes("login")) return;
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+
+  return (
+    <>
+      <Button
+        variant="plain"
+        icon={<Icon name="settings" />}
+        onClick={open}
+        aria-label={_("Show installer options")}
+      />
+
+      <Popup
+        isOpen={isOpen}
+        title={_("Installer options")}
+      >
+        <Stack hasGutter>
+          <InstallerLocaleSwitcher />
+          <InstallerKeymapSwitcher />
+          <LogsButton />
+        </Stack>
+        <Popup.Actions>
+          <Popup.Confirm onClick={close} autoFocus>{_("Close")}</Popup.Confirm>
+        </Popup.Actions>
+      </Popup>
+    </>
+  );
+}

web/src/components/core/index.js

@@ -60,3 +60,4 @@ export { default as TreeTable } from "./TreeTable";
 export { default as CardField } from "./CardField";
 export { default as ButtonLink } from "./ButtonLink";
 export { default as EmptyState } from "./EmptyState";
+export { default as InstallerOptions } from "./InstallerOptions";

web/src/components/product/ProductSelectionPage.jsx

@@ -21,11 +21,15 @@
 
 import React, { useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { Form, FormGroup } from "@patternfly/react-core";
+import {
+  Card, CardBody,
+  Form, FormGroup,
+  Grid, GridItem
+} from "@patternfly/react-core";
 
 import { _ } from "~/i18n";
 import { Page } from "~/components/core";
-import { Loading } from "~/components/layout";
+import { Loading, Center } from "~/components/layout";
 import { ProductSelector } from "~/components/product";
 import { useInstallerClient } from "~/context/installer";
 import { useProduct } from "~/context/product";
@@ -71,11 +75,11 @@ function ProductSelectionPage() {
   return (
     <>
       <Page.MainContent>
-        <Form id="productSelectionForm" onSubmit={onSubmit}>
-          <FormGroup isStack>
+        <Center>
+          <Form id="productSelectionForm" onSubmit={onSubmit}>
             <ProductSelector defaultChecked={selectedProduct} products={products} />
-          </FormGroup>
-        </Form>
+          </Form>
+        </Center>
       </Page.MainContent>
 
       <Page.NextActions>

web/src/components/product/ProductSelector.jsx

@@ -20,7 +20,7 @@
  */
 
 import React from "react";
-import { Radio } from "@patternfly/react-core";
+import { Card, CardBody, Grid, GridItem, Radio } from "@patternfly/react-core";
 import styles from '@patternfly/react-styles/css/utilities/Text/text';
 import { _ } from "~/i18n";
 
@@ -33,15 +33,25 @@ const Label = ({ children }) => (
 export default function ProductSelector({ products, defaultChecked }) {
   if (products?.length === 0) return <p>{_("No products available for selection")}</p>;
 
-  return products.map((product, index) => (
-    <Radio
-      key={index}
-      name="product"
-      id={product.name}
-      label={<Label>{product.name}</Label>}
-      body={product.description}
-      value={JSON.stringify(product)}
-      defaultChecked={defaultChecked === product}
-    />
-  ));
+  return (
+    <Grid hasGutter>
+      {products.map((product, index) => (
+        <GridItem key={index} sm={10} smOffset={1} lg={8} lgOffset={2} xl={6} xlOffset={3}>
+          <Card key={index} isRounded>
+            <CardBody>
+              <Radio
+                key={index}
+                name="product"
+                id={product.name}
+                label={<Label>{product.name}</Label>}
+                body={product.description}
+                value={JSON.stringify(product)}
+                defaultChecked={defaultChecked === product}
+              />
+            </CardBody>
+          </Card>
+        </GridItem>
+      ))}
+    </Grid>
+  );
 }