this commit adds ssh_key to users step

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

@@ -1,13 +1,17 @@
 import React from 'react';
 
-import { FormGroup } from '@patternfly/react-core';
+import { Button, FormGroup } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
+import { GENERATING_SSH_KEY_PAIRS_URL } from '../../../../../constants';
 import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
 import {
   selectUserNameByIndex,
   selectUserPasswordByIndex,
+  selectUserSshKeyByIndex,
   setUserNameByIndex,
   setUserPasswordByIndex,
+  setUserSshKeyByIndex,
 } from '../../../../../store/wizardSlice';
 import { HookValidatedInput } from '../../../ValidatedTextInput';
 const UserInfo = () => {
@@ -17,6 +21,8 @@ const UserInfo = () => {
   const userName = useAppSelector(userNameSelector);
   const userPasswordSelector = selectUserPasswordByIndex(index);
   const userPassword = useAppSelector(userPasswordSelector);
+  const userSshKeySelector = selectUserSshKeyByIndex(index);
+  const userSshKey = useAppSelector(userSshKeySelector);
 
   const handleNameChange = (
     _e: React.FormEvent<HTMLInputElement>,
@@ -32,6 +38,13 @@ const UserInfo = () => {
     dispatch(setUserPasswordByIndex({ index: index, password: value }));
   };
 
+  const handleSshKeyChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    dispatch(setUserSshKeyByIndex({ index: index, sshKey: value }));
+  };
+
   const stepValidation = {
     errors: {},
     disabledNext: false,
@@ -59,6 +72,28 @@ const UserInfo = () => {
           fieldName="userPassword"
         />
       </FormGroup>
+      <FormGroup isRequired label="SSH key">
+        <HookValidatedInput
+          ariaLabel="public SSH key"
+          value={userSshKey || ''}
+          type={'text'}
+          onChange={(_e, value) => handleSshKeyChange(_e, value)}
+          placeholder="Paste your public SSH key"
+          stepValidation={stepValidation}
+          fieldName="userSshKey"
+        />
+        <Button
+          component="a"
+          target="_blank"
+          variant="link"
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="right"
+          href={GENERATING_SSH_KEY_PAIRS_URL}
+          className="pf-v5-u-pl-0"
+        >
+          Learn more about SSH keys
+        </Button>
+      </FormGroup>
     </>
   );
 };

src/Components/CreateImageWizard/utilities/requestMapper.ts

@@ -583,6 +583,9 @@ const getUsers = (state: RootState): User[] | undefined => {
     if (user.password !== '') {
       result.password = user.password;
     }
+    if (user.ssh_key !== '') {
+      result.ssh_key = user.ssh_key;
+    }
     return result as User;
   });
 };

src/constants.ts

@@ -47,6 +47,8 @@ export const CREATE_RHEL_IMAGES_WITH_AUTOMATED_MANAGEMENT_URL =
   'https://docs.redhat.com/en/documentation/edge_management/2022/html/create_rhel_for_edge_images_and_configure_automated_management/index';
 export const OSBUILD_SERVICE_ARCHITECTURE_URL =
   'https://osbuild.org/docs/service/architecture/';
+export const GENERATING_SSH_KEY_PAIRS_URL =
+  'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/configuring_basic_system_settings/assembly_using-secure-communications-between-two-systems-with-openssh_configuring-basic-system-settings#generating-ssh-key-pairs_assembly_using-secure-communications-between-two-systems-with-openssh';
 
 export const RHEL_8 = 'rhel-8';
 export const RHEL_9 = 'rhel-9';

src/store/wizardSlice.ts

@@ -58,6 +58,11 @@ type UserPasswordPayload = {
   password: string;
 };
 
+type UserSshKeyPayload = {
+  index: number;
+  sshKey: string;
+};
+
 export type wizardState = {
   env: {
     serverUrl: string;
@@ -368,6 +373,11 @@ export const selectUserPasswordByIndex =
     return state.wizard.users[userIndex]?.password;
   };
 
+export const selectUserSshKeyByIndex =
+  (userIndex: number) => (state: RootState) => {
+    return state.wizard.users[userIndex]?.ssh_key;
+  };
+
 export const selectKernel = (state: RootState) => {
   return state.wizard.kernel;
 };
@@ -810,6 +820,9 @@ export const wizardSlice = createSlice({
     ) => {
       state.users[action.payload.index].password = action.payload.password;
     },
+    setUserSshKeyByIndex: (state, action: PayloadAction<UserSshKeyPayload>) => {
+      state.users[action.payload.index].ssh_key = action.payload.sshKey;
+    },
   },
 });
 
@@ -880,5 +893,6 @@ export const {
   addUser,
   setUserNameByIndex,
   setUserPasswordByIndex,
+  setUserSshKeyByIndex,
 } = wizardSlice.actions;
 export default wizardSlice.reducer;

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

@@ -63,6 +63,11 @@ const addValidUser = async () => {
   const nextButton = await getNextButton();
   await waitFor(() => user.type(enterUserName, 'best'));
   await waitFor(() => expect(enterUserName).toHaveValue('best'));
+  const enterSshKey = await screen.findByRole('textbox', {
+    name: /public SSH key/i,
+  });
+  await waitFor(() => user.type(enterSshKey, 'ssh-rsa d'));
+  await waitFor(() => expect(enterSshKey).toHaveValue('ssh-rsa d'));
   await waitFor(() => expect(nextButton).toBeEnabled());
 };
 
@@ -129,6 +134,7 @@ describe('Step Users', () => {
           users: [
             {
               name: 'best',
+              ssh_key: 'ssh-rsa d',
             },
           ],
         },

src/test/fixtures/editMode.ts

@@ -447,6 +447,7 @@ export const usersCreateBlueprintRequest: CreateBlueprintRequest = {
     users: [
       {
         name: 'best',
+        ssh_key: 'ssh-rsa d',
       },
     ],
   },