add remove user button if user change his mind and doesnt want to add…

… a user
osbuild · Jan 20, 2025 · 060fd9a · 060fd9a
1 parent 70bcee8
commit 060fd9a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx b/src/Components/CreateImageWizard/steps/Users/component/UserInfo.tsx
@@ -1,11 +1,21 @@
 import React from 'react';
 
-import { Button, FormGroup } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import {
+  Button,
+  EmptyState,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  FormGroup,
+  Popover,
+  Text,
+  TextContent,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
 
 import { GENERATING_SSH_KEY_PAIRS_URL } from '../../../../../constants';
 import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
 import {
+  removeUser,
   selectUserNameByIndex,
   selectUserPasswordByIndex,
   selectUserSshKeyByIndex,
@@ -46,6 +56,10 @@ const UserInfo = () => {
     dispatch(setUserSshKeyByIndex({ index: index, sshKey: value }));
   };
 
+  const onRemoveUserClick = () => {
+    dispatch(removeUser());
+  };
+
   const stepValidation = useUsersValidation();
 
   return (
@@ -92,6 +106,34 @@ const UserInfo = () => {
           Learn more about SSH keys
         </Button>
       </FormGroup>
+      <EmptyState variant={EmptyStateVariant.lg}>
+        <EmptyStateFooter>
+          <Popover
+            hasAutoWidth
+            maxWidth="35rem"
+            bodyContent={
+              <TextContent>
+                <Text>
+                  If you regret and do not want to add a user it is totally
+                  fine, just click the button to remove it
+                </Text>
+              </TextContent>
+            }
+          >
+            <Button
+              variant="plain"
+              aria-label="Activation key popover"
+              aria-describedby="subscription-activation-key"
+              className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
+            >
+              <HelpIcon />
+            </Button>
+          </Popover>
+          <Button variant="secondary" onClick={onRemoveUserClick}>
+            Remove a user
+          </Button>
+        </EmptyStateFooter>
+      </EmptyState>
     </>
   );
 };

diff --git a/src/store/wizardSlice.ts b/src/store/wizardSlice.ts
@@ -409,7 +409,7 @@ export const selectBlueprintDescription = (state: RootState) => {
 };
 
 export const selectFirstBootScript = (state: RootState) => {
-  return state.wizard.firstBoot?.script;
+  return state.wizard.firstBoot.script;
 };
 
 export const selectTimezone = (state: RootState) => {
@@ -836,6 +836,9 @@ export const wizardSlice = createSlice({
 
       state.users.push(newUser);
     },
+    removeUser: (state) => {
+      state.users.pop();
+    },
     setUserNameByIndex: (state, action: PayloadAction<UserPayload>) => {
       state.users[action.payload.index].name = action.payload.name;
     },
@@ -930,6 +933,7 @@ export const {
   addPort,
   removePort,
   addUser,
+  removeUser,
   setUserNameByIndex,
   setUserPasswordByIndex,
   setUserSshKeyByIndex,