Wizard: Fix kernel validation

Kernel validation worked only for one invalid field on the step. Now it is able to validate both.

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

@@ -23,6 +23,7 @@ import {
   selectKernel,
 } from '../../../../../store/wizardSlice';
 import { useKernelValidation } from '../../../utilities/useValidation';
+import { isKernelNameValid } from '../../../validators';
 
 const initialOptions = ['kernel', 'kernel-debug'];
 let kernelOptions = initialOptions;
@@ -48,7 +49,9 @@ const KernelName = () => {
       if (!filteredKernelPkgs.some((kernel) => kernel === filterValue)) {
         filteredKernelPkgs = [
           ...filteredKernelPkgs,
-          `Custom kernel package "${filterValue}"`,
+          isKernelNameValid(filterValue)
+            ? `Custom kernel package "${filterValue}"`
+            : `"${filterValue}" is not a valid kernel package name`,
         ];
       }
       if (!isOpen) {
@@ -165,7 +168,11 @@ const KernelName = () => {
         >
           <SelectList>
             {selectOptions.map((option) => (
-              <SelectOption key={option} value={option}>
+              <SelectOption
+                key={option}
+                value={option}
+                isDisabled={/not a valid kernel package name/i.test(option)}
+              >
                 {option}
               </SelectOption>
             ))}

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -262,14 +262,10 @@ export function useHostnameValidation(): StepValidation {
 
 export function useKernelValidation(): StepValidation {
   const kernel = useAppSelector(selectKernel);
+  const errors = {};
 
   if (!isKernelNameValid(kernel.name)) {
-    return {
-      errors: {
-        kernel: 'Invalid format.',
-      },
-      disabledNext: true,
-    };
+    Object.assign(errors, { kernel: 'Invalid format.' });
   }
 
   if (kernel.append.length > 0) {
@@ -282,14 +278,16 @@ export function useKernelValidation(): StepValidation {
     }
 
     if (invalidArgs.length > 0) {
-      return {
-        errors: { kernelAppend: `Invalid kernel arguments: ${invalidArgs}` },
-        disabledNext: true,
-      };
+      Object.assign(errors, {
+        kernelAppend: `Invalid kernel arguments: ${invalidArgs}`,
+      });
     }
   }
 
-  return { errors: {}, disabledNext: false };
+  return {
+    errors: errors,
+    disabledNext: 'kernel' in errors || 'kernelAppend' in errors,
+  };
 }
 
 export function useFirewallValidation(): StepValidation {

src/Components/CreateImageWizard/validators.ts

@@ -119,7 +119,8 @@ export const isKernelNameValid = (kernelName: string) => {
 
   return (
     kernelName.length < 65 &&
-    /^[a-z0-9]|[a-z0-9][a-z0-9-_.+]*[a-z0-9]$/.test(kernelName)
+    /^([a-z0-9]|[a-z0-9][a-z0-9-_.+]*)[a-z0-9]$/.test(kernelName) &&
+    /[a-zA-Z]+/.test(kernelName) // contains at least one letter
   );
 };
 

src/test/Components/CreateImageWizard/steps/Kernel/Kernel.test.tsx

@@ -10,7 +10,6 @@ import {
   clickBack,
   clickNext,
   enterBlueprintName,
-  getNextButton,
   interceptBlueprintRequest,
   interceptEditBlueprintRequest,
   openAndDismissSaveAndBuildModal,
@@ -193,17 +192,18 @@ describe('Step Kernel', () => {
   });
 
   test('disable Next with invalid custom kernel name', async () => {
+    const user = userEvent.setup();
     await renderCreateMode();
     await goToKernelStep();
 
-    await selectCustomKernelName('-----------');
-    await screen.findByText(/Invalid format/);
-    const nextButton = await getNextButton();
-    expect(nextButton).toBeDisabled();
+    const kernelNameDropdown = await getKernelNameOptions();
+    await openKernelNameOptions(kernelNameDropdown);
+
+    await waitFor(() => user.type(kernelNameDropdown, '-----------'));
+    await screen.findByText(/"-----------" is not a valid kernel package name/);
 
     await clearKernelName();
     expect(screen.queryByText(/Invalid format/)).not.toBeInTheDocument();
-    expect(nextButton).toBeEnabled();
   });
 
   test('kernel argument can be added and removed', async () => {