Processed comments

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"

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;
 };

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
       >