-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #590 from openSUSE/volume-sizes
[web] [Storage] Allow setting/editing volume sizes
- Loading branch information
Showing
15 changed files
with
1,208 additions
and
139 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
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,62 @@ | ||
/* | ||
* 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 { TextInput } from "@patternfly/react-core"; | ||
import { noop } from "~/utils"; | ||
|
||
/** | ||
* Callback function for notifying a valid input change | ||
* | ||
* @callback onChangeFn | ||
* @param {string|number} the input value | ||
* @return {void} | ||
*/ | ||
|
||
/** | ||
* Helper component for having an input text limited to not signed numbers | ||
* @component | ||
* | ||
* Based on {@link PF/TextInput https://www.patternfly.org/v4/components/text-input} | ||
* | ||
* @note It allows empty value too. | ||
* | ||
* @param {object} props | ||
* @param {string|number} props.value - the input value | ||
* @param {onChangeFn} props.onChange - the callback to be called when the entered value match the input pattern | ||
* @param {object} props.textInputProps - @see {@link https://www.patternfly.org/v4/components/text-input/#textinput} | ||
* | ||
* @returns {ReactComponent} | ||
*/ | ||
export default function NumericTextInput({ value = "", onChange = noop, ...textInputProps }) { | ||
// NOTE: Using \d* instead of \d+ at the beginning to allow empty | ||
const pattern = /^\d*\.?\d*$/; | ||
|
||
const handleOnChange = (value) => { | ||
if (pattern.test(value)) { | ||
onChange(value); | ||
} | ||
}; | ||
|
||
return ( | ||
<TextInput { ...textInputProps } value={value} onChange={handleOnChange} /> | ||
); | ||
} |
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,71 @@ | ||
/* | ||
* Copyright (c) [2022-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, { useState } from "react"; | ||
import { screen } from "@testing-library/react"; | ||
import { plainRender } from "~/test-utils"; | ||
import { NumericTextInput } from "~/components/core"; | ||
|
||
// Using a controlled component for testing the rendered result instead of testing if | ||
// the given onChange callback is called. The former is more aligned with the | ||
// React Testing Library principles, https://testing-library.com/docs/guiding-principles | ||
const Input = ({ value: initialValue = "" }) => { | ||
const [value, setValue] = useState(initialValue); | ||
return <NumericTextInput aria-label="Test input" value={value} onChange={setValue} />; | ||
}; | ||
|
||
it("renders an input text control", () => { | ||
plainRender(<Input />); | ||
|
||
const input = screen.getByRole("textbox", { name: "Test input" }); | ||
expect(input).toHaveAttribute("type", "text"); | ||
}); | ||
|
||
it("allows only digits and dot", async () => { | ||
const { user } = plainRender(<Input />); | ||
|
||
const input = screen.getByRole("textbox", { name: "Test input" }); | ||
expect(input).toHaveValue(""); | ||
|
||
await user.type(input, "-"); | ||
expect(input).toHaveValue(""); | ||
|
||
await user.type(input, "+"); | ||
expect(input).toHaveValue(""); | ||
|
||
await user.type(input, "1"); | ||
expect(input).toHaveValue("1"); | ||
|
||
await user.type(input, ".5"); | ||
expect(input).toHaveValue("1.5"); | ||
|
||
await user.type(input, " GiB"); | ||
expect(input).toHaveValue("1.5"); | ||
}); | ||
|
||
it("allows clearing the input (empty values)", async () => { | ||
const { user } = plainRender(<Input value="120" />); | ||
|
||
const input = screen.getByRole("textbox", { name: "Test input" }); | ||
expect(input).toHaveValue("120"); | ||
await user.clear(input); | ||
expect(input).toHaveValue(""); | ||
}); |
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.