diff --git a/frontend/src/components/Modal/Modal/Modal.tsx b/frontend/src/components/Modal/Modal/Modal.tsx index ee4fc603b11ebc911adcad2eb09a7f477187d95c..d64acfecb2c30877b7187498af02dbd616307510 100644 --- a/frontend/src/components/Modal/Modal/Modal.tsx +++ b/frontend/src/components/Modal/Modal/Modal.tsx @@ -13,8 +13,7 @@ export const Modal: React.FC<ModalProps> = ({ useCancelButton = false, cancelButtonTitle = 'Cancel', isLoading = false, - leftActionA = <></>, - leftActionB = <></>, + leftActions = <></>, saveButtonDisabled = false, }) => { const cancelButtonRef = useRef(null); @@ -86,8 +85,7 @@ export const Modal: React.FC<ModalProps> = ({ {onSave && ( <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex"> - {leftActionA} - {leftActionB} + {leftActions} <div className="ml-auto sm:flex sm:flex-row-reverse"> <button type="button" diff --git a/frontend/src/components/Modal/Modal/types.ts b/frontend/src/components/Modal/Modal/types.ts index bd790e0c88d45cf3d2c655fe908e3f7048075ede..52cf784b6f07871aa74f3a9c28a4b9c86e2d0a91 100644 --- a/frontend/src/components/Modal/Modal/types.ts +++ b/frontend/src/components/Modal/Modal/types.ts @@ -9,7 +9,6 @@ export type ModalProps = { useCancelButton?: boolean; cancelButtonTitle?: string; isLoading?: boolean; - leftActionA?: React.ReactNode; - leftActionB?: React.ReactNode; + leftActions?: React.ReactNode; saveButtonDisabled?: boolean; }; diff --git a/frontend/src/components/UserModal/UserModal.tsx b/frontend/src/components/UserModal/UserModal.tsx index 38830ea4eb9d9432db4f2b3e88bf8cebde110da6..900ef7aee10a0d8b8b84a1b92f043eee0c906c26 100644 --- a/frontend/src/components/UserModal/UserModal.tsx +++ b/frontend/src/components/UserModal/UserModal.tsx @@ -131,6 +131,40 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) deleteModalClose(); }; + // Button with delete option. + const buttonDelete = () => { + return ( + userId && + user.email !== currentUser?.email && ( + <button + onClick={deleteModalOpen} + type="button" + className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" + > + <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" /> + Delete + </button> + ) + ); + }; + + // Button to generate password link + const buttonPasswordLink = () => { + return ( + userId && + isAdmin && ( + <button + onClick={passwordLinkModalOpen} + type="button" + className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm + font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" + > + Password Link + </button> + ) + ); + }; + return ( <> <Modal @@ -138,31 +172,11 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) open={open} onSave={handleSave} isLoading={userModalLoading} - leftActionA={ - userId && - user.email !== currentUser?.email && ( - <button - onClick={deleteModalOpen} - type="button" - className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" - > - <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" /> - Delete - </button> - ) - } - leftActionB={ - userId && - isAdmin && ( - <button - onClick={passwordLinkModalOpen} - type="button" - className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm -font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" - > - Password Link - </button> - ) + leftActions={ + <> + {buttonDelete()} + {buttonPasswordLink()} + </> } useCancelButton >