web: Select action according to the policy

agama-project · Mar 14, 2024 · 8d2e0ee · 8d2e0ee
1 parent 2990e6f
commit 8d2e0ee
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 20 deletions.
diff --git a/web/src/components/storage/ProposalSpacePolicyField.jsx b/web/src/components/storage/ProposalSpacePolicyField.jsx
@@ -287,6 +287,18 @@ const DeviceRow = ({
   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,
@@ -300,10 +312,6 @@ const DeviceRow = ({
     }
   };
 
-  const spaceAction = actions.find(a => a.device === device.name);
-  const isDisabled = policy.id !== "custom";
-  const showAction = !device.partitionTable;
-
   return (
     <TreeRowWrapper row={{ props: treeRow.props }}>
       {/* eslint-disable agama-i18n/string-literals */}
@@ -319,7 +327,7 @@ const DeviceRow = ({
           then={
             <DeviceActionColumn
               device={device}
-              action={spaceAction?.action || "keep"}
+              action={action()}
               isDisabled={isDisabled}
               onChange={onChange}
             />
@@ -344,11 +352,11 @@ const SpaceActionsTable = ({ policy, actions, devices, onChange = noop }) => {
   const [autoExpanded, setAutoExpanded] = useLocalStorage("storage-space-actions-auto-expanded", false);
 
   useEffect(() => {
-    const dev_names = devices.map(d => d.name);
-    let currentExpanded = dev_names.filter(d => expandedDevices.includes(d));
+    const devNames = devices.map(d => d.name);
+    let currentExpanded = devNames.filter(d => expandedDevices.includes(d));
 
     if (policy.id === "custom" && !autoExpanded) {
-      currentExpanded = [...dev_names];
+      currentExpanded = [...devNames];
       setAutoExpanded(true);
     } else if (policy.id !== "custom" && autoExpanded) {
       setAutoExpanded(false);
@@ -470,6 +478,21 @@ const SpacePolicyForm = ({
 }) => {
   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);
@@ -493,7 +516,14 @@ const SpacePolicyForm = ({
             <SpacePolicyPicker currentPolicy={policy} onChange={setPolicy} />
             <If
               condition={devices.length > 0}
-              then={<SpaceActionsTable policy={policy} actions={actions} devices={devices} onChange={changeActions} />}
+              then={
+                <SpaceActionsTable
+                  policy={policy}
+                  actions={actions}
+                  devices={devices}
+                  onChange={changeActions}
+                />
+              }
             />
           </>
         }

diff --git a/web/src/components/storage/ProposalSpacePolicyField.test.jsx b/web/src/components/storage/ProposalSpacePolicyField.test.jsx
@@ -247,17 +247,77 @@ describe("ProposalSpacePolicyField", () => {
         within(spaceActionsSelector).getByRole("option", { name: /resize/ });
       });
 
-      it("renders as selected the option matching the given device space action", 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 sda1SpaceActionsSelector = within(sda1Row).getByRole("combobox", { name: "Space action selector for /dev/sda1" });
-        within(sda1SpaceActionsSelector).getByRole("option", { name: /delete/i, selected: true });
-        const sda2Row = screen.getByRole("row", { name: /sda2/ });
-        const sda2SpaceActionsSelector = within(sda2Row).getByRole("combobox", { name: "Space action selector for /dev/sda2" });
-        within(sda2SpaceActionsSelector).getByRole("option", { name: /resize/i, selected: true });
+      describe("when space policy is 'delete'", () => {
+        beforeEach(() => {
+          policy = "delete";
+        });
+
+        it("renders as selected the delete option", 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 sda1SpaceActionsSelector = within(sda1Row).getByRole("combobox", { name: "Space action selector for /dev/sda1" });
+          within(sda1SpaceActionsSelector).getByRole("option", { name: /delete/i, selected: true });
+          const sda2Row = screen.getByRole("row", { name: /sda2/ });
+          const sda2SpaceActionsSelector = within(sda2Row).getByRole("combobox", { name: "Space action selector for /dev/sda2" });
+          within(sda2SpaceActionsSelector).getByRole("option", { name: /delete/i, selected: true });
+        });
+      });
+
+      describe("when space policy is 'resize'", () => {
+        beforeEach(() => {
+          policy = "resize";
+        });
+
+        it("renders as selected the resize option", 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 sda1SpaceActionsSelector = within(sda1Row).getByRole("combobox", { name: "Space action selector for /dev/sda1" });
+          within(sda1SpaceActionsSelector).getByRole("option", { name: /resize/i, selected: true });
+          const sda2Row = screen.getByRole("row", { name: /sda2/ });
+          const sda2SpaceActionsSelector = within(sda2Row).getByRole("combobox", { name: "Space action selector for /dev/sda2" });
+          within(sda2SpaceActionsSelector).getByRole("option", { name: /resize/i, selected: true });
+        });
+      });
+
+      describe("when space policy is 'keep'", () => {
+        beforeEach(() => {
+          policy = "keep";
+        });
+
+        it("renders as selected the keep option", 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 sda1SpaceActionsSelector = within(sda1Row).getByRole("combobox", { name: "Space action selector for /dev/sda1" });
+          within(sda1SpaceActionsSelector).getByRole("option", { name: /not modify/i, selected: true });
+          const sda2Row = screen.getByRole("row", { name: /sda2/ });
+          const sda2SpaceActionsSelector = within(sda2Row).getByRole("combobox", { name: "Space action selector for /dev/sda2" });
+          within(sda2SpaceActionsSelector).getByRole("option", { name: /not modify/i, selected: true });
+        });
+      });
+
+      describe("when space policy is 'custom'", () => {
+        beforeEach(() => {
+          policy = "custom";
+        });
+
+        it("renders as selected the option matching the given device space action", async () => {
+          const { dialog } = await openPopup();
+          const sda1Row = within(dialog).getByRole("row", { name: /sda1/ });
+          const sda1SpaceActionsSelector = within(sda1Row).getByRole("combobox", { name: "Space action selector for /dev/sda1" });
+          within(sda1SpaceActionsSelector).getByRole("option", { name: /delete/i, selected: true });
+          const sda2Row = within(dialog).getByRole("row", { name: /sda2/ });
+          const sda2SpaceActionsSelector = within(sda2Row).getByRole("combobox", { name: "Space action selector for /dev/sda2" });
+          within(sda2SpaceActionsSelector).getByRole("option", { name: /resize/i, selected: true });
+        });
       });
     });
   });