build(deps-dev): bump eslint-plugin-react from 7.37.1 to 7.37.2

Bumps [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) from 7.37.1 to 7.37.2.
- [Release notes](https://github.com/jsx-eslint/eslint-plugin-react/releases)
- [Changelog](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/CHANGELOG.md)
- [Commits](jsx-eslint/eslint-plugin-react@v7.37.1...v7.37.2)

---
updated-dependencies:
- dependency-name: eslint-plugin-react
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Wizard: Add `Users` step to the wizard (HMS-4902)

This commit adds a new step 'Users' that is enabled only in stage-preview,
and will enable it in stage-stable once IQE tests are ready.
The step is not functional yet, this is just the first step.

this commit add new step 'Users' that enabled only in stage-preview

package.json

@@ -58,7 +58,7 @@
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest-dom": "5.4.0",
     "eslint-plugin-jsx-a11y": "6.10.0",
-    "eslint-plugin-react": "7.37.1",
+    "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-react-redux": "4.2.0",
     "eslint-plugin-testing-library": "6.4.0",

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -34,6 +34,7 @@ import {
   useFirstBootValidation,
   useDetailsValidation,
   useRegistrationValidation,
+  useUserValidation,
 } from './utilities/useValidation';
 import {
   isAwsAccountIdValid,
@@ -63,6 +64,7 @@ import {
   selectGcpShareMethod,
   selectImageTypes,
   addImageType,
+  selectUserName,
 } from '../../store/wizardSlice';
 import { resolveRelPath } from '../../Utilities/path';
 import { useFlag } from '../../Utilities/useGetEnvironment';
@@ -200,6 +202,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const azureSubscriptionId = useAppSelector(selectAzureSubscriptionId);
   const azureResourceGroup = useAppSelector(selectAzureResourceGroup);
   const azureSource = useAppSelector(selectAzureSource);
+  const user = useAppSelector(selectUserName);
   // Registration
   const registrationValidation = useRegistrationValidation();
   // Snapshots
@@ -211,6 +214,8 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const firstBootValidation = useFirstBootValidation();
   // Details
   const detailsValidation = useDetailsValidation();
+  // User
+  const userValidation = useUserValidation();
 
   let startIndex = 1; // default index
   if (isEdit) {
@@ -441,7 +446,10 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 key="wizard-users"
                 isHidden={!isUsersEnabled}
                 footer={
-                  <CustomWizardFooter disableNext={false} optional={true} />
+                  <CustomWizardFooter
+                    disableNext={user !== '' && userValidation.disabledNext}
+                    optional={true}
+                  />
                 }
               >
                 <UsersStep />

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

@@ -10,19 +10,23 @@ import {
 } from '@patternfly/react-core';
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 
-const EmptyUserState = () => {
+interface EmptyUserStateProps {
+  onAddUserClick: () => void;
+}
+const EmptyUserState = ({ onAddUserClick }: EmptyUserStateProps) => {
   return (
     <EmptyState variant={EmptyStateVariant.lg}>
       <EmptyStateHeader
         icon={<EmptyStateIcon icon={UserIcon} />}
         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,120 @@
+import React, { useState } from 'react';
+
+import {
+  Checkbox,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
+
+import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
+import {
+  selectUserName,
+  selectUserPassword,
+  selectConfirmUserPassword,
+  selectUserAdministrator,
+  setUserName,
+  setUserPassword,
+  setConfirmUserPassword,
+  changeUserAdministrator,
+} from '../../../../../store/wizardSlice';
+import { useUserValidation } from '../../../utilities/useValidation';
+import { HookValidatedInput } from '../../../ValidatedTextInput';
+
+const UserInfo = () => {
+  const dispatch = useAppDispatch();
+  const userName = useAppSelector(selectUserName);
+  const userPassword = useAppSelector(selectUserPassword);
+  const confirmUserPassword = useAppSelector(selectConfirmUserPassword);
+  const userAdministrator = useAppSelector(selectUserAdministrator);
+
+  const handleNameChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    name: string
+  ) => {
+    dispatch(setUserName(name));
+  };
+  const handlePasswordChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    password: string
+  ) => {
+    dispatch(setUserPassword(password));
+  };
+  const handleConfirmPasswordChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    confirm: string
+  ) => {
+    dispatch(setConfirmUserPassword(confirm));
+  };
+  const handleCheckboxChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    userAdministrator: boolean
+  ) => {
+    dispatch(changeUserAdministrator(userAdministrator));
+  };
+
+  const stepValidation = useUserValidation();
+  return (
+    <Form>
+      <FormGroup isRequired label="Username" fieldId="blueprint-user-name">
+        <HookValidatedInput
+          ariaLabel="blueprint user name"
+          value={userName}
+          onChange={handleNameChange}
+          placeholder="Enter username"
+          stepValidation={stepValidation}
+          fieldName="user name"
+        />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              Can only contain letters, numbers, hyphens (-), and
+              underscores(_).
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+
+      <FormGroup isRequired label="password" fieldId="blueprint-user-name">
+        <HookValidatedInput
+          ariaLabel="blueprint user password"
+          value={userPassword}
+          onChange={handlePasswordChange}
+          placeholder="Enter password"
+          stepValidation={stepValidation}
+          fieldName="user name"
+        />
+      </FormGroup>
+      <FormGroup
+        isRequired
+        label="confirm password"
+        fieldId="blueprint-confirm-password"
+      >
+        <HookValidatedInput
+          ariaLabel="blueprint confirm password"
+          value={confirmUserPassword}
+          onChange={handleConfirmPasswordChange}
+          placeholder="confirm password"
+          stepValidation={stepValidation}
+          fieldName="confirm password"
+        />
+      </FormGroup>
+
+      <FormGroup>
+        <Checkbox
+          label="Administrator"
+          isChecked={userAdministrator}
+          onChange={handleCheckboxChange}
+          aria-label="Administrator"
+          id="user Administrator"
+          name="user Administrator"
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+export default UserInfo;

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

@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useState } 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 { selectUserName } from '../../../../store/wizardSlice';
 
 const UsersStep = () => {
+  const userName = useAppSelector(selectUserName);
+  const [showUserInfo, setShowUserInfo] = useState(false);
+
+  const handleAddUserClick = () => {
+    setShowUserInfo(true);
+  };
+
   return (
     <Form>
       <Title headingLevel="h1" size="xl">
         Users
       </Title>
       <Text>Add a user to your image.</Text>
-      <EmptyUserState />
+      {userName ? (
+        <UserInfo />
+      ) : !showUserInfo ? (
+        <EmptyUserState onAddUserClick={handleAddUserClick} />
+      ) : (
+        <UserInfo />
+      )}
     </Form>
   );
 };

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -18,13 +18,18 @@ import {
   selectUseLatest,
   selectActivationKey,
   selectRegistrationType,
+  selectUserName,
+  selectUserPassword,
+  selectConfirmUserPassword,
 } from '../../../store/wizardSlice';
 import {
   getDuplicateMountPoints,
   isBlueprintNameValid,
   isBlueprintDescriptionValid,
   isMountpointMinSizeValid,
   isSnapshotValid,
+  isPasswordValid,
+  isUserNameValid,
 } from '../validators';
 
 export type StepValidation = {
@@ -133,6 +138,24 @@ export function useFirstBootValidation(): StepValidation {
   };
 }
 
+export function useUserValidation(): StepValidation {
+  const userName = useAppSelector(selectUserName);
+  const password = useAppSelector(selectUserPassword);
+  const confirmPassword = useAppSelector(selectConfirmUserPassword);
+  const userNameValid = isUserNameValid(userName);
+  const passwordValid = isPasswordValid(password, confirmPassword);
+
+  if (!userNameValid || !passwordValid) {
+    return {
+      errors: {
+        userName: 'Invalid user name',
+        password: 'Invalid password name',
+      },
+      disabledNext: true,
+    };
+  }
+  return { errors: {}, disabledNext: false };
+}
 export function useDetailsValidation(): StepValidation {
   const name = useAppSelector(selectBlueprintName);
   const description = useAppSelector(selectBlueprintDescription);