wizard: add user information step (HMS-4903)

This commit introduces the user information step with the following fields:
(*) `userName` field
(*) `password` field
(*) add unit tests for create and edit mode

src/Components/CreateImageWizard/steps/Users/component/Empty.tsx

@@ -10,7 +10,16 @@ import {
 } from '@patternfly/react-core';
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 
+import { useAppDispatch } from '../../../../../store/hooks';
+import { addUser } from '../../../../../store/wizardSlice';
+
 const EmptyUserState = () => {
+  const dispatch = useAppDispatch();
+
+  const onAddUserClick = () => {
+    dispatch(addUser());
+  };
+
   return (
     <EmptyState variant={EmptyStateVariant.lg}>
       <EmptyStateHeader
@@ -18,11 +27,12 @@ const EmptyUserState = () => {
         headingLevel="h4"
       />
       <EmptyStateFooter>
-        <Button variant="secondary" onClick={() => {}}>
+        <Button variant="secondary" onClick={onAddUserClick}>
           Add a user
         </Button>
       </EmptyStateFooter>
     </EmptyState>
   );
 };
+
 export default EmptyUserState;

src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { Form, FormGroup } from '@patternfly/react-core';
+
+import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
+import {
+  selectUserNameByIndex,
+  selectUserPasswordByIndex,
+  setUserNameByIndex,
+  setUserPasswordByIndex,
+} from '../../../../../store/wizardSlice';
+import { HookValidatedInput } from '../../../ValidatedTextInput';
+const UserInfo = () => {
+  const dispatch = useAppDispatch();
+  const index = 0;
+  const userNameSelector = selectUserNameByIndex(index);
+  const userName = useAppSelector(userNameSelector);
+  const userPasswordSelector = selectUserPasswordByIndex(index);
+  const userPassword = useAppSelector(userPasswordSelector);
+
+  const handleNameChange = (
+    _e: React.FormEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    dispatch(setUserNameByIndex({ index: index, name: value }));
+  };
+
+  const handlePasswordChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    dispatch(setUserPasswordByIndex({ index: index, password: value }));
+  };
+
+  const stepValidation = {
+    errors: {},
+    disabledNext: false,
+  };
+
+  return (
+    <Form>
+      <FormGroup isRequired label="Username">
+        <HookValidatedInput
+          ariaLabel="blueprint user name"
+          value={userName || ''}
+          placeholder="Enter username"
+          onChange={(_e, value) => handleNameChange(_e, value)}
+          stepValidation={stepValidation}
+          fieldName="userName"
+        />
+      </FormGroup>
+      <FormGroup isRequired label="Password">
+        <HookValidatedInput
+          ariaLabel="blueprint user password"
+          value={userPassword || ''}
+          onChange={(_e, value) => handlePasswordChange(_e, value)}
+          placeholder="Enter password"
+          stepValidation={stepValidation}
+          fieldName="userPassword"
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+
+export default UserInfo;

src/Components/CreateImageWizard/steps/Users/index.tsx

@@ -3,15 +3,21 @@ import React from 'react';
 import { Form, Text, Title } from '@patternfly/react-core';
 
 import EmptyUserState from './component/Empty';
+import UserInfo from './component/UserInfo';
+
+import { useAppSelector } from '../../../../store/hooks';
+import { selectUsers } from '../../../../store/wizardSlice';
 
 const UsersStep = () => {
+  const users = useAppSelector(selectUsers);
+
   return (
     <Form>
       <Title headingLevel="h1" size="xl">
         Users
       </Title>
       <Text>Add a user to your image.</Text>
-      <EmptyUserState />
+      {users.length !== 0 ? <UserInfo /> : <EmptyUserState />}
     </Form>
   );
 };

src/Components/CreateImageWizard/utilities/requestMapper.ts

@@ -34,6 +34,7 @@ import {
   Services,
   Subscription,
   UploadTypes,
+  User,
 } from '../../../store/imageBuilderApi';
 import {
   selectActivationKey,
@@ -81,6 +82,7 @@ import {
   selectLanguages,
   selectKeyboard,
   selectHostname,
+  selectUsers,
 } from '../../../store/wizardSlice';
 import { FileSystemConfigurationType } from '../steps/FileSystem';
 import {
@@ -206,6 +208,15 @@ function commonRequestToState(
       blueprintName: request.name || '',
       blueprintDescription: request.description || '',
     },
+    users:
+      request.customizations.users?.map((user) => ({
+        name: user.name,
+        password: '', // The image-builder API does not return the password.
+        ssh_key: user.ssh_key || '',
+        confirmPassword: '',
+        groups: user.groups || [],
+        isAdministrator: user.groups?.includes('wheel') || false,
+      })) || [],
     compliance:
       compliancePolicyID !== undefined
         ? {
@@ -502,7 +513,7 @@ const getCustomizations = (state: RootState, orgID: string): Customizations => {
     custom_repositories: getCustomRepositories(state),
     openscap: getOpenscap(state),
     filesystem: getFileSystem(state),
-    users: undefined,
+    users: getUsers(state),
     services: getServices(state),
     hostname: selectHostname(state) || undefined,
     kernel: selectKernel(state).append
@@ -558,6 +569,24 @@ const getOpenscap = (state: RootState): OpenScap | undefined => {
   return undefined;
 };
 
+const getUsers = (state: RootState): User[] | undefined => {
+  const users = selectUsers(state);
+
+  if (users.length === 0) {
+    return undefined;
+  }
+
+  return users.map((user) => {
+    const result: User = {
+      name: user.name,
+    };
+    if (user.password !== '') {
+      result.password = user.password;
+    }
+    return result as User;
+  });
+};
+
 const getFileSystem = (state: RootState): Filesystem[] | undefined => {
   const mode = selectFileSystemConfigurationType(state);