Wizard: Firewall ports input

This adds chipping input for ports on the Firewall step.

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { FormGroup } from '@patternfly/react-core';
+
+import { useAppSelector } from '../../../../../store/hooks';
+import {
+  addPort,
+  removePort,
+  selectPorts,
+} from '../../../../../store/wizardSlice';
+import ChippingInput from '../../../ChippingInput';
+import { isPortValid } from '../../../validators';
+
+const PortsInput = () => {
+  const ports = useAppSelector(selectPorts);
+
+  return (
+    <FormGroup label="Ports">
+      <ChippingInput
+        ariaLabel="Add ports"
+        placeholder="Add ports"
+        validator={isPortValid}
+        list={ports}
+        item="Port"
+        addAction={addPort}
+        removeAction={removePort}
+      />
+    </FormGroup>
+  );
+};
+
+export default PortsInput;

src/Components/CreateImageWizard/steps/Firewall/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Text, Form, Title } from '@patternfly/react-core';
 
+import PortsInput from './components/PortsInput';
+
 const FirewallStep = () => {
   return (
     <Form>
@@ -9,6 +11,7 @@ const FirewallStep = () => {
         Firewall
       </Title>
       <Text>Customize firewall settings for your image.</Text>
+      <PortsInput />
     </Form>
   );
 };

src/Components/CreateImageWizard/utilities/requestMapper.ts

@@ -83,6 +83,7 @@ import {
   selectHostname,
   selectUsers,
   selectMetadata,
+  selectPorts,
 } from '../../../store/wizardSlice';
 import { FileSystemConfigurationType } from '../steps/FileSystem';
 import {
@@ -323,6 +324,9 @@ function commonRequestToState(
       ntpservers: request.customizations.timezone?.ntpservers || [],
     },
     hostname: request.customizations.hostname || '',
+    firewall: {
+      ports: request.customizations.firewall?.ports || [],
+    },
   };
 }
 
@@ -523,7 +527,7 @@ const getCustomizations = (state: RootState, orgID: string): Customizations => {
     groups: undefined,
     timezone: getTimezone(state),
     locale: getLocale(state),
-    firewall: undefined,
+    firewall: getFirewall(state),
     installation_device: undefined,
     fdo: undefined,
     ignition: undefined,
@@ -689,6 +693,18 @@ const getLocale = (state: RootState) => {
   }
 };
 
+const getFirewall = (state: RootState) => {
+  const ports = selectPorts(state);
+
+  if (ports.length === 0) {
+    return undefined;
+  } else {
+    return {
+      ports: ports,
+    };
+  }
+};
+
 const getCustomRepositories = (state: RootState) => {
   const customRepositories = selectCustomRepositories(state);
   const recommendedRepositories = selectRecommendedRepositories(state);

src/Components/CreateImageWizard/validators.ts

@@ -103,3 +103,7 @@ export const isHostnameValid = (hostname: string) => {
     )
   );
 };
+
+export const isPortValid = (port: string) => {
+  return /^(\d{1,5}|[a-z]{1,6})(-\d{1,5})?:[a-z]{1,6}$/.test(port);
+};