-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Warn users when trying to delete a container
- Loading branch information
Showing
12 changed files
with
216 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { render, screen, fireEvent, waitFor } from '@testing-library/react'; | ||
| import { useContext } from 'react'; | ||
| import { DeleteModalContextProvider, DeleteModalContext } from './delete-modal.provider'; | ||
|
|
||
| let deleteConfirmationResult: boolean | undefined; | ||
|
|
||
| describe('DeleteModalProvider', () => { | ||
| beforeEach(() => { | ||
| deleteConfirmationResult = undefined; | ||
| }); | ||
|
|
||
| it('calls deleteConfirmation with true when Confirm button is clicked', async () => { | ||
| render( | ||
| <DeleteModalContextProvider> | ||
| <TestComponent /> | ||
| </DeleteModalContextProvider>, | ||
| ); | ||
|
|
||
| const deleteButton = screen.getByText('Delete'); | ||
| fireEvent.click(deleteButton); | ||
|
|
||
| const confirmButton = await screen.findByRole('button', { name: 'Confirm' }); | ||
| fireEvent.click(confirmButton); | ||
|
|
||
| // Wait for deleteConfirmation promise to resolve | ||
| await waitFor(() => expect(deleteConfirmationResult).toEqual(true)); | ||
| }); | ||
|
|
||
| it('calls deleteConfirmation with false when Cancel button is clicked', async () => { | ||
| render( | ||
| <DeleteModalContextProvider> | ||
| <TestComponent /> | ||
| </DeleteModalContextProvider>, | ||
| ); | ||
|
|
||
| const deleteButton = screen.getByText('Delete'); | ||
| fireEvent.click(deleteButton); | ||
|
|
||
| const cancelButton = screen.getByRole('button', { name: 'Cancel' }); | ||
| fireEvent.click(cancelButton); | ||
|
|
||
| // Wait for deleteConfirmation promise to resolve | ||
| await waitFor(() => expect(deleteConfirmationResult).toEqual(false)); | ||
| }); | ||
| }); | ||
|
|
||
| const TestComponent = () => { | ||
| const { deleteConfirmation } = useContext(DeleteModalContext)!; | ||
|
|
||
| const handleDelete = async () => { | ||
| const confirmation = await deleteConfirmation(); | ||
| deleteConfirmationResult = confirmation; | ||
| }; | ||
|
|
||
| return <button onClick={handleDelete}>Delete</button>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { Modal, ModalVariant, Button } from '@patternfly/react-core'; | ||
| import { FunctionComponent, PropsWithChildren, createContext, useCallback, useMemo, useRef, useState } from 'react'; | ||
|
|
||
| interface DeleteModalContextValue { | ||
| deleteConfirmation: () => Promise<boolean>; | ||
| } | ||
|
|
||
| export const DeleteModalContext = createContext<DeleteModalContextValue | undefined>(undefined); | ||
|
|
||
| /** | ||
| * This provider is used to open the Delete Confirmation modal. | ||
| * The modal loads when the user clicks on the delete Routes/Kamelets of remove any Step from the Context Menu. | ||
| */ | ||
| export const DeleteModalContextProvider: FunctionComponent<PropsWithChildren> = (props) => { | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
|
|
||
| const deleteConfirmationRef = useRef<{ | ||
| resolve: (confirm: boolean) => void; | ||
| reject: (error: unknown) => unknown; | ||
| }>(); | ||
|
|
||
| const handleCloseModal = useCallback(() => { | ||
| setIsModalOpen(false); | ||
| deleteConfirmationRef.current?.resolve(false); | ||
| }, []); | ||
|
|
||
| const handleDeleteConfirm = useCallback(() => { | ||
| setIsModalOpen(false); | ||
| deleteConfirmationRef.current?.resolve(true); | ||
| }, []); | ||
|
|
||
| const deleteConfirmation = useCallback(() => { | ||
| const deleteConfirmationPromise = new Promise<boolean>((resolve, reject) => { | ||
| /** Set both resolve and reject functions to be used once the user choose an action */ | ||
| deleteConfirmationRef.current = { resolve, reject }; | ||
| }); | ||
|
|
||
| setIsModalOpen(true); | ||
|
|
||
| return deleteConfirmationPromise; | ||
| }, []); | ||
|
|
||
| const value: DeleteModalContextValue = useMemo( | ||
| () => ({ | ||
| deleteConfirmation, | ||
| }), | ||
| [], | ||
| ); | ||
|
|
||
| return ( | ||
| <DeleteModalContext.Provider value={value}> | ||
| {props.children} | ||
|
|
||
| {isModalOpen && ( | ||
| <Modal | ||
| variant={ModalVariant.small} | ||
| title="Delete?" | ||
| isOpen | ||
| onClose={handleCloseModal} | ||
| ouiaId="DeleteConfirmModal" | ||
| actions={[ | ||
| <Button key="confirm" variant="danger" onClick={handleDeleteConfirm}> | ||
| Confirm | ||
| </Button>, | ||
| <Button key="cancel" variant="link" onClick={handleCloseModal}> | ||
| Cancel | ||
| </Button>, | ||
| ]} | ||
| > | ||
| Are you sure you want to delete? | ||
| </Modal> | ||
| )} | ||
| </DeleteModalContext.Provider> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters