From 146ad448c2670e48e6c3a771688a211cb2b6f4a1 Mon Sep 17 00:00:00 2001
From: Mart van Santen <mart@greenhost.nl>
Date: Mon, 13 Mar 2023 22:35:46 +0800
Subject: [PATCH] Processed comments
---
frontend/src/components/Modal/Modal/Modal.tsx | 6 +-
frontend/src/components/Modal/Modal/types.ts | 3 +-
.../src/components/UserModal/UserModal.tsx | 64 +++++++++++--------
3 files changed, 42 insertions(+), 31 deletions(-)
diff --git a/frontend/src/components/Modal/Modal/Modal.tsx b/frontend/src/components/Modal/Modal/Modal.tsx
index ee4fc603..d64acfec 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 bd790e0c..52cf784b 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 38830ea4..900ef7ae 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
>
--
GitLab