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>
     </>