diff --git a/playwright/Customizations/Disk.spec.ts b/playwright/Customizations/Disk.spec.ts
index 940033779a..65b2b6b162 100644
--- a/playwright/Customizations/Disk.spec.ts
+++ b/playwright/Customizations/Disk.spec.ts
@@ -109,7 +109,7 @@ test('Create a blueprint with Disk customization', async ({
.getByRole('row', {
name: '/tmp/usb xfs 1 GiB',
})
- .getByLabel('Partition name input')
+ .getByRole('textbox', { name: 'Partition name input' })
.fill('lv2');
await frame
.getByRole('row', {
diff --git a/src/Components/CreateImageWizard/ValidatedInput.tsx b/src/Components/CreateImageWizard/ValidatedInput.tsx
index 13bb809afa..a667ab2ab3 100644
--- a/src/Components/CreateImageWizard/ValidatedInput.tsx
+++ b/src/Components/CreateImageWizard/ValidatedInput.tsx
@@ -6,7 +6,6 @@ import {
HelperTextItem,
TextArea,
TextAreaProps,
- TextInput,
TextInputGroup,
TextInputGroupMain,
TextInputGroupMainProps,
@@ -44,12 +43,9 @@ type ValidationInputProp = TextInputProps &
warning?: string | undefined;
forceErrorDisplay?: boolean;
isDisabled?: boolean;
+ handleClear?: () => void;
};
-type ErrorMessageProps = {
- errorMessage: string;
-};
-
type ValidationResult = 'default' | 'success' | 'error';
export const ValidatedInputAndTextArea = ({
@@ -65,6 +61,7 @@ export const ValidatedInputAndTextArea = ({
isDisabled = false,
warning = undefined,
forceErrorDisplay = false,
+ handleClear,
}: ValidationInputProp) => {
const errorMessage = stepValidation.errors[fieldName] || '';
const hasError = errorMessage !== '';
@@ -109,16 +106,33 @@ export const ValidatedInputAndTextArea = ({
isDisabled={isDisabled}
/>
) : (
-
+ >
+
+ {value && (
+
+ }
+ tabIndex={-1} // Remove from tab order to maintain clean keyboard navigation between fields
+ />
+
+ )}
+
)}
{warning !== undefined && warning !== '' && (
@@ -126,7 +140,9 @@ export const ValidatedInputAndTextArea = ({
)}
{validated === 'error' && hasError && (
-
+
+ {errorMessage}
+
)}
>
);
@@ -151,14 +167,6 @@ const getValidationState = (
return validated;
};
-export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
- return (
-
- {errorMessage}
-
- );
-};
-
export const ValidatedInput = ({
helperText,
validator,
@@ -197,6 +205,7 @@ export const ValidatedInput = ({
ariaLabel ? `Clear ${ariaLabel} input` : 'Clear input'
}
icon={}
+ tabIndex={-1} // Remove from tab order to maintain clean keyboard navigation between fields
/>
)}
diff --git a/src/Components/CreateImageWizard/steps/Details/index.tsx b/src/Components/CreateImageWizard/steps/Details/index.tsx
index dc12e47970..d412e87287 100644
--- a/src/Components/CreateImageWizard/steps/Details/index.tsx
+++ b/src/Components/CreateImageWizard/steps/Details/index.tsx
@@ -1,14 +1,6 @@
import React from 'react';
-import {
- Content,
- Form,
- FormGroup,
- FormHelperText,
- HelperText,
- HelperTextItem,
- Title,
-} from '@patternfly/react-core';
+import { Content, Form, FormGroup, Title } from '@patternfly/react-core';
import {
changeBlueprintDescription,
@@ -47,14 +39,12 @@ const DetailsStep = () => {
return (
diff --git a/src/Components/CreateImageWizard/steps/Details/tests/Details.test.tsx b/src/Components/CreateImageWizard/steps/Details/tests/Details.test.tsx
index df7fa2c6d0..6cd9962de6 100644
--- a/src/Components/CreateImageWizard/steps/Details/tests/Details.test.tsx
+++ b/src/Components/CreateImageWizard/steps/Details/tests/Details.test.tsx
@@ -43,10 +43,12 @@ describe('Details Component', () => {
renderDetailsStep();
expect(
- await screen.findByRole('heading', { name: /Details/i }),
+ await screen.findByRole('heading', { name: /Image details/i }),
).toBeInTheDocument();
expect(
- screen.getByText(/Enter a name to identify your blueprint/i),
+ screen.getByText(
+ /Enter a name and description to identify your deployment-ready image/i,
+ ),
).toBeInTheDocument();
});
@@ -54,7 +56,7 @@ describe('Details Component', () => {
renderDetailsStep();
expect(
- await screen.findByRole('textbox', { name: /blueprint name/i }),
+ await screen.findByRole('textbox', { name: /name/i }),
).toBeInTheDocument();
});
@@ -62,17 +64,7 @@ describe('Details Component', () => {
renderDetailsStep();
expect(
- await screen.findByRole('textbox', { name: /blueprint description/i }),
- ).toBeInTheDocument();
- });
-
- test('displays helper text for name requirements', async () => {
- renderDetailsStep();
-
- expect(
- await screen.findByText(
- /The name can be 2-100 characters with at least two letters or numbers/i,
- ),
+ await screen.findByRole('textbox', { name: /description/i }),
).toBeInTheDocument();
});
});
diff --git a/src/Components/CreateImageWizard/steps/Details/tests/helpers.tsx b/src/Components/CreateImageWizard/steps/Details/tests/helpers.tsx
index 4113bfce7b..2771699137 100644
--- a/src/Components/CreateImageWizard/steps/Details/tests/helpers.tsx
+++ b/src/Components/CreateImageWizard/steps/Details/tests/helpers.tsx
@@ -23,7 +23,7 @@ export const enterBlueprintName = async (
name: string,
) => {
const input = await screen.findByRole('textbox', {
- name: /blueprint name/i,
+ name: /name/i,
});
await clearWithWait(user, input);
await typeWithWait(user, input, name);
@@ -34,7 +34,7 @@ export const enterBlueprintDescription = async (
description: string,
) => {
const input = await screen.findByRole('textbox', {
- name: /blueprint description/i,
+ name: /description/i,
});
await clearWithWait(user, input);
await typeWithWait(user, input, description);
@@ -42,14 +42,14 @@ export const enterBlueprintDescription = async (
export const clearBlueprintName = async (user: UserEventInstance) => {
const input = await screen.findByRole('textbox', {
- name: /blueprint name/i,
+ name: /name/i,
});
await clearWithWait(user, input);
};
export const clearBlueprintDescription = async (user: UserEventInstance) => {
const input = await screen.findByRole('textbox', {
- name: /blueprint description/i,
+ name: /description/i,
});
await clearWithWait(user, input);
};
diff --git a/src/test/Components/CreateImageWizard/steps/Review/Review.test.tsx b/src/test/Components/CreateImageWizard/steps/Review/Review.test.tsx
index 82d9c35112..e6492584d0 100644
--- a/src/test/Components/CreateImageWizard/steps/Review/Review.test.tsx
+++ b/src/test/Components/CreateImageWizard/steps/Review/Review.test.tsx
@@ -70,7 +70,7 @@ describe('Step Review', () => {
await goToReview();
await clickBack();
await screen.findByRole('heading', {
- name: 'Details',
+ name: 'Image details',
});
});