web: Move storage/SpacePolicyField to its own file

And adapts it to use a core/Field/SettingsField button.

web/src/components/storage/ProposalSettingsSection.jsx

@@ -25,8 +25,9 @@ import React, { useEffect, useState } from "react";
 import { Button, Checkbox, Form, Skeleton, Switch, Tooltip } from "@patternfly/react-core";
 
 import { sprintf } from "sprintf-js";
-import { _, n_ } from "~/i18n";
-import { BootSelectionDialog, ProposalVolumes, SpacePolicyDialog } from "~/components/storage";
+import { _ } from "~/i18n";
+import { BootSelectionDialog, ProposalVolumes } from "~/components/storage";
+import SpacePolicyField from "~/components/storage/SpacePolicyField";
 import { If, PasswordAndConfirmationInput, Section, Popup } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { noop } from "~/utils";
@@ -337,72 +338,6 @@ 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

web/src/components/storage/SpacePolicyField.jsx

@@ -0,0 +1,106 @@
+/*
+ * 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, { useState } from "react";
+import { Skeleton } from "@patternfly/react-core";
+
+import { sprintf } from "sprintf-js";
+import { _, n_ } from "~/i18n";
+import { If, SettingsField } from "~/components/core";
+import SpacePolicyDialog from "~/components/storage/SpacePolicyDialog";
+
+/**
+ * @typedef {import ("~/client/storage").SpaceAction} SpaceAction
+ * @typedef {import ("~/components/storage/utils").SpacePolicy} SpacePolicy
+ * @typedef {import ("~/client/storage").StorageDevice} StorageDevice
+ *
+ * @typedef {object} SpacePolicyConfig
+ * @property {SpacePolicy} spacePolicy
+ * @property {SpaceAction[]} spaceActions
+ */
+
+/**
+ * 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
+ *
+ */
+export default function 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 });
+  };
+
+  let value;
+  if (isLoading || !policy) {
+    value = <Skeleton screenreaderText={_("Waiting for information about space policy")} width="25%" />;
+  } else if (policy.summaryLabels.length === 1) {
+    // eslint-disable-next-line agama-i18n/string-literals
+    value = _(policy.summaryLabels[0]);
+  } else {
+    // eslint-disable-next-line agama-i18n/string-literals
+    value = sprintf(n_(policy.summaryLabels[0], policy.summaryLabels[1], devices.length), devices.length);
+  }
+
+  return (
+    <SettingsField
+      label={_("Find space")}
+      value={value}
+      description={ _("Allocating the file systems might need to find free space \
+in the installation device(s).")}
+      onClick={openDialog}
+    >
+      <If
+        condition={isDialogOpen}
+        then={
+          <SpacePolicyDialog
+            isOpen
+            policy={policy}
+            actions={actions}
+            devices={devices}
+            onAccept={onAccept}
+            onCancel={closeDialog}
+          />
+        }
+      />
+    </SettingsField>
+  );
+}

web/src/components/storage/utils.js

@@ -215,7 +215,7 @@ const deviceLabel = (device) => {
 const deviceChildren = (device) => {
   const partitionTableChildren = (partitionTable) => {
     const { partitions, unusedSlots } = partitionTable;
-    const children = partitions.concat(unusedSlots);
+    const children = partitions.concat(unusedSlots).filter(i => !!i);
     return children.sort((a, b) => a.start < b.start ? -1 : 1);
   };