[web] SpacePolicy as pop-up

web/src/components/storage/ProposalPage.jsx

@@ -29,9 +29,7 @@ import {
   ProposalActionsSection,
   ProposalPageMenu,
   ProposalSettingsSection,
-  ProposalSpacePolicySection,
   ProposalDeviceSection,
-  ProposalFileSystemsSection,
   ProposalTransactionalInfo
 } from "~/components/storage";
 import { IDLE } from "~/client/status";
@@ -233,17 +231,7 @@ export default function ProposalPage() {
         <ProposalSettingsSection
           availableDevices={state.availableDevices}
           encryptionMethods={state.encryptionMethods}
-          settings={state.settings}
-          onChange={changeSettings}
-          isLoading={state.loading}
-        />
-        <ProposalFileSystemsSection
-          settings={state.settings}
           volumeTemplates={state.volumeTemplates}
-          onChange={changeSettings}
-          isLoading={state.loading}
-        />
-        <ProposalSpacePolicySection
           settings={state.settings}
           onChange={changeSettings}
           isLoading={state.loading}

web/src/components/storage/ProposalPage.test.jsx

@@ -129,11 +129,11 @@ it("loads the proposal data", async () => {
   await screen.findByText(/\/dev\/vda/);
 });
 
-it("renders the settings, find space and actions sections", async () => {
+it("renders the device, settings and actions sections", async () => {
   installerRender(<ProposalPage />);
 
+  await screen.findByText(/Device/);
   await screen.findByText(/Settings/);
-  await screen.findByText(/Find Space/);
   await screen.findByText(/Planned Actions/);
 });
 

web/src/components/storage/ProposalSettingsSection.jsx

@@ -24,6 +24,7 @@ import { Checkbox, Form, Skeleton, Switch, Tooltip } from "@patternfly/react-cor
 
 import { _ } from "~/i18n";
 import { If, PasswordAndConfirmationInput, Section, Popup } from "~/components/core";
+import { ProposalVolumes, ProposalSpacePolicyField } from "~/components/storage";
 import { Icon } from "~/components/layout";
 import { noop } from "~/utils";
 import { hasFS } from "~/components/storage/utils";
@@ -283,6 +284,8 @@ const EncryptionField = ({
 export default function ProposalSettingsSection({
   settings,
   encryptionMethods = [],
+  volumeTemplates = [],
+  isLoading = false,
   onChange = noop
 }) {
   const changeEncryption = ({ password, method }) => {
@@ -302,8 +305,26 @@ export default function ProposalSettingsSection({
     onChange({ volumes: settings.volumes });
   };
 
+  const changeVolumes = (volumes) => {
+    onChange({ volumes });
+  };
+
+  const changeSpacePolicy = (policy, actions) => {
+    onChange({ spacePolicy: policy, spaceActions: actions });
+  };
+
   const encryption = settings.encryptionPassword !== undefined && settings.encryptionPassword.length > 0;
 
+  const { volumes = [] } = settings;
+
+  // Templates for already existing mount points are filtered out
+  const usefulTemplates = () => {
+    const mountPaths = volumes.map(v => v.mountPath);
+    return volumeTemplates.filter(t => (
+      t.mountPath.length > 0 && !mountPaths.includes(t.mountPath)
+    ));
+  };
+
   return (
     <>
       <Section title={_("Settings")}>
@@ -319,6 +340,20 @@ export default function ProposalSettingsSection({
           isLoading={settings.encryptionPassword === undefined}
           onChange={changeEncryption}
         />
+        <ProposalVolumes
+          volumes={volumes}
+          templates={usefulTemplates()}
+          options={{ lvm: settings.lvm, encryption }}
+          isLoading={isLoading && settings.volumes === undefined}
+          onChange={changeVolumes}
+        />
+        <ProposalSpacePolicyField
+          policy={settings.spacePolicy}
+          actions={settings.spaceActions}
+          devices={settings.installationDevices}
+          isLoading={isLoading}
+          onChange={changeSpacePolicy}
+        />
       </Section>
     </>
   );

web/src/components/storage/ProposalSettingsSection.test.jsx

@@ -36,7 +36,10 @@ jest.mock("@patternfly/react-core", () => {
 let props;
 
 beforeEach(() => {
-  props = {};
+  props = {
+    settings: {},
+    onChange: jest.fn()
+  };
 });
 
 const rootVolume = { mountPath: "/", fsType: "Btrfs", outline: { snapshotsConfigurable: true } };
@@ -65,6 +68,28 @@ describe("if snapshots are not configurable", () => {
   });
 });
 
+it("renders a section holding file systems related stuff", () => {
+  plainRender(<ProposalSettingsSection {...props} />);
+  screen.getByRole("grid", { name: "Table with mount points" });
+  screen.getByRole("grid", { name: /mount points/ });
+});
+
+it("requests a volume change when onChange callback is triggered", async () => {
+  const { user } = plainRender(<ProposalSettingsSection {...props } />);
+  const button = screen.getByRole("button", { name: "Actions" });
+
+  await user.click(button);
+
+  const menu = screen.getByRole("menu");
+  const reset = within(menu).getByRole("menuitem", { name: /Reset/ });
+
+  await user.click(reset);
+
+  expect(props.onChange).toHaveBeenCalledWith(
+    { volumes: expect.any(Array) }
+  );
+});
+
 describe("Encryption field", () => {
   describe("if encryption password setting is not set yet", () => {
     beforeEach(() => {