createImage: add default name in details step <HMS-4494>

this commit add default name for blueprint name field to be able
to create an image without filling any name
format name: "$OS $ARCH $TARGETS $DATE".

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import {
   Form,
@@ -14,9 +14,13 @@ import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import {
   changeBlueprintDescription,
   changeBlueprintName,
+  selectArchitecture,
   selectBlueprintDescription,
   selectBlueprintName,
+  selectDistribution,
+  selectImageTypes,
 } from '../../../../store/wizardSlice';
+import { generateDefaultName } from '../../utilities/generateDefaultName';
 import { useDetailsValidation } from '../../utilities/useValidation';
 import { HookValidatedInput } from '../../ValidatedTextInput';
 
@@ -24,6 +28,19 @@ const DetailsStep = () => {
   const dispatch = useAppDispatch();
   const blueprintName = useAppSelector(selectBlueprintName);
   const blueprintDescription = useAppSelector(selectBlueprintDescription);
+  const distribution = useAppSelector(selectDistribution);
+  const arch = useAppSelector(selectArchitecture);
+  const targetEnvironments = useAppSelector(selectImageTypes);
+
+  useEffect(() => {
+    if (!blueprintName) {
+      dispatch(
+        changeBlueprintName(
+          generateDefaultName(distribution, arch, targetEnvironments)
+        )
+      );
+    }
+  }, []);
   const handleNameChange = (
     _event: React.FormEvent<HTMLInputElement>,
     name: string

src/Components/CreateImageWizard/utilities/generateDefaultName.ts

@@ -0,0 +1,15 @@
+import { ImageTypes } from '../../../store/imageBuilderApi';
+
+export const generateDefaultName = (
+  distribution: string,
+  arch: string,
+  targetEnvironments: ImageTypes[]
+) => {
+  const date = new Date();
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = date.toLocaleString('en-US', { month: 'long' });
+  const year = date.getFullYear();
+  return `${distribution} ${arch} ${targetEnvironments.join(
+    ' '
+  )} ${day} ${month} ${year}`;
+};

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -105,7 +105,7 @@ export function useDetailsValidation(): StepValidation {
           setUniqueName(true);
         });
     }
-  }, [blueprintId, name, setUniqueName, trigger]);
+  }, [blueprintId, name, setUniqueName, trigger, nameValid]);
 
   let nameError = '';
   if (!nameValid) {

src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx

@@ -395,7 +395,6 @@ describe('Step Upload to AWS', () => {
     await clickNext();
     await clickNext();
     await clickNext();
-    await clickNext();
     await enterBlueprintName();
     await clickNext();
     // informational modal pops up in the first test only as it's tied

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

@@ -25,7 +25,6 @@ const goToDetailsStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
-  await clickNext();
 };
 
 const enterBlueprintDescription = async () => {
@@ -53,7 +52,7 @@ describe('validates name', () => {
     await clickRegisterLater();
     await goToDetailsStep();
     const nextButton = await getNextButton();
-    expect(nextButton).toBeDisabled();
+    expect(nextButton).toBeEnabled();
     await enterBlueprintName(' ');
     await waitFor(() => expect(nextButton).toBeDisabled());
   });

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

@@ -43,7 +43,6 @@ const goToReviewStep = async () => {
   await clickNext(); // Additional packages
   await clickNext();
   await clickNext(); // First Boot
-  await clickNext(); // Details
   await enterBlueprintName();
   await clickNext(); // Review
 };

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

@@ -38,7 +38,6 @@ const goToReviewStep = async () => {
   await clickNext(); // Repositories step
   await clickNext(); // Additional packages
   await clickNext();
-  await clickNext(); // Details
   await enterBlueprintName();
   await clickNext();
 };

src/test/Components/CreateImageWizard/wizardTestUtils.tsx

@@ -126,6 +126,9 @@ export const enterBlueprintName = async (name: string = 'Red Velvet') => {
   const blueprintName = await screen.findByRole('textbox', {
     name: /blueprint name/i,
   });
+
+  await waitFor(() => user.clear(blueprintName));
+  await waitFor(() => expect(blueprintName).toHaveValue(''));
   await waitFor(() => user.type(blueprintName, name));
 };