Wizard: Add kernel to Review step (HMS-5324)

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

@@ -32,6 +32,7 @@ import {
   TimezoneList,
   LocaleList,
   HostnameList,
+  KernelList,
 } from './ReviewStepTextLists';
 
 import isRhel from '../../../../../src/Utilities/isRhel';
@@ -83,12 +84,14 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const [isExpandedTimezone, setIsExpandedTimezone] = useState(true);
   const [isExpandedLocale, setIsExpandedLocale] = useState(true);
   const [isExpandedHostname, setIsExpandedHostname] = useState(true);
+  const [isExpandedKernel, setIsExpandedKernel] = useState(true);
   const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true);
   const [isExpandedUsers, setIsExpandedUsers] = useState(true);
 
   const isTimezoneEnabled = useFlag('image-builder.timezone.enabled');
   const isLocaleEnabled = useFlag('image-builder.locale.enabled');
   const isHostnameEnabled = useFlag('image-builder.hostname.enabled');
+  const isKernelEnabled = useFlag('image-builder.kernel.enabled');
 
   const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
     setIsExpandedImageOutput(isExpandedImageOutput);
@@ -112,6 +115,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
     setIsExpandedLocale(isExpandedLocale);
   const onToggleHostname = (isExpandedHostname: boolean) =>
     setIsExpandedHostname(isExpandedHostname);
+  const onToggleKernel = (isExpandedKernel: boolean) =>
+    setIsExpandedKernel(isExpandedKernel);
   const onToggleFirstBoot = (isExpandableFirstBoot: boolean) =>
     setIsExpandedFirstBoot(isExpandableFirstBoot);
   const onToggleUsers = (isExpandedUsers: boolean) =>
@@ -398,6 +403,23 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
           <HostnameList />
         </ExpandableSection>
       )}
+      {isKernelEnabled && (
+        <ExpandableSection
+          toggleContent={composeExpandable(
+            'Kernel',
+            'revisit-kernel',
+            'wizard-kernel'
+          )}
+          onToggle={(_event, isExpandedKernel) =>
+            onToggleKernel(isExpandedKernel)
+          }
+          isExpanded={isExpandedKernel}
+          isIndented
+          data-testid="kernel-expandable"
+        >
+          <KernelList />
+        </ExpandableSection>
+      )}
       {isFirstBootEnabled && (
         <ExpandableSection
           toggleContent={composeExpandable(

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

@@ -12,6 +12,8 @@ import {
   TextListItemVariants,
   TextVariants,
   FormGroup,
+  CodeBlock,
+  CodeBlockCode,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 
@@ -72,6 +74,7 @@ import {
   selectUserNameByIndex,
   selectUserPasswordByIndex,
   selectUserSshKeyByIndex,
+  selectKernel,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear, yyyyMMddFormat } from '../../../../Utilities/time';
 import {
@@ -877,6 +880,39 @@ export const HostnameList = () => {
   );
 };
 
+export const KernelList = () => {
+  const kernel = useAppSelector(selectKernel);
+
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Name
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {kernel.name ? kernel.name : 'None'}
+        </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Append
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          <CodeBlock>
+            <CodeBlockCode>
+              {kernel.append.length > 0 ? kernel.append.join(' ') : 'None'}
+            </CodeBlockCode>
+          </CodeBlock>
+        </TextListItem>
+      </TextList>
+    </TextContent>
+  );
+};
+
 export const FirstBootList = () => {
   const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript);
 

src/test/Components/CreateImageWizard/steps/Kernel/Kernel.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';
@@ -140,6 +140,13 @@ const selectProfile = async () => {
   await waitFor(() => user.click(cis1Profile));
 };
 
+const clickRevisitButton = async () => {
+  const user = userEvent.setup();
+  const expandable = await screen.findByTestId('kernel-expandable');
+  const revisitButton = await within(expandable).findByTestId('revisit-kernel');
+  await waitFor(() => user.click(revisitButton));
+};
+
 describe('Step Kernel', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -219,6 +226,15 @@ describe('Step Kernel', () => {
       screen.queryByRole('button', { name: /close audit=1/i })
     ).not.toBeInTheDocument();
   });
+
+  test('revisit step button on Review works', async () => {
+    await renderCreateMode();
+    await goToKernelStep();
+    await selectKernelName('kernel');
+    await goToReviewStep();
+    await clickRevisitButton();
+    await screen.findByRole('heading', { name: /Kernel/ });
+  });
 });
 
 describe('Kernel request generated correctly', () => {
@@ -333,5 +349,4 @@ describe('Kernel request generated correctly', () => {
   });
 });
 
-// TO DO 'Kernel step' -> 'revisit step button on Review works'
 // TO DO 'Kernel edit mode'