[web] [Storage] Allow setting/editing volume sizes

web/package.json

@@ -101,12 +101,12 @@
     "@patternfly/react-table": "^4.113.0",
     "core-js": "^3.21.1",
     "fast-sort": "^3.2.1",
-    "filesize": "^10.0.5",
     "ipaddr.js": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "react-teleporter": "^3.1.0",
-    "regenerator-runtime": "^0.13.9"
+    "regenerator-runtime": "^0.13.9",
+    "xbytes": "^1.8.0"
   }
 }

web/package/cockpit-agama.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Jun  9 09:38:05 UTC 2023 - David Diaz <dgonzalez@suse.com>
+
+- Storage: Allows setting the volume size (gh#openSUSE/agama#590).
+
+-------------------------------------------------------------------
 Wed May 24 11:01:24 UTC 2023 - David Diaz <dgonzalez@suse.com>
 
 - UI: Ensure that blur and grayscale CSS filters are not applied to

web/src/assets/styles/blocks.scss

@@ -300,3 +300,42 @@ span.notification-mark[data-variant="sidebar"] {
 .pf-c-popover li + li {
   margin: 0;
 }
+
+.radio-group {
+  .pf-c-radio {
+    position: relative;
+    padding-block-end: var(--spacer-small);
+    padding-inline-end: var(--spacer-small);
+
+    &.selected::after {
+      --arrow-size: var(--spacer-small, 10px);
+
+      content:'';
+      position: absolute;
+      bottom: -1px;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-bottom: solid var(--arrow-size) var(--color-gray);
+      border-left: solid var(--arrow-size) transparent;
+      border-right: solid var(--arrow-size) transparent;
+    }
+  }
+}
+
+.highlighted-live-region {
+  padding: 10px;
+  background: var(--color-gray);
+}
+
+.size-input-group {
+  max-inline-size: 20ch;
+
+  input {
+    text-align: end;
+  }
+
+  select {
+    inline-size: 8ch;
+  }
+}

web/src/assets/styles/composition.scss

@@ -16,6 +16,10 @@
   gap: var(--split-gutter);
 }
 
+[data-items-alignment="start"] {
+  align-items: start;
+}
+
 .wrapped {
   flex-wrap: wrap;
 }

web/src/components/core/NumericTextInput.jsx

@@ -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} />
+  );
+}

web/src/components/core/NumericTextInput.test.jsx

@@ -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("");
+});

web/src/components/core/index.js

@@ -52,3 +52,4 @@ export { default as Terminal } from "./Terminal";
 export { default as Tip } from "./Tip";
 export { default as ShowTerminalButton } from "./ShowTerminalButton";
 export { default as NotificationMark } from "./NotificationMark";
+export { default as NumericTextInput } from "./NumericTextInput";