diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
index 3e4dcde1d..d171b355c 100644
--- a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
@@ -30,6 +30,7 @@ import {
TargetEnvOtherList,
TimezoneList,
LocaleList,
+ HostnameList,
} from './ReviewStepTextLists';
import isRhel from '../../../../../src/Utilities/isRhel';
@@ -70,10 +71,12 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
useState(true);
const [isExpandedTimezone, setIsExpandedTimezone] = useState(true);
const [isExpandedLocale, setIsExpandedLocale] = useState(true);
+ const [isExpandedHostname, setIsExpandedHostname] = useState(true);
const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true);
const isTimezoneEnabled = useFlag('image-builder.timezone.enabled');
const isLocaleEnabled = useFlag('image-builder.locale.enabled');
+ const isHostnameEnabled = useFlag('image-builder.hostname.enabled');
const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
setIsExpandedImageOutput(isExpandedImageOutput);
@@ -95,6 +98,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
setIsExpandedTimezone(isExpandedTimezone);
const onToggleLocale = (isExpandedLocale: boolean) =>
setIsExpandedLocale(isExpandedLocale);
+ const onToggleHostname = (isExpandedHostname: boolean) =>
+ setIsExpandedHostname(isExpandedHostname);
const onToggleFirstBoot = (isExpandableFirstBoot: boolean) =>
setIsExpandedFirstBoot(isExpandableFirstBoot);
@@ -343,6 +348,23 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
)}
+ {isHostnameEnabled && (
+
+ onToggleHostname(isExpandedHostname)
+ }
+ isExpanded={isExpandedHostname}
+ isIndented
+ data-testid="hostname-expandable"
+ >
+
+
+ )}
{isFirstBootEnabled && (
{
);
};
+export const HostnameList = () => {
+ const hostname = useAppSelector(selectHostname);
+
+ return (
+
+
+
+ Hostname
+
+
+ {hostname ? hostname : 'None'}
+
+
+
+ );
+};
+
export const FirstBootList = () => {
const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript);
diff --git a/src/test/Components/CreateImageWizard/steps/Hostname/Hostname.test.tsx b/src/test/Components/CreateImageWizard/steps/Hostname/Hostname.test.tsx
index 01ea766f7..0e6c6e071 100644
--- a/src/test/Components/CreateImageWizard/steps/Hostname/Hostname.test.tsx
+++ b/src/test/Components/CreateImageWizard/steps/Hostname/Hostname.test.tsx
@@ -1,5 +1,5 @@
import type { Router as RemixRouter } from '@remix-run/router';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import { CREATE_BLUEPRINT } from '../../../../../constants';
@@ -55,6 +55,15 @@ const clearHostname = async () => {
await waitFor(() => user.clear(hostnameInput));
};
+const clickRevisitButton = async () => {
+ const user = userEvent.setup();
+ const expandable = await screen.findByTestId('hostname-expandable');
+ const revisitButton = await within(expandable).findByTestId(
+ 'revisit-hostname'
+ );
+ await waitFor(() => user.click(revisitButton));
+};
+
describe('Step Hostname', () => {
beforeEach(() => {
vi.clearAllMocks();
@@ -103,6 +112,15 @@ describe('Step Hostname', () => {
expect(nextButton).toBeEnabled();
expect(screen.queryByText(/Invalid hostname/)).not.toBeInTheDocument();
});
+
+ test('revisit step button on Review works', async () => {
+ await renderCreateMode();
+ await goToHostnameStep();
+ await enterHostname('hostname');
+ await goToReviewStep();
+ await clickRevisitButton();
+ await screen.findByRole('heading', { name: /Hostname/ });
+ });
});
describe('Hostname request generated correctly', () => {
@@ -133,5 +151,4 @@ describe('Hostname request generated correctly', () => {
});
});
-// TO DO 'Step Hostname' -> 'revisit step button on Review works'
// TO DO 'Hostname edit mode'