From 4e11228cae8d391bd2c0c5fde47e88a915666525 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Fri, 22 Dec 2023 16:54:00 +0000 Subject: [PATCH 1/9] [web] UserPage: start using HTML element Before this change, the CSS class bold was used for emphasizing the "No X defined" yet message. However, important messages are actually those telling the user something has to be defined. Thus, this commit uses the HTML element to wrap them and deliver a more semantic document instead of relying on the CSS 'bold' class. --- web/src/components/users/FirstUser.jsx | 8 ++++++-- web/src/components/users/RootAuthMethods.jsx | 8 ++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/web/src/components/users/FirstUser.jsx b/web/src/components/users/FirstUser.jsx index 690504cb88..19fd75ed18 100644 --- a/web/src/components/users/FirstUser.jsx +++ b/web/src/components/users/FirstUser.jsx @@ -41,8 +41,12 @@ import { RowActions, PasswordAndConfirmationInput, Popup } from '~/components/co const UserNotDefined = ({ actionCb }) => { return (
-
{_("No user defined yet")}
-
{_("Please, be aware that a user must be defined before installing the system to be able to log into it.")}
+
{_("No user defined yet")}
+
+ + {_("Please, be aware that a user must be defined before installing the system to be able to log into it.")} + +
{/* TRANSLATORS: push button label */}
diff --git a/web/src/components/users/RootAuthMethods.jsx b/web/src/components/users/RootAuthMethods.jsx index 037dc9f0c8..02b579df0c 100644 --- a/web/src/components/users/RootAuthMethods.jsx +++ b/web/src/components/users/RootAuthMethods.jsx @@ -32,8 +32,12 @@ import { useInstallerClient } from "~/context/installer"; const MethodsNotDefined = ({ setPassword, setSSHKey }) => { return (
-
{_("No root authentication method defined yet")}
-
{_("Please, define at least one authentication method for logging into the system as root.")}
+
{_("No root authentication method defined yet")}
+
+ + {_("Please, define at least one authentication method for logging into the system as root.")} + +
{/* TRANSLATORS: push button label */} From 7410080d94d1af54f29a2e8b379a344f2ffec40c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 26 Dec 2023 09:21:12 +0000 Subject: [PATCH 2/9] [web] InstallButton: fix link to IssuesPage By using a link instead of a buton since it a link that navigates to a different place, not a button that triggers an action. Additionally, it uses HTML element for wrapping a important message in the confirmation dialog instead of just marking it as `bold` via CSS. --- web/src/components/core/InstallButton.jsx | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/web/src/components/core/InstallButton.jsx b/web/src/components/core/InstallButton.jsx index 55e23fdd94..dbd348d85c 100644 --- a/web/src/components/core/InstallButton.jsx +++ b/web/src/components/core/InstallButton.jsx @@ -23,23 +23,13 @@ import React, { useState } from "react"; import { useInstallerClient } from "~/context/installer"; import { Button } from "@patternfly/react-core"; -import { useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; import { If, Popup } from "~/components/core"; import { _ } from "~/i18n"; const InstallConfirmationPopup = ({ hasIssues, onAccept, onClose }) => { - const navigate = useNavigate(); - const IssuesWarning = () => { - const IssuesLink = ({ text }) => { - return ( - - ); - }; - // TRANSLATORS: the installer reports some errors, // the text in square brackets [] is a clickable link const [msgStart, msgLink, msgEnd] = _("There are some reported issues. \ @@ -47,10 +37,12 @@ Please, check [the list of issues] \ before proceeding with the installation.").split(/[[\]]/); return ( -

- {msgStart} - - {msgEnd} +

+ + {msgStart} + {msgLink} + {msgEnd} +

); }; From 6f9a599c8790ce96ef5d867874e6960daa70dc40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 26 Dec 2023 09:25:06 +0000 Subject: [PATCH 3/9] [web] Use for some storage text Instead of using the CSS `bold` class for emphasizing them, use the HTML element for semantically marking them as important. --- web/src/components/storage/ProposalSettingsSection.jsx | 2 +- web/src/components/storage/VolumeForm.jsx | 2 +- web/src/components/storage/ZFCPPage.jsx | 4 ++-- web/src/components/storage/iscsi/TargetsSection.jsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web/src/components/storage/ProposalSettingsSection.jsx b/web/src/components/storage/ProposalSettingsSection.jsx index 058695383f..ca5f9728d9 100644 --- a/web/src/components/storage/ProposalSettingsSection.jsx +++ b/web/src/components/storage/ProposalSettingsSection.jsx @@ -151,7 +151,7 @@ const InstallationDeviceField = ({ > {_("No devices found")}
} + then={{_("No devices found")}} else={ { return ( - {label()} + {label()} ); }; diff --git a/web/src/components/storage/ZFCPPage.jsx b/web/src/components/storage/ZFCPPage.jsx index 4042162c2f..b927c08e83 100644 --- a/web/src/components/storage/ZFCPPage.jsx +++ b/web/src/components/storage/ZFCPPage.jsx @@ -414,7 +414,7 @@ const ControllersSection = ({ client, manager, load = noop, isLoading = false }) const EmptyState = () => { return (
-
{_("No zFCP controllers found")}
+
{_("No zFCP controllers found")}
{_("Please, try to read the zFCP devices again.")}
{/* TRANSLATORS: button label */} @@ -550,7 +550,7 @@ const DisksSection = ({ client, manager, isLoading = false }) => { return (
-
{_("No zFCP disks found")}
+
{_("No zFCP disks found")}
} diff --git a/web/src/components/storage/iscsi/TargetsSection.jsx b/web/src/components/storage/iscsi/TargetsSection.jsx index fcf28f554e..84ca0f1105 100644 --- a/web/src/components/storage/iscsi/TargetsSection.jsx +++ b/web/src/components/storage/iscsi/TargetsSection.jsx @@ -136,7 +136,7 @@ export default function TargetsSection() { if (state.nodes.length === 0) { return (
-
{_("No iSCSI targets found")}
+
{_("No iSCSI targets found")}
{_("Please, perform an iSCSI discovery in order to find available iSCSI targets.")}
{/* TRANSLATORS: button label, starts iSCSI discovery */} From 8cc88c041ed7c6bddd9c563f550dd317e3db03d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 26 Dec 2023 09:28:08 +0000 Subject: [PATCH 4/9] [web] NetworPage: do not mark text as bold Since they are not really important text, just information, do not make them visually different to the rest. What is more, if there are importante messages is prefered to wrap them in the HTML element than just using plain CSS to change them visually. --- web/src/components/network/NetworkPage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx index 7e7b19cf0b..12bbeedd3c 100644 --- a/web/src/components/network/NetworkPage.jsx +++ b/web/src/components/network/NetworkPage.jsx @@ -35,7 +35,7 @@ import { _ } from "~/i18n"; const NoWiredConnections = () => { return (
-
{_("No wired connections found")}
+
{_("No wired connections found")}
); }; @@ -55,7 +55,7 @@ const NoWifiConnections = ({ wifiScanSupported, openWifiSelector }) => { return (
-
{_("No WiFi connections found")}
+
{_("No WiFi connections found")}
{message}
Date: Tue, 26 Dec 2023 09:55:19 +0000 Subject: [PATCH 5/9] [web] Fix InstallButton.test.jsx Part of changes done at 7410080. --- web/src/components/core/InstallButton.test.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/components/core/InstallButton.test.jsx b/web/src/components/core/InstallButton.test.jsx index 9ee5bfc039..4e0937d7b0 100644 --- a/web/src/components/core/InstallButton.test.jsx +++ b/web/src/components/core/InstallButton.test.jsx @@ -90,7 +90,7 @@ describe("when the button is clicked and there are not errors", () => { const button = await screen.findByRole("button", { name: "Install" }); await user.click(button); - await screen.findByRole("button", { name: /list of issues$/ }); + await screen.findByRole("link", { name: /list of issues$/ }); }); }); @@ -100,7 +100,7 @@ describe("when the button is clicked and there are not errors", () => { const button = await screen.findByRole("button", { name: "Install" }); await user.click(button); await waitFor(() => { - const link = screen.queryByRole("button", { name: /list of issues$/ }); + const link = screen.queryByRole("link", { name: /list of issues$/ }); expect(link).toBeNull(); }); }); From 8663d7e8d670a1389eeae09ef25070568ecb8172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 26 Dec 2023 09:58:40 +0000 Subject: [PATCH 6/9] [web] Do not use for "No found" messages To be consistent with the rest of the UI and because these are actually informative messages, not important ones. --- web/src/components/storage/ProposalSettingsSection.jsx | 2 +- web/src/components/storage/ZFCPPage.jsx | 4 ++-- web/src/components/storage/iscsi/TargetsSection.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web/src/components/storage/ProposalSettingsSection.jsx b/web/src/components/storage/ProposalSettingsSection.jsx index ca5f9728d9..6a23ed55c2 100644 --- a/web/src/components/storage/ProposalSettingsSection.jsx +++ b/web/src/components/storage/ProposalSettingsSection.jsx @@ -151,7 +151,7 @@ const InstallationDeviceField = ({ > {_("No devices found")}} + then={_("No devices found")} else={ { return (
-
{_("No zFCP controllers found")}
+
{_("No zFCP controllers found")}
{_("Please, try to read the zFCP devices again.")}
{/* TRANSLATORS: button label */} @@ -550,7 +550,7 @@ const DisksSection = ({ client, manager, isLoading = false }) => { return (
-
{_("No zFCP disks found")}
+
{_("No zFCP disks found")}
} diff --git a/web/src/components/storage/iscsi/TargetsSection.jsx b/web/src/components/storage/iscsi/TargetsSection.jsx index 84ca0f1105..0526d986ce 100644 --- a/web/src/components/storage/iscsi/TargetsSection.jsx +++ b/web/src/components/storage/iscsi/TargetsSection.jsx @@ -136,7 +136,7 @@ export default function TargetsSection() { if (state.nodes.length === 0) { return (
-
{_("No iSCSI targets found")}
+
{_("No iSCSI targets found")}
{_("Please, perform an iSCSI discovery in order to find available iSCSI targets.")}
{/* TRANSLATORS: button label, starts iSCSI discovery */} From 7953bdac8d4cfc69ad7fd54d26cfd184ac7c9a45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 26 Dec 2023 10:03:38 +0000 Subject: [PATCH 7/9] [web] Fix sentences by adding a dot at the end Because sentences usually ends with a dot, but for some reason it was not the case for "No found" or "Not defined" senteces. --- web/src/components/network/NetworkPage.jsx | 4 ++-- web/src/components/storage/ProposalSettingsSection.jsx | 2 +- web/src/components/storage/ZFCPPage.jsx | 4 ++-- web/src/components/storage/ZFCPPage.test.jsx | 6 +++--- web/src/components/storage/iscsi/TargetsSection.jsx | 2 +- web/src/components/users/FirstUser.jsx | 2 +- web/src/components/users/FirstUser.test.jsx | 8 ++++---- web/src/components/users/RootAuthMethods.jsx | 2 +- web/src/components/users/RootAuthMethods.test.jsx | 2 +- 9 files changed, 16 insertions(+), 16 deletions(-) diff --git a/web/src/components/network/NetworkPage.jsx b/web/src/components/network/NetworkPage.jsx index 12bbeedd3c..a5454e5543 100644 --- a/web/src/components/network/NetworkPage.jsx +++ b/web/src/components/network/NetworkPage.jsx @@ -35,7 +35,7 @@ import { _ } from "~/i18n"; const NoWiredConnections = () => { return (
-
{_("No wired connections found")}
+
{_("No wired connections found.")}
); }; @@ -55,7 +55,7 @@ const NoWifiConnections = ({ wifiScanSupported, openWifiSelector }) => { return (
-
{_("No WiFi connections found")}
+
{_("No WiFi connections found.")}
{message}
{ return (
-
{_("No zFCP controllers found")}
+
{_("No zFCP controllers found.")}
{_("Please, try to read the zFCP devices again.")}
{/* TRANSLATORS: button label */} @@ -550,7 +550,7 @@ const DisksSection = ({ client, manager, isLoading = false }) => { return (
-
{_("No zFCP disks found")}
+
{_("No zFCP disks found.")}
} diff --git a/web/src/components/storage/ZFCPPage.test.jsx b/web/src/components/storage/ZFCPPage.test.jsx index 68de9b9697..181cf6e25e 100644 --- a/web/src/components/storage/ZFCPPage.test.jsx +++ b/web/src/components/storage/ZFCPPage.test.jsx @@ -157,7 +157,7 @@ describe("if there are not controllers", () => { it("renders a button for reading zFCP devices", async () => { installerRender(); - await screen.findByText(/No zFCP controllers found/); + await screen.findByText("No zFCP controllers found."); await screen.findByRole("button", { name: /Read zFCP devices/ }); }); @@ -264,7 +264,7 @@ describe("if there are not disks", () => { it("renders a button for activating a disk", async () => { installerRender(); - await screen.findByText("No zFCP disks found"); + await screen.findByText("No zFCP disks found."); await screen.findByText(/try to activate a zFCP disk/); screen.findByRole("button", { name: "Activate zFCP disk" }); }); @@ -277,7 +277,7 @@ describe("if there are not disks", () => { it("does not render a button for activating a disk", async () => { installerRender(); - await screen.findByText("No zFCP disks found"); + await screen.findByText("No zFCP disks found."); await screen.findByText(/try to activate a zFCP controller/); await waitFor(() => expect(screen.queryByRole("button", { name: "Activate zFCP disk" })).toBeNull()); }); diff --git a/web/src/components/storage/iscsi/TargetsSection.jsx b/web/src/components/storage/iscsi/TargetsSection.jsx index 0526d986ce..442d51675c 100644 --- a/web/src/components/storage/iscsi/TargetsSection.jsx +++ b/web/src/components/storage/iscsi/TargetsSection.jsx @@ -136,7 +136,7 @@ export default function TargetsSection() { if (state.nodes.length === 0) { return (
-
{_("No iSCSI targets found")}
+
{_("No iSCSI targets found.")}
{_("Please, perform an iSCSI discovery in order to find available iSCSI targets.")}
{/* TRANSLATORS: button label, starts iSCSI discovery */} diff --git a/web/src/components/users/FirstUser.jsx b/web/src/components/users/FirstUser.jsx index 19fd75ed18..ace01e94d2 100644 --- a/web/src/components/users/FirstUser.jsx +++ b/web/src/components/users/FirstUser.jsx @@ -41,7 +41,7 @@ import { RowActions, PasswordAndConfirmationInput, Popup } from '~/components/co const UserNotDefined = ({ actionCb }) => { return (
-
{_("No user defined yet")}
+
{_("No user defined yet.")}
{_("Please, be aware that a user must be defined before installing the system to be able to log into it.")} diff --git a/web/src/components/users/FirstUser.test.jsx b/web/src/components/users/FirstUser.test.jsx index 96fe5336dd..2d9b40fd03 100644 --- a/web/src/components/users/FirstUser.test.jsx +++ b/web/src/components/users/FirstUser.test.jsx @@ -57,7 +57,7 @@ beforeEach(() => { it("allows defining a new user", async () => { const { user } = installerRender(); - await screen.findByText("No user defined yet"); + await screen.findByText("No user defined yet."); const button = await screen.findByRole("button", { name: "Define a user now" }); await user.click(button); @@ -156,7 +156,7 @@ describe("when there is some issue with the user config provided", () => { await waitFor(() => { expect(screen.queryByText(/Something went wrong/i)).toBeInTheDocument(); expect(screen.queryByText(/There is an error/i)).toBeInTheDocument(); - expect(screen.queryByText(/No user defined yet/i)).toBeInTheDocument(); + expect(screen.queryByText("No user defined yet.")).toBeInTheDocument(); }); }); }); @@ -263,14 +263,14 @@ describe("when the user has been modified", () => { const [mockFunction, callbacks] = createCallbackMock(); onUsersChangeFn = mockFunction; installerRender(); - await screen.findByText("No user defined yet"); + await screen.findByText("No user defined yet."); const [cb] = callbacks; act(() => { cb({ firstUser: { userName: "ytm", fullName: "YaST Team Member", autologin: false } }); }); - const noUserInfo = await screen.queryByText("No user defined yet"); + const noUserInfo = await screen.queryByText("No user defined yet."); expect(noUserInfo).toBeNull(); screen.getByText("YaST Team Member"); screen.getByText("ytm"); diff --git a/web/src/components/users/RootAuthMethods.jsx b/web/src/components/users/RootAuthMethods.jsx index 02b579df0c..91bf6f51c9 100644 --- a/web/src/components/users/RootAuthMethods.jsx +++ b/web/src/components/users/RootAuthMethods.jsx @@ -32,7 +32,7 @@ import { useInstallerClient } from "~/context/installer"; const MethodsNotDefined = ({ setPassword, setSSHKey }) => { return (
-
{_("No root authentication method defined yet")}
+
{_("No root authentication method defined yet.")}
{_("Please, define at least one authentication method for logging into the system as root.")} diff --git a/web/src/components/users/RootAuthMethods.test.jsx b/web/src/components/users/RootAuthMethods.test.jsx index 9e3b4c674f..0b9af79247 100644 --- a/web/src/components/users/RootAuthMethods.test.jsx +++ b/web/src/components/users/RootAuthMethods.test.jsx @@ -74,7 +74,7 @@ describe("when ready", () => { it("renders a text inviting the user to define at least one", async () => { installerRender(); - await screen.findByText("No root authentication method defined yet"); + await screen.findByText("No root authentication method defined yet."); screen.getByText(/at least one/); }); From 6f8e78d0a9b9ed9025ea101f592d2ab8dbaf7890 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 26 Dec 2023 10:19:00 +0000 Subject: [PATCH 8/9] [web] Fix broken test --- web/src/components/network/NetworkPage.test.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/components/network/NetworkPage.test.jsx b/web/src/components/network/NetworkPage.test.jsx index 2078f9b41e..75a4bf813a 100644 --- a/web/src/components/network/NetworkPage.test.jsx +++ b/web/src/components/network/NetworkPage.test.jsx @@ -89,7 +89,7 @@ describe("NetworkPage", () => { installerRender(); const section = await screen.findByRole("region", { name: "Wired networks" }); - await within(section).findByText("No wired connections found"); + await within(section).findByText("No wired connections found."); }); }); @@ -102,7 +102,7 @@ describe("NetworkPage", () => { installerRender(); const section = await screen.findByRole("region", { name: "WiFi networks" }); - await within(section).findByText("No WiFi connections found"); + await within(section).findByText("No WiFi connections found."); }); describe("and WiFi scan is supported", () => { From 240d46640b5ca87fac0ca357e14e098d71602b21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Tue, 26 Dec 2023 11:14:08 +0000 Subject: [PATCH 9/9] [web] Update the changes file --- web/package/cockpit-agama.changes | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes index d77aa2b85d..5902146b4a 100644 --- a/web/package/cockpit-agama.changes +++ b/web/package/cockpit-agama.changes @@ -1,3 +1,9 @@ +------------------------------------------------------------------- +Tue Dec 26 11:12:45 UTC 2023 - David Diaz + +- UI: Use the HTML element instead of a CSS class for + emphasizing content (gh#openSUSE/agama#960). + ------------------------------------------------------------------- Fri Dec 22 09:29:59 UTC 2023 - David Diaz