diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes index d281b76886..6fbc943edf 100644 --- a/web/package/agama-web-ui.changes +++ b/web/package/agama-web-ui.changes @@ -1,3 +1,9 @@ +------------------------------------------------------------------- +Thu Jan 22 03:57:13 UTC 2026 - David Diaz + +- Updated top header install button label to clarify navigation to + the overview page (gh#agama-project/agama#3060). + ------------------------------------------------------------------- Wed Jan 21 10:48:33 UTC 2026 - Imobach Gonzalez Sosa diff --git a/web/src/components/core/InstallButton.test.tsx b/web/src/components/core/ReviewAndInstallButton.test.tsx similarity index 84% rename from web/src/components/core/InstallButton.test.tsx rename to web/src/components/core/ReviewAndInstallButton.test.tsx index b087f10c85..dc181aca26 100644 --- a/web/src/components/core/InstallButton.test.tsx +++ b/web/src/components/core/ReviewAndInstallButton.test.tsx @@ -23,8 +23,8 @@ import React from "react"; import { screen } from "@testing-library/react"; import { installerRender, mockRoutes } from "~/test-utils"; -import { InstallButton } from "~/components/core"; import { PRODUCT, ROOT, STORAGE } from "~/routes/paths"; +import ReviewAndInstallButton from "./ReviewAndInstallButton"; describe("InstallButton", () => { describe("when not in an extended side paths", () => { @@ -32,9 +32,9 @@ describe("InstallButton", () => { mockRoutes(STORAGE.addPartition); }); - it("renders the button with Install label ", () => { - installerRender(); - screen.getByRole("button", { name: "Install" }); + it("renders the button with 'Review and install' label ", () => { + installerRender(); + screen.getByRole("button", { name: "Review and install" }); }); }); @@ -53,7 +53,7 @@ describe("InstallButton", () => { }); it("renders nothing", () => { - const { container } = installerRender(); + const { container } = installerRender(); expect(container).toBeEmptyDOMElement(); }); }); diff --git a/web/src/components/core/InstallButton.tsx b/web/src/components/core/ReviewAndInstallButton.tsx similarity index 64% rename from web/src/components/core/InstallButton.tsx rename to web/src/components/core/ReviewAndInstallButton.tsx index 02d70f162a..712d8b1a6f 100644 --- a/web/src/components/core/InstallButton.tsx +++ b/web/src/components/core/ReviewAndInstallButton.tsx @@ -20,30 +20,29 @@ * find current contact information at www.suse.com. */ -import React, { useId } from "react"; +import React from "react"; import { Button, ButtonProps } from "@patternfly/react-core"; import { useLocation, useNavigate } from "react-router"; import { EXTENDED_SIDE_PATHS, ROOT } from "~/routes/paths"; import { _ } from "~/i18n"; /** - * A call-to-action button that navigates users to the overview page containing - * the actual installation button. + * A call-to-action button that directs users to the overview page, which + * contains the actual installation button. * - * Despite its name, this component doesn't trigger installation directly. - * Instead, it serves as a prominent navigation element to guide users toward - * the overview page where the real installation button resides. The "Install" - * label is intentionally simple and action-oriented to match user intent. + * This button does not trigger installation directly. Instead, it serves as a + * navigation element that guides users to the overview page where they can + * review installation details before proceeding. The label "Review and Install" + * is intentional, indicating that users will first be presented with a summary + * screen before they can proceed with the installation. * - * @todo Refactor component name and behavior - * - Rename to better reflect its navigation purpose + * @todo Refactor component behavior * - Replace route-based visibility logic with explicit prop-based control now * that pages manage their own layouts */ -const InstallButton = ( +export default function ReviewAndInstallButton( props: Omit & { onClickWithIssues?: () => void }, -) => { - const labelId = useId(); +) { const navigate = useNavigate(); const location = useLocation(); @@ -53,14 +52,12 @@ const InstallButton = ( const { onClickWithIssues, ...buttonProps } = props; - // TRANSLATORS: The install button label - const buttonText = _("Install"); + // TRANSLATORS: The review and install button label + const buttonText = _("Review and install"); return ( - ); -}; - -export default InstallButton; +} diff --git a/web/src/components/core/index.ts b/web/src/components/core/index.ts index 54e0fa0f15..7ad17162c9 100644 --- a/web/src/components/core/index.ts +++ b/web/src/components/core/index.ts @@ -27,7 +27,7 @@ export { default as EmailInput } from "./EmailInput"; export { default as InstallationFinished } from "./InstallationFinished"; export { default as InstallationProgress } from "./InstallationProgress"; export { default as InstallationExit } from "./InstallationExit"; -export { default as InstallButton } from "./InstallButton"; +export { default as ReviewAndInstallButton } from "./ReviewAndInstallButton"; export { default as IssuesAlert } from "./IssuesAlert"; export { default as ListSearch } from "./ListSearch"; export { default as LoginPage } from "./LoginPage"; diff --git a/web/src/components/layout/Header.test.tsx b/web/src/components/layout/Header.test.tsx index 8d2cce04ef..1d94979137 100644 --- a/web/src/components/layout/Header.test.tsx +++ b/web/src/components/layout/Header.test.tsx @@ -55,7 +55,9 @@ const network: System = { }; jest.mock("~/components/core/InstallerOptions", () => () =>
Installer Options Mock
); -jest.mock("~/components/core/InstallButton", () => () =>
Install Button Mock
); +jest.mock("~/components/core/ReviewAndInstallButton", () => () => ( +
ReviewAndInstall Button Mock
+)); jest.mock("~/hooks/model/system", () => ({ ...jest.requireActual("~/hooks/model/system"), @@ -85,7 +87,7 @@ describe("Header", () => { it("mounts the Install button", () => { plainRender(
); - screen.getByText("Install Button Mock"); + screen.getByText("ReviewAndInstall Button Mock"); }); it("mounts installer options by default", () => { diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx index 41f5b6638d..1e6ed12f34 100644 --- a/web/src/components/layout/Header.tsx +++ b/web/src/components/layout/Header.tsx @@ -37,7 +37,12 @@ import { ToolbarItem, } from "@patternfly/react-core"; import { Icon } from "~/components/layout"; -import { ChangeProductOption, InstallerOptions, InstallButton, SkipTo } from "~/components/core"; +import { + ChangeProductOption, + InstallerOptions, + ReviewAndInstallButton, + SkipTo, +} from "~/components/core"; import ProgressStatusMonitor from "~/components/core/ProgressStatusMonitor"; import Breadcrumbs from "~/components/core/Breadcrumbs"; import { useProductInfo } from "~/hooks/model/config/product"; @@ -166,7 +171,7 @@ export default function Header({ )} - +