Wizard: Add validation to ChippingInput

This adds step validation to ChippingInput, allowing to validate imported values.

src/Components/CreateImageWizard/steps/Firewall/components/PortsInput.tsx

@@ -9,11 +9,14 @@ import {
   selectFirewall,
 } from '../../../../../store/wizardSlice';
 import ChippingInput from '../../../ChippingInput';
+import { useFirewallValidation } from '../../../utilities/useValidation';
 import { isPortValid } from '../../../validators';
 
 const PortsInput = () => {
   const ports = useAppSelector(selectFirewall).ports;
 
+  const stepValidation = useFirewallValidation();
+
   return (
     <FormGroup label="Ports">
       <ChippingInput
@@ -24,6 +27,8 @@ const PortsInput = () => {
         item="Port"
         addAction={addPort}
         removeAction={removePort}
+        stepValidation={stepValidation}
+        fieldName="ports"
       />
     </FormGroup>
   );

src/Components/CreateImageWizard/steps/Firewall/components/Services.tsx

@@ -11,12 +11,15 @@ import {
   selectFirewall,
 } from '../../../../../store/wizardSlice';
 import ChippingInput from '../../../ChippingInput';
+import { useFirewallValidation } from '../../../utilities/useValidation';
 import { isServiceValid } from '../../../validators';
 
 const Services = () => {
   const disabledServices = useAppSelector(selectFirewall).services.disabled;
   const enabledServices = useAppSelector(selectFirewall).services.enabled;
 
+  const stepValidation = useFirewallValidation();
+
   return (
     <>
       <FormGroup label="Disabled services">
@@ -28,6 +31,8 @@ const Services = () => {
           item="Disabled service"
           addAction={addDisabledFirewallService}
           removeAction={removeDisabledFirewallService}
+          stepValidation={stepValidation}
+          fieldName="disabledServices"
         />
       </FormGroup>
       <FormGroup label="Enabled services">
@@ -39,6 +44,8 @@ const Services = () => {
           item="Enabled service"
           addAction={addEnabledFirewallService}
           removeAction={removeEnabledFirewallService}
+          stepValidation={stepValidation}
+          fieldName="enabledServices"
         />
       </FormGroup>
     </>

src/Components/CreateImageWizard/steps/Kernel/components/KernelArguments.tsx

@@ -12,11 +12,14 @@ import {
   selectKernel,
 } from '../../../../../store/wizardSlice';
 import ChippingInput from '../../../ChippingInput';
+import { useKernelValidation } from '../../../utilities/useValidation';
 import { isKernelArgumentValid } from '../../../validators';
 
 const KernelArguments = () => {
   const kernelAppend = useAppSelector(selectKernel).append;
 
+  const stepValidation = useKernelValidation();
+
   const release = useAppSelector(selectDistribution);
   const complianceProfileID = useAppSelector(selectComplianceProfileID);
 
@@ -46,6 +49,8 @@ const KernelArguments = () => {
         item="Kernel argument"
         addAction={addKernelArg}
         removeAction={removeKernelArg}
+        stepValidation={stepValidation}
+        fieldName="kernelAppend"
       />
     </FormGroup>
   );

src/Components/CreateImageWizard/steps/Timezone/components/NtpServersInput.tsx

@@ -9,11 +9,14 @@ import {
   selectNtpServers,
 } from '../../../../../store/wizardSlice';
 import ChippingInput from '../../../ChippingInput';
+import { useTimezoneValidation } from '../../../utilities/useValidation';
 import { isNtpServerValid } from '../../../validators';
 
 const NtpServersInput = () => {
   const ntpServers = useAppSelector(selectNtpServers);
 
+  const stepValidation = useTimezoneValidation();
+
   return (
     <FormGroup isRequired={false} label="NTP servers">
       <ChippingInput
@@ -24,6 +27,8 @@ const NtpServersInput = () => {
         item="NTP server"
         addAction={addNtpServer}
         removeAction={removeNtpServer}
+        stepValidation={stepValidation}
+        fieldName="ntpServers"
       />
     </FormGroup>
   );