wizard: add users to review step (HMS-4906)

Author: mgold1234

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

@@ -28,6 +28,7 @@ import {
   TargetEnvGCPList,
   TargetEnvOciList,
   TargetEnvOtherList,
+  UsersList,
   TimezoneList,
   LocaleList,
   HostnameList,
@@ -73,6 +74,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const [isExpandedLocale, setIsExpandedLocale] = useState(true);
   const [isExpandedHostname, setIsExpandedHostname] = 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');
@@ -102,6 +104,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
     setIsExpandedHostname(isExpandedHostname);
   const onToggleFirstBoot = (isExpandableFirstBoot: boolean) =>
     setIsExpandedFirstBoot(isExpandableFirstBoot);
+  const onToggleUsers = (isExpandedUsers: boolean) =>
+    setIsExpandedUsers(isExpandedUsers);
 
   type RevisitStepButtonProps = {
     ariaLabel: string;
@@ -158,6 +162,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   };
 
   const isFirstBootEnabled = useFlag('image-builder.firstboot.enabled');
+  const isUsersEnabled = useFlag('image-builder.users.enabled');
   return (
     <>
       <ExpandableSection
@@ -314,6 +319,21 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
         {/* Intentional prop drilling for simplicity - To be removed */}
         <ContentList snapshottingEnabled={snapshottingEnabled} />
       </ExpandableSection>
+      {isUsersEnabled && (
+        <ExpandableSection
+          toggleContent={composeExpandable(
+            'Users',
+            'revisit-users',
+            'wizard-users'
+          )}
+          onToggle={(_event, isExpandedUsers) => onToggleUsers(isExpandedUsers)}
+          isExpanded={isExpandedUsers}
+          isIndented
+          data-testid="users-expandable"
+        >
+          <UsersList />
+        </ExpandableSection>
+      )}
       {isTimezoneEnabled && (
         <ExpandableSection
           toggleContent={composeExpandable(

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

@@ -68,6 +68,8 @@ import {
   selectLanguages,
   selectKeyboard,
   selectHostname,
+  selectUserNameByIndex,
+  selectUserPasswordByIndex,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear, yyyyMMddFormat } from '../../../../Utilities/time';
 import {
@@ -774,6 +776,41 @@ export const TimezoneList = () => {
   );
 };
 
+export const UsersList = () => {
+  const index = 0;
+  const userNameSelector = selectUserNameByIndex(index);
+  const userName = useAppSelector(userNameSelector);
+  const userPasswordSelector = selectUserPasswordByIndex(index);
+  const userPassword = useAppSelector(userPasswordSelector);
+
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <>
+          <TextListItem
+            component={TextListItemVariants.dt}
+            className="pf-v5-u-min-width"
+          >
+            Username
+          </TextListItem>
+          <TextListItem component={TextListItemVariants.dd}>
+            {userName ? userName : 'None'}
+          </TextListItem>
+          <TextListItem
+            component={TextListItemVariants.dt}
+            className="pf-v5-u-min-width"
+          >
+            Password
+          </TextListItem>
+          <TextListItem component={TextListItemVariants.dd}>
+            {userPassword ? userPassword : 'None'}
+          </TextListItem>
+        </>
+      </TextList>
+    </TextContent>
+  );
+};
+
 export const LocaleList = () => {
   const languages = useAppSelector(selectLanguages);
   const keyboard = useAppSelector(selectKeyboard);

src/test/Components/CreateImageWizard/steps/Users/Users.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, EDIT_BLUEPRINT } from '../../../../../constants';
@@ -45,6 +45,13 @@ const goToReviewStep = async () => {
   await clickNext(); // Review
 };
 
+const clickRevisitButton = async () => {
+  const user = userEvent.setup();
+  const expandable = await screen.findByTestId('users-expandable');
+  const revisitButton = await within(expandable).findByTestId('revisit-users');
+  await waitFor(() => user.click(revisitButton));
+};
+
 const addValidUser = async () => {
   const user = userEvent.setup();
   const addUser = await screen.findByRole('button', { name: /add a user/i });
@@ -92,6 +99,17 @@ describe('Step Users', () => {
     await verifyCancelButton(router);
   });
 
+  test('revisit step button on Review works', async () => {
+    await renderCreateMode();
+    await goToRegistrationStep();
+    await clickRegisterLater();
+    await goToUsersStep();
+    await addValidUser();
+    await goToReviewStep();
+    await clickRevisitButton();
+    await screen.findByRole('heading', { name: /Users/ });
+  });
+
   describe('User request generated correctly', () => {
     test('with valid name and password', async () => {
       await renderCreateMode();