From b33065deee1a5496391fcbc0fc1291432537d5e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Thu, 4 Apr 2024 15:37:26 +0100
Subject: [PATCH 01/13] web: Fix Popup types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David Díaz González <dgonzalez@suse.de>
---
 web/src/components/core/Popup.jsx | 63 ++++++++++++++-----------------
 1 file changed, 29 insertions(+), 34 deletions(-)

diff --git a/web/src/components/core/Popup.jsx b/web/src/components/core/Popup.jsx
index 78cdca2e8b..4c60cc01b0 100644
--- a/web/src/components/core/Popup.jsx
+++ b/web/src/components/core/Popup.jsx
@@ -19,12 +19,19 @@
  * find current contact information at www.suse.com.
  */
 
+// @ts-check
+
 import React from "react";
 import { Button, Modal } from "@patternfly/react-core";
-
 import { _ } from "~/i18n";
 import { partition } from "~/utils";
 
+/**
+ * @typedef {import("@patternfly/react-core").ModalProps} ModalProps
+ * @typedef {import("@patternfly/react-core").ButtonProps} ButtonProps
+ * @typedef {Omit<ButtonProps, 'variant'>} ButtonWithoutVariantProps
+ */
+
 /**
  * Wrapper component for holding Popup actions
  *
@@ -33,6 +40,7 @@ import { partition } from "~/utils";
  *
  * @see Popup examples.
  *
+ * @param {object} props
  * @param {React.ReactNode} [props.children] - a collection of Action components
  */
 const Actions = ({ children }) => <>{children}</>;
@@ -42,13 +50,10 @@ const Actions = ({ children }) => <>{children}</>;
  *
  * Built on top of {@link https://www.patternfly.org/components/button PF/Button}
  *
- * @see Popup examples.
- *
- * @param {React.ReactNode} props.children - content of the action
- * @param {object} [props] - PF/Button props, see {@link https://www.patternfly.org/components/button#props}
+ * @param {ButtonProps} props
  */
-const Action = ({ children, ...props }) => (
-  <Button { ...props }>
+const Action = ({ children, ...buttonProps }) => (
+  <Button { ...buttonProps }>
     {children}
   </Button>
 );
@@ -68,11 +73,10 @@ const Action = ({ children, ...props }) => (
  *     <Text>Upload</Text>
  *   </PrimaryAction>
  *
- * @param {React.ReactNode} props.children - content of the action
- * @param {object} [props] - {@link Action} props
+ * @param {ButtonWithoutVariantProps} props
  */
-const PrimaryAction = ({ children, ...props }) => (
-  <Action { ...props } variant="primary">{ children }</Action>
+const PrimaryAction = ({ children, ...actionProps }) => (
+  <Action { ...actionProps } variant="primary">{ children }</Action>
 );
 
 /**
@@ -84,11 +88,10 @@ const PrimaryAction = ({ children, ...props }) => (
  * @example <caption>Using it with a custom text</caption>
  *   <Confirm onClick={accept}>Accept</Confirm>
  *
- * @param {React.ReactNode} [props.children="confirm"] - content of the action
- * @param {object} [props] - {@link Action} props
+ * @param {ButtonWithoutVariantProps} props
  */
-const Confirm = ({ children = _("Confirm"), ...props }) => (
-  <PrimaryAction key="confirm" { ...props }>{ children }</PrimaryAction>
+const Confirm = ({ children = _("Confirm"), ...actionProps }) => (
+  <PrimaryAction key="confirm" { ...actionProps }>{ children }</PrimaryAction>
 );
 
 /**
@@ -106,11 +109,10 @@ const Confirm = ({ children = _("Confirm"), ...props }) => (
  *     <Text>Dismiss</Text>
  *   </SecondaryAction>
  *
- * @param {React.ReactNode} props.children - content of the action
- * @param {object} [props] - {@link Action} props
+ * @param {ButtonWithoutVariantProps} props
  */
-const SecondaryAction = ({ children, ...props }) => (
-  <Action { ...props } variant="secondary">{ children }</Action>
+const SecondaryAction = ({ children, ...actionProps }) => (
+  <Action { ...actionProps } variant="secondary">{ children }</Action>
 );
 
 /**
@@ -122,11 +124,10 @@ const SecondaryAction = ({ children, ...props }) => (
  * @example <caption>Using it with a custom text</caption>
  *   <Cancel onClick={dismiss}>Dismiss</Confirm>
  *
- * @param {React.ReactNode} [props.children="Cancel"] - content of the action
- * @param {object} [props] - {@link Action} props
+ * @param {ButtonWithoutVariantProps} props
  */
-const Cancel = ({ children = _("Cancel"), ...props }) => (
-  <SecondaryAction key="cancel" { ...props }>{ children }</SecondaryAction>
+const Cancel = ({ children = _("Cancel"), ...actionProps }) => (
+  <SecondaryAction key="cancel" { ...actionProps }>{ children }</SecondaryAction>
 );
 
 /**
@@ -144,11 +145,10 @@ const Cancel = ({ children = _("Cancel"), ...props }) => (
  *     <Text>Do not set</Text>
  *   </AncillaryAction>
  *
- * @param {React.ReactNode} props.children - content of the action
- * @param {object} [props] - {@link Action} props
+ * @param {ButtonWithoutVariantProps} props
  */
-const AncillaryAction = ({ children, ...props }) => (
-  <Action { ...props } variant="link">{ children }</Action>
+const AncillaryAction = ({ children, ...actionsProps }) => (
+  <Action { ...actionsProps } variant="link">{ children }</Action>
 );
 
 /**
@@ -187,13 +187,7 @@ const AncillaryAction = ({ children, ...props }) => (
  *     </Popup.Actions>
  *   </Popup>
  *
- * @param {object} props - component props
- * @param {boolean} [props.isOpen=false] - whether the popup is displayed or not
- * @param {boolean} [props.showClose=false] - whether the popup should include a "X" action for closing it
- * @param {string} [props.variant="small"] - the popup size, based on PF/Modal `variant` prop
- * @param {React.ReactNode} props.children - the popup content and actions
- * @param {object} [pfModalProps] - PF/Modal props, See {@link https://www.patternfly.org/components/modal#props}
- *
+ * @param {ModalProps} props
  */
 const Popup = ({
   isOpen = false,
@@ -205,6 +199,7 @@ const Popup = ({
   const [actions, content] = partition(React.Children.toArray(children), child => child.type === Actions);
 
   return (
+    /** @ts-ignore */
     <Modal
       { ...pfModalProps }
       isOpen={isOpen}

From 58b93dbb94a9d87755c215585d464ea60f058660 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Thu, 4 Apr 2024 15:38:02 +0100
Subject: [PATCH 02/13] web: Fix Section types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David Díaz González <dgonzalez@suse.de>
---
 web/src/components/core/Section.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
index c1954b7d4e..831d5f792d 100644
--- a/web/src/components/core/Section.jsx
+++ b/web/src/components/core/Section.jsx
@@ -56,7 +56,7 @@ import { If, ValidationErrors } from "~/components/core";
  * @property {string} [className] - Class name for section html tag.
  * @property {string} [id] - Id of the section ("software", "product", "storage", "storage-actions", ...)
  * @property {import("~/client/mixins").ValidationError[]} [props.errors] - Validation errors to be shown before the title.
- * @property {React.ReactElement} [children] - The section content.
+ * @property {React.ReactNode} [children] - The section content.
  * @property {string} [aria-label] - aria-label attribute, required if title if not given
  *
  * @param { SectionProps } props

From b858e91f4ec67bf96de675ebe11ddea94e14bfa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Thu, 4 Apr 2024 15:39:10 +0100
Subject: [PATCH 03/13] web: Fix OptionsPicker types

---
 web/src/components/core/OptionsPicker.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/components/core/OptionsPicker.jsx b/web/src/components/core/OptionsPicker.jsx
index 55cc44f850..eb1d96f011 100644
--- a/web/src/components/core/OptionsPicker.jsx
+++ b/web/src/components/core/OptionsPicker.jsx
@@ -19,8 +19,12 @@
  * find current contact information at www.suse.com.
  */
 
+// @ts-check
+
 import React from "react";
 
+import { noop } from "~/utils";
+
 /**
  * Wrapper for OptionsPicker options
  * @component
@@ -29,12 +33,14 @@ import React from "react";
  * @param {string} [props.title] - Text to be used as option title
  * @param {string} [props.body] - Text to be used as option body
  * @param {boolean} [props.isSelected=false] - Whether the option should be set as select of not
+ * @param {() => void} [props.onClick=noop]
  * @param {object} [props.props] - Other props sent to div#option node
  */
-const Option = ({ title, body, isSelected = false, ...props }) => {
+const Option = ({ title, body, isSelected = false, onClick = noop, ...props }) => {
   return (
     <div
       {...props}
+      onClick={onClick}
       role="option"
       aria-selected={isSelected}
     >
@@ -50,10 +56,10 @@ const Option = ({ title, body, isSelected = false, ...props }) => {
  *
  * @param {object} props
  * @param {string} [props.ariaLabel] - Text to be used as accessible label
- * @param {Array<Option>} props.children - A collection of Option
+ * @param {React.ReactNode} props.children - A collection of Option
  * @param {object} [props.props] - Other props sent to div#listbox node
  */
-const OptionsPicker = ({ "aria-label": ariaLabel, children, ...props }) => {
+const OptionsPicker = ({ ariaLabel, children, ...props }) => {
   return (
     <div
       {...props}

From 59f150ca69ce01cac4b41a18cea25e678362f112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Thu, 4 Apr 2024 15:40:21 +0100
Subject: [PATCH 04/13] web: Check types for DeviceSelectionDialog

---
 web/src/components/storage/DeviceSelectionDialog.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/components/storage/DeviceSelectionDialog.jsx b/web/src/components/storage/DeviceSelectionDialog.jsx
index fd6972c0f9..6f88fb8240 100644
--- a/web/src/components/storage/DeviceSelectionDialog.jsx
+++ b/web/src/components/storage/DeviceSelectionDialog.jsx
@@ -19,6 +19,8 @@
  * find current contact information at www.suse.com.
  */
 
+// @ts-check
+
 import React, { useState } from "react";
 import { Form } from "@patternfly/react-core";
 
@@ -53,7 +55,7 @@ const Html = ({ children, ...props }) => (
  * @param {StorageDevice[]} props.targetPVDevices
  * @param {StorageDevice[]} props.devices - The actions to perform in the system.
  * @param {boolean} [props.isOpen=false] - Whether the dialog is visible or not.
- * @param {function} [props.onCancel=noop]
+ * @param {() => void} [props.onCancel=noop]
  * @param {(target: Target) => void} [props.onAccept=noop]
  *
  * @typedef {object} Target

From ff9356b8af87b0b1da1cf16281450bc07febc412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Thu, 4 Apr 2024 15:41:21 +0100
Subject: [PATCH 05/13] web: Check types for BootSelectionDialog

---
 web/src/components/storage/BootSelectionDialog.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/components/storage/BootSelectionDialog.jsx b/web/src/components/storage/BootSelectionDialog.jsx
index e33b03998f..ea043eb29e 100644
--- a/web/src/components/storage/BootSelectionDialog.jsx
+++ b/web/src/components/storage/BootSelectionDialog.jsx
@@ -28,6 +28,8 @@ import { Popup } from "~/components/core";
 import { deviceLabel } from "~/components/storage/utils";
 import { sprintf } from "sprintf-js";
 
+// @ts-check
+
 /**
  * @typedef {import ("~/client/storage").StorageDevice} StorageDevice
  */

From 9fe5d42842526d77e7175f43dc6332f240f55cd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Thu, 4 Apr 2024 15:45:08 +0100
Subject: [PATCH 06/13] web: Improvements in encryption components

---
 .../core/PasswordAndConfirmationInput.jsx     |  2 +-
 .../storage/ProposalSettingsSection.jsx       | 40 ++++++++-----------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/web/src/components/core/PasswordAndConfirmationInput.jsx b/web/src/components/core/PasswordAndConfirmationInput.jsx
index 030a69b7f9..90fb19132a 100644
--- a/web/src/components/core/PasswordAndConfirmationInput.jsx
+++ b/web/src/components/core/PasswordAndConfirmationInput.jsx
@@ -24,7 +24,7 @@ import { FormGroup } from "@patternfly/react-core";
 import { FormValidationError, PasswordInput } from "~/components/core";
 import { _ } from "~/i18n";
 
-const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled }) => {
+const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled = false }) => {
   const [confirmation, setConfirmation] = useState(value || "");
   const [error, setError] = useState("");
 
diff --git a/web/src/components/storage/ProposalSettingsSection.jsx b/web/src/components/storage/ProposalSettingsSection.jsx
index f61b14f787..2132ea6c07 100644
--- a/web/src/components/storage/ProposalSettingsSection.jsx
+++ b/web/src/components/storage/ProposalSettingsSection.jsx
@@ -43,14 +43,10 @@ import { hasFS, deviceLabel } from "~/components/storage/utils";
  * @param {object} props
  * @param {string} props.id - Form ID.
  * @param {string} props.password - Password for encryption.
- * @param {onSubmitFn} [props.onSubmit=noop] - On submit callback.
- * @param {onValidateFn} [props.onValidate=noop] - On validate callback.
- *
- * @callback onSubmitFn
- * @param {string} password
- *
- * @callback onValidateFn
- * @param {boolean} valid
+ * @param {string} props.method - Encryption method.
+ * @param {string[]} props.methods - Possible encryption methods.
+ * @param {(password: string, method: string) => void} [props.onSubmit=noop] - On submit callback.
+ * @param {(valid: boolean) => void} [props.onValidate=noop] - On validate callback.
  */
 const EncryptionSettingsForm = ({
   id,
@@ -94,7 +90,6 @@ const EncryptionSettingsForm = ({
   return (
     <Form id={id} onSubmit={submitForm}>
       <PasswordAndConfirmationInput
-        id="encryptionPasswordInput"
         value={password}
         onChange={changePassword}
         onValidation={onValidate}
@@ -171,24 +166,24 @@ version of the system after configuration changes or software upgrades.");
  * @param {object} props
  * @param {string} [props.password=""] - Password for encryption
  * @param {string} [props.method=""] - Encryption method
+ * @param {string[]} [props.methods] - Possible encryption methods
  * @param {boolean} [props.isChecked=false] - Whether encryption is selected
  * @param {boolean} [props.isLoading=false] - Whether to show the selector as loading
- * @param {onChangeFn} [props.onChange=noop] - On change callback
+ * @param {(config: EncryptionConfig) => void} [props.onChange=noop] - On change callback
  *
- * @callback onChangeFn
- * @param {object} settings
+ * @typedef {object} EncryptionConfig
+ * @property {string} password
+ * @property {string} [method]
  */
 const EncryptionField = ({
-  password: passwordProp = "",
-  method: methodProp = "",
+  password = "",
+  method = "",
   methods,
-  isChecked: isCheckedProp = false,
+  isChecked: defaultIsChecked = false,
   isLoading = false,
   onChange = noop
 }) => {
-  const [isChecked, setIsChecked] = useState(isCheckedProp);
-  const [password, setPassword] = useState(passwordProp);
-  const [method, setMethod] = useState(methodProp);
+  const [isChecked, setIsChecked] = useState(defaultIsChecked);
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [isFormValid, setIsFormValid] = useState(true);
 
@@ -198,14 +193,12 @@ const EncryptionField = ({
 
   const acceptForm = (newPassword, newMethod) => {
     closeForm();
-    setPassword(newPassword);
-    setMethod(newMethod);
-    onChange({ isChecked, password: newPassword, method: newMethod });
+    onChange({ password: newPassword, method: newMethod });
   };
 
   const cancelForm = () => {
+    setIsChecked(defaultIsChecked);
     closeForm();
-    if (password.length === 0) setIsChecked(false);
   };
 
   const validateForm = (valid) => setIsFormValid(valid);
@@ -216,8 +209,7 @@ const EncryptionField = ({
     if (value && password.length === 0) openForm();
 
     if (!value) {
-      setPassword("");
-      onChange({ isChecked: false, password: "" });
+      onChange({ password: "" });
     }
   };
 

From 9c986fdcd708218f23a57cf43785b51bb9d16242 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Mon, 8 Apr 2024 15:07:53 +0100
Subject: [PATCH 07/13] web: TreeTable improvements

- Allow expand/collapse rows.
- Add expandedItems prop.
---
 web/src/components/core/TreeTable.jsx | 29 +++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/src/components/core/TreeTable.jsx b/web/src/components/core/TreeTable.jsx
index 5f7612adb8..b7f12d1ad9 100644
--- a/web/src/components/core/TreeTable.jsx
+++ b/web/src/components/core/TreeTable.jsx
@@ -21,7 +21,7 @@
 
 // @ts-check
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper } from '@patternfly/react-table';
 
 /**
@@ -39,6 +39,7 @@ import { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper } from '@patternfly/rea
  * @typedef {object} TreeTableBaseProps
  * @property {TreeTableColumn[]} columns=[]
  * @property {object[]} items=[]
+ * @property {object[]} [expandedItems=[]]
  * @property {(any) => array} [itemChildren]
  * @property {(any) => string} [rowClassNames]
  */
@@ -58,9 +59,26 @@ export default function TreeTable({
   columns = [],
   items = [],
   itemChildren = () => [],
+  expandedItems = [],
   rowClassNames = () => "",
   ...tableProps
 }) {
+  const [expanded, setExpanded] = useState(expandedItems);
+
+  useEffect(() => {
+    setExpanded(expandedItems);
+  }, [expandedItems, setExpanded]);
+
+  const isExpanded = (item) => expanded.includes(item);
+
+  const toggle = (item) => {
+    if (isExpanded(item)) {
+      setExpanded(expanded.filter(d => d !== item));
+    } else {
+      setExpanded([...expanded, item]);
+    }
+  };
+
   const renderColumns = (item, treeRow) => {
     return columns.map((c, cIdx) => {
       const props = {
@@ -76,17 +94,20 @@ export default function TreeTable({
     });
   };
 
-  const renderRows = (items, level) => {
+  const renderRows = (items, level, hidden = false) => {
     if (items?.length <= 0) return;
 
     return (
       items.map((item, itemIdx) => {
         const children = itemChildren(item);
+        const expanded = isExpanded(item);
 
         const treeRow = {
+          onCollapse: () => toggle(item),
           props: {
-            isExpanded: true,
+            isExpanded: expanded,
             isDetailsExpanded: true,
+            isHidden: hidden,
             "aria-level": level,
             "aria-posinset": itemIdx + 1,
             "aria-setsize": children?.length || 0
@@ -101,7 +122,7 @@ export default function TreeTable({
         return (
           <React.Fragment key={itemIdx}>
             <TreeRowWrapper {...rowProps}>{renderColumns(item, treeRow)}</TreeRowWrapper>
-            { renderRows(children, level + 1)}
+            { renderRows(children, level + 1, !expanded)}
           </React.Fragment>
         );
       })

From 4e002fedf0b930030b5c15ccfd2fb7fc0a5a5abe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Mon, 8 Apr 2024 15:09:05 +0100
Subject: [PATCH 08/13] web: Fix result to show all devices as expanded

---
 web/src/components/storage/ProposalResultSection.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/components/storage/ProposalResultSection.jsx b/web/src/components/storage/ProposalResultSection.jsx
index 0f4f60249e..b3a74a13c7 100644
--- a/web/src/components/storage/ProposalResultSection.jsx
+++ b/web/src/components/storage/ProposalResultSection.jsx
@@ -180,6 +180,7 @@ const DevicesTreeTable = ({ devicesManager }) => {
   };
 
   const renderMountPoint = (item) => item.sid && <em>{item.filesystem?.mountPath}</em>;
+  const devices = devicesManager.usedDevices();
 
   return (
     <TreeTable
@@ -189,7 +190,8 @@ const DevicesTreeTable = ({ devicesManager }) => {
         { title: _("Details"), content: renderDetails, classNames: "details-column" },
         { title: _("Size"), content: renderSize, classNames: "sizes-column" }
       ]}
-      items={devicesManager.usedDevices()}
+      items={devices}
+      expandedItems={devices}
       itemChildren={d => deviceChildren(d)}
       rowClassNames={(item) => {
         if (!item.sid) return "dimmed-row";

From 4e048e79c36eb153f16de55110b6dfe16382b2dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Mon, 8 Apr 2024 15:12:18 +0100
Subject: [PATCH 09/13] web: Add component SpacePolicyDialog

---
 web/src/assets/styles/blocks.scss             |   9 +-
 .../storage/ProposalSettingsSection.jsx       |  93 ++++-
 .../storage/ProposalSettingsSection.test.jsx  |  41 ++
 .../components/storage/SpaceActionsTable.jsx  | 184 +++++++++
 .../components/storage/SpacePolicyDialog.jsx  | 176 +++++++++
 .../storage/SpacePolicyDialog.test.jsx        | 351 ++++++++++++++++++
 web/src/components/storage/index.js           |   2 +
 web/src/components/storage/utils.js           |  60 +++
 8 files changed, 900 insertions(+), 16 deletions(-)
 create mode 100644 web/src/components/storage/SpaceActionsTable.jsx
 create mode 100644 web/src/components/storage/SpacePolicyDialog.jsx
 create mode 100644 web/src/components/storage/SpacePolicyDialog.test.jsx

diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
index 50b32062af..7b4bd2874e 100644
--- a/web/src/assets/styles/blocks.scss
+++ b/web/src/assets/styles/blocks.scss
@@ -526,9 +526,7 @@ table[data-type="agama/tree-table"] {
   }
 }
 
-// FIXME: use a single selector
-table.devices-table,
-table.proposal-result {
+table.devices-table {
   tr.dimmed-row {
     background-color: #fff;
     opacity: 0.8;
@@ -538,8 +536,11 @@ table.proposal-result {
       color: var(--color-gray-dimmed);
       padding-block: 0;
     }
-
   }
+}
+
+table.proposal-result {
+  @extend .devices-table;
 
   /**
    * Temporary hack because the collapse/expand callback was not given to the
diff --git a/web/src/components/storage/ProposalSettingsSection.jsx b/web/src/components/storage/ProposalSettingsSection.jsx
index 2132ea6c07..49f9034b1e 100644
--- a/web/src/components/storage/ProposalSettingsSection.jsx
+++ b/web/src/components/storage/ProposalSettingsSection.jsx
@@ -23,12 +23,12 @@ import React, { useEffect, useState } from "react";
 import { Button, Checkbox, Form, Skeleton, Switch, Tooltip } from "@patternfly/react-core";
 
 import { sprintf } from "sprintf-js";
-import { _ } from "~/i18n";
-import { BootSelectionDialog, ProposalVolumes, ProposalSpacePolicyField } from "~/components/storage";
+import { _, n_ } from "~/i18n";
+import { BootSelectionDialog, ProposalVolumes, SpacePolicyDialog } from "~/components/storage";
 import { If, PasswordAndConfirmationInput, Section, Popup } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { noop } from "~/utils";
-import { hasFS, deviceLabel } from "~/components/storage/utils";
+import { hasFS, deviceLabel, SPACE_POLICIES } from "~/components/storage/utils";
 
 /**
  * @typedef {import ("~/client/storage").ProposalManager.ProposalSettings} ProposalSettings
@@ -332,6 +332,72 @@ const BootConfigField = ({
   );
 };
 
+/**
+ * Allows to select the space policy.
+ * @component
+ *
+ * @param {object} props
+ * @param {SpacePolicy|undefined} props.policy
+ * @param {SpaceAction[]} props.actions
+ * @param {StorageDevice[]} props.devices
+ * @param {boolean} props.isLoading
+ * @param {(config: SpacePolicyConfig) => void} props.onChange
+ *
+ * @typedef {object} SpacePolicyConfig
+ * @property {SpacePolicy} spacePolicy
+ * @property {SpaceAction[]} spaceActions
+ */
+const SpacePolicyField = ({
+  policy,
+  actions,
+  devices,
+  isLoading,
+  onChange
+}) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const openDialog = () => setIsDialogOpen(true);
+
+  const closeDialog = () => setIsDialogOpen(false);
+
+  const onAccept = ({ spacePolicy, spaceActions }) => {
+    closeDialog();
+    onChange({ spacePolicy, spaceActions });
+  };
+
+  const label = () => {
+    // eslint-disable-next-line agama-i18n/string-literals
+    if (policy.summaryLabels.length === 1) return _(policy.summaryLabels[0]);
+
+    // eslint-disable-next-line agama-i18n/string-literals
+    return sprintf(n_(policy.summaryLabels[0], policy.summaryLabels[1], devices.length), devices.length);
+  };
+
+  if (isLoading || !policy) {
+    return <Skeleton screenreaderText={_("Waiting for information about space policy")} width="25%" />;
+  }
+
+  return (
+    <div className="split">
+      <span>{_("Find space")}</span>
+      <Button variant="link" isInline onClick={openDialog}>{label()}</Button>
+      <If
+        condition={isDialogOpen}
+        then={
+          <SpacePolicyDialog
+            isOpen
+            policy={policy}
+            actions={actions}
+            devices={devices}
+            onAccept={onAccept}
+            onCancel={closeDialog}
+          />
+        }
+      />
+    </div>
+  );
+};
+
 /**
  * Section for editing the proposal settings
  * @component
@@ -374,8 +440,11 @@ export default function ProposalSettingsSection({
     onChange({ volumes });
   };
 
-  const changeSpacePolicy = (policy, actions) => {
-    onChange({ spacePolicy: policy, spaceActions: actions });
+  const changeSpacePolicy = ({ spacePolicy, spaceActions }) => {
+    onChange({
+      spacePolicy: spacePolicy.id,
+      spaceActions
+    });
   };
 
   const changeBoot = ({ configureBoot, bootDevice }) => {
@@ -385,12 +454,12 @@ export default function ProposalSettingsSection({
     });
   };
 
+  const lvm = settings.target === "newLvmVg" || settings.target === "reusedLvmVg";
   const encryption = settings.encryptionPassword !== undefined && settings.encryptionPassword.length > 0;
-
-  const { volumes = [], installationDevices = [] } = settings;
-
+  const { volumes = [], installationDevices = [], spaceActions = [] } = settings;
   const bootDevice = availableDevices.find(d => d.name === settings.bootDevice);
   const defaultBootDevice = availableDevices.find(d => d.name === settings.defaultBootDevice);
+  const spacePolicy = SPACE_POLICIES.find(p => p.id === settings.spacePolicy);
 
   // Templates for already existing mount points are filtered out
   const usefulTemplates = () => {
@@ -418,7 +487,7 @@ export default function ProposalSettingsSection({
         <ProposalVolumes
           volumes={volumes}
           templates={usefulTemplates()}
-          options={{ lvm: settings.lvm, encryption }}
+          options={{ lvm, encryption }}
           isLoading={isLoading && settings.volumes === undefined}
           onChange={changeVolumes}
         />
@@ -430,9 +499,9 @@ export default function ProposalSettingsSection({
           isLoading={isLoading}
           onChange={changeBoot}
         />
-        <ProposalSpacePolicyField
-          policy={settings.spacePolicy}
-          actions={settings.spaceActions}
+        <SpacePolicyField
+          policy={spacePolicy}
+          actions={spaceActions}
           devices={installationDevices}
           isLoading={isLoading}
           onChange={changeSpacePolicy}
diff --git a/web/src/components/storage/ProposalSettingsSection.test.jsx b/web/src/components/storage/ProposalSettingsSection.test.jsx
index 29f7fc4723..2b15463f95 100644
--- a/web/src/components/storage/ProposalSettingsSection.test.jsx
+++ b/web/src/components/storage/ProposalSettingsSection.test.jsx
@@ -237,3 +237,44 @@ describe("Encryption field", () => {
     });
   });
 });
+
+describe("Space policy field", () => {
+  describe("if there is no space policy", () => {
+    beforeEach(() => {
+      props.settings = {};
+    });
+
+    it("does not render the space policy field", () => {
+      plainRender(<ProposalSettingsSection {...props} />);
+
+      expect(screen.queryByLabelText("Find space")).toBeNull();
+    });
+  });
+
+  describe("if there is a space policy", () => {
+    beforeEach(() => {
+      props.settings = {
+        spacePolicy: "delete"
+      };
+    });
+
+    it("renders the button with a text according to given policy", () => {
+      const { rerender } = plainRender(<ProposalSettingsSection {...props} />);
+      screen.getByRole("button", { name: /deleting/ });
+      rerender(<ProposalSettingsSection settings={{ spacePolicy: "resize" }} />);
+      screen.getByRole("button", { name: /shrinking/ });
+    });
+
+    it("allows to change the policy", async () => {
+      const { user } = plainRender(<ProposalSettingsSection {...props} />);
+      const button = screen.getByRole("button", { name: /deleting all content/ });
+
+      await user.click(button);
+
+      const popup = await screen.findByRole("dialog");
+      within(popup).getByText("Find space");
+      const cancel = within(popup).getByRole("button", { name: "Cancel" });
+      await user.click(cancel);
+    });
+  });
+});
diff --git a/web/src/components/storage/SpaceActionsTable.jsx b/web/src/components/storage/SpaceActionsTable.jsx
new file mode 100644
index 0000000000..f78d044040
--- /dev/null
+++ b/web/src/components/storage/SpaceActionsTable.jsx
@@ -0,0 +1,184 @@
+/*
+ * 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 { FormSelect, FormSelectOption } from "@patternfly/react-core";
+
+import { _ } from "~/i18n";
+import { FilesystemLabel } from "~/components/storage";
+import { deviceChildren, deviceSize } from '~/components/storage/utils';
+import { If, Tag, TreeTable } from "~/components/core";
+import { sprintf } from "sprintf-js";
+
+/**
+ * @typedef {import ("~/client/storage").SpaceAction} SpaceAction
+ * @typedef {import ("~/client/storage").StorageDevice} StorageDevice
+ */
+
+/**
+ * Column content.
+ * @component
+ *
+ * @param {object} props
+ * @param {StorageDevice} props.device
+ */
+const DeviceName = ({ device }) => {
+  let name = device.sid && device.name;
+  // NOTE: returning a fragment here to avoid a weird React complaint when using a PF/Table +
+  // treeRow props.
+  if (!name) return <></>;
+
+  if (["partition"].includes(device.type))
+    name = name.split("/").pop();
+
+  return (
+    <span>{name}</span>
+  );
+};
+
+/**
+ * Column content.
+ * @component
+ *
+ * @param {object} props
+ * @param {StorageDevice} props.device
+ */
+const DeviceDetails = ({ device }) => {
+  if (!device.sid) return _("Unused space");
+
+  const renderContent = (device) => {
+    if (!device.partitionTable && device.systems?.length > 0)
+      return device.systems.join(", ");
+
+    return device.description;
+  };
+
+  const renderPTableType = (device) => {
+    const type = device.partitionTable?.type;
+    if (type) return <Tag><b>{type.toUpperCase()}</b></Tag>;
+  };
+
+  return (
+    <div>{renderContent(device)} <FilesystemLabel device={device} /> {renderPTableType(device)}</div>
+  );
+};
+
+/**
+ * Column content.
+ * @component
+ *
+ * @param {object} props
+ * @param {StorageDevice} props.device
+ */
+const DeviceSizeDetails = ({ device }) => {
+  if (!device.sid || device.isDrive || device.recoverableSize === 0) return null;
+
+  return deviceSize(device.recoverableSize);
+};
+
+/**
+ * Column content with the space action for a device.
+ * @component
+ *
+ * @param {object} props
+ * @param {StorageDevice} props.device
+ * @param {string} props.action - Possible values: "force_delete", "resize" or "keep".
+ * @param {boolean} [props.isDisabled=false]
+ * @param {(action: SpaceAction) => void} [props.onChange]
+ */
+const DeviceAction = ({ device, action, isDisabled = false, onChange }) => {
+  if (!device.sid || device.partitionTable) return null;
+
+  const changeAction = (_, action) => onChange({ device: device.name, action });
+
+  return (
+    <FormSelect
+      value={action}
+      isDisabled={isDisabled}
+      onChange={changeAction}
+      aria-label={
+        /* TRANSLATORS: %s is replaced by a device name (e.g., /dev/sda) */
+        sprintf(_("Space action selector for %s"), device.name)
+      }
+    >
+      <FormSelectOption value="force_delete" label={_("Delete")} />
+      {/* Resize action does not make sense for drives, so it is filtered out. */}
+      <If
+        condition={!device.isDrive}
+        then={<FormSelectOption value="resize" label={_("Allow resize")} />}
+      />
+      <FormSelectOption value="keep" label={_("Do not modify")} />
+    </FormSelect>
+  );
+};
+
+/**
+ * Table for selecting the space actions of the given devices.
+ * @component
+ *
+ * @param {object} props
+ * @param {StorageDevice[]} props.devices
+ * @param {StorageDevice[]} [props.expandedDevices=[]] - Initially expanded devices.
+ * @param {boolean} [props.isActionDisabled=false] - Whether the action selector is disabled.
+ * @param {(device: StorageDevice) => string} props.deviceAction - Gets the action for a device.
+ * @param {(action: SpaceAction) => void} props.onActionChange
+ */
+export default function SpaceActionsTable({
+  devices,
+  expandedDevices = [],
+  isActionDisabled = false,
+  deviceAction,
+  onActionChange,
+}) {
+  const columns = [
+    { title: _("Device"), content: (device) => <DeviceName device={device} /> },
+    { title: _("Details"), content: (device) => <DeviceDetails device={device} /> },
+    { title: _("Size"), content: (device) => deviceSize(device.size) },
+    { title: _("Shrinkable"), content: (device) => <DeviceSizeDetails device={device} /> },
+    {
+      title: _("Action"),
+      content: (device) => (
+        <DeviceAction
+          device={device}
+          action={deviceAction(device)}
+          isDisabled={isActionDisabled}
+          onChange={onActionChange}
+        />
+      )
+    }
+  ];
+
+  return (
+    <TreeTable
+      columns={columns}
+      items={devices}
+      aria-label={_("Actions to find space")}
+      expandedItems={expandedDevices}
+      itemChildren={d => deviceChildren(d)}
+      rowClassNames={(item) => {
+        if (!item.sid) return "dimmed-row";
+      }}
+      className="devices-table"
+    />
+  );
+}
diff --git a/web/src/components/storage/SpacePolicyDialog.jsx b/web/src/components/storage/SpacePolicyDialog.jsx
new file mode 100644
index 0000000000..6de1a55a47
--- /dev/null
+++ b/web/src/components/storage/SpacePolicyDialog.jsx
@@ -0,0 +1,176 @@
+/*
+ * 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, { useEffect, useState } from "react";
+import { Form } from "@patternfly/react-core";
+
+import { _ } from "~/i18n";
+import { SPACE_POLICIES } from '~/components/storage/utils';
+import { If, OptionsPicker, Popup } from "~/components/core";
+import { noop } from "~/utils";
+import { SpaceActionsTable } from '~/components/storage';
+
+/**
+ * @typedef {import ("~/client/storage").SpaceAction} SpaceAction
+ * @typedef {import ("~/components/storage/utils").SpacePolicy} SpacePolicy
+ * @typedef {import ("~/client/storage").StorageDevice} StorageDevice
+ */
+
+/**
+ * Widget to allow user picking desired policy to make space.
+ * @component
+ *
+ * @param {object} props
+ * @param {SpacePolicy} props.currentPolicy
+ * @param {(policy: SpacePolicy) => void} [props.onChange]
+ */
+const SpacePolicyPicker = ({ currentPolicy, onChange = noop }) => {
+  return (
+    <OptionsPicker>
+      {/* eslint-disable agama-i18n/string-literals */}
+      {SPACE_POLICIES.map((policy) => {
+        return (
+          <OptionsPicker.Option
+            key={policy.id}
+            title={_(policy.label)}
+            body={_(policy.description)}
+            onClick={() => onChange(policy)}
+            isSelected={currentPolicy?.id === policy.id}
+          />
+        );
+      })}
+      {/* eslint-enable agama-i18n/string-literals */}
+    </OptionsPicker>
+  );
+};
+
+/**
+ * Renders a dialog that allows the user to select the space policy and actions.
+ * @component
+ *
+ * @param {object} props
+ * @param {SpacePolicy} props.policy
+ * @param {SpaceAction[]} props.actions
+ * @param {StorageDevice[]} props.devices
+ * @param {boolean} [props.isOpen=false]
+ * @param {() => void} [props.onCancel=noop]
+ * @param {(spaceConfig: SpaceConfig) => void} [props.onAccept=noop]
+ *
+ * @typedef {object} SpaceConfig
+ * @property {SpacePolicy} spacePolicy
+ * @property {SpaceAction[]} spaceActions
+ */
+export default function SpacePolicyDialog({
+  policy: defaultPolicy,
+  actions: defaultActions,
+  devices,
+  isOpen,
+  onCancel = noop,
+  onAccept = noop,
+  ...props
+}) {
+  const [policy, setPolicy] = useState(defaultPolicy);
+  const [actions, setActions] = useState(defaultActions);
+  const [customUsed, setCustomUsed] = useState(false);
+  const [expandedDevices, setExpandedDevices] = useState([]);
+
+  useEffect(() => {
+    if (policy.id === "custom") setExpandedDevices(devices);
+  }, [devices, policy, setExpandedDevices]);
+
+  // The selectors for the space action have to be initialized always to the same value
+  // (e.g., "keep") when the custom policy is selected for first time. The following two useEffect
+  // ensures that.
+
+  // Stores whether the custom policy has been used.
+  useEffect(() => {
+    if (policy.id === "custom" && !customUsed) setCustomUsed(true);
+  }, [policy, customUsed, setCustomUsed]);
+
+  // Resets actions (i.e., sets everything to "keep") if the custom policy has not been used yet.
+  useEffect(() => {
+    if (policy.id !== "custom" && !customUsed) setActions([]);
+  }, [policy, customUsed, setActions]);
+
+  // Generates the action value according to the policy.
+  const deviceAction = (device) => {
+    let action;
+
+    if (policy.id === "custom") {
+      action = actions.find(a => a.device === device.name)?.action || "keep";
+    } else {
+      const policyAction = { delete: "force_delete", resize: "resize", keep: "keep" };
+      action = policyAction[policy.id];
+    }
+
+    // For a drive device (e.g., Disk, RAID) it does not make sense to offer the resize action.
+    // At this moment, the Agama backend generates a resize action for drives if the policy is set
+    // to 'resize'. In that cases, the action is converted here to 'keep'.
+    return ((device.isDrive && action === "resize") ? "keep" : action);
+  };
+
+  const changeActions = (spaceAction) => {
+    const spaceActions = actions.filter(a => a.device !== spaceAction.device);
+    if (spaceAction.action !== "keep") spaceActions.push(spaceAction);
+
+    setActions(spaceActions);
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    onAccept({ spacePolicy: policy, spaceActions: actions });
+  };
+
+  const description = _("Allocating the file systems might need to find free space \
+in the devices listed below. Choose how to do it.");
+
+  return (
+    <Popup
+      title={_("Find space")}
+      description={description}
+      isOpen={isOpen}
+      variant="medium"
+      {...props}
+    >
+      <Form id="space-policy-form" onSubmit={onSubmit}>
+        <SpacePolicyPicker currentPolicy={policy} onChange={setPolicy} />
+        <If
+          condition={devices.length > 0}
+          then={
+            <SpaceActionsTable
+              devices={devices}
+              expandedDevices={expandedDevices}
+              deviceAction={deviceAction}
+              isActionDisabled={policy.id !== "custom"}
+              onActionChange={changeActions}
+            />
+          }
+        />
+      </Form>
+      <Popup.Actions>
+        <Popup.Confirm form="space-policy-form" type="submit" />
+        <Popup.Cancel onClick={onCancel} />
+      </Popup.Actions>
+    </Popup>
+  );
+}
diff --git a/web/src/components/storage/SpacePolicyDialog.test.jsx b/web/src/components/storage/SpacePolicyDialog.test.jsx
new file mode 100644
index 0000000000..0c513c5511
--- /dev/null
+++ b/web/src/components/storage/SpacePolicyDialog.test.jsx
@@ -0,0 +1,351 @@
+/*
+ * 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.
+ */
+
+import React from "react";
+import { screen, within } from "@testing-library/react";
+import { plainRender, resetLocalStorage } from "~/test-utils";
+import { SPACE_POLICIES } from "~/components/storage/utils";
+import { SpacePolicyDialog } from "~/components/storage";
+
+const sda = {
+  sid: 59,
+  isDrive: true,
+  type: "disk",
+  vendor: "Micron",
+  model: "Micron 1100 SATA",
+  driver: ["ahci", "mmcblk"],
+  bus: "IDE",
+  busId: "",
+  transport: "usb",
+  dellBOSS: false,
+  sdCard: true,
+  active: true,
+  name: "/dev/sda",
+  size: 1024,
+  recoverableSize: 0,
+  systems : [],
+  udevIds: ["ata-Micron_1100_SATA_512GB_12563", "scsi-0ATA_Micron_1100_SATA_512GB"],
+  udevPaths: ["pci-0000:00-12", "pci-0000:00-12-ata"],
+};
+
+const sda1 = {
+  sid: 60,
+  isDrive: false,
+  type: "",
+  active: true,
+  name: "/dev/sda1",
+  size: 512,
+  recoverableSize: 128,
+  systems : [],
+  udevIds: [],
+  udevPaths: []
+};
+
+const sda2 = {
+  sid: 61,
+  isDrive: false,
+  type: "",
+  active: true,
+  name: "/dev/sda2",
+  size: 512,
+  recoverableSize: 0,
+  systems : [],
+  udevIds: [],
+  udevPaths: []
+};
+
+sda.partitionTable = {
+  type: "gpt",
+  partitions: [sda1, sda2],
+  unusedSlots: [{ start: 123, size: 4455666 }],
+  unpartitionedSize: 512
+};
+
+const sdb = {
+  sid: 62,
+  isDrive: true,
+  type: "disk",
+  vendor: "Samsung",
+  model: "Samsung Evo 8 Pro",
+  driver: ["ahci"],
+  bus: "IDE",
+  busId: "",
+  transport: "",
+  dellBOSS: false,
+  sdCard: false,
+  active: true,
+  name: "/dev/sdb",
+  size: 2048,
+  recoverableSize: 0,
+  systems : [],
+  udevIds: [],
+  udevPaths: ["pci-0000:00-19"]
+};
+
+const deletePolicy = SPACE_POLICIES.find(p => p.id === "delete");
+const resizePolicy = SPACE_POLICIES.find(p => p.id === "resize");
+const keepPolicy = SPACE_POLICIES.find(p => p.id === "keep");
+const customPolicy = SPACE_POLICIES.find(p => p.id === "custom");
+
+let props;
+
+const expandRow = async (user, name) => {
+  const row = screen.getByRole("row", { name });
+  const toggler = within(row).getByRole("button", { name: /expand/i });
+  await user.click(toggler);
+};
+
+const checkSpaceActions = async (deviceActions) => {
+  deviceActions.forEach(({ name, action }) => {
+    const row = screen.getByRole("row", { name });
+    const selector = within(row).getByRole("combobox", { name });
+    within(selector).getByRole("option", { name: action, selected: true });
+  });
+};
+
+beforeEach(() => {
+  props = {
+    isOpen: true,
+    policy: keepPolicy,
+    actions: [
+      { device: "/dev/sda1", action: "force_delete" },
+      { device: "/dev/sda2", action: "resize" }
+    ],
+    devices: [sda, sdb],
+    onAccept: jest.fn()
+  };
+
+  resetLocalStorage();
+});
+
+describe("SpacePolicyDialog", () => {
+  it("renders the space policy picker", async () => {
+    plainRender(<SpacePolicyDialog { ...props } />);
+    const picker = screen.getByRole("listbox");
+    within(picker).getByRole("option", { name: /delete/i });
+    within(picker).getByRole("option", { name: /resize/i });
+    within(picker).getByRole("option", { name: /available/i });
+    within(picker).getByRole("option", { name: /custom/i });
+  });
+
+  describe("when there are no installation devices", () => {
+    beforeEach(() => {
+      props.devices = [];
+    });
+
+    it("does not render the policy actions", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      const actionsTree = screen.queryByRole("treegrid", { name: "Actions to find space" });
+      expect(actionsTree).toBeNull();
+    });
+  });
+
+  describe("when there are installation devices", () => {
+    beforeEach(() => {
+      props.devices = [sda, sdb];
+    });
+
+    it("renders the policy actions", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      screen.getByRole("treegrid", { name: "Actions to find space" });
+    });
+  });
+
+  describe.each([
+    { id: 'delete', nameRegexp: /delete/i },
+    { id: 'resize', nameRegexp: /shrink/i },
+    { id: 'keep', nameRegexp: /use available/i }
+  ])("when space policy is '$id'", ({ id, nameRegexp }) => {
+    beforeEach(() => {
+      props.policy = SPACE_POLICIES.find(p => p.id === id);
+    });
+
+    it("only renders '$id' option as selected", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      const picker = screen.getByRole("listbox");
+      within(picker).getByRole("option", { name: nameRegexp, selected: true });
+      expect(within(picker).getAllByRole("option", { selected: false }).length).toEqual(3);
+    });
+
+    it("does not allow to modify the space actions", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      // NOTE: HTML `disabled` attribute removes the element from the a11y tree.
+      // That's why the test is using `hidden: true` here to look for disabled actions.
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
+      // https://testing-library.com/docs/queries/byrole/#hidden
+      // TODO: use a more inclusive way to disable the actions.
+      // https://css-tricks.com/making-disabled-buttons-more-inclusive/
+      const spaceActions = screen.getAllByRole("combobox", { name: /Space action selector/, hidden: true });
+      expect(spaceActions.length).toEqual(3);
+    });
+  });
+
+  describe("when space policy is 'custom'", () => {
+    beforeEach(() => {
+      props.policy = customPolicy;
+    });
+
+    it("only renders 'custom' option as selected", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      const picker = screen.getByRole("listbox");
+      within(picker).getByRole("option", { name: /custom/i, selected: true });
+      expect(within(picker).getAllByRole("option", { selected: false }).length).toEqual(3);
+    });
+
+    it("allows to modify the space actions", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      const spaceActions = screen.getAllByRole("combobox", { name: /Space action selector/ });
+      expect(spaceActions.length).toEqual(3);
+    });
+  });
+
+  describe("Device action", () => {
+    beforeEach(() => {
+      props.policy = customPolicy;
+    });
+
+    it("renders the space actions selector for devices without partition table", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      // sda has partition table, the selector shouldn't be found
+      const sdaRow = screen.getByRole("row", { name: /sda gpt/i });
+      const sdaActionsSelector = within(sdaRow).queryByRole("combobox");
+      expect(sdaActionsSelector).toBeNull();
+      // Unused space, the selector shouldn't be found
+      const unusedRow = screen.getByRole("row", { name: /unused space/i });
+      const unusedActionsSelector = within(unusedRow).queryByRole("combobox");
+      expect(unusedActionsSelector).toBeNull();
+      // sdb does not have partition table, selector should be there
+      const sdbRow = screen.getByRole("row", { name: /sdb/ });
+      within(sdbRow).getByRole("combobox");
+    });
+
+    it("does not renders the 'resize' option for drives", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      const sdbRow = screen.getByRole("row", { name: /sdb/ });
+      const spaceActionsSelector = within(sdbRow).getByRole("combobox");
+      const resizeOption = within(spaceActionsSelector).queryByRole("option", { name: /resize/ });
+      expect(resizeOption).toBeNull();
+    });
+
+    it("renders the 'resize' option for devices other than drives", async () => {
+      plainRender(<SpacePolicyDialog { ...props } />);
+      const sda1Row = screen.getByRole("row", { name: /sda1/ });
+      const spaceActionsSelector = within(sda1Row).getByRole("combobox");
+      within(spaceActionsSelector).getByRole("option", { name: /resize/ });
+    });
+
+    describe("when space policy is 'delete'", () => {
+      beforeEach(() => {
+        props.policy = deletePolicy;
+      });
+
+      it("renders as selected the delete option", async () => {
+        const { user } = plainRender(<SpacePolicyDialog { ...props } />);
+        await expandRow(user, /sda/);
+        await checkSpaceActions([
+          { name: /sda1/, action: /delete/i },
+          { name: /sda2/, action: /delete/i }
+        ]);
+      });
+    });
+
+    describe("when space policy is 'resize'", () => {
+      beforeEach(() => {
+        props.policy = resizePolicy;
+      });
+
+      it("renders as selected the resize option", async () => {
+        const { user } = plainRender(<SpacePolicyDialog { ...props } />);
+        await expandRow(user, /sda/);
+        await checkSpaceActions([
+          { name: /sda1/, action: /resize/i },
+          { name: /sda2/, action: /resize/i }
+        ]);
+      });
+    });
+
+    describe("when space policy is 'keep'", () => {
+      beforeEach(() => {
+        props.policy = keepPolicy;
+      });
+
+      it("renders as selected the keep option", async () => {
+        const { user } = plainRender(<SpacePolicyDialog { ...props } />);
+        await expandRow(user, /sda/);
+        await checkSpaceActions([
+          { name: /sda1/, action: /not modify/i },
+          { name: /sda2/, action: /not modify/i }
+        ]);
+      });
+    });
+
+    describe("when space policy is 'custom'", () => {
+      beforeEach(() => {
+        props.policy = customPolicy;
+      });
+
+      it("renders as selected the option matching the given device space action", async () => {
+        plainRender(<SpacePolicyDialog { ...props } />);
+        await checkSpaceActions([
+          { name: /sda1/, action: /delete/i },
+          { name: /sda2/, action: /resize/i }
+        ]);
+      });
+    });
+  });
+
+  it("triggers the onAccept callback when user accepts the dialog", async () => {
+    const { user } = plainRender(<SpacePolicyDialog { ...props } />);
+
+    // Select 'custom'
+    const picker = screen.getByRole("listbox");
+    await user.selectOptions(
+      picker,
+      within(picker).getByRole("option", { name: /custom/i })
+    );
+
+    // Select custom actions
+    const sda1Row = screen.getByRole("row", { name: /sda1/ });
+    const sda1Select = within(sda1Row).getByRole("combobox");
+    await user.selectOptions(
+      sda1Select,
+      within(sda1Select).getByRole("option", { name: /delete/i })
+    );
+    const sda2Row = screen.getByRole("row", { name: /sda2/ });
+    const sda2Select = within(sda2Row).getByRole("combobox");
+    await user.selectOptions(
+      sda2Select,
+      within(sda2Select).getByRole("option", { name: /resize/i })
+    );
+
+    // Accept the result
+    const acceptButton = screen.getByRole("button", { name: "Confirm" });
+    await user.click(acceptButton);
+
+    expect(props.onAccept).toHaveBeenCalledWith({
+      spacePolicy: customPolicy,
+      spaceActions: expect.arrayContaining([
+        { action: "resize", device: "/dev/sda2" },
+        { action: "force_delete", device: "/dev/sda1" }
+      ])
+    });
+  });
+});
diff --git a/web/src/components/storage/index.js b/web/src/components/storage/index.js
index e16fd5df5e..eda9195002 100644
--- a/web/src/components/storage/index.js
+++ b/web/src/components/storage/index.js
@@ -40,3 +40,5 @@ export { default as BootSelectionDialog } from "./BootSelectionDialog";
 export { default as DeviceSelectionDialog } from "./DeviceSelectionDialog";
 export { default as DeviceSelectorTable } from "./DeviceSelectorTable";
 export { default as DevicesFormSelect } from "./DevicesFormSelect";
+export { default as SpacePolicyDialog } from "./SpacePolicyDialog";
+export { default as SpaceActionsTable } from "./SpaceActionsTable";
diff --git a/web/src/components/storage/utils.js b/web/src/components/storage/utils.js
index 7817acd4e1..6e45ad190c 100644
--- a/web/src/components/storage/utils.js
+++ b/web/src/components/storage/utils.js
@@ -41,6 +41,15 @@ import { N_ } from "~/i18n";
  * @property {string|undefined} unit - The size unit (MiB, GiB, ...)
  */
 
+/**
+ * @typedef SpacePolicy
+ * @type {object}
+ * @property {string} id
+ * @property {string} label
+ * @property {string} description
+ * @property {string[]} summaryLabels
+ */
+
 const SIZE_METHODS = Object.freeze({
   AUTO: "auto",
   MANUAL: "fixed",
@@ -57,6 +66,56 @@ const SIZE_UNITS = Object.freeze({
 
 const DEFAULT_SIZE_UNIT = "GiB";
 
+/** @type {SpacePolicy[]} */
+const SPACE_POLICIES = [
+  {
+    id: "delete",
+    label: N_("Delete current content"),
+    description: N_("All partitions will be removed and any data in the disks will be lost."),
+    summaryLabels: [
+      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+      // would read as "Find space deleting all content[...]"
+      N_("deleting all content of the installation device"),
+      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+      // would read as "Find space deleting all content[...]"
+      N_("deleting all content of the %d selected disks")
+    ]
+  },
+  {
+    id: "resize",
+    label: N_("Shrink existing partitions"),
+    description: N_("The data is kept, but the current partitions will be resized as needed."),
+    summaryLabels: [
+      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+      // would read as "Find space shrinking partitions[...]"
+      N_("shrinking partitions of the installation device"),
+      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+      // would read as "Find space shrinking partitions[...]"
+      N_("shrinking partitions of the %d selected disks")
+    ]
+  },
+  {
+    id: "keep",
+    label: N_("Use available space"),
+    description: N_("The data is kept. Only the space not assigned to any partition will be used."),
+    summaryLabels: [
+      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+      // would read as "Find space without modifying any partition".
+      N_("without modifying any partition")
+    ]
+  },
+  {
+    id: "custom",
+    label: N_("Custom"),
+    description: N_("Select what to do with each partition."),
+    summaryLabels: [
+      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
+      // would read as "Find space performing a custom set of actions".
+      N_("performing a custom set of actions")
+    ]
+  }
+];
+
 /**
  * Convenience method for generating a size object based on given input
  *
@@ -221,6 +280,7 @@ export {
   DEFAULT_SIZE_UNIT,
   SIZE_METHODS,
   SIZE_UNITS,
+  SPACE_POLICIES,
   deviceLabel,
   deviceChildren,
   deviceSize,

From ff1110759d1819ed4c8bdac844342b15c4ab1b99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Mon, 8 Apr 2024 15:12:59 +0100
Subject: [PATCH 10/13] web: Check types for ProposalSettingsSection

---
 .../storage/ProposalSettingsSection.jsx       | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/web/src/components/storage/ProposalSettingsSection.jsx b/web/src/components/storage/ProposalSettingsSection.jsx
index 49f9034b1e..3ae852af7b 100644
--- a/web/src/components/storage/ProposalSettingsSection.jsx
+++ b/web/src/components/storage/ProposalSettingsSection.jsx
@@ -19,6 +19,8 @@
  * find current contact information at www.suse.com.
  */
 
+// @ts-check
+
 import React, { useEffect, useState } from "react";
 import { Button, Checkbox, Form, Skeleton, Switch, Tooltip } from "@patternfly/react-core";
 
@@ -31,9 +33,11 @@ import { noop } from "~/utils";
 import { hasFS, deviceLabel, SPACE_POLICIES } from "~/components/storage/utils";
 
 /**
- * @typedef {import ("~/client/storage").ProposalManager.ProposalSettings} ProposalSettings
- * @typedef {import ("~/client/storage").DevicesManager.StorageDevice} StorageDevice
- * @typedef {import ("~/client/storage").ProposalManager.Volume} Volume
+ * @typedef {import ("~/client/storage").ProposalSettings} ProposalSettings
+ * @typedef {import ("~/client/storage").SpaceAction} SpaceAction
+ * @typedef {import ("~/components/storage/utils").SpacePolicy} SpacePolicy
+ * @typedef {import ("~/client/storage").StorageDevice} StorageDevice
+ * @typedef {import ("~/client/storage").Volume} Volume
  */
 
 /**
@@ -116,10 +120,11 @@ const EncryptionSettingsForm = ({
  *
  * @param {object} props
  * @param {ProposalSettings} props.settings - Settings used for calculating a proposal.
- * @param {onChangeFn} [props.onChange=noop] - On change callback
+ * @param {(config: SnapshotsConfig) => void} [props.onChange=noop] - On change callback
  *
- * @callback onChangeFn
- * @param {object} settings
+ * @typedef {object} SnapshotsConfig
+ * @property {boolean} active
+ * @property {ProposalSettings} settings
  */
 const SnapshotsField = ({
   settings,
@@ -406,10 +411,9 @@ const SpacePolicyField = ({
  * @param {ProposalSettings} props.settings
  * @param {StorageDevice[]} [props.availableDevices=[]]
  * @param {String[]} [props.encryptionMethods=[]]
- * @param {onChangeFn} [props.onChange=noop]
- *
- * @callback onChangeFn
- * @param {object} settings
+ * @param {Volume[]} [props.volumeTemplates=[]]
+ * @param {boolean} [props.isLoading=false]
+ * @param {(settings: object) => void} [props.onChange=noop]
  */
 export default function ProposalSettingsSection({
   settings,

From d20be729d91b44762f16c0772598b425de6046bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Mon, 8 Apr 2024 15:15:57 +0100
Subject: [PATCH 11/13] web: Delete unused component

---
 .../storage/ProposalSpacePolicyField.jsx      | 554 ------------------
 .../storage/ProposalSpacePolicyField.test.jsx | 359 ------------
 web/src/components/storage/index.js           |   1 -
 3 files changed, 914 deletions(-)
 delete mode 100644 web/src/components/storage/ProposalSpacePolicyField.jsx
 delete mode 100644 web/src/components/storage/ProposalSpacePolicyField.test.jsx

diff --git a/web/src/components/storage/ProposalSpacePolicyField.jsx b/web/src/components/storage/ProposalSpacePolicyField.jsx
deleted file mode 100644
index 17455afb4b..0000000000
--- a/web/src/components/storage/ProposalSpacePolicyField.jsx
+++ /dev/null
@@ -1,554 +0,0 @@
-/*
- * 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.
- */
-
-import React, { useEffect, useState } from "react";
-import { Button, Form, FormSelect, FormSelectOption, Skeleton } from "@patternfly/react-core";
-
-import { _, N_, n_ } from "~/i18n";
-import { deviceSize } from '~/components/storage/utils';
-import { If, OptionsPicker, Popup, SectionSkeleton } from "~/components/core";
-import { noop } from "~/utils";
-import { sprintf } from "sprintf-js";
-import { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper } from '@patternfly/react-table';
-
-/**
- * @typedef {import ("~/client/storage").ProposalManager.ProposalSettings} ProposalSettings
- * @typedef {import ("~/client/storage").ProposalManager.SpaceAction} SpaceAction
- * @typedef {import ("~/client/storage").DevicesManager.StorageDevice} StorageDevice
- */
-
-/**
- * @typedef SpacePolicy
- * @type {object}
- * @property {string} id
- * @property {string} label
- * @property {string} description
- */
-
-/** @type {SpacePolicy[]} */
-const SPACE_POLICIES = [
-  {
-    id: "delete",
-    label: N_("Delete current content"),
-    description: N_("All partitions will be removed and any data in the disks will be lost."),
-    summaryLabels: [
-      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
-      // would read as "Find space deleting all content[...]"
-      N_("deleting all content of the installation device"),
-      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
-      // would read as "Find space deleting all content[...]"
-      N_("deleting all content of the %d selected disks")
-    ]
-  },
-  {
-    id: "resize",
-    label: N_("Shrink existing partitions"),
-    description: N_("The data is kept, but the current partitions will be resized as needed."),
-    summaryLabels: [
-      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
-      // would read as "Find space shrinking partitions[...]"
-      N_("shrinking partitions of the installation device"),
-      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
-      // would read as "Find space shrinking partitions[...]"
-      N_("shrinking partitions of the %d selected disks")
-    ]
-  },
-  {
-    id: "keep",
-    label: N_("Use available space"),
-    description: N_("The data is kept. Only the space not assigned to any partition will be used."),
-    summaryLabels: [
-      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
-      // would read as "Find space without modifying any partition".
-      N_("without modifying any partition")
-    ]
-  },
-  {
-    id: "custom",
-    label: N_("Custom"),
-    description: N_("Select what to do with each partition."),
-    summaryLabels: [
-      // TRANSLATORS: This is presented next to the label "Find space", so the whole sentence
-      // would read as "Find space performing a custom set of actions".
-      N_("performing a custom set of actions")
-    ]
-  }
-];
-
-// Names of the columns for the policy actions.
-const columnNames = {
-  device: N_("Used device"),
-  content: N_("Details"),
-  size: N_("Size"),
-  details: N_("Size details"),
-  action: N_("Action")
-};
-
-/**
- * Column content with the description of a device.
- * @component
- *
- * @param {object} props
- * @param {StorageDevice} props.device
- */
-const DeviceDescriptionColumn = ({ device }) => {
-  if (device.isDrive || device.type === "lvmVg") return device.name;
-
-  return device.name.split("/").pop();
-};
-
-/**
- * Column content with details about the device.
- * @component
- *
- * @param {object} props
- * @param {StorageDevice} props.device
- */
-const DeviceContentColumn = ({ device }) => {
-  const systems = device.systems;
-  if (systems.length > 0) return systems.join(", ");
-
-  return device.description;
-};
-
-/**
- * Column content with information about the size of the device.
- * @component
- *
- * @param {object} props
- * @param {StorageDevice} props.device
- */
-const DeviceSizeColumn = ({ device }) => {
-  return deviceSize(device.size);
-};
-
-/**
- * Column content with details about the device.
- * @component
- *
- * @param {object} props
- * @param {StorageDevice} props.device
- */
-const DeviceDetailsColumn = ({ device }) => {
-  const UnusedSize = () => {
-    if (device.filesystem) return null;
-
-    const unused = device.partitionTable?.unpartitionedSize || 0;
-    // TRANSLATORS: %s is replaced by a disk size (e.g., 20 GiB)
-    return sprintf(_("%s unused"), deviceSize(unused));
-  };
-
-  const RecoverableSize = () => {
-    const size = device.recoverableSize;
-    if (size === 0) return null;
-
-    // TRANSLATORS: %s is replaced by a disk size (e.g., 2 GiB)
-    return sprintf(_("Shrinkable by %s"), deviceSize(device.recoverableSize));
-  };
-
-  return (
-    <If condition={device.isDrive} then={<UnusedSize />} else={<RecoverableSize />} />
-  );
-};
-
-/**
- * Column content with the space action for a device.
- * @component
- *
- * @param {object} props
- * @param {StorageDevice} props.device
- * @param {string} props.action - Possible values: "force_delete", "resize" or "keep".
- * @param {boolean} [props.isDisabled=false]
- * @param {(action: SpaceAction) => void} [props.onChange]
- */
-const DeviceActionColumn = ({ device, action, isDisabled = false, onChange = noop }) => {
-  const changeAction = (_, action) => onChange({ device: device.name, action });
-
-  // For a drive device (e.g., Disk, RAID) it does not make sense to offer the resize action.
-  // At this moment, the Agama backend generates a resize action for drives if the policy is set to
-  // 'resize'. In that cases, the action is converted here to 'keep'.
-  const value = (device.isDrive && action === "resize") ? "keep" : action;
-
-  return (
-    <FormSelect
-      value={value}
-      isDisabled={isDisabled}
-      onChange={changeAction}
-      aria-label={
-        /* TRANSLATORS: %s is replaced by a device name (e.g., /dev/sda) */
-        sprintf(_("Space action selector for %s"), device.name)
-      }
-    >
-      <FormSelectOption value="force_delete" label={_("Delete")} />
-      {/* Resize action does not make sense for drives, so it is filtered out. */}
-      <If
-        condition={!device.isDrive}
-        then={<FormSelectOption value="resize" label={_("Allow resize")} />}
-      />
-      <FormSelectOption value="keep" label={_("Do not modify")} />
-    </FormSelect>
-  );
-};
-
-/**
- * Row for configuring the space action of a device.
- * @component
- *
- * @param {object} props
- * @param {StorageDevice} props.device
- * @param {ProposalSettings} props.settings
- * @param {number} props.rowIndex - @see {@link https://www.patternfly.org/components/table/#tree-table}
- * @param {number} [props.level=1] - @see {@link https://www.patternfly.org/components/table/#tree-table}
- * @param {number} [props.setSize=0] - @see {@link https://www.patternfly.org/components/table/#tree-table}
- * @param {number} [props.posInSet=0] - @see {@link https://www.patternfly.org/components/table/#tree-table}
- * @param {boolean} [props.isExpanded=false] - @see {@link https://www.patternfly.org/components/table/#tree-table}
- * @param {boolean} [props.isHidden=false] - @see {@link https://www.patternfly.org/components/table/#tree-table}
- * @param {function} [props.onCollapse] - @see {@link https://www.patternfly.org/components/table/#tree-table}
- * @param {(action: SpaceAction) => void} [props.onChange]
- */
-const DeviceRow = ({
-  device,
-  policy,
-  actions,
-  rowIndex,
-  level = 1,
-  setSize = 0,
-  posInSet = 1,
-  isExpanded = false,
-  isHidden = false,
-  onCollapse = noop,
-  onChange = noop
-}) => {
-  // Generates the action value according to the policy.
-  const action = () => {
-    if (policy.id === "custom")
-      return actions.find(a => a.device === device.name)?.action || "keep";
-
-    const policyAction = { delete: "force_delete", resize: "resize", keep: "keep" };
-    return policyAction[policy.id];
-  };
-
-  const isDisabled = policy.id !== "custom";
-  const showAction = !device.partitionTable;
-
-  const treeRow = {
-    onCollapse,
-    rowIndex,
-    props: {
-      isExpanded,
-      isDetailsExpanded: true,
-      isHidden,
-      'aria-level': level,
-      'aria-posinset': posInSet,
-      'aria-setsize': setSize
-    }
-  };
-
-  return (
-    <TreeRowWrapper row={{ props: treeRow.props }}>
-      {/* eslint-disable agama-i18n/string-literals */}
-      <Td dataLabel={_(columnNames.device)} treeRow={treeRow}>
-        <DeviceDescriptionColumn device={device} />
-      </Td>
-      <Td dataLabel={_(columnNames.content)}><DeviceContentColumn device={device} /></Td>
-      <Td dataLabel={_(columnNames.size)}><DeviceSizeColumn device={device} /></Td>
-      <Td dataLabel={_(columnNames.details)}><DeviceDetailsColumn device={device} /></Td>
-      <Td dataLabel={_(columnNames.action)}>
-        <If
-          condition={showAction}
-          then={
-            <DeviceActionColumn
-              device={device}
-              action={action()}
-              isDisabled={isDisabled}
-              onChange={onChange}
-            />
-          }
-        />
-      </Td>
-      {/* eslint-enable agama-i18n/string-literals */}
-    </TreeRowWrapper>
-  );
-};
-
-/**
- * Table for configuring the space actions.
- * @component
- *
- * @param {object} props
- * @param {ProposalSettings} props.settings
- * @param {(action: SpaceAction) => void} [props.onChange]
- */
-const SpaceActionsTable = ({ policy, actions, devices, onChange = noop }) => {
-  const [expandedDevices, setExpandedDevices] = useState([]);
-  const [autoExpanded, setAutoExpanded] = useState(false);
-
-  useEffect(() => {
-    const devNames = devices.map(d => d.name);
-    let currentExpanded = devNames.filter(d => expandedDevices.includes(d));
-
-    if (policy.id === "custom" && !autoExpanded) {
-      currentExpanded = [...devNames];
-      setAutoExpanded(true);
-    } else if (policy.id !== "custom" && autoExpanded) {
-      setAutoExpanded(false);
-    }
-
-    if (currentExpanded.sort().toString() !== expandedDevices.sort().toString()) {
-      setExpandedDevices(currentExpanded);
-    }
-  }, [autoExpanded, expandedDevices, setAutoExpanded, setExpandedDevices, policy, devices]);
-
-  const renderRows = () => {
-    const rows = [];
-
-    devices?.forEach((device, index) => {
-      const isExpanded = expandedDevices.includes(device.name);
-      const children = device.partitionTable?.partitions;
-
-      const onCollapse = () => {
-        const otherExpandedDevices = expandedDevices.filter(name => name !== device.name);
-        const expanded = isExpanded ? otherExpandedDevices : [...otherExpandedDevices, device.name];
-        setExpandedDevices(expanded);
-      };
-
-      rows.push(
-        <DeviceRow
-          key={device.name}
-          device={device}
-          policy={policy}
-          actions={actions}
-          rowIndex={rows.length}
-          setSize={children?.length || 0}
-          posInSet={index}
-          isExpanded={isExpanded}
-          onCollapse={onCollapse}
-          onChange={onChange}
-        />
-      );
-
-      children?.forEach((child, index) => {
-        rows.push(
-          <DeviceRow
-            key={child.name}
-            device={child}
-            policy={policy}
-            actions={actions}
-            rowIndex={rows.length}
-            level={2}
-            posInSet={index}
-            isHidden={!isExpanded}
-            onCollapse={onCollapse}
-            onChange={onChange}
-          />
-        );
-      });
-    });
-
-    return rows;
-  };
-
-  return (
-    <Table isTreeTable variant="compact" aria-label={_("Actions to find space")}>
-      <Thead>
-        <Tr>
-          <Th>{columnNames.device}</Th>
-          <Th>{columnNames.content}</Th>
-          <Th>{columnNames.size}</Th>
-          <Th>{columnNames.details}</Th>
-          <Th>{columnNames.action}</Th>
-        </Tr>
-      </Thead>
-      <Tbody>{renderRows()}</Tbody>
-    </Table>
-  );
-};
-
-/**
- * Widget to allow user picking desired policy to make space
- * @component
- *
- * @param {object} props
- * @param {SpacePolicy} props.currentPolicy
- * @param {(policy: string) => void} [props.onChange]
- */
-const SpacePolicyPicker = ({ currentPolicy, onChange = noop }) => {
-  return (
-    <OptionsPicker>
-      {/* eslint-disable agama-i18n/string-literals */}
-      {SPACE_POLICIES.map((policy) => {
-        return (
-          <OptionsPicker.Option
-            key={policy.id}
-            title={_(policy.label)}
-            body={_(policy.description)}
-            onClick={() => onChange(policy)}
-            isSelected={currentPolicy?.id === policy.id}
-          />
-        );
-      })}
-      {/* eslint-enable agama-i18n/string-literals */}
-    </OptionsPicker>
-  );
-};
-
-/**
- * Section for configuring the space policy.
- * @component
- *
- * @param {ProposalSettings} settings
- * @param {boolean} [isLoading=false]
- * @param {(settings: ProposalSettings) => void} [onChange]
- */
-const SpacePolicyForm = ({
-  id,
-  currentPolicy,
-  currentActions,
-  devices,
-  isLoading = false,
-  onSubmit = noop
-}) => {
-  const [policy, setPolicy] = useState(currentPolicy);
-  const [actions, setActions] = useState(currentActions);
-  const [customUsed, setCustomUsed] = useState(false);
-
-  // The selectors for the space action have to be initialized always to the same value
-  // (e.g., "keep") when the custom policy is selected for first time. The following two useEffect
-  // ensures that.
-
-  // Stores whether the custom policy has been used.
-  useEffect(() => {
-    if (policy.id === "custom" && !customUsed) setCustomUsed(true);
-  }, [policy, customUsed, setCustomUsed]);
-
-  // Resets actions (i.e., sets everything to "keep") if the custom policy has not been used yet.
-  useEffect(() => {
-    if (policy.id !== "custom" && !customUsed) setActions([]);
-  }, [policy, customUsed, setActions]);
-
-  const changeActions = (spaceAction) => {
-    const spaceActions = actions.filter(a => a.device !== spaceAction.device);
-    if (spaceAction.action !== "keep") spaceActions.push(spaceAction);
-
-    setActions(spaceActions);
-  };
-
-  const submitForm = (e) => {
-    e.preventDefault();
-    if (policy !== undefined) onSubmit(policy, actions);
-  };
-
-  return (
-    <Form id={id} onSubmit={submitForm}>
-      <If
-        condition={isLoading && policy === undefined}
-        then={<SectionSkeleton numRows={4} />}
-        else={
-          <>
-            <SpacePolicyPicker currentPolicy={policy} onChange={setPolicy} />
-            <If
-              condition={devices.length > 0}
-              then={
-                <SpaceActionsTable
-                  policy={policy}
-                  actions={actions}
-                  devices={devices}
-                  onChange={changeActions}
-                />
-              }
-            />
-          </>
-        }
-      />
-    </Form>
-  );
-};
-
-const SpacePolicyButton = ({ policy, devices, onClick = noop }) => {
-  const Text = () => {
-    // eslint-disable-next-line agama-i18n/string-literals
-    if (policy.summaryLabels.length === 1) return _(policy.summaryLabels[0]);
-
-    // eslint-disable-next-line agama-i18n/string-literals
-    return sprintf(n_(policy.summaryLabels[0], policy.summaryLabels[1], devices.length), devices.length);
-  };
-
-  return <Button variant="link" isInline onClick={onClick}><Text /></Button>;
-};
-
-export default function ProposalSpacePolicyField({
-  policy,
-  actions = [],
-  devices = [],
-  isLoading = false,
-  onChange = noop
-}) {
-  const spacePolicy = SPACE_POLICIES.find(p => p.id === policy) || SPACE_POLICIES[0];
-  const [isFormOpen, setIsFormOpen] = useState(false);
-
-  const openForm = () => setIsFormOpen(true);
-  const closeForm = () => setIsFormOpen(false);
-
-  const acceptForm = (spacePolicy, actions) => {
-    closeForm();
-    onChange(spacePolicy.id, actions);
-  };
-
-  if (isLoading) {
-    return <Skeleton screenreaderText={_("Waiting for information about how to find space")} width="25%" />;
-  }
-
-  const description = _("Allocating the file systems might need to find free space \
-in the devices listed below. Choose how to do it.");
-
-  return (
-    <div className="split">
-      {/* TRANSLATORS: To be completed with the rest of a sentence like "deleting all content" */}
-      <span>{_("Find space")}</span>
-      <SpacePolicyButton policy={spacePolicy} devices={devices} onClick={openForm} />
-      <Popup
-        variant="large"
-        description={description}
-        title={_("Find Space")}
-        isOpen={isFormOpen}
-      >
-        <div className="stack">
-          <SpacePolicyForm
-            id="spacePolicyForm"
-            currentPolicy={spacePolicy}
-            currentActions={actions}
-            devices={devices}
-            onSubmit={acceptForm}
-          />
-        </div>
-        <Popup.Actions>
-          <Popup.Confirm
-            form="spacePolicyForm"
-            type="submit"
-          >
-            {_("Accept")}
-          </Popup.Confirm>
-          <Popup.Cancel onClick={closeForm} />
-        </Popup.Actions>
-      </Popup>
-    </div>
-  );
-}
diff --git a/web/src/components/storage/ProposalSpacePolicyField.test.jsx b/web/src/components/storage/ProposalSpacePolicyField.test.jsx
deleted file mode 100644
index a8b5bc9bc8..0000000000
--- a/web/src/components/storage/ProposalSpacePolicyField.test.jsx
+++ /dev/null
@@ -1,359 +0,0 @@
-/*
- * 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.
- */
-
-import React from "react";
-import { screen, within } from "@testing-library/react";
-import { plainRender, resetLocalStorage } from "~/test-utils";
-import { ProposalSpacePolicyField } from "~/components/storage";
-
-const sda = {
-  sid: "59",
-  isDrive: true,
-  type: "disk",
-  vendor: "Micron",
-  model: "Micron 1100 SATA",
-  driver: ["ahci", "mmcblk"],
-  bus: "IDE",
-  busId: "",
-  transport: "usb",
-  dellBOSS: false,
-  sdCard: true,
-  active: true,
-  name: "/dev/sda",
-  size: 1024,
-  recoverableSize: 0,
-  systems : [],
-  udevIds: ["ata-Micron_1100_SATA_512GB_12563", "scsi-0ATA_Micron_1100_SATA_512GB"],
-  udevPaths: ["pci-0000:00-12", "pci-0000:00-12-ata"],
-};
-
-const sda1 = {
-  sid: "60",
-  isDrive: false,
-  type: "",
-  active: true,
-  name: "/dev/sda1",
-  size: 512,
-  recoverableSize: 128,
-  systems : [],
-  udevIds: [],
-  udevPaths: []
-};
-
-const sda2 = {
-  sid: "61",
-  isDrive: false,
-  type: "",
-  active: true,
-  name: "/dev/sda2",
-  size: 512,
-  recoverableSize: 0,
-  systems : [],
-  udevIds: [],
-  udevPaths: []
-};
-
-sda.partitionTable = {
-  type: "gpt",
-  partitions: [sda1, sda2],
-  unpartitionedSize: 512
-};
-
-const sdb = {
-  sid: "62",
-  isDrive: true,
-  type: "disk",
-  vendor: "Samsung",
-  model: "Samsung Evo 8 Pro",
-  driver: ["ahci"],
-  bus: "IDE",
-  busId: "",
-  transport: "",
-  dellBOSS: false,
-  sdCard: false,
-  active: true,
-  name: "/dev/sdb",
-  size: 2048,
-  recoverableSize: 0,
-  systems : [],
-  udevIds: [],
-  udevPaths: ["pci-0000:00-19"]
-};
-
-let policy;
-let devices;
-let actions;
-
-const openPopup = async (props = {}) => {
-  const allProps = { policy, devices, actions, ...props };
-  const { user } = plainRender(<ProposalSpacePolicyField { ...allProps } />);
-  const button = screen.getByRole("button");
-
-  await user.click(button);
-  const dialog = screen.getByRole("dialog", { name: "Find Space" });
-  return { user, dialog };
-};
-
-const expandRow = async (user, dialog, name) => {
-  const row = within(dialog).getByRole("row", { name });
-  const toggler = within(row).getByRole("button", { name: /expand/i });
-  await user.click(toggler);
-};
-
-const checkSpaceActions = async (deviceActions) => {
-  deviceActions.forEach(({ name, action }) => {
-    const row = screen.getByRole("row", { name });
-    const selector = within(row).getByRole("combobox", { name });
-    within(selector).getByRole("option", { name: action, selected: true });
-  });
-};
-
-beforeEach(() => {
-  devices = [sda, sdb];
-  policy = "keep";
-  actions = [
-    { device: "/dev/sda1", action: "force_delete" },
-    { device: "/dev/sda2", action: "resize" }
-  ];
-
-  resetLocalStorage();
-});
-
-describe("ProposalSpacePolicyField", () => {
-  it("renders a button for opening the space policy dialog", async () => {
-    const { user } = plainRender(<ProposalSpacePolicyField policy={policy} devices={devices} />);
-    const button = screen.getByRole("button");
-
-    await user.click(button);
-
-    screen.getByRole("dialog", { name: "Find Space" });
-  });
-
-  it("renders the button with a text according to given policy", () => {
-    const { rerender } = plainRender(<ProposalSpacePolicyField />);
-    screen.getByRole("button", { name: /deleting/ });
-    rerender(<ProposalSpacePolicyField policy="resize" />);
-    screen.getByRole("button", { name: /shrinking/ });
-  });
-
-  describe("within the dialog", () => {
-    it("renders the space policy picker", async () => {
-      const { dialog } = await openPopup();
-      const picker = within(dialog).getByRole("listbox");
-      within(picker).getByRole("option", { name: /delete/i });
-      within(picker).getByRole("option", { name: /resize/i });
-      within(picker).getByRole("option", { name: /available/i });
-      within(picker).getByRole("option", { name: /custom/i });
-    });
-
-    describe("when there are no installation devices", () => {
-      beforeEach(() => {
-        devices = [];
-      });
-
-      it("does not render the policy actions", async () => {
-        const { dialog } = await openPopup();
-        const actionsTree = within(dialog).queryByRole("treegrid", { name: "Actions to find space" });
-        expect(actionsTree).toBeNull();
-      });
-    });
-
-    describe("when there are installation devices", () => {
-      it("renders the policy actions", async () => {
-        const { dialog } = await openPopup();
-        within(dialog).getByRole("treegrid", { name: "Actions to find space" });
-      });
-    });
-
-    describe.each([
-      { id: 'delete', nameRegexp: /delete/i },
-      { id: 'resize', nameRegexp: /shrink/i },
-      { id: 'keep', nameRegexp: /the space not assigned/i }
-    ])("when space policy is '$id'", ({ id, nameRegexp }) => {
-      beforeEach(() => {
-        policy = id;
-      });
-
-      it("only renders '$id' option as selected", async () => {
-        const { dialog } = await openPopup();
-        const picker = within(dialog).getByRole("listbox");
-        within(picker).getByRole("option", { name: nameRegexp, selected: true });
-        expect(within(picker).getAllByRole("option", { selected: false }).length).toEqual(3);
-      });
-
-      it("does not allow to modify the space actions", async () => {
-        const { dialog } = await openPopup();
-        // NOTE: HTML `disabled` attribute removes the element from the a11y tree.
-        // That's why the test is using `hidden: true` here to look for disabled actions.
-        // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
-        // https://testing-library.com/docs/queries/byrole/#hidden
-        // TODO: use a more inclusive way to disable the actions.
-        // https://css-tricks.com/making-disabled-buttons-more-inclusive/
-        const spaceActions = within(dialog).getAllByRole("combobox", { name: /Space action selector/, hidden: true });
-        expect(spaceActions.length).toEqual(3);
-      });
-    });
-
-    describe("when space policy is 'custom'", () => {
-      beforeEach(() => {
-        policy = "custom";
-      });
-
-      it("only renders 'custom' option as selected", async () => {
-        const { dialog } = await openPopup();
-        const picker = within(dialog).getByRole("listbox");
-        within(picker).getByRole("option", { name: /custom/i, selected: true });
-        expect(within(picker).getAllByRole("option", { selected: false }).length).toEqual(3);
-      });
-
-      it("allows to modify the space actions", async () => {
-        const { dialog } = await openPopup();
-        const spaceActions = within(dialog).getAllByRole("combobox", { name: /Space action selector/ });
-        expect(spaceActions.length).toEqual(3);
-      });
-    });
-
-    describe("DeviceActionColumn", () => {
-      it("renders the space actions selector for devices without partition table", async () => {
-        const { dialog } = await openPopup();
-        const sdaRow = within(dialog).getByRole("row", { name: /sda/ });
-        const sdaActionsSelector = within(sdaRow).queryByRole("combobox", { name: "Space action selector for /dev/sda" });
-        // sda has partition table, the selector shouldn't be found
-        expect(sdaActionsSelector).toBeNull();
-        const sdbRow = screen.getByRole("row", { name: /sdb/ });
-        // sdb does not have partition table, selector should be there
-        within(sdbRow).getByRole("combobox", { name: "Space action selector for /dev/sdb" });
-      });
-
-      it("does not renders the 'resize' option for drives", async () => {
-        const { dialog } = await openPopup();
-        const sdbRow = within(dialog).getByRole("row", { name: /sdb/ });
-        const spaceActionsSelector = within(sdbRow).getByRole("combobox", { name: "Space action selector for /dev/sdb" });
-        const resizeOption = within(spaceActionsSelector).queryByRole("option", { name: /resize/ });
-        expect(resizeOption).toBeNull();
-      });
-
-      it("renders the 'resize' option for devices other than drives", async () => {
-        const { user, dialog } = await openPopup();
-        const sdaRow = within(dialog).getByRole("row", { name: /sda/ });
-        const sdaToggler = within(sdaRow).getByRole("button", { name: /expand/i });
-        await user.click(sdaToggler);
-        const sda1Row = screen.getByRole("row", { name: /sda1/ });
-        const spaceActionsSelector = within(sda1Row).getByRole("combobox", { name: "Space action selector for /dev/sda1" });
-        within(spaceActionsSelector).getByRole("option", { name: /resize/ });
-      });
-
-      describe("when space policy is 'delete'", () => {
-        beforeEach(() => {
-          policy = "delete";
-        });
-
-        it("renders as selected the delete option", async () => {
-          const { user, dialog } = await openPopup();
-          await expandRow(user, dialog, /sda/);
-          await checkSpaceActions([
-            { name: /sda1/, action: /delete/i },
-            { name: /sda2/, action: /delete/i }
-          ]);
-        });
-      });
-
-      describe("when space policy is 'resize'", () => {
-        beforeEach(() => {
-          policy = "resize";
-        });
-
-        it("renders as selected the resize option", async () => {
-          const { user, dialog } = await openPopup();
-          await expandRow(user, dialog, /sda/);
-          await checkSpaceActions([
-            { name: /sda1/, action: /resize/i },
-            { name: /sda2/, action: /resize/i }
-          ]);
-        });
-      });
-
-      describe("when space policy is 'keep'", () => {
-        beforeEach(() => {
-          policy = "keep";
-        });
-
-        it("renders as selected the keep option", async () => {
-          const { user, dialog } = await openPopup();
-          await expandRow(user, dialog, /sda/);
-          await checkSpaceActions([
-            { name: /sda1/, action: /not modify/i },
-            { name: /sda2/, action: /not modify/i }
-          ]);
-        });
-      });
-
-      describe("when space policy is 'custom'", () => {
-        beforeEach(() => {
-          policy = "custom";
-        });
-
-        it("renders as selected the option matching the given device space action", async () => {
-          await openPopup();
-          await checkSpaceActions([
-            { name: /sda1/, action: /delete/i },
-            { name: /sda2/, action: /resize/i }
-          ]);
-        });
-      });
-    });
-  });
-
-  it("triggers the onChange callback when user accepts the dialog", async () => {
-    const onChangeFn = jest.fn();
-    const { user, dialog } = await openPopup({ onChange: onChangeFn });
-
-    // Select 'custom'
-    const picker = within(dialog).getByRole("listbox");
-    await user.selectOptions(
-      picker,
-      within(picker).getByRole("option", { name: /custom/i })
-    );
-
-    // Select custom actions
-    const sda1Row = within(dialog).getByRole("row", { name: /sda1/ });
-    const sda1Select = within(sda1Row).getByRole("combobox", { name: "Space action selector for /dev/sda1" });
-    await user.selectOptions(
-      sda1Select,
-      within(sda1Select).getByRole("option", { name: /delete/i })
-    );
-    const sda2Row = within(dialog).getByRole("row", { name: /sda2/ });
-    const sda2Select = within(sda2Row).getByRole("combobox", { name: "Space action selector for /dev/sda2" });
-    await user.selectOptions(
-      sda2Select,
-      within(sda2Select).getByRole("option", { name: /resize/i })
-    );
-
-    // Accept the result
-    const acceptButton = within(dialog).getByRole("button", { name: "Accept" });
-    await user.click(acceptButton);
-
-    expect(onChangeFn).toHaveBeenCalledWith(
-      "custom",
-      expect.arrayContaining([{ action: "resize", device: "/dev/sda2" }, { action: "force_delete", device: "/dev/sda1" }])
-    );
-  });
-});
diff --git a/web/src/components/storage/index.js b/web/src/components/storage/index.js
index eda9195002..d0e3db5f5c 100644
--- a/web/src/components/storage/index.js
+++ b/web/src/components/storage/index.js
@@ -22,7 +22,6 @@
 export { default as ProposalPage } from "./ProposalPage";
 export { default as ProposalPageMenu } from "./ProposalPageMenu";
 export { default as ProposalSettingsSection } from "./ProposalSettingsSection";
-export { default as ProposalSpacePolicyField } from "./ProposalSpacePolicyField";
 export { default as ProposalDeviceSection } from "./ProposalDeviceSection";
 export { default as ProposalTransactionalInfo } from "./ProposalTransactionalInfo";
 export { default as ProposalActionsDialog } from "./ProposalActionsDialog";

From 2c76047c5f93a032917a88ee552c550cd084b008 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Mon, 8 Apr 2024 15:19:26 +0100
Subject: [PATCH 12/13] web: Changelog

---
 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 9c112b90b8..4605122b18 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Mon Apr  8 14:17:45 UTC 2024 - José Iván López González <jlopez@suse.com>
+
+- Improve the representation of the devices in the dialog for
+  finding space (gh#openSUSE/agama#1128).
+
 -------------------------------------------------------------------
 Thu Apr  4 15:59:37 UTC 2024 - Ancor Gonzalez Sosa <ancor@suse.com>
 

From 816ae4d9f4cde3ebfa63ec677ef39b1c4d516a39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Mon, 8 Apr 2024 15:59:43 +0100
Subject: [PATCH 13/13] web: Fix tests

- Add missing mock.
---
 web/src/components/core/Page.test.jsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/web/src/components/core/Page.test.jsx b/web/src/components/core/Page.test.jsx
index 36949c1a1c..5db0ec6349 100644
--- a/web/src/components/core/Page.test.jsx
+++ b/web/src/components/core/Page.test.jsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2023] SUSE LLC
+ * Copyright (c) [2023-2024] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -23,12 +23,35 @@ import React from "react";
 import { screen, within } from "@testing-library/react";
 import { installerRender, plainRender, mockNavigateFn } from "~/test-utils";
 import { Page } from "~/components/core";
+import { createClient } from "~/client";
+
+jest.mock("~/client");
+
+const l10nClientMock = {
+  getUILocale: jest.fn().mockResolvedValue("en_US"),
+  keymaps: jest.fn().mockResolvedValue([]),
+  getKeymap: jest.fn().mockResolvedValue(undefined),
+  timezones: jest.fn().mockResolvedValue([]),
+  getTimezone: jest.fn().mockResolvedValue(undefined),
+  onLocalesChange: jest.fn(),
+  onKeymapChange: jest.fn(),
+  onTimezoneChange: jest.fn()
+};
 
 describe("Page", () => {
   beforeAll(() => {
     jest.spyOn(console, "error").mockImplementation();
   });
 
+  beforeEach(() => {
+    // if defined outside, the mock is cleared automatically
+    createClient.mockImplementation(() => {
+      return {
+        l10n: l10nClientMock
+      };
+    });
+  });
+
   afterAll(() => {
     console.error.mockRestore();
   });