Blueprint: Validate Blueprint name is not empty

We are now validating Blueprint name on the backend to be non-empty.
Adds same validation for frontend

Refs HMS-3801

src/Components/CreateImageWizardV2/steps/Details/index.tsx

@@ -64,7 +64,9 @@ const DetailsStep = () => {
         />
         <FormHelperText>
           <HelperText>
-            <HelperTextItem>The name can be 1-100 characters</HelperTextItem>
+            <HelperTextItem>
+              The name can be 2-100 characters with at least two word characters
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       </FormGroup>

src/Components/CreateImageWizardV2/validators.ts

@@ -31,7 +31,9 @@ export const isGcpEmailValid = (gcpShareWithAccount: string | undefined) => {
 };
 
 export const isBlueprintNameValid = (blueprintName: string) =>
-  blueprintName.length > 0 && blueprintName.length <= 100;
+  blueprintName.length >= 2 &&
+  blueprintName.length <= 100 &&
+  /\w+/.test(blueprintName);
 
 export const isBlueprintDescriptionValid = (blueprintDescription: string) => {
   return blueprintDescription.length <= 250;

src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx

@@ -1,8 +1,9 @@
 import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { userEvent } from '@testing-library/user-event';
 
 import { CREATE_BLUEPRINT } from '../../../../../constants';
-import { clickNext } from '../../../../testUtils';
+import { clickNext, getNextButton } from '../../../../testUtils';
 import {
   blueprintRequest,
   clickRegisterLater,
@@ -50,6 +51,31 @@ const goToReviewStep = async () => {
   await clickNext();
 };
 
+describe('validates name', () => {
+  test('with invalid name', async () => {
+    await render();
+    await goToRegistrationStep();
+    await clickRegisterLater();
+    await goToDetailsStep();
+
+    const nextButton = await getNextButton();
+    expect(nextButton).toBeDisabled();
+    await enterBlueprintName(' ');
+    expect(nextButton).toBeDisabled();
+  });
+
+  test('with valid name', async () => {
+    await render();
+    await goToRegistrationStep();
+    await clickRegisterLater();
+    await goToDetailsStep();
+    await enterBlueprintName('🤣Red Velvet🤣');
+
+    const nextButton = await getNextButton();
+    expect(nextButton).toBeEnabled();
+  });
+});
+
 describe('registration request generated correctly', () => {
   test('without description', async () => {
     await render();

src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx

@@ -94,11 +94,11 @@ export const clickRegisterLater = async () => {
   await userEvent.click(radioButton);
 };
 
-export const enterBlueprintName = async () => {
+export const enterBlueprintName = async (name: string = 'Red Velvet') => {
   const blueprintName = await screen.findByRole('textbox', {
     name: /blueprint name/i,
   });
-  await userEvent.type(blueprintName, 'Red Velvet');
+  await userEvent.type(blueprintName, name);
 };
 
 export const interceptBlueprintRequest = async (requestPathname: string) => {