Wizard: Add Hostname expandable to Review step

This adds a new expandable to the Review step.

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 }) => {
           <LocaleList />
         </ExpandableSection>
       )}
+      {isHostnameEnabled && (
+        <ExpandableSection
+          toggleContent={composeExpandable(
+            'Hostname',
+            'revisit-hostname',
+            'wizard-hostname'
+          )}
+          onToggle={(_event, isExpandedHostname) =>
+            onToggleHostname(isExpandedHostname)
+          }
+          isExpanded={isExpandedHostname}
+          isIndented
+          data-testid="hostname-expandable"
+        >
+          <HostnameList />
+        </ExpandableSection>
+      )}
       {isFirstBootEnabled && (
         <ExpandableSection
           toggleContent={composeExpandable(

src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx

@@ -67,6 +67,7 @@ import {
   selectNtpServers,
   selectLanguages,
   selectKeyboard,
+  selectHostname,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear, yyyyMMddFormat } from '../../../../Utilities/time';
 import {
@@ -803,6 +804,26 @@ export const LocaleList = () => {
   );
 };
 
+export const HostnameList = () => {
+  const hostname = useAppSelector(selectHostname);
+
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Hostname
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {hostname ? hostname : 'None'}
+        </TextListItem>
+      </TextList>
+    </TextContent>
+  );
+};
+
 export const FirstBootList = () => {
   const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript);