<WIP> Wizard: add users to review step (HMS-4906)

osbuild · Nov 27, 2024 · 50ca10d · 50ca10d
1 parent 91e67f0
commit 50ca10d
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
@@ -21,6 +21,7 @@ import {
   DetailsList,
   ImageOutputList,
   OscapList,
+  UsersList,
   RegisterLaterList,
   RegisterNowList,
   TargetEnvAWSList,
@@ -66,8 +67,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const [isExpandedOscapDetail, setIsExpandedOscapDetail] = useState(true);
   const [isExpandedComplianceDetail, setIsExpandedComplianceDetail] =
     useState(true);
+  const [isExpandedUsers, setIsExpandedUsers] = useState(true);
   const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true);
-
   const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
     setIsExpandedImageOutput(isExpandedImageOutput);
   const onToggleTargetEnvs = (isExpandedTargetEnvs: boolean) =>
@@ -84,6 +85,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
     setIsExpandedOscapDetail(isExpandedOscapDetail);
   const onToggleComplianceDetails = (isExpandedComplianceDetail: boolean) =>
     setIsExpandedComplianceDetail(isExpandedComplianceDetail);
+  const onToggleUsers = (isExpandedUsers: boolean) =>
+    setIsExpandedUsers(isExpandedUsers);
   const onToggleFirstBoot = (isExpandableFirstBoot: boolean) =>
     setIsExpandedFirstBoot(isExpandableFirstBoot);
 
@@ -140,7 +143,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
       </TextContent>
     );
   };
-
+  const isUsersEnabled = useFlag('image-builder.users.enabled');
   const isFirstBootEnabled = useFlag('image-builder.firstboot.enabled');
   return (
     <>
@@ -298,6 +301,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="timezone-expandable"
+        >
+          <UsersList />
+        </ExpandableSection>
+      )}
       {isFirstBootEnabled && (
         <ExpandableSection
           toggleContent={composeExpandable(

diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
@@ -63,6 +63,10 @@ import {
   selectUseLatest,
   selectPartitions,
   selectFirstBootScript,
+  selectUsers,
+  selectUserName,
+  selectUserPassword,
+  selectUserSshKey,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear, yyyyMMddFormat } from '../../../../Utilities/time';
 import {
@@ -739,6 +743,41 @@ export const OscapList = () => {
   return <OscapProfileInformation allowChangingCompliancePolicy={true} />;
 };
 
+export const UsersList = () => {
+  const users = useAppSelector(selectUsers);
+  const userName = useAppSelector(selectUserName);
+  const userPassword = useAppSelector(selectUserPassword);
+  const userSshKey = useAppSelector(selectUserSshKey);
+
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-u-min-width"
+        >
+          Users
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {users.length > 0 && (
+            <>
+              <TextListItem
+                component={TextListItemVariants.dt}
+                className="pf-v5-u-min-width"
+              >
+                User name
+              </TextListItem>
+              <TextListItem component={TextListItemVariants.dd}>
+                {userName}
+              </TextListItem>
+            </>
+          )}
+        </TextListItem>
+      </TextList>
+    </TextContent>
+  );
+};
+
 export const FirstBootList = () => {
   const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript);