V2Wizard: add Details step to wizrd2

this commit add Details step to v2Wizard

src/Components/CreateImageWizardV2/CreateImageWizard.tsx

@@ -9,12 +9,18 @@ import {
 } from '@patternfly/react-core';
 import { useNavigate } from 'react-router-dom';
 
+import DetailsStep from './steps/Details';
 import ImageOutputStep from './steps/ImageOutput';
 import OscapStep from './steps/Oscap';
 import RegistrationStep from './steps/Registration';
 import Aws from './steps/TargetEnvironment/Aws';
 import Gcp from './steps/TargetEnvironment/Gcp';
-import { isAwsAccountIdValid, isGcpEmailValid } from './validators';
+import {
+  isAwsAccountIdValid,
+  isBlueprintDescriptionValid,
+  isBlueprintNameValid,
+  isGcpEmailValid,
+} from './validators';
 
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import './CreateImageWizard.scss';
@@ -24,6 +30,8 @@ import {
   selectAwsAccountId,
   selectAwsShareMethod,
   selectAwsSource,
+  selectBlueprintDescription,
+  selectBlueprintName,
   selectGcpEmail,
   selectGcpShareMethod,
   selectImageTypes,
@@ -84,6 +92,10 @@ const CreateImageWizard = () => {
   const registrationType = useAppSelector((state) =>
     selectRegistrationType(state)
   );
+  const blueprintName = useAppSelector((state) => selectBlueprintName(state));
+  const blueprintDescription = useAppSelector((state) =>
+    selectBlueprintDescription(state)
+  );
   const activationKey = useAppSelector((state) => selectActivationKey(state));
 
   return (
@@ -167,6 +179,20 @@ const CreateImageWizard = () => {
           >
             <OscapStep />
           </WizardStep>
+          <WizardStep
+            name="Details"
+            id="step-details"
+            footer={
+              <CustomWizardFooter
+                disableNext={
+                  !isBlueprintNameValid(blueprintName) ||
+                  !isBlueprintDescriptionValid(blueprintDescription)
+                }
+              />
+            }
+          >
+            <DetailsStep />
+          </WizardStep>
           <WizardStep
             name="Review"
             id="step-review"

src/Components/CreateImageWizardV2/ValidatedTextInput.tsx

@@ -13,6 +13,7 @@ interface ValidatedTextInputPropTypes extends TextInputProps {
   helperText: string | undefined;
   validator: (value: string | undefined) => Boolean;
   value: string;
+  placeholder?: string;
 }
 
 export const ValidatedTextInput = ({
@@ -21,6 +22,7 @@ export const ValidatedTextInput = ({
   helperText,
   validator,
   value,
+  placeholder,
   onChange,
 }: ValidatedTextInputPropTypes) => {
   const [isPristine, setIsPristine] = useState(!value ? true : false);
@@ -47,6 +49,7 @@ export const ValidatedTextInput = ({
         validated={handleValidation()}
         aria-label={ariaLabel}
         onBlur={handleBlur}
+        placeholder={placeholder}
       />
       {!isPristine && !validator(value) && (
         <HelperText>

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

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Text,
+  Title,
+} from '@patternfly/react-core';
+
+import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
+import {
+  changeBlueprintDescription,
+  changeBlueprintName,
+  selectBlueprintDescription,
+  selectBlueprintName,
+} from '../../../../store/wizardSlice';
+import { ValidatedTextInput } from '../../ValidatedTextInput';
+import {
+  isBlueprintDescriptionValid,
+  isBlueprintNameValid,
+} from '../../validators';
+
+const DetailsStep = () => {
+  const dispatch = useAppDispatch();
+  const blueprintName = useAppSelector((state) => selectBlueprintName(state));
+  const blueprintDescription = useAppSelector((state) =>
+    selectBlueprintDescription(state)
+  );
+  const handleNameChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    name: string
+  ) => {
+    dispatch(changeBlueprintName(name));
+  };
+
+  const handleDescriptionChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    description: string
+  ) => {
+    dispatch(changeBlueprintDescription(description));
+  };
+
+  return (
+    <Form>
+      <Title headingLevel="h2">Details</Title>
+      <Text>
+        Optionally enter a name to identify your image later quickly. If you do
+        not provide one, the UUID will be used as the name.
+      </Text>
+      <FormGroup label="Blueprint name" fieldId="blueprint-name">
+        <ValidatedTextInput
+          ariaLabel="blueprint name"
+          dataTestId="blueprint"
+          value={blueprintName}
+          validator={isBlueprintNameValid}
+          onChange={handleNameChange}
+          helperText="Please enter a valid name"
+          placeholder="Blueprint name"
+        />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              The image name can be 3-63 characters long. It can contain
+              lowercase letters, digits and hyphens, has to start with a letter
+              and cannot end with a hyphen.
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+
+      <FormGroup
+        label="Blueprint description"
+        fieldId="blueprint-description-name"
+      >
+        <ValidatedTextInput
+          ariaLabel="blueprint description"
+          dataTestId="blueprint description"
+          value={blueprintDescription || ''}
+          validator={isBlueprintDescriptionValid}
+          onChange={handleDescriptionChange}
+          helperText="Please enter a valid description"
+          placeholder="Add description"
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+
+export default DetailsStep;

src/Components/CreateImageWizardV2/validators.ts

@@ -13,3 +13,17 @@ export const isGcpEmailValid = (gcpShareWithAccount: string | undefined) => {
     gcpShareWithAccount.length <= 253
   );
 };
+
+export const isBlueprintNameValid = (blueprintName: string) => {
+  if (blueprintName === '') {
+    return true;
+  }
+  return (
+    /^[a-z][a-z0-9-]+[a-z0-9]$/.test(blueprintName) &&
+    blueprintName.length <= 63
+  );
+};
+
+export const isBlueprintDescriptionValid = (blueprintDescription: string) => {
+  return blueprintDescription.length <= 250;
+};