Wizard: Validate partition name

This adds validation to name fields for volume group and logical volumes.

Author: regexowl

src/Components/CreateImageWizard/steps/FileSystem/components/PartitionName.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { TextInput } from '@patternfly/react-core';
-
 import { useAppDispatch } from '../../../../../store/hooks';
 import { VolumeGroup } from '../../../../../store/imageBuilderApi';
 import { changePartitionName } from '../../../../../store/wizardSlice';
+import { useFilesystemValidation } from '../../../utilities/useValidation';
+import { ValidatedInputAndTextArea } from '../../../ValidatedInput';
 import { FscDiskPartitionBase, LogicalVolumeWithBase } from '../fscTypes';
 
 type PartitionNamePropTypes = {
@@ -17,12 +17,12 @@ const PartitionName = ({
   customization,
 }: PartitionNamePropTypes) => {
   const dispatch = useAppDispatch();
+  const stepValidation = useFilesystemValidation();
 
   return (
-    <TextInput
-      aria-label='Partition name input'
+    <ValidatedInputAndTextArea
+      ariaLabel='Partition name input'
       value={partition.name || ''}
-      type='text'
       onChange={(event, name) => {
         dispatch(
           changePartitionName({
@@ -32,6 +32,8 @@ const PartitionName = ({
           }),
         );
       }}
+      stepValidation={stepValidation}
+      fieldName={`lvname-${partition.id}`}
     />
   );
 };

src/Components/CreateImageWizard/steps/FileSystem/components/VolumeGroups.tsx

@@ -9,7 +9,6 @@ import {
   Flex,
   FlexItem,
   FormGroup,
-  TextInput,
 } from '@patternfly/react-core';
 import { PlusCircleIcon, TimesIcon } from '@patternfly/react-icons';
 import { v4 as uuidv4 } from 'uuid';
@@ -25,6 +24,8 @@ import {
   changeDiskPartitionName,
   removeDiskPartition,
 } from '../../../../../store/wizardSlice';
+import { useFilesystemValidation } from '../../../utilities/useValidation';
+import { ValidatedInputAndTextArea } from '../../../ValidatedInput';
 import { FscDiskPartition, FscDiskPartitionBase } from '../fscTypes';
 
 type VolumeGroupsType = {
@@ -33,6 +34,7 @@ type VolumeGroupsType = {
 
 const VolumeGroups = ({ volumeGroups }: VolumeGroupsType) => {
   const dispatch = useAppDispatch();
+  const stepValidation = useFilesystemValidation();
 
   const handleAddLogicalVolume = (vgId: string) => {
     const id = uuidv4();
@@ -67,15 +69,15 @@ const VolumeGroups = ({ volumeGroups }: VolumeGroupsType) => {
       />
       <CardBody>
         <FormGroup label='Volume group name'>
-          <TextInput
-            aria-label='Volume group name input'
+          <ValidatedInputAndTextArea
+            ariaLabel='Volume group name input'
             value={vg.name || ''}
-            type='text'
             onChange={(event, name) =>
               dispatch(changeDiskPartitionName({ id: vg.id, name: name }))
             }
             placeholder='Add volume group name'
-            className='pf-v6-u-w-25'
+            stepValidation={stepValidation}
+            fieldName={`name-${vg.id}`}
           />
         </FormGroup>
         <FormGroup label='Minimum volume group size'>

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -22,6 +22,7 @@ import {
   selectBlueprintDescription,
   selectBlueprintId,
   selectBlueprintName,
+  selectDiskPartitions,
   selectFilesystemPartitions,
   selectFirewall,
   selectFirstBootScript,
@@ -59,6 +60,7 @@ import {
   isKernelNameValid,
   isMountpointMinSizeValid,
   isNtpServerValid,
+  isPartitionNameValid,
   isPortValid,
   isServiceValid,
   isSnapshotValid,
@@ -302,6 +304,7 @@ export function useAAPValidation(): StepValidation {
 export function useFilesystemValidation(): StepValidation {
   const fscMode = useAppSelector(selectFscMode);
   const filesystemPartitions = useAppSelector(selectFilesystemPartitions);
+  const diskPartitions = useAppSelector(selectDiskPartitions);
   let disabledNext = false;
 
   const errors: { [key: string]: string } = {};
@@ -323,6 +326,27 @@ export function useFilesystemValidation(): StepValidation {
       disabledNext = true;
     }
   }
+
+  for (const partition of diskPartitions) {
+    if (
+      'name' in partition &&
+      partition.name &&
+      !isPartitionNameValid(partition.name)
+    ) {
+      errors[`name-${partition.id}`] = 'Partition name is invalid';
+      disabledNext = true;
+    }
+
+    if (partition.type === 'lvm' && partition.logical_volumes.length > 0) {
+      for (const lv of partition.logical_volumes) {
+        if (lv.name && !isPartitionNameValid(lv.name)) {
+          errors[`lvname-${lv.id}`] = 'Volume name is invalid';
+          disabledNext = true;
+        }
+      }
+    }
+  }
+
   return { errors, disabledNext };
 }
 

src/Components/CreateImageWizard/validators.ts

@@ -49,6 +49,10 @@ export const isMountpointMinSizeValid = (minSize: string) => {
   return /^\d+$/.test(minSize) && parseInt(minSize) > 0;
 };
 
+export const isPartitionNameValid = (name: string) => {
+  return /^[a-zA-Z0-9+_.-]+$/.test(name);
+};
+
 export const isBlueprintNameValid = (blueprintName: string) =>
   blueprintName.length >= 2 &&
   blueprintName.length <= 100 &&