-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[web] Move information about transactional system to the top of the s…
…torage page (#1075) ## Problem Agama shows a message in the storage screen if the product being installed uses a transactional Btrfs as root file-system (ie. read-only root subvolume and Btrfs snapshots as a mechanism to perform updates). But that message was displayed in the middle of the "Settings" section taking the place usually occupied by the Btrfs snapshots switch. Having it there didn't make much sense.  Moreover, the sentence was a bit complicated and it was not so clear how the statement was related to other settings in the same page. ## Solution The message is now displayed at the top of the page and the wording has been slightly modified to, hopefully, explain why some of the usual configuration options (like disabling Btrfs snapshots or changing the file-system type for "/") are not available.  If the system is not transactional, everything looks as before, as displayed in the following screenshots.  ## Testing - Tested manually - Updated unit tests ## Note This is broken into many small commits to ease collaboration during development. The plan is to squash when merging.
- Loading branch information
Showing
12 changed files
with
329 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /* | ||
| * Copyright (c) [2024] 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 from "react"; | ||
| import { Icon } from "~/components/layout"; | ||
|
|
||
| /** | ||
| * Internal component for rendering the icon | ||
| * | ||
| * @param {object} props | ||
| * @params {string} [props.name] - The icon name. | ||
| */ | ||
| const ReminderIcon = ({ name }) => { | ||
| if (!name?.length) return; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Icon name={name} size="xs" /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * Internal component for rendering the title | ||
| * | ||
| * @param {object} props | ||
| * @params {JSX.Element|string} [props.children] - The title content. | ||
| */ | ||
| const ReminderTitle = ({ children }) => { | ||
| if (!children) return; | ||
| if (typeof children === "string" && !children.length) return; | ||
|
|
||
| return ( | ||
| <h4>{children}</h4> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * Renders a reminder with given role, status by default | ||
| * @component | ||
| * | ||
| * @param {object} props | ||
| * @param {string} [props.icon] - The name of desired icon. | ||
| * @param {JSX.Element|string} [props.title] - The content for the title. | ||
| * @param {string} [props.role="status"] - The reminder's role, "status" by | ||
| * default. See {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role} | ||
| * @param {JSX.Element} [props.children] - The content for the description. | ||
| */ | ||
| export default function Reminder ({ | ||
| icon, | ||
| title, | ||
| role = "status", | ||
| children | ||
| }) { | ||
| return ( | ||
| <div role={role} data-type="agama/reminder"> | ||
| <ReminderIcon name={icon} /> | ||
| <div> | ||
| <ReminderTitle>{title}</ReminderTitle> | ||
| { children } | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /* | ||
| * Copyright (c) [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. | ||
| */ | ||
|
|
||
| import React from "react"; | ||
| import { screen, within } from "@testing-library/react"; | ||
| import { plainRender } from "~/test-utils"; | ||
| import { Reminder } from "~/components/core"; | ||
|
|
||
| describe("Reminder", () => { | ||
| it("renders a status region by default", () => { | ||
| plainRender(<Reminder>Example</Reminder>); | ||
| const reminder = screen.getByRole("status"); | ||
| within(reminder).getByText("Example"); | ||
| }); | ||
|
|
||
| it("renders a region with given role", () => { | ||
| plainRender(<Reminder role="alert">Example</Reminder>); | ||
| const reminder = screen.getByRole("alert"); | ||
| within(reminder).getByText("Example"); | ||
| }); | ||
|
|
||
| it("renders given title", () => { | ||
| plainRender( | ||
| <Reminder title={<span><strong>Kindly</strong> reminder</span>}> | ||
| <a href="#">Visit the settings section</a> | ||
| </Reminder> | ||
| ); | ||
| screen.getByRole("heading", { name: "Kindly reminder", level: 4 }); | ||
| }); | ||
|
|
||
| it("does not render a heading if title is not given", () => { | ||
| plainRender(<Reminder>Without title</Reminder>); | ||
| expect(screen.queryByRole("heading")).toBeNull(); | ||
| }); | ||
|
|
||
| it("does not render a heading if title is an empty string", () => { | ||
| plainRender(<Reminder title="">Without title</Reminder>); | ||
| expect(screen.queryByRole("heading")).toBeNull(); | ||
| }); | ||
|
|
||
| it("renders given children", () => { | ||
| plainRender( | ||
| <Reminder><a href="#">Visit the settings section</a></Reminder> | ||
| ); | ||
| screen.getByRole("link", { name: "Visit the settings section" }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.