From d4759e5a5590da8b0bcb823ca410ea66b4732d5f Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Tue, 26 Dec 2023 20:29:15 +0530
Subject: [PATCH 01/20] #932_to_Select

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

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index abdb419896..a1ab6c2958 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -73,9 +73,9 @@ const SizeUnitFormSelect = ({ units, ...formSelectProps }) => {
  */
 const MountPointFormSelect = ({ volumes, ...formSelectProps }) => {
   return (
-    <FormSelect { ...formSelectProps }>
+    <Select { ...formSelectProps }>
       { volumes.map(v => <FormSelectOption key={v.mountPath} value={v.mountPath} label={v.mountPath} />) }
-    </FormSelect>
+    </Select>
   );
 };
 

From 7b8722f990eb93e7cca7c9f03b262cc4509ea9e2 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Sat, 30 Dec 2023 12:35:12 +0530
Subject: [PATCH 02/20] Formselect was changed

---
 package-lock.json                         | 6 ++++++
 web/src/components/storage/VolumeForm.jsx | 8 +++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000..28f53dfe8e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "agama",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index a1ab6c2958..4191cf3b2a 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -71,14 +71,16 @@ const SizeUnitFormSelect = ({ units, ...formSelectProps }) => {
  * @param {object} props.formSelectProps - @see {@link https://www.patternfly.org/components/forms/form-select#props}
  * @returns {ReactComponent}
  */
-const MountPointFormSelect = ({ volumes, ...formSelectProps }) => {
+
+const MountPointFormSelect = ({ volumes, ...selectProps }) => {
   return (
-    <Select { ...formSelectProps }>
-      { volumes.map(v => <FormSelectOption key={v.mountPath} value={v.mountPath} label={v.mountPath} />) }
+    <Select { ...selectProps }>
+      { volumes.map(v => <SelectOption key={v.mountPath} value={v.mountPath}>{v.mountPath}</SelectOption>) }
     </Select>
   );
 };
 
+
 /**
  * Btrfs file system type can be offered with two flavors, with and without snapshots.
  */

From 2ad55994521ba4cb9c4ddab773044992f8684606 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Mon, 1 Jan 2024 18:35:57 +0530
Subject: [PATCH 03/20] Replaced mountpoint selctor with text

---
 web/src/components/storage/VolumeForm.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 4191cf3b2a..23c0e88627 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -723,13 +723,14 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
   return (
     <Form id={id} onSubmit={submitForm}>
       <FormGroup isRequired label={_("Mount point")} fieldId="mountPoint">
-        <MountPointFormSelect
+        {currentVolume !== undefined} && <p> {state.formData.mountPoint} </p>
+        {/* <MountPointFormSelect
           id="mountPoint"
           value={state.formData.mountPoint}
           onChange={changeVolume}
           volumes={currentVolume ? [currentVolume] : templates}
           isDisabled={currentVolume !== undefined}
-        />
+        /> */}
       </FormGroup>
       <FsField
         value={{ fsType, snapshots }}

From e2fc75e403ab760ba602075788e91332b98e6c94 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Tue, 2 Jan 2024 06:59:47 +0530
Subject: [PATCH 04/20] minor errors fixed

---
 web/src/components/storage/VolumeForm.jsx | 1 -
 web/tsconfig.json                         | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 23c0e88627..ddce58a5d2 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -80,7 +80,6 @@ const MountPointFormSelect = ({ volumes, ...selectProps }) => {
   );
 };
 
-
 /**
  * Btrfs file system type can be offered with two flavors, with and without snapshots.
  */
diff --git a/web/tsconfig.json b/web/tsconfig.json
index b5ed43aaf0..b65475713b 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "strict" : true,
+    "forceConsistentCasingInFileNames": true,
     "baseUrl": "./",
     "isolatedModules": true,
     "noEmit": true,

From 96b8b87623aeb0ca41a25d53fabc396e32e93c0e Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Tue, 2 Jan 2024 07:19:16 +0530
Subject: [PATCH 05/20] fixed some errors 2

---
 package-lock.json | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 28f53dfe8e..0000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "agama",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

From 3fb9d268bf51d7e475772b141d3f829b68af3c23 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Tue, 9 Jan 2024 13:52:51 +0530
Subject: [PATCH 06/20] mountpoint modified

---
 web/src/components/storage/VolumeForm.jsx | 29 +++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index ddce58a5d2..9d4f382728 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -70,12 +70,12 @@ const SizeUnitFormSelect = ({ units, ...formSelectProps }) => {
  * @param {Array<import(~/clients/storage).Volume>} props.volumes - a collection of storage volumes
  * @param {object} props.formSelectProps - @see {@link https://www.patternfly.org/components/forms/form-select#props}
  * @returns {ReactComponent}
- */
+*/
 
 const MountPointFormSelect = ({ volumes, ...selectProps }) => {
   return (
     <Select { ...selectProps }>
-      { volumes.map(v => <SelectOption key={v.mountPath} value={v.mountPath}>{v.mountPath}</SelectOption>) }
+      { volumes.map(v => <SelectOption key={v.mountPath} value={v.mountPath} label={v.mountPath} />) }
     </Select>
   );
 };
@@ -719,17 +719,26 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
 
   const { fsType, snapshots } = state.formData;
 
+  const ShowMountPointSelector = () => (
+    <MountPointFormSelect
+        id="mountPoint"
+        value={state.formData.mountPoint}
+        onChange={changeVolume}
+        volumes={currentVolume ? [currentVolume] : templates}
+        isDisabled={currentVolume !== undefined}
+    />
+  );
+
+  const ShowMountPoint = () => <p>{state.formData.mountPoint}</p>;
+
   return (
     <Form id={id} onSubmit={submitForm}>
       <FormGroup isRequired label={_("Mount point")} fieldId="mountPoint">
-        {currentVolume !== undefined} && <p> {state.formData.mountPoint} </p>
-        {/* <MountPointFormSelect
-          id="mountPoint"
-          value={state.formData.mountPoint}
-          onChange={changeVolume}
-          volumes={currentVolume ? [currentVolume] : templates}
-          isDisabled={currentVolume !== undefined}
-        /> */}
+        <If
+        condition={currentVolume !== undefined}
+        then={<ShowMountPoint />}
+        else={<ShowMountPointSelector />}
+        />
       </FormGroup>
       <FsField
         value={{ fsType, snapshots }}

From 927352ba83c0d7cc2db6efd3ab693c7a1f140947 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Tue, 9 Jan 2024 18:13:12 +0530
Subject: [PATCH 07/20] changed L78

---
 web/src/components/storage/VolumeForm.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 9d4f382728..f952499a7e 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -75,7 +75,7 @@ const SizeUnitFormSelect = ({ units, ...formSelectProps }) => {
 const MountPointFormSelect = ({ volumes, ...selectProps }) => {
   return (
     <Select { ...selectProps }>
-      { volumes.map(v => <SelectOption key={v.mountPath} value={v.mountPath} label={v.mountPath} />) }
+      { volumes.map(v => <SelectOption key={v.mountPath} value={v.mountPath}>{v.mountPath}</SelectOption>) }
     </Select>
   );
 };

From 46adca27ab020395cf74cabb90d8d97290287919 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Tue, 9 Jan 2024 23:11:02 +0530
Subject: [PATCH 08/20] Updating the MountPointFormSelect component to use the
 more powerful Select component instead of the previous formSelect

- This change allows the developers to add more and better functionality and customizability to the Agama Linux Installer
- Replaced the disabled widget when editing a file system with text that describes which disc(volume) is mounted for the installation
---
 web/src/components/storage/VolumeForm.jsx | 33 ++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index f952499a7e..54113413f8 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -22,7 +22,8 @@
 import React, { useReducer, useState } from "react";
 import {
   InputGroup, InputGroupItem, Form, FormGroup, FormSelect, FormSelectOption, MenuToggle,
-  Popover, Radio, Select, SelectOption, SelectList
+  Popover, Radio, Select, SelectOption, SelectList,
+  Button
 } from "@patternfly/react-core";
 import { sprintf } from "sprintf-js";
 
@@ -73,9 +74,35 @@ const SizeUnitFormSelect = ({ units, ...formSelectProps }) => {
 */
 
 const MountPointFormSelect = ({ volumes, ...selectProps }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [chosen, setchosen] = useState(false);
+
+  const onSelect = () => {
+    setIsOpen(false);
+    setchosen(!chosen);
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = toggleRef => {
+    return (
+      <Button ref={toggleRef} onClick={onToggleClick}>
+        {chosen ? chosen.mountPath : 'choose atleast one volume'}
+      </Button>
+    );
+  };
   return (
-    <Select { ...selectProps }>
-      { volumes.map(v => <SelectOption key={v.mountPath} value={v.mountPath}>{v.mountPath}</SelectOption>) }
+    <Select
+      onOpenChange={setIsOpen}
+      onSelect={onSelect}
+      isOpen={isOpen}
+      toggle={toggle}
+      shouldFocusToggleOnSelect
+      { ...selectProps }
+    >
+      { volumes.map(v => <SelectOption isSelected={chosen === v} key={v.mountPath} value={v.mountPath}>{v.mountPath}</SelectOption>) }
     </Select>
   );
 };

From 66d4207896e91df31828d9289f383244ce3dd050 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Wed, 10 Jan 2024 19:11:23 +0530
Subject: [PATCH 09/20] Updated the MountPointFormSelect component to use
 Select component instead of the formSelect component

- Replaced the disabled widget at mountpoint field with text that tells the user which volume was selected and prompts the user to select a volume incase the currentVolume is undefined.
- This brings in better design and more flexibility to the Agama Linux Installer.
---
 web/src/components/storage/VolumeForm.jsx | 27 ++++++++++++++++-------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 54113413f8..7af597fd1b 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -23,7 +23,6 @@ import React, { useReducer, useState } from "react";
 import {
   InputGroup, InputGroupItem, Form, FormGroup, FormSelect, FormSelectOption, MenuToggle,
   Popover, Radio, Select, SelectOption, SelectList,
-  Button
 } from "@patternfly/react-core";
 import { sprintf } from "sprintf-js";
 
@@ -73,13 +72,13 @@ const SizeUnitFormSelect = ({ units, ...formSelectProps }) => {
  * @returns {ReactComponent}
 */
 
-const MountPointFormSelect = ({ volumes, ...selectProps }) => {
+const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [chosen, setchosen] = useState(false);
+  const [chosen, setChosen] = useState(false);
 
   const onSelect = () => {
     setIsOpen(false);
-    setchosen(!chosen);
+    setChosen(!chosen);
   };
 
   const onToggleClick = () => {
@@ -88,9 +87,15 @@ const MountPointFormSelect = ({ volumes, ...selectProps }) => {
 
   const toggle = toggleRef => {
     return (
-      <Button ref={toggleRef} onClick={onToggleClick}>
-        {chosen ? chosen.mountPath : 'choose atleast one volume'}
-      </Button>
+      <MenuToggle
+       id={id}
+       ref={toggleRef}
+       onClick={onToggleClick}
+       isExpanded={isOpen}
+       className="full-width"
+      >
+        {chosen ? chosen.mountPath : _("Select a value")}
+      </MenuToggle>
     );
   };
   return (
@@ -102,7 +107,13 @@ const MountPointFormSelect = ({ volumes, ...selectProps }) => {
       shouldFocusToggleOnSelect
       { ...selectProps }
     >
-      { volumes.map(v => <SelectOption isSelected={chosen === v} key={v.mountPath} value={v.mountPath}>{v.mountPath}</SelectOption>) }
+      <SelectList>
+        {volumes.map(v => (
+          <SelectOption isSelected={chosen === v.mountPath} key={v.mountPath} value={v.mountPath}>
+            {v.mountPath}
+          </SelectOption>
+        ))}
+      </SelectList>
     </Select>
   );
 };

From 8bbbb5dcdb3537216e51d27080fc81c41d83330e Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Wed, 10 Jan 2024 22:48:40 +0530
Subject: [PATCH 10/20] Revert "minor errors fixed"

This reverts commit e2fc75e403ab760ba602075788e91332b98e6c94.
---
 web/src/components/storage/VolumeForm.jsx | 1 +
 web/tsconfig.json                         | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 7af597fd1b..67b2d3582e 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -118,6 +118,7 @@ const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
   );
 };
 
+
 /**
  * Btrfs file system type can be offered with two flavors, with and without snapshots.
  */
diff --git a/web/tsconfig.json b/web/tsconfig.json
index b65475713b..b5ed43aaf0 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,7 +1,5 @@
 {
   "compilerOptions": {
-    "strict" : true,
-    "forceConsistentCasingInFileNames": true,
     "baseUrl": "./",
     "isolatedModules": true,
     "noEmit": true,

From bb79e2c6f14e2cfd43ba55b2b2d39e1d82924518 Mon Sep 17 00:00:00 2001
From: Nagender Rao <125825782+nagu165@users.noreply.github.com>
Date: Wed, 10 Jan 2024 23:41:38 +0530
Subject: [PATCH 11/20] Update VolumeForm.jsx

Fix eslint error that was previously missed.
---
 web/src/components/storage/VolumeForm.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 5998d20f55..879435ad8a 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -122,7 +122,6 @@ const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
   );
 };
 
-
 /**
  * Btrfs file system type can be offered with two flavors, with and without snapshots.
  */

From fbae8f55be299ce0b78f5bbabd5d0abae02003a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 11 Jan 2024 08:38:22 +0000
Subject: [PATCH 12/20] [web] Update storage/VolumeForm component tests

Adapting them to the new "Mount point" widget behavior.
---
 .../components/storage/VolumeForm.test.jsx    | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.test.jsx b/web/src/components/storage/VolumeForm.test.jsx
index bcad0d41ac..94a47f5d98 100644
--- a/web/src/components/storage/VolumeForm.test.jsx
+++ b/web/src/components/storage/VolumeForm.test.jsx
@@ -94,12 +94,6 @@ beforeEach(() => {
   props = { templates: [volumes.root, volumes.home, volumes.swap] };
 });
 
-it("renders a control for displaying/selecting the mount point", () => {
-  plainRender(<VolumeForm {...props} />);
-
-  screen.getByRole("combobox", { name: "Mount point" });
-});
-
 it("renders a control for displaying/selecting the file system type", async () => {
   const { user } = plainRender(<VolumeForm {...props} />);
 
@@ -113,9 +107,10 @@ it("renders a control for displaying/selecting the file system type", async () =
 it("does not render the file system control if there is only one option", async () => {
   const { user } = plainRender(<VolumeForm {...props} />);
 
-  const mountPointSelector = screen.getByRole("combobox", { name: "Mount point" });
-  const swap = within(mountPointSelector).getByRole("option", { name: "swap" });
-  await user.selectOptions(mountPointSelector, swap);
+  const mountPointButton = screen.getByRole("button", { name: "Mount point" });
+  await user.click(mountPointButton);
+  const swap = screen.getByRole("option", { name: "swap" });
+  await user.click(swap);
   await screen.findByText("Swap");
   await waitFor(() => (
     expect(screen.queryByRole("button", { name: "File system type" })).not.toBeInTheDocument())
@@ -151,12 +146,13 @@ it("renders the 'Auto' size option only when a volume with 'adaptive sizes' is s
   // that it's configured for allowing adaptive sizes too.
   screen.getByRole("radio", { name: "Auto" });
 
-  const mountPointSelector = screen.getByRole("combobox", { name: "Mount point" });
-  const homeVolumeOption = screen.getByRole("option", { name: "/home" });
+  const mountPointButton = screen.getByRole("button", { name: "Mount point" });
+  await user.click(mountPointButton);
 
   // And we know that /home volume is not set to allow adaptive sizes. Thus,
   // let's select it.
-  await user.selectOptions(mountPointSelector, homeVolumeOption);
+  const homeVolumeOption = screen.getByRole("option", { name: "/home" });
+  await user.click(homeVolumeOption);
 
   const autoSizeOption = screen.queryByRole("radio", { name: "Auto" });
   expect(autoSizeOption).toBeNull();
@@ -296,19 +292,31 @@ describe("size validations", () => {
 describe("when editing a new volume", () => {
   beforeEach(() => { props.volume = volumes.root });
 
-  it("renders the mount point selector as disabled", () => {
+  it("renders the mount point", () => {
     plainRender(<VolumeForm {...props} />);
 
-    const mountPointSelector = screen.getByRole("combobox", { name: "Mount point" });
-    expect(mountPointSelector).toBeDisabled();
+    screen.getByText("/");
   });
-});
 
-describe("when adding a new volume", () => {
-  it("renders the mount point selector as enabled", () => {
+  it("does not render a control for changing the mount point", async () => {
     plainRender(<VolumeForm {...props} />);
+    await waitFor(() => (
+      expect(screen.queryByRole("button", { name: "Mount point" })).not.toBeInTheDocument()
+    ));
+  });
+});
 
-    const mountPointSelector = screen.getByRole("combobox", { name: "Mount point" });
-    expect(mountPointSelector).toBeEnabled();
+describe("when adding a new volume", () => {
+  it("renders a control for setting the mount point", async () => {
+    const { user } = plainRender(<VolumeForm {...props} />);
+
+    let mountPointButton = screen.getByRole("button", { name: "Mount point" });
+    await user.click(mountPointButton);
+    screen.getByRole("option", { name: "/" });
+    screen.getByRole("option", { name: "swap" });
+    const homeMountPoint = screen.getByRole("option", { name: "/home" });
+    await user.click(homeMountPoint);
+    mountPointButton = screen.getByRole("button", { name: "Mount point" });
+    await within(mountPointButton).findByText("/home");
   });
 });

From 3571e858c2d2a045648aab517452ecd1e9631a89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 11 Jan 2024 10:27:08 +0000
Subject: [PATCH 13/20] [web] Fix indentation

---
 web/src/components/storage/VolumeForm.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 879435ad8a..e3bfa34270 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -763,11 +763,11 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
 
   const ShowMountPointSelector = () => (
     <MountPointFormSelect
-        id="mountPoint"
-        value={state.formData.mountPoint}
-        onChange={changeVolume}
-        volumes={currentVolume ? [currentVolume] : templates}
-        isDisabled={currentVolume !== undefined}
+      id="mountPoint"
+      value={state.formData.mountPoint}
+      onChange={changeVolume}
+      volumes={currentVolume ? [currentVolume] : templates}
+      isDisabled={currentVolume !== undefined}
     />
   );
 
@@ -777,9 +777,9 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
     <Form id={id} onSubmit={submitForm}>
       <FormGroup isRequired label={_("Mount point")} fieldId="mountPoint">
         <If
-        condition={currentVolume !== undefined}
-        then={<ShowMountPoint />}
-        else={<ShowMountPointSelector />}
+          condition={currentVolume !== undefined}
+          then={<ShowMountPoint />}
+          else={<ShowMountPointSelector />}
         />
       </FormGroup>
       <FsField

From 679b5b5558499fc422412719e302e90f19d505b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 11 Jan 2024 10:28:41 +0000
Subject: [PATCH 14/20] [web] Drop not expected prop for PF/Select component

Avoiding the error below in the console output

>  console.error
>    Warning: React does not recognize the `isDisabled` prop on a DOM element.
---
 web/src/components/storage/VolumeForm.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index e3bfa34270..8f5ea228ca 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -767,7 +767,6 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
       value={state.formData.mountPoint}
       onChange={changeVolume}
       volumes={currentVolume ? [currentVolume] : templates}
-      isDisabled={currentVolume !== undefined}
     />
   );
 

From afca5cf89ec60dd97c911e55a816abfbe661a414 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 11 Jan 2024 10:41:09 +0000
Subject: [PATCH 15/20] [web] Fix storage/VolumesForm#MountPointSelector widget

To make it work as expected, dispatching an update event to keep the
form data in sync instead of having an internal state.
---
 web/src/components/storage/VolumeForm.jsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 8f5ea228ca..8cee09ae06 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -71,18 +71,19 @@ const SizeUnitFormSelect = ({ units, ...formSelectProps }) => {
  * Based on {@link PF/FormSelect https://www.patternfly.org/components/forms/form-select}
  *
  * @param {object} props
+ * @param {string} props.value - mountPath of current selected volume
  * @param {Array<Volume>} props.volumes - a collection of storage volumes
- * @param {object} props.formSelectProps - @see {@link https://www.patternfly.org/components/forms/form-select#props}
+ * @param {onChangeFn} props.onChange - callback for notifying input changes
+ * @param {object} props.selectProps - other props sent to {@link https://www.patternfly.org/components/menus/select#props PF/Select}
  * @returns {ReactComponent}
 */
 
-const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
+const MountPointFormSelect = ({ value, volumes, onChange, ...selectProps }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [chosen, setChosen] = useState(false);
 
-  const onSelect = () => {
+  const onSelect = (_, mountPath) => {
     setIsOpen(false);
-    setChosen(!chosen);
+    onChange(mountPath);
   };
 
   const onToggleClick = () => {
@@ -92,13 +93,13 @@ const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
   const toggle = toggleRef => {
     return (
       <MenuToggle
-       id={id}
+       id="mountPoint"
        ref={toggleRef}
        onClick={onToggleClick}
        isExpanded={isOpen}
        className="full-width"
       >
-        {chosen ? chosen.mountPath : _("Select a value")}
+        {value || _("Select a value")}
       </MenuToggle>
     );
   };
@@ -113,7 +114,7 @@ const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
     >
       <SelectList>
         {volumes.map(v => (
-          <SelectOption isSelected={chosen === v.mountPath} key={v.mountPath} value={v.mountPath}>
+          <SelectOption isSelected={value === v.mountPath} key={v.mountPath} value={v.mountPath}>
             {v.mountPath}
           </SelectOption>
         ))}
@@ -715,7 +716,7 @@ const reducer = (state, action) => {
 export default function VolumeForm({ id, volume: currentVolume, templates = [], onSubmit }) {
   const [state, dispatch] = useReducer(reducer, currentVolume || templates[0], createInitialState);
 
-  const changeVolume = (_, mountPath) => {
+  const changeVolume = (mountPath) => {
     const volume = templates.find(t => t.mountPath === mountPath);
     dispatch({ type: "CHANGE_VOLUME", payload: { volume } });
   };
@@ -763,7 +764,6 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
 
   const ShowMountPointSelector = () => (
     <MountPointFormSelect
-      id="mountPoint"
       value={state.formData.mountPoint}
       onChange={changeVolume}
       volumes={currentVolume ? [currentVolume] : templates}

From 8db198e6c7e07132360f9aad5ee849b351a9482b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 11 Jan 2024 11:31:51 +0000
Subject: [PATCH 16/20] [web] Update storage/ProposalVolumes component test

Not needed to check for the mount point control status anymore. Already
tested in the VolumeForm component.
---
 web/src/components/storage/ProposalVolumes.test.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/components/storage/ProposalVolumes.test.jsx b/web/src/components/storage/ProposalVolumes.test.jsx
index 5fe0f29330..68197b189e 100644
--- a/web/src/components/storage/ProposalVolumes.test.jsx
+++ b/web/src/components/storage/ProposalVolumes.test.jsx
@@ -215,8 +215,6 @@ describe("if there are volumes", () => {
 
     const popup = await screen.findByRole("dialog");
     within(popup).getByText("Edit file system");
-    const mountPointSelector = within(popup).getByRole("combobox", { name: "Mount point" });
-    expect(mountPointSelector).toHaveAttribute("disabled");
   });
 
   describe("and there is transactional Btrfs volume", () => {

From 1e0bcb3d13312ecfbf1a2d8492a4f1a01221ee53 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Tue, 16 Jan 2024 23:41:27 +0530
Subject: [PATCH 17/20] Updated the code to show '*' next to the MountPoint
 field only when the user is allowed to select the mountPath

- Adds better user experience and improves consistency with code base.
---
 .../storage/ProposalVolumes.test.jsx          |  2 -
 web/src/components/storage/VolumeForm.jsx     | 42 ++++++++--------
 .../components/storage/VolumeForm.test.jsx    | 48 +++++++++++--------
 3 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/web/src/components/storage/ProposalVolumes.test.jsx b/web/src/components/storage/ProposalVolumes.test.jsx
index 5fe0f29330..68197b189e 100644
--- a/web/src/components/storage/ProposalVolumes.test.jsx
+++ b/web/src/components/storage/ProposalVolumes.test.jsx
@@ -215,8 +215,6 @@ describe("if there are volumes", () => {
 
     const popup = await screen.findByRole("dialog");
     within(popup).getByText("Edit file system");
-    const mountPointSelector = within(popup).getByRole("combobox", { name: "Mount point" });
-    expect(mountPointSelector).toHaveAttribute("disabled");
   });
 
   describe("and there is transactional Btrfs volume", () => {
diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index 5998d20f55..f593863323 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -22,7 +22,7 @@
 import React, { useReducer, useState } from "react";
 import {
   InputGroup, InputGroupItem, Form, FormGroup, FormSelect, FormSelectOption, MenuToggle,
-  Popover, Radio, Select, SelectOption, SelectList,
+  Popover, Radio, Select, SelectOption, SelectList
 } from "@patternfly/react-core";
 import { sprintf } from "sprintf-js";
 
@@ -71,18 +71,19 @@ const SizeUnitFormSelect = ({ units, ...formSelectProps }) => {
  * Based on {@link PF/FormSelect https://www.patternfly.org/components/forms/form-select}
  *
  * @param {object} props
+ * @param {string} props.value - mountPath of current selected volume
  * @param {Array<Volume>} props.volumes - a collection of storage volumes
- * @param {object} props.formSelectProps - @see {@link https://www.patternfly.org/components/forms/form-select#props}
+ * @param {onChangeFn} props.onChange - callback for notifying input changes
+ * @param {object} props.selectProps - other props sent to {@link https://www.patternfly.org/components/menus/select#props PF/Select}
  * @returns {ReactComponent}
 */
 
-const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
+const MountPointFormSelect = ({ value, volumes, onChange, ...selectProps }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [chosen, setChosen] = useState(false);
 
-  const onSelect = () => {
+  const onSelect = (_, mountPath) => {
     setIsOpen(false);
-    setChosen(!chosen);
+    onChange(mountPath);
   };
 
   const onToggleClick = () => {
@@ -92,13 +93,13 @@ const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
   const toggle = toggleRef => {
     return (
       <MenuToggle
-       id={id}
+       id="mountPoint"
        ref={toggleRef}
        onClick={onToggleClick}
        isExpanded={isOpen}
        className="full-width"
       >
-        {chosen ? chosen.mountPath : _("Select a value")}
+        {value || _("Select a value")}
       </MenuToggle>
     );
   };
@@ -113,7 +114,7 @@ const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
     >
       <SelectList>
         {volumes.map(v => (
-          <SelectOption isSelected={chosen === v.mountPath} key={v.mountPath} value={v.mountPath}>
+          <SelectOption isSelected={value === v.mountPath} key={v.mountPath} value={v.mountPath}>
             {v.mountPath}
           </SelectOption>
         ))}
@@ -122,7 +123,6 @@ const MountPointFormSelect = ({ id, volumes, ...selectProps }) => {
   );
 };
 
-
 /**
  * Btrfs file system type can be offered with two flavors, with and without snapshots.
  */
@@ -716,7 +716,7 @@ const reducer = (state, action) => {
 export default function VolumeForm({ id, volume: currentVolume, templates = [], onSubmit }) {
   const [state, dispatch] = useReducer(reducer, currentVolume || templates[0], createInitialState);
 
-  const changeVolume = (_, mountPath) => {
+  const changeVolume = (mountPath) => {
     const volume = templates.find(t => t.mountPath === mountPath);
     dispatch({ type: "CHANGE_VOLUME", payload: { volume } });
   };
@@ -764,11 +764,9 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
 
   const ShowMountPointSelector = () => (
     <MountPointFormSelect
-        id="mountPoint"
         value={state.formData.mountPoint}
         onChange={changeVolume}
         volumes={currentVolume ? [currentVolume] : templates}
-        isDisabled={currentVolume !== undefined}
     />
   );
 
@@ -776,13 +774,19 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
 
   return (
     <Form id={id} onSubmit={submitForm}>
-      <FormGroup isRequired label={_("Mount point")} fieldId="mountPoint">
-        <If
+      <If
         condition={currentVolume !== undefined}
-        then={<ShowMountPoint />}
-        else={<ShowMountPointSelector />}
-        />
-      </FormGroup>
+        then={
+          <FormGroup label={_("Mount point")}>
+            <ShowMountPoint />
+          </FormGroup>
+        }
+        else={
+          <FormGroup isRequired label={_("Mount point")} fieldId="mountPoint">
+            <ShowMountPointSelector />
+          </FormGroup>
+        }
+      />
       <FsField
         value={{ fsType, snapshots }}
         volume={state.volume}
diff --git a/web/src/components/storage/VolumeForm.test.jsx b/web/src/components/storage/VolumeForm.test.jsx
index bcad0d41ac..94a47f5d98 100644
--- a/web/src/components/storage/VolumeForm.test.jsx
+++ b/web/src/components/storage/VolumeForm.test.jsx
@@ -94,12 +94,6 @@ beforeEach(() => {
   props = { templates: [volumes.root, volumes.home, volumes.swap] };
 });
 
-it("renders a control for displaying/selecting the mount point", () => {
-  plainRender(<VolumeForm {...props} />);
-
-  screen.getByRole("combobox", { name: "Mount point" });
-});
-
 it("renders a control for displaying/selecting the file system type", async () => {
   const { user } = plainRender(<VolumeForm {...props} />);
 
@@ -113,9 +107,10 @@ it("renders a control for displaying/selecting the file system type", async () =
 it("does not render the file system control if there is only one option", async () => {
   const { user } = plainRender(<VolumeForm {...props} />);
 
-  const mountPointSelector = screen.getByRole("combobox", { name: "Mount point" });
-  const swap = within(mountPointSelector).getByRole("option", { name: "swap" });
-  await user.selectOptions(mountPointSelector, swap);
+  const mountPointButton = screen.getByRole("button", { name: "Mount point" });
+  await user.click(mountPointButton);
+  const swap = screen.getByRole("option", { name: "swap" });
+  await user.click(swap);
   await screen.findByText("Swap");
   await waitFor(() => (
     expect(screen.queryByRole("button", { name: "File system type" })).not.toBeInTheDocument())
@@ -151,12 +146,13 @@ it("renders the 'Auto' size option only when a volume with 'adaptive sizes' is s
   // that it's configured for allowing adaptive sizes too.
   screen.getByRole("radio", { name: "Auto" });
 
-  const mountPointSelector = screen.getByRole("combobox", { name: "Mount point" });
-  const homeVolumeOption = screen.getByRole("option", { name: "/home" });
+  const mountPointButton = screen.getByRole("button", { name: "Mount point" });
+  await user.click(mountPointButton);
 
   // And we know that /home volume is not set to allow adaptive sizes. Thus,
   // let's select it.
-  await user.selectOptions(mountPointSelector, homeVolumeOption);
+  const homeVolumeOption = screen.getByRole("option", { name: "/home" });
+  await user.click(homeVolumeOption);
 
   const autoSizeOption = screen.queryByRole("radio", { name: "Auto" });
   expect(autoSizeOption).toBeNull();
@@ -296,19 +292,31 @@ describe("size validations", () => {
 describe("when editing a new volume", () => {
   beforeEach(() => { props.volume = volumes.root });
 
-  it("renders the mount point selector as disabled", () => {
+  it("renders the mount point", () => {
     plainRender(<VolumeForm {...props} />);
 
-    const mountPointSelector = screen.getByRole("combobox", { name: "Mount point" });
-    expect(mountPointSelector).toBeDisabled();
+    screen.getByText("/");
   });
-});
 
-describe("when adding a new volume", () => {
-  it("renders the mount point selector as enabled", () => {
+  it("does not render a control for changing the mount point", async () => {
     plainRender(<VolumeForm {...props} />);
+    await waitFor(() => (
+      expect(screen.queryByRole("button", { name: "Mount point" })).not.toBeInTheDocument()
+    ));
+  });
+});
 
-    const mountPointSelector = screen.getByRole("combobox", { name: "Mount point" });
-    expect(mountPointSelector).toBeEnabled();
+describe("when adding a new volume", () => {
+  it("renders a control for setting the mount point", async () => {
+    const { user } = plainRender(<VolumeForm {...props} />);
+
+    let mountPointButton = screen.getByRole("button", { name: "Mount point" });
+    await user.click(mountPointButton);
+    screen.getByRole("option", { name: "/" });
+    screen.getByRole("option", { name: "swap" });
+    const homeMountPoint = screen.getByRole("option", { name: "/home" });
+    await user.click(homeMountPoint);
+    mountPointButton = screen.getByRole("button", { name: "Mount point" });
+    await within(mountPointButton).findByText("/home");
   });
 });

From b73a4a66f8a3835914b249710803b30f6879c9a4 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Wed, 17 Jan 2024 23:08:55 +0530
Subject: [PATCH 18/20] Updated the code to remove an unrequired prop

---
 web/src/components/storage/VolumeForm.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/components/storage/VolumeForm.jsx b/web/src/components/storage/VolumeForm.jsx
index fea4e48f3b..f593863323 100644
--- a/web/src/components/storage/VolumeForm.jsx
+++ b/web/src/components/storage/VolumeForm.jsx
@@ -764,11 +764,9 @@ export default function VolumeForm({ id, volume: currentVolume, templates = [],
 
   const ShowMountPointSelector = () => (
     <MountPointFormSelect
-        id="mountPoint"
         value={state.formData.mountPoint}
         onChange={changeVolume}
         volumes={currentVolume ? [currentVolume] : templates}
-        isDisabled={currentVolume !== undefined}
     />
   );
 

From 7a9e06db3c1104a20effa38a2d6e96d9894ebbf0 Mon Sep 17 00:00:00 2001
From: Nagu <nagukalakuntla@gmail.com>
Date: Fri, 19 Jan 2024 17:32:26 +0530
Subject: [PATCH 19/20] Updated Changelog file with the changes made in the
 current PR.

---
 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 ff1445f980..c90e76b364 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Jan 19 09:34:26 UTC 2024 -  Nagu <nagukalakuntla@gmail.com>
+
+- Storage UI: show mount point selector only when the user can change it.
+  (gh#openSUSE/agama#973)
+  
 -------------------------------------------------------------------
 Thu Jan 11 15:34:26 UTC 2024 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

From ddfef100f4a4f7d810cd639c8e65a0a78500c7c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz?=
 <1691872+dgdavid@users.noreply.github.com>
Date: Fri, 19 Jan 2024 12:46:00 +0000
Subject: [PATCH 20/20] Update web/package/cockpit-agama.changes

---
 web/package/cockpit-agama.changes | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index f89204024c..17696a219b 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -2,7 +2,7 @@
 Fri Jan 19 09:34:26 UTC 2024 -  Nagu <nagukalakuntla@gmail.com>
 
 - Storage UI: show mount point selector only when the user can change it.
-  (gh#openSUSE/agama#973)
+  (gh#openSUSE/agama#1007)
   
 -------------------------------------------------------------------
 Thu Jan 18 08:33:52 UTC 2024 - Ancor Gonzalez Sosa <ancor@suse.com>