wizard: add Administrator checkbox to users step (HMS-4903)

this commit add Administrator checkbox to users step

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

@@ -1,19 +1,21 @@
 import React from 'react';
 
-import { Button, FormGroup } from '@patternfly/react-core';
+import { Button, FormGroup, Checkbox } 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 {
   selectUserConfirmPassword,
+  selectUserAdministrator,
   selectUserNameByIndex,
   selectUserPasswordByIndex,
   selectUserSshKeyByIndex,
   setUserConfirmPasswordByIndex,
   setUserNameByIndex,
   setUserPasswordByIndex,
   setUserSshKeyByIndex,
+  setUserAdministratorByIndex,
 } from '../../../../../store/wizardSlice';
 import { HookValidatedInput } from '../../../ValidatedTextInput';
 const UserInfo = () => {
@@ -27,6 +29,8 @@ const UserInfo = () => {
   const userConfirmPassword = useAppSelector(userConfirmPasswordSelector);
   const userSshKeySelector = selectUserSshKeyByIndex(index);
   const userSshKey = useAppSelector(userSshKeySelector);
+  const userIsAdministratorSelector = selectUserAdministrator(index);
+  const userIsAdministrator = useAppSelector(userIsAdministratorSelector);
 
   const handleNameChange = (
     _e: React.FormEvent<HTMLInputElement>,
@@ -58,6 +62,15 @@ const UserInfo = () => {
     dispatch(setUserSshKeyByIndex({ index: index, sshKey: value }));
   };
 
+  const handleCheckboxChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    value: boolean
+  ) => {
+    dispatch(
+      setUserAdministratorByIndex({ index: index, isAdministrator: value })
+    );
+  };
+
   const stepValidation = {
     errors: {},
     disabledNext: false,
@@ -117,6 +130,16 @@ const UserInfo = () => {
           Learn more about SSH keys
         </Button>
       </FormGroup>
+      <FormGroup>
+        <Checkbox
+          label="Administrator"
+          isChecked={userIsAdministrator}
+          onChange={(_e, value) => handleCheckboxChange(_e, value)}
+          aria-label="Administrator"
+          id="user Administrator"
+          name="user Administrator"
+        />
+      </FormGroup>
     </>
   );
 };

src/Components/CreateImageWizard/utilities/requestMapper.ts

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

src/store/wizardSlice.ts

@@ -48,6 +48,7 @@ export type UserWithAdditionalInfo = {
   [K in keyof User]-?: NonNullable<User[K]>;
 } & {
   confirmPassword: string;
+  isAdministrator: boolean;
 };
 
 type UserPayload = {
@@ -70,6 +71,11 @@ type UserConfirmPasswordPayload = {
   confirmPassword: string;
 };
 
+type UserAdministratorPayload = {
+  index: number;
+  isAdministrator: boolean;
+};
+
 export type wizardState = {
   env: {
     serverUrl: string;
@@ -390,6 +396,11 @@ export const selectUserSshKeyByIndex =
     return state.wizard.users[userIndex]?.ssh_key;
   };
 
+export const selectUserAdministrator =
+  (userIndex: number) => (state: RootState) => {
+    return state.wizard.users[userIndex]?.isAdministrator;
+  };
+
 export const selectKernel = (state: RootState) => {
   return state.wizard.kernel;
 };
@@ -857,6 +868,20 @@ export const wizardSlice = createSlice({
     setUserSshKeyByIndex: (state, action: PayloadAction<UserSshKeyPayload>) => {
       state.users[action.payload.index].ssh_key = action.payload.sshKey;
     },
+    setUserAdministratorByIndex: (
+      state,
+      action: PayloadAction<UserAdministratorPayload>
+    ) => {
+      const { index, isAdministrator } = action.payload;
+      state.users[index].isAdministrator = isAdministrator;
+      if (isAdministrator) {
+        state.users[index].groups?.push('wheel');
+      } else {
+        state.users[index].groups = state.users[index].groups?.filter(
+          (group) => group !== 'wheel'
+        );
+      }
+    },
   },
 });
 
@@ -930,5 +955,6 @@ export const {
   setUserPasswordByIndex,
   setUserSshKeyByIndex,
   setUserConfirmPasswordByIndex,
+  setUserAdministratorByIndex,
 } = wizardSlice.actions;
 export default wizardSlice.reducer;

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

@@ -135,6 +135,7 @@ describe('Step Users', () => {
             {
               name: 'best',
               ssh_key: 'ssh-rsa d',
+              groups: [],
             },
           ],
         },

src/test/fixtures/editMode.ts

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