WIP

joseivanlopez · Feb 14, 2024 · 336e67d · 336e67d
1 parent 7fe654c
commit 336e67d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 35 deletions.
diff --git a/web/src/components/storage/ProposalPage.jsx b/web/src/components/storage/ProposalPage.jsx
@@ -221,11 +221,12 @@ export default function ProposalPage() {
           encryptionMethods={state.encryptionMethods}
           settings={state.settings}
           onChange={changeSettings}
-          isLoading={state.loading}
+          isLoading={!state.settings}
         />
         <ProposalSpacePolicySection
           settings={state.settings}
           onChange={changeSettings}
+          isLoading={!state.settings}
         />
         <ProposalActionsSection
           actions={state.actions}

diff --git a/web/src/components/storage/ProposalSpacePolicySection.jsx b/web/src/components/storage/ProposalSpacePolicySection.jsx
@@ -24,7 +24,7 @@ import { Form, Radio, Skeleton } from "@patternfly/react-core";
 
 import { _, n_, N_ } from "~/i18n";
 import { deviceSize } from '~/components/storage/utils';
-import { If, Section, Popup } from "~/components/core";
+import { If, Section, SectionSkeleton, Popup } from "~/components/core";
 import { noop, useLocalStorage } from "~/utils";
 import { SpacePolicyButton, SpacePolicySelector, SpacePolicyDisksHint } from "~/components/storage";
 import { sprintf } from "sprintf-js";
@@ -342,7 +342,7 @@ const SpaceActions = ({ settings, onChange = noop }) => {
   };
 
   return (
-    <Table isTreeTable variant="compact" borders={false} aria-label={_("Actions to find space")}>
+    <Table isTreeTable variant="compact" aria-label={_("Actions to find space")}>
       <Thead>
         <Tr>
           <Th>{columnNames.device}</Th>
@@ -380,36 +380,9 @@ Only the space that is not assigned to any partition will be used.")
   }
 ];
 
-/**
- * Section for configuring the space policy.
- * @component
- */
-export default function ProposalSpacePolicySection({
-  settings,
-  onChange = noop
-}) {
-  const changeSpacePolicy = (policy) => {
-    onChange({ spacePolicy: policy });
-  };
-
-  const changeSpaceActions = (spaceAction) => {
-    const spaceActions = settings.spaceActions.filter(a => a.device !== spaceAction.device);
-
-    if (spaceAction.action !== "keep") spaceActions.push(spaceAction);
-
-    onChange({ spaceActions });
-  };
-
-  const currentPolicy = SPACE_POLICIES.find(p => p.name === settings.spacePolicy) || SPACE_POLICIES[0];
-
+const SpacePolicy = ({ currentPolicy, onChange = noop }) => {
   return (
-    <Section title={_("Find Space")} className="flex-stack">
-      <SpacePolicyField
-        settings={settings}
-        isLoading={settings.spacePolicy === undefined}
-        onChange={changeSpacePolicy}
-      />
-
+    <>
       <p>
         {_("Select how to make free space in the selected disks for allocating the file systems.")}
       </p>
@@ -428,17 +401,60 @@ export default function ProposalSpacePolicySection({
               name="space-policies"
               className={isChecked && "selected"}
               isChecked={isChecked}
-              onChange={() => changeSpacePolicy(policy.name)}
+              onChange={() => onChange(policy.name)}
             />
           );
         })}
       </div>
 
       <p>{currentPolicy.description}</p>
+    </>
+  );
+};
 
+/**
+ * Section for configuring the space policy.
+ * @component
+ */
+export default function ProposalSpacePolicySection({
+  settings,
+  isLoading = false,
+  onChange = noop
+}) {
+  const changeSpacePolicy = (policy) => {
+    onChange({ spacePolicy: policy });
+  };
+
+  const changeSpaceActions = (spaceAction) => {
+    const spaceActions = settings.spaceActions.filter(a => a.device !== spaceAction.device);
+    if (spaceAction.action !== "keep") spaceActions.push(spaceAction);
+
+    onChange({ spaceActions });
+  };
+
+  const currentPolicy = SPACE_POLICIES.find(p => p.name === settings.spacePolicy) || SPACE_POLICIES[0];
+
+  return (
+    <Section title={_("Find Space")} className="flex-stack">
       <If
-        condition={settings.installationDevices?.length > 0}
-        then={<SpaceActions settings={settings} onChange={changeSpaceActions} />}
+        condition={isLoading}
+        then={<SectionSkeleton numRows={4} />}
+        else={
+          <>
+            <SpacePolicyField
+              settings={settings}
+              isLoading={settings.spacePolicy === undefined}
+              onChange={changeSpacePolicy}
+            />
+
+            <SpacePolicy currentPolicy={currentPolicy} onChange={changeSpacePolicy} />
+
+            <If
+              condition={settings.installationDevices.length > 0}
+              then={<SpaceActions settings={settings} onChange={changeSpaceActions} />}
+            />
+          </>
+        }
       />
     </Section>
   );