From bbf077b98f264643fd79db59e5ca9f507e14cdd3 Mon Sep 17 00:00:00 2001
From: Michal Gold <mgold@redhat.com>
Date: Sun, 10 Mar 2024 11:32:52 +0200
Subject: [PATCH] V2Wizard: fix partition at review step

this commit fix the partition table at review step when user choose manual partition
---
 .../FileSystem/FileSystemConfiguration.tsx    | 33 +++++++++++--------
 .../steps/FileSystem/FileSystemPartition.tsx  |  8 ++++-
 .../steps/Review/ReviewStepTables.tsx         | 19 ++++++++++-
 src/store/wizardSlice.ts                      | 18 +++++++++-
 4 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemConfiguration.tsx b/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemConfiguration.tsx
index 481a1654..b9fac99c 100644
--- a/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemConfiguration.tsx
+++ b/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemConfiguration.tsx
@@ -28,6 +28,7 @@ import {
   selectImageTypes,
   removePartition,
   selectPartitions,
+  changePartitionUnit,
 } from '../../../../store/wizardSlice';
 import UsrSubDirectoriesDisabled from '../../UsrSubDirectoriesDisabled';
 import { ValidatedTextInput } from '../../ValidatedTextInput';
@@ -36,6 +37,7 @@ export type Partition = {
   id: string;
   mountpoint: string;
   min_size: string;
+  unit: Units;
 };
 
 const FileSystemConfiguration = () => {
@@ -50,7 +52,8 @@ const FileSystemConfiguration = () => {
       addPartition({
         id,
         mountpoint: '/home',
-        min_size: '1',
+        min_size: UNIT_GIB.toString(),
+        unit: 'GiB',
       })
     );
   };
@@ -163,7 +166,6 @@ const getSuffix = (mountpoint: string) => {
 };
 
 const Row = ({ partition }: RowPropTypes) => {
-  const [units, setUnits] = useState<Units>('MiB');
   const dispatch = useAppDispatch();
 
   const handleRemovePartition = (id: string) => {
@@ -188,10 +190,10 @@ const Row = ({ partition }: RowPropTypes) => {
 
       <Td width={20}>xfs</Td>
       <Td width={20}>
-        <MinimumSize partition={partition} units={units} />
+        <MinimumSize partition={partition} units={partition.unit} />
       </Td>
       <Td width={10}>
-        <SizeUnit units={units} setUnits={setUnits} />
+        <SizeUnit partition={partition} />
       </Td>
       <Td width={10}>
         <Button
@@ -288,9 +290,9 @@ type MinimumSizePropTypes = {
   units: Units;
 };
 
-type Units = 'KiB' | 'MiB' | 'GiB';
+export type Units = 'KiB' | 'MiB' | 'GiB';
 
-const getConversionFactor = (units: Units) => {
+export const getConversionFactor = (units: Units) => {
   switch (units) {
     case 'KiB':
       return UNIT_KIB;
@@ -305,11 +307,11 @@ const MinimumSize = ({ partition, units }: MinimumSizePropTypes) => {
   const conversionFactor = getConversionFactor(units);
 
   const convertToDisplayUnits = (minSize: string) => {
-    return (parseInt(minSize) * conversionFactor).toString();
+    return (parseInt(minSize) / conversionFactor).toString();
   };
 
   const convertToBytes = (minSize: string) => {
-    return (parseInt(minSize) / conversionFactor).toString();
+    return (parseInt(minSize) * conversionFactor).toString();
   };
 
   const dispatch = useAppDispatch();
@@ -328,17 +330,20 @@ const MinimumSize = ({ partition, units }: MinimumSizePropTypes) => {
             min_size: convertToBytes(minSize),
           })
         );
+        dispatch(
+          changePartitionUnit({ id: partition.id, unit: partition.unit })
+        );
       }}
     />
   );
 };
 
 type SizeUnitPropTypes = {
-  units: Units;
-  setUnits: React.Dispatch<React.SetStateAction<Units>>;
+  partition: Partition;
 };
 
-const SizeUnit = ({ units, setUnits }: SizeUnitPropTypes) => {
+const SizeUnit = ({ partition }: SizeUnitPropTypes) => {
+  const dispatch = useAppDispatch();
   const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = (isOpen: boolean) => {
@@ -346,17 +351,17 @@ const SizeUnit = ({ units, setUnits }: SizeUnitPropTypes) => {
   };
 
   const onSelect = (event: React.MouseEvent, selection: Units) => {
-    setUnits(selection);
+    dispatch(changePartitionUnit({ id: partition.id, unit: selection }));
     setIsOpen(false);
   };
 
   return (
     <Select
-      ouiaId="mount-point"
+      ouiaId="unit"
       isOpen={isOpen}
       onToggle={(_event, isOpen) => onToggle(isOpen)}
       onSelect={onSelect}
-      selections={units}
+      selections={partition.unit}
     >
       <SelectOption value={'KiB'} />
       <SelectOption value={'MiB'} />
diff --git a/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemPartition.tsx b/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemPartition.tsx
index ccdcfaec..4b34afe1 100644
--- a/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemPartition.tsx
+++ b/src/Components/CreateImageWizardV2/steps/FileSystem/FileSystemPartition.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { FormGroup, Label, Radio } from '@patternfly/react-core';
 import { v4 as uuidv4 } from 'uuid';
 
+import { UNIT_GIB } from '../../../../constants';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import {
   changeFileSystemConfiguration,
@@ -46,7 +47,12 @@ const FileSystemPartition = () => {
           dispatch(changeFileSystemPartitionMode('manual'));
           dispatch(
             changeFileSystemConfiguration([
-              { id: id, mountpoint: '/', min_size: '500' },
+              {
+                id: id,
+                mountpoint: '/',
+                min_size: (10 * UNIT_GIB).toString(),
+                unit: 'GiB',
+              },
             ])
           );
         }}
diff --git a/src/Components/CreateImageWizardV2/steps/Review/ReviewStepTables.tsx b/src/Components/CreateImageWizardV2/steps/Review/ReviewStepTables.tsx
index 7911fed8..f55da5e6 100644
--- a/src/Components/CreateImageWizardV2/steps/Review/ReviewStepTables.tsx
+++ b/src/Components/CreateImageWizardV2/steps/Review/ReviewStepTables.tsx
@@ -8,7 +8,9 @@ import { useAppSelector } from '../../../../store/hooks';
 import {
   selectCustomRepositories,
   selectPackages,
+  selectPartitions,
 } from '../../../../store/wizardSlice';
+import { getConversionFactor } from '../FileSystem/FileSystemConfiguration';
 
 type repoPropType = {
   repoUrl: string[] | undefined;
@@ -56,6 +58,7 @@ const RepoName = ({ repoUrl }: repoPropType) => {
 };
 
 export const FSReviewTable = () => {
+  const partitions = useAppSelector((state) => selectPartitions(state));
   return (
     <Panel isScrollable>
       <PanelMain maxHeight="30ch">
@@ -67,7 +70,21 @@ export const FSReviewTable = () => {
               <Th>Minimum size</Th>
             </Tr>
           </Thead>
-          <Tbody data-testid="file-system-configuration-tbody-review"></Tbody>
+          <Tbody data-testid="file-system-configuration-tbody-review">
+            {partitions.map((partition, partitionIndex) => (
+              <Tr key={partitionIndex}>
+                <Td className="pf-m-width-30">{partition.mountpoint}</Td>
+                <Td className="pf-m-width-30">xfs</Td>
+                <Td className="pf-m-width-30">
+                  {(
+                    parseInt(partition.min_size) /
+                    getConversionFactor(partition.unit)
+                  ).toString()}{' '}
+                  {partition.unit}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
         </Table>
       </PanelMain>
     </Panel>
diff --git a/src/store/wizardSlice.ts b/src/store/wizardSlice.ts
index 2c808b85..bc31a773 100644
--- a/src/store/wizardSlice.ts
+++ b/src/store/wizardSlice.ts
@@ -11,7 +11,10 @@ import {
 import { ActivationKeys } from './rhsmApi';
 
 import { FileSystemPartitionMode } from '../Components/CreateImageWizardV2/steps/FileSystem';
-import { Partition } from '../Components/CreateImageWizardV2/steps/FileSystem/FileSystemConfiguration';
+import {
+  Partition,
+  Units,
+} from '../Components/CreateImageWizardV2/steps/FileSystem/FileSystemConfiguration';
 import { IBPackageWithRepositoryInfo } from '../Components/CreateImageWizardV2/steps/Packages/Packages';
 import { AwsShareMethod } from '../Components/CreateImageWizardV2/steps/TargetEnvironment/Aws';
 import { AzureShareMethod } from '../Components/CreateImageWizardV2/steps/TargetEnvironment/Azure';
@@ -405,6 +408,18 @@ export const wizardSlice = createSlice({
         state.fileSystem.partitions[partitionIndex].mountpoint = mountpoint;
       }
     },
+    changePartitionUnit: (
+      state,
+      action: PayloadAction<{ id: string; unit: Units }>
+    ) => {
+      const { id, unit } = action.payload;
+      const partitionIndex = state.fileSystem.partitions.findIndex(
+        (partition) => partition.id === id
+      );
+      if (partitionIndex !== -1) {
+        state.fileSystem.partitions[partitionIndex].unit = unit;
+      }
+    },
     changePartitionMinSize: (
       state,
       action: PayloadAction<{ id: string; min_size: string }>
@@ -478,6 +493,7 @@ export const {
   addPartition,
   removePartition,
   changePartitionMountpoint,
+  changePartitionUnit,
   changePartitionMinSize,
   changeCustomRepositories,
   changePayloadRepositories,