[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(() => {