Wizard: Add Kernel name input

This adds a kernel name input.

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -40,6 +40,7 @@ import {
   useDetailsValidation,
   useRegistrationValidation,
   useHostnameValidation,
+  useKernelValidation,
 } from './utilities/useValidation';
 import {
   isAwsAccountIdValid,
@@ -223,6 +224,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const fileSystemValidation = useFilesystemValidation();
   // Hostname
   const hostnameValidation = useHostnameValidation();
+  // Kernel
+  const kernelValidation = useKernelValidation();
   // Firstboot
   const firstBootValidation = useFirstBootValidation();
   // Details
@@ -510,8 +513,12 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 key="wizard-kernel"
                 navItem={customStatusNavItem}
                 isHidden={!isKernelEnabled}
+                status={kernelValidation.disabledNext ? 'error' : 'default'}
                 footer={
-                  <CustomWizardFooter disableNext={false} optional={true} />
+                  <CustomWizardFooter
+                    disableNext={kernelValidation.disabledNext}
+                    optional={true}
+                  />
                 }
               >
                 <KernelStep />

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

@@ -2,8 +2,36 @@ import React from 'react';
 
 import { FormGroup } from '@patternfly/react-core';
 
+import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
+import {
+  changeKernelName,
+  selectKernel,
+} from '../../../../../store/wizardSlice';
+import { useKernelValidation } from '../../../utilities/useValidation';
+import { HookValidatedInput } from '../../../ValidatedTextInput';
+
 const KernelName = () => {
-  return <FormGroup isRequired={false} label="Name"></FormGroup>;
+  const dispatch = useAppDispatch();
+  const kernel = useAppSelector(selectKernel);
+
+  const stepValidation = useKernelValidation();
+
+  const handleChange = (e: React.FormEvent, value: string) => {
+    dispatch(changeKernelName(value));
+  };
+
+  return (
+    <FormGroup isRequired={false} label="Name">
+      <HookValidatedInput
+        ariaLabel="kernel input"
+        value={kernel.name}
+        onChange={handleChange}
+        placeholder="Add a kernel name"
+        stepValidation={stepValidation}
+        fieldName="kernel"
+      />
+    </FormGroup>
+  );
 };
 
 export default KernelName;

src/Components/CreateImageWizard/utilities/requestMapper.ts

@@ -335,6 +335,7 @@ function commonRequestToState(
       disabled: request.customizations?.services?.disabled || [],
     },
     kernel: {
+      name: request.customizations.kernel?.name || '',
       append: request.customizations?.kernel?.append || '',
     },
     timezone: {
@@ -539,9 +540,7 @@ const getCustomizations = (state: RootState, orgID: string): Customizations => {
     users: getUsers(state),
     services: getServices(state),
     hostname: selectHostname(state) || undefined,
-    kernel: selectKernel(state).append
-      ? { append: selectKernel(state).append }
-      : undefined,
+    kernel: getKernel(state),
     groups: undefined,
     timezone: getTimezone(state),
     locale: getLocale(state),
@@ -758,3 +757,16 @@ const getPayloadRepositories = (state: RootState) => {
   }
   return payloadAndRecommendedRepositories;
 };
+
+const getKernel = (state: RootState) => {
+  const kernel = selectKernel(state);
+
+  if (!kernel.name && !kernel.append) {
+    return undefined;
+  }
+
+  return {
+    name: selectKernel(state).name || undefined,
+    append: selectKernel(state).append || undefined,
+  };
+};

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -19,6 +19,7 @@ import {
   selectActivationKey,
   selectRegistrationType,
   selectHostname,
+  selectKernel,
 } from '../../../store/wizardSlice';
 import {
   getDuplicateMountPoints,
@@ -27,6 +28,7 @@ import {
   isMountpointMinSizeValid,
   isSnapshotValid,
   isHostnameValid,
+  isKernelNameValid,
 } from '../validators';
 
 export type StepValidation = {
@@ -41,6 +43,7 @@ export function useIsBlueprintValid(): boolean {
   const filesystem = useFilesystemValidation();
   const snapshot = useSnapshotValidation();
   const hostname = useHostnameValidation();
+  const kernel = useKernelValidation();
   const firstBoot = useFirstBootValidation();
   const details = useDetailsValidation();
   return (
@@ -48,6 +51,7 @@ export function useIsBlueprintValid(): boolean {
     !filesystem.disabledNext &&
     !snapshot.disabledNext &&
     !hostname.disabledNext &&
+    !kernel.disabledNext &&
     !firstBoot.disabledNext &&
     !details.disabledNext
   );
@@ -155,6 +159,20 @@ export function useHostnameValidation(): StepValidation {
   return { errors: {}, disabledNext: false };
 }
 
+export function useKernelValidation(): StepValidation {
+  const kernel = useAppSelector(selectKernel);
+
+  if (!isKernelNameValid(kernel.name)) {
+    return {
+      errors: {
+        kernel: 'Invalid kernel name',
+      },
+      disabledNext: true,
+    };
+  }
+  return { errors: {}, disabledNext: false };
+}
+
 export function useDetailsValidation(): StepValidation {
   const name = useAppSelector(selectBlueprintName);
   const description = useAppSelector(selectBlueprintDescription);

src/Components/CreateImageWizard/validators.ts

@@ -91,6 +91,17 @@ export const isHostnameValid = (hostname: string) => {
   );
 };
 
+export const isKernelNameValid = (kernelName: string) => {
+  if (!kernelName) {
+    return true;
+  }
+
+  return (
+    kernelName.length < 65 &&
+    /^[a-z0-9]|[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(kernelName)
+  );
+};
+
 export const isPortValid = (port: string) => {
   return /^(\d{1,5}|[a-z]{1,6})(-\d{1,5})?:[a-z]{1,6}$/.test(port);
 };