diff --git a/src/Components/CreateImageWizard/steps/Users/components/UserInfo.tsx b/src/Components/CreateImageWizard/steps/Users/components/UserInfo.tsx index 40bef01c..41ca0b9c 100644 --- a/src/Components/CreateImageWizard/steps/Users/components/UserInfo.tsx +++ b/src/Components/CreateImageWizard/steps/Users/components/UserInfo.tsx @@ -7,8 +7,12 @@ import { Tabs, Tab, TabTitleText, + Icon, } from '@patternfly/react-core'; -import { ExternalLinkAltIcon } from '@patternfly/react-icons'; +import { + ExclamationCircleIcon, + ExternalLinkAltIcon, +} from '@patternfly/react-icons'; import calculateNewIndex from './calculateNewIndex'; import RemoveUserModal from './RemoveUserModal'; @@ -122,12 +126,9 @@ const UserInfo = () => { }; const getValidationByIndex = (index: number) => { + const errors = stepValidation?.errors[index] || {}; return { - errors: { - userName: stepValidation?.errors[index]?.userName, - userSshKey: stepValidation?.errors[index]?.userSshKey, - groups: stepValidation?.errors[index]?.groups, - }, + errors, disabledNext: stepValidation.disabledNext, }; }; @@ -156,7 +157,20 @@ const UserInfo = () => { aria-label={`User ${user.name} tab`} key={index} eventKey={index} - title={{user.name || 'New user'}} + title={ + + {user.name || 'New user'}{' '} + {Object.entries(getValidationByIndex(index).errors).some( + ([field, error]) => + Boolean(error) && + !(field === 'userName' && error === 'Required value') + ) && ( + + + + )} + + } > { if (!userName) { return 'Required value'; @@ -496,9 +497,10 @@ const validateUserName = ( } // check for duplicate names - const duplicateName = - new Set(users.map((user) => user.name)).size !== users.length; - if (duplicateName) { + const count = users.filter( + (user, index) => user.name === userName && index !== currentIndex + ).length; + if (count > 0) { return 'Username already exists'; } return ''; @@ -525,7 +527,7 @@ export function useUsersValidation(): UsersStepValidation { for (let index = 0; index < users.length; index++) { const invalidGroups = []; - const userNameError = validateUserName(users, users[index].name); + const userNameError = validateUserName(users, users[index].name, index); const sshKeyError = validateSshKey(users[index].ssh_key); const isPasswordValid = checkPasswordValidity( users[index].password,