From 6d8eb199c414935e66e5fe87bb073a82245bba25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Imobach=20Gonz=C3=A1lez=20Sosa?= Date: Wed, 12 Jun 2024 20:27:53 +0100 Subject: [PATCH 01/10] chore(web): adjust issues wording --- web/src/components/core/IssuesHint.jsx | 2 +- web/src/components/overview/OverviewPage.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/components/core/IssuesHint.jsx b/web/src/components/core/IssuesHint.jsx index 20c52c444d..81d557a017 100644 --- a/web/src/components/core/IssuesHint.jsx +++ b/web/src/components/core/IssuesHint.jsx @@ -31,7 +31,7 @@ export default function IssuesHint({ issues }) {

- {_("Please, pay attention to the following tasks:")} + {_("Before starting the installation, you need to address the following problems:")}

{issues.map((i, idx) => {i.description})} diff --git a/web/src/components/overview/OverviewPage.jsx b/web/src/components/overview/OverviewPage.jsx index 2a2e636cf1..ee931d0c6b 100644 --- a/web/src/components/overview/OverviewPage.jsx +++ b/web/src/components/overview/OverviewPage.jsx @@ -62,7 +62,7 @@ const IssuesList = ({ issues }) => { return ( From 0028f240a22fa56dd443b771803f4f3fbbe34b6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 12 Jun 2024 21:51:41 +0100 Subject: [PATCH 02/10] Wrap loading component inside SimpleLayout --- web/src/components/layout/Loading.jsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/web/src/components/layout/Loading.jsx b/web/src/components/layout/Loading.jsx index ec81978241..9c40f97021 100644 --- a/web/src/components/layout/Loading.jsx +++ b/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 = () => ; +const LoadingIcon = () => ; function Loading({ text = _("Loading installation environment, please wait.") }) { return ( -
- - } - /> - -
+ +
+ + } + /> + +
+ ); } From b6fb5ba8b56a99c46fd9666ae52c7bcd0e1e96aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 12 Jun 2024 21:55:07 +0100 Subject: [PATCH 03/10] Drop no longer used SVG --- web/src/components/layout/Icon.jsx | 4 ---- .../components/layout/three-dots-loader-icon.svg | 13 ------------- 2 files changed, 17 deletions(-) delete mode 100644 web/src/components/layout/three-dots-loader-icon.svg diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx index 92dadf28ca..e9d6840b4f 100644 --- a/web/src/components/layout/Icon.jsx +++ b/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, diff --git a/web/src/components/layout/three-dots-loader-icon.svg b/web/src/components/layout/three-dots-loader-icon.svg deleted file mode 100644 index 6db55f17fc..0000000000 --- a/web/src/components/layout/three-dots-loader-icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - From afad85e7edd1c9b2bbb9a7c58356b89358568db2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 12 Jun 2024 22:13:31 +0100 Subject: [PATCH 04/10] Force the sidebar width --- web/src/assets/styles/patternfly-overrides.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss index e6226f382d..062245feaf 100644 --- a/web/src/assets/styles/patternfly-overrides.scss +++ b/web/src/assets/styles/patternfly-overrides.scss @@ -309,3 +309,12 @@ 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); + } +} From 29198e26f5a60815d517e0a85cd6d3939e7e4b64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 12 Jun 2024 22:22:42 +0100 Subject: [PATCH 05/10] Avoid reserving space for empty nodes It solves an extra space in some pages when IssuesHint component renders nothing but its wrapping GridItem is forcing a gap. --- web/src/assets/styles/global.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/src/assets/styles/global.scss b/web/src/assets/styles/global.scss index 35b0e7c73c..6bf961bd7d 100644 --- a/web/src/assets/styles/global.scss +++ b/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; From 05d8f4ac4c76c9229866d3ba279122f724ea08d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 12 Jun 2024 22:24:23 +0100 Subject: [PATCH 06/10] Minor changes in IpSettingsForm Moves Addresses and DNS actions to the bottom to be consistent with other areas. --- web/src/components/network/AddressesDataList.jsx | 15 +++++++++------ web/src/components/network/DnsDataList.jsx | 15 +++++++++------ 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/web/src/components/network/AddressesDataList.jsx b/web/src/components/network/AddressesDataList.jsx index f5eb71655c..4c4ff9c3ae 100644 --- a/web/src/components/network/AddressesDataList.jsx +++ b/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 ( - <> + {_("Addresses")} - {addresses.map(address => renderAddress(address))} - + + + + ); } diff --git a/web/src/components/network/DnsDataList.jsx b/web/src/components/network/DnsDataList.jsx index 093957f6f3..474001cd30 100644 --- a/web/src/components/network/DnsDataList.jsx +++ b/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 ( - <> + {_("DNS")} + + + {servers.map(server => renderDns(server))} + + - - {servers.map(server => renderDns(server))} - - + ); } From 74f360bf0c8aa9ef1ea4790f6eb3aae3ef3a67b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 12 Jun 2024 23:17:45 +0100 Subject: [PATCH 07/10] Use Alert component for formatting issues in OverviewPage --- web/src/components/overview/OverviewPage.jsx | 24 ++++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/web/src/components/overview/OverviewPage.jsx b/web/src/components/overview/OverviewPage.jsx index 2a2e636cf1..364f00bfe4 100644 --- a/web/src/components/overview/OverviewPage.jsx +++ b/web/src/components/overview/OverviewPage.jsx @@ -21,14 +21,11 @@ import React, { useEffect, useState } from "react"; import { + Alert, CardBody, - Grid, - GridItem, - Hint, - HintBody, - List, - ListItem, - Stack + Grid, GridItem, + Hint, HintBody, + Stack, } from "@patternfly/react-core"; import { useProduct } from "~/context/product"; import { useInstallerClient } from "~/context/installer"; @@ -52,9 +49,12 @@ const IssuesList = ({ issues }) => { Object.entries(scopes).forEach(([scope, issues]) => { issues.forEach((issue, idx) => { const link = ( - - {issue.description} - + {issue.description}} + /> ); list.push(link); }); @@ -62,11 +62,11 @@ const IssuesList = ({ issues }) => { return ( - {list} + {list} ); }; From 7e347cabbc8e22cd3e3c077eb0d2f17036880cc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 12 Jun 2024 23:30:35 +0100 Subject: [PATCH 08/10] Add prop to SimpleLayout for displaying InstallerOptions Temporary needed for successfully using it to wrap Loading component --- web/src/SimpleLayout.jsx | 4 ++-- web/src/components/layout/Loading.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/SimpleLayout.jsx b/web/src/SimpleLayout.jsx index cac41dc52b..342a4786dd 100644 --- a/web/src/SimpleLayout.jsx +++ b/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 ( @@ -42,7 +42,7 @@ export default function SimpleLayout({ showOutlet = true, children }) { - + {showInstallerOptions && } diff --git a/web/src/components/layout/Loading.jsx b/web/src/components/layout/Loading.jsx index 9c40f97021..63036d1282 100644 --- a/web/src/components/layout/Loading.jsx +++ b/web/src/components/layout/Loading.jsx @@ -30,7 +30,7 @@ const LoadingIcon = () => ; function Loading({ text = _("Loading installation environment, please wait.") }) { return ( - +
Date: Thu, 13 Jun 2024 10:30:08 +0100 Subject: [PATCH 09/10] web: Improve overview issues list By using a kind of customized PF/NotificationDrawer component. --- .../assets/styles/patternfly-overrides.scss | 16 +++++ web/src/components/core/CardField.jsx | 2 +- web/src/components/overview/OverviewPage.jsx | 65 +++++++++++++------ 3 files changed, 61 insertions(+), 22 deletions(-) diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss index 062245feaf..aacae6db96 100644 --- a/web/src/assets/styles/patternfly-overrides.scss +++ b/web/src/assets/styles/patternfly-overrides.scss @@ -318,3 +318,19 @@ table td > .pf-v5-c-empty-state { 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) + ); +} diff --git a/web/src/components/core/CardField.jsx b/web/src/components/core/CardField.jsx index e2aaebea56..28b7552c61 100644 --- a/web/src/components/core/CardField.jsx +++ b/web/src/components/core/CardField.jsx @@ -61,7 +61,7 @@ const CardField = ({ - {description &&
{description}
} + {description &&
{description}
} {children} {actions && {actions}} diff --git a/web/src/components/overview/OverviewPage.jsx b/web/src/components/overview/OverviewPage.jsx index 8a1c6d3e65..0c703ca5dd 100644 --- a/web/src/components/overview/OverviewPage.jsx +++ b/web/src/components/overview/OverviewPage.jsx @@ -21,25 +21,39 @@ import React, { useEffect, useState } from "react"; import { - Alert, CardBody, 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 = () => ( - - - +
+ + + +
); // FIXME: improve @@ -48,26 +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 = ( - {issue.description}} - /> + + + + {issue.description} + + ); list.push(link); }); }); return ( - - {list} - + + + + {list} + + + ); }; @@ -84,6 +100,15 @@ export default function OverviewPage() { return ; } + const resultSectionProps = + issues.isEmpty + ? {} + : { + + label: _("Installation"), + description: _("Before installing, please check the following problems.") + }; + return ( <> @@ -114,11 +139,9 @@ export default function OverviewPage() { - + - - {issues.isEmpty ? : } - + {issues.isEmpty ? : } From 745a2a2c852475a59419c9a55f3f678a232a9c24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Thu, 13 Jun 2024 11:01:19 +0100 Subject: [PATCH 10/10] web: use the proper heading level --- web/src/components/overview/OverviewPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/overview/OverviewPage.jsx b/web/src/components/overview/OverviewPage.jsx index 0c703ca5dd..68fcefb86e 100644 --- a/web/src/components/overview/OverviewPage.jsx +++ b/web/src/components/overview/OverviewPage.jsx @@ -66,7 +66,7 @@ const IssuesList = ({ issues }) => { const link = ( - + {issue.description}