fix(web): more UI adjustments

web/src/SimpleLayout.jsx

@@ -33,7 +33,7 @@ import { _ } from "~/i18n";
  * Simple layout for displaying content that comes before product configuration
  * TODO: improve documentation
  */
-export default function SimpleLayout({ showOutlet = true, children }) {
+export default function SimpleLayout({ showOutlet = true, showInstallerOptions = true, children }) {
   return (
     <Page>
       <Masthead backgroundColor="light200">
@@ -42,7 +42,7 @@ export default function SimpleLayout({ showOutlet = true, children }) {
             <ToolbarContent>
               <ToolbarGroup align={{ default: "alignRight" }}>
                 <ToolbarItem>
-                  <InstallerOptions />
+                  {showInstallerOptions && <InstallerOptions />}
                 </ToolbarItem>
               </ToolbarGroup>
             </ToolbarContent>

web/src/assets/styles/global.scss

@@ -39,6 +39,11 @@ button.pf-m-link {
   }
 }
 
+// Do not reserve space for empty nodes.
+div:empty {
+  display: none;
+}
+
 fieldset {
   padding: var(--fs-base);
   border: 0;

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

@@ -309,3 +309,28 @@ table td > .pf-v5-c-empty-state {
     color: white;
   }
 }
+
+// Force sidebar to only use needed width plus an extra padding at the end.
+.pf-v5-c-page__sidebar.pf-m-expanded {
+  --pf-v5-c-page__sidebar--Width: fit-content;
+
+  .pf-v5-c-nav__link {
+    padding-inline-end: calc(var(--pf-v5-global--spacer--xl) * 1.2);
+  }
+}
+
+// Makes the NotificationDrawerHeader "plain"
+.pf-v5-c-notification-drawer {
+  --pf-v5-c-notification-drawer--BackgroundColor: white;
+}
+
+.pf-v5-c-notification-drawer__list-item {
+  --pf-v5-c-notification-drawer__list-item--PaddingBottom: 0;
+  --pf-v5-c-notification-drawer__list-item--BoxShadow: none;
+}
+
+.pf-v5-c-notification-drawer__list-item-description {
+  padding-inline-start: calc(
+    1em + var(--pf-v5-c-notification-drawer__list-item-header-icon--MarginRight)
+  );
+}

web/src/components/core/CardField.jsx

@@ -61,7 +61,7 @@ const CardField = ({
           </Flex>
         </CardTitle>
       </CardHeader>
-      {description && <CardBody><div className={textStyles.color_200}>{description}</div></CardBody>}
+      {description && <CardBody isFilled={false}><div className={textStyles.color_200}>{description}</div></CardBody>}
       {children}
       {actions && <CardFooter>{actions}</CardFooter>}
     </Card>

web/src/components/core/IssuesHint.jsx

@@ -31,7 +31,7 @@ export default function IssuesHint({ issues }) {
       <HintBody>
         <Stack hasGutter>
           <p>
-            {_("Please, pay attention to the following tasks:")}
+            {_("Before starting the installation, you need to address the following problems:")}
           </p>
           <List>
             {issues.map((i, idx) => <ListItem key={idx}>{i.description}</ListItem>)}

web/src/components/layout/Icon.jsx

@@ -84,9 +84,6 @@ import WifiFind from "@icons/wifi_find.svg?component";
 
 import { SiLinux, SiWindows } from "@icons-pack/react-simple-icons";
 
-// Icons from SVG
-import Loading from "./three-dots-loader-icon.svg?component";
-
 /**
  * @typedef {string|number} IconSize
  * @typedef {keyof icons} IconName
@@ -120,7 +117,6 @@ const icons = {
   inventory_2: Inventory,
   keyboard: Keyboard,
   lan: Lan,
-  loading: Loading,
   list_alt: ListAlt,
   lock: Lock,
   manage_accounts: ManageAccounts,

web/src/components/layout/Loading.jsx

@@ -20,24 +20,27 @@
  */
 
 import React from "react";
-import { EmptyState, EmptyStateIcon, EmptyStateHeader } from "@patternfly/react-core";
+import { EmptyState, EmptyStateIcon, EmptyStateHeader, Spinner } from "@patternfly/react-core";
 
+import SimpleLayout from "~/SimpleLayout";
 import { Center, Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
-const LoadingIcon = () => <Icon name="loading" size="xxxl" />;
+const LoadingIcon = () => <Spinner size="xl" />;
 
 function Loading({ text = _("Loading installation environment, please wait.") }) {
   return (
-    <Center>
-      <EmptyState variant="xl">
-        <EmptyStateHeader
-          titleText={text}
-          headingLevel="h2"
-          icon={<EmptyStateIcon icon={LoadingIcon} />}
-        />
-      </EmptyState>
-    </Center>
+    <SimpleLayout showOutlet={false} showInstallerOptions={false}>
+      <Center>
+        <EmptyState variant="xl">
+          <EmptyStateHeader
+            titleText={text}
+            headingLevel="h1"
+            icon={<EmptyStateIcon icon={LoadingIcon} />}
+          />
+        </EmptyState>
+      </Center>
+    </SimpleLayout>
   );
 }
 

web/src/components/network/AddressesDataList.jsx

@@ -29,7 +29,8 @@ import React from "react";
 import {
   Button,
   DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, DataListAction,
-  Flex
+  Flex,
+  Stack
 } from "@patternfly/react-core";
 
 import { FormLabel } from "~/components/core";
@@ -115,16 +116,18 @@ export default function AddressesDataList({
   const newAddressButtonText = addresses.length ? _("Add another address") : _("Add an address");
 
   return (
-    <>
+    <Stack hasGutter>
       <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
         <FormLabel isRequired={!allowEmpty}>{_("Addresses")}</FormLabel>
-        <Button size="sm" variant="secondary" onClick={addAddress}>
-          {newAddressButtonText}
-        </Button>
       </Flex>
       <DataList isCompact gridBreakpoint="none" title={_("Addresses data list")}>
         {addresses.map(address => renderAddress(address))}
       </DataList>
-    </>
+      <Flex>
+        <Button size="sm" variant="secondary" onClick={addAddress}>
+          {newAddressButtonText}
+        </Button>
+      </Flex>
+    </Stack>
   );
 }

web/src/components/network/DnsDataList.jsx

@@ -29,7 +29,8 @@ import React from "react";
 import {
   Button,
   DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, DataListAction,
-  Flex
+  Flex,
+  Stack
 } from "@patternfly/react-core";
 
 import { FormLabel } from "~/components/core";
@@ -92,16 +93,18 @@ export default function DnsDataList({ servers: originalServers, updateDnsServers
   const newDnsButtonText = servers.length ? _("Add another DNS") : _("Add DNS");
 
   return (
-    <>
+    <Stack hasGutter>
       <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
         <FormLabel>{_("DNS")}</FormLabel>
+      </Flex>
+      <DataList isCompact title="Addresses data list">
+        {servers.map(server => renderDns(server))}
+      </DataList>
+      <Flex>
         <Button size="sm" variant="secondary" onClick={addServer}>
           {newDnsButtonText}
         </Button>
       </Flex>
-      <DataList isCompact gridBreakpoint="none" title="Addresses data list">
-        {servers.map(server => renderDns(server))}
-      </DataList>
-    </>
+    </Stack>
   );
 }

web/src/components/overview/OverviewPage.jsx

@@ -22,27 +22,38 @@
 import React, { useEffect, useState } from "react";
 import {
   CardBody,
-  Grid,
-  GridItem,
-  Hint,
-  HintBody,
-  List,
-  ListItem,
-  Stack
+  Grid, GridItem,
+  Hint, HintBody,
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerList,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader,
+  Stack,
 } from "@patternfly/react-core";
 import { useProduct } from "~/context/product";
 import { useInstallerClient } from "~/context/installer";
 import { Link, Navigate } from "react-router-dom";
+import { Center } from "~/components/layout";
 import { CardField, EmptyState, Page, InstallButton } from "~/components/core";
 import L10nSection from "./L10nSection";
 import StorageSection from "./StorageSection";
 import SoftwareSection from "./SoftwareSection";
 import { _ } from "~/i18n";
 
+const SCOPE_HEADERS = {
+  user: _("Users"),
+  storage: _("Storage"),
+  software: _("Software")
+};
+
 const ReadyForInstallation = () => (
-  <EmptyState title={_("Ready for installation")} icon="check_circle" color="success-color-100">
-    <InstallButton />
-  </EmptyState>
+  <Center>
+    <EmptyState title={_("Ready for installation")} icon="check_circle" color="success-color-100">
+      <InstallButton />
+    </EmptyState>
+  </Center>
 );
 
 // FIXME: improve
@@ -51,23 +62,28 @@ const IssuesList = ({ issues }) => {
   const list = [];
   Object.entries(scopes).forEach(([scope, issues]) => {
     issues.forEach((issue, idx) => {
+      const variant = issue.severity === "error" ? "warning" : "info";
+
       const link = (
-        <ListItem key={idx}>
-          <Link to={`/${scope}`}>{issue.description}</Link>
-        </ListItem>
+        <NotificationDrawerListItem key={idx} variant={variant} isHoverable={false}>
+          <NotificationDrawerListItemHeader title={SCOPE_HEADERS[scope]} variant={variant} headingLevel="h4" />
+          <NotificationDrawerListItemBody>
+            <Link to={`/${scope}`}>{issue.description}</Link>
+          </NotificationDrawerListItemBody>
+        </NotificationDrawerListItem>
       );
       list.push(link);
     });
   });
 
   return (
-    <EmptyState
-      title={_("Before installing the system, you need to pay attention to the following tasks:")}
-      icon="error"
-      color="danger-color-100"
-    >
-      <List isPlain>{list}</List>
-    </EmptyState>
+    <NotificationDrawer>
+      <NotificationDrawerBody>
+        <NotificationDrawerList>
+          {list}
+        </NotificationDrawerList>
+      </NotificationDrawerBody>
+    </NotificationDrawer>
   );
 };
 
@@ -84,6 +100,15 @@ export default function OverviewPage() {
     return <Navigate to="/products" />;
   }
 
+  const resultSectionProps =
+    issues.isEmpty
+      ? {}
+      : {
+
+        label: _("Installation"),
+        description: _("Before installing, please check the following problems.")
+      };
+
   return (
     <>
       <Page.MainContent>
@@ -114,11 +139,9 @@ export default function OverviewPage() {
             </CardField>
           </GridItem>
           <GridItem sm={12} xl={6}>
-            <CardField>
+            <CardField {...resultSectionProps}>
               <CardBody>
-                <Stack hasGutter>
-                  {issues.isEmpty ? <ReadyForInstallation /> : <IssuesList issues={issues} />}
-                </Stack>
+                {issues.isEmpty ? <ReadyForInstallation /> : <IssuesList issues={issues} />}
               </CardBody>
             </CardField>
           </GridItem>