Wizard: Add remove user button in users step

this adds remove user button and add unit test as well.

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Button, FormGroup, Checkbox } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { Button, FormGroup, Checkbox, Tooltip } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, TrashIcon } from '@patternfly/react-icons';
 
 import { GENERATING_SSH_KEY_PAIRS_URL } from '../../../../../constants';
 import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
@@ -14,6 +14,7 @@ import {
   setUserPasswordByIndex,
   setUserSshKeyByIndex,
   setUserAdministratorByIndex,
+  removeUser,
 } from '../../../../../store/wizardSlice';
 import { useUsersValidation } from '../../../utilities/useValidation';
 import {
@@ -64,6 +65,10 @@ const UserInfo = () => {
     );
   };
 
+  const onRemoveUserClick = () => {
+    dispatch(removeUser(index));
+  };
+
   return (
     <>
       <FormGroup isRequired label="Username">
@@ -119,6 +124,16 @@ const UserInfo = () => {
           name="user Administrator"
         />
       </FormGroup>
+      <Tooltip position="top-start" content={'Remove user'}>
+        <FormGroup>
+          <Button
+            aria-label="remove user"
+            onClick={onRemoveUserClick}
+            variant="tertiary"
+            icon={<TrashIcon />}
+          ></Button>
+        </FormGroup>
+      </Tooltip>
     </>
   );
 };

src/store/wizardSlice.ts

@@ -872,6 +872,9 @@ export const wizardSlice = createSlice({
 
       state.users.push(newUser);
     },
+    removeUser: (state, action: PayloadAction<number>) => {
+      state.users = state.users.filter((_, index) => index !== action.payload);
+    },
     setUserNameByIndex: (state, action: PayloadAction<UserPayload>) => {
       state.users[action.payload.index].name = action.payload.name;
     },
@@ -983,6 +986,7 @@ export const {
   addPort,
   removePort,
   addUser,
+  removeUser,
   setUserNameByIndex,
   setUserPasswordByIndex,
   setUserSshKeyByIndex,

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

@@ -62,6 +62,14 @@ const clickAddUser = async () => {
   expect(addUser).toBeEnabled();
   await waitFor(() => user.click(addUser));
 };
+
+const clickRemoveUser = async () => {
+  const user = userEvent.setup();
+  const addUser = await screen.findByRole('button', { name: /remove user/i });
+  expect(addUser).toBeEnabled();
+  await waitFor(() => user.click(addUser));
+};
+
 const addSshKey = async (sshKey: string) => {
   const user = userEvent.setup();
   const enterSshKey = await screen.findByRole('textbox', {
@@ -70,6 +78,7 @@ const addSshKey = async (sshKey: string) => {
   await waitFor(() => user.type(enterSshKey, sshKey));
   await waitFor(() => expect(enterSshKey).toHaveValue(sshKey));
 };
+
 const addUserName = async (userName: string) => {
   const user = userEvent.setup();
   const enterUserName = screen.getByRole('textbox', {
@@ -189,6 +198,27 @@ describe('User request generated correctly', () => {
       expect(receivedRequest).toEqual(expectedRequest);
     });
   });
+
+  test('remove a user', async () => {
+    await renderCreateMode();
+    await goToRegistrationStep();
+    await clickRegisterLater();
+    await goToUsersStep();
+    await clickAddUser();
+    await addUserName('test');
+    await addSshKey('ssh-rsa');
+    await clickRemoveUser();
+    await waitFor(() => expect('add a user to your image'));
+    await goToReviewStep();
+    const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);
+    const expectedRequest = {
+      ...blueprintRequest,
+      customizations: {},
+    };
+    await waitFor(() => {
+      expect(receivedRequest).toEqual(expectedRequest);
+    });
+  });
 });
 
 describe('Users edit mode', () => {