From 47565e7fd2aa3e5a929fcb51ad8119de373d3474 Mon Sep 17 00:00:00 2001
From: grimsi <9295182+grimsi@users.noreply.github.com>
Date: Sun, 29 Sep 2024 17:53:40 +0200
Subject: [PATCH] Minor UI fixes

---
 .../administration/MessageManagement.tsx      |  4 +-
 .../messages/SendTestNotificationModal.tsx    | 42 ++++++++++---------
 .../administration/withConfigPage.tsx         |  2 +-
 .../components/general/UserManagementCard.tsx |  2 +-
 4 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/main/frontend/components/administration/MessageManagement.tsx b/src/main/frontend/components/administration/MessageManagement.tsx
index 43a7fd0..b837378 100644
--- a/src/main/frontend/components/administration/MessageManagement.tsx
+++ b/src/main/frontend/components/administration/MessageManagement.tsx
@@ -55,7 +55,7 @@ function MessageManagementLayout({getConfig, getConfigs, formik}: any) {
             <div className="flex flex-row">
                 <div className="flex flex-col flex-1">
                     <div className="flex flex-row gap-8">
-                        <div className="flex flex-col flex-1">
+                        <div className="flex flex-col flex-1 h-fit">
                             <Section title="E-Mail"/>
                             <ConfigFormField configElement={getConfig("messages.providers.email.enabled")}/>
                             <ConfigFormField configElement={getConfig("messages.providers.email.host")}
@@ -74,7 +74,7 @@ function MessageManagementLayout({getConfig, getConfigs, formik}: any) {
                                         formik.values.messages.providers.email.port &&
                                         formik.values.messages.providers.email.username)}>Test</Button>
                         </div>
-                        <div className="flex flex-col flex-1">
+                        <div className="flex flex-col flex-1 h-fit">
                             <Section title="Message Templates"/>
                             <div className="flex flex-col gap-4">
                                 {availableTemplates.map((template: MessageTemplateDto) =>
diff --git a/src/main/frontend/components/administration/messages/SendTestNotificationModal.tsx b/src/main/frontend/components/administration/messages/SendTestNotificationModal.tsx
index e73fde4..8832672 100644
--- a/src/main/frontend/components/administration/messages/SendTestNotificationModal.tsx
+++ b/src/main/frontend/components/administration/messages/SendTestNotificationModal.tsx
@@ -34,6 +34,7 @@ export default function SendTestNotificationModal({
                     <>
                         <Formik
                             initialValues={{}}
+                            isInitialValid={false}
                             onSubmit={async (values) => {
                                 await MessageEndpoint.sendTestNotification(selectedTemplate?.key, values);
                                 toast.success("Test notification to you has been sent");
@@ -41,25 +42,28 @@ export default function SendTestNotificationModal({
                             }}
                             validationSchema={generateValidationSchema(selectedTemplate?.availablePlaceholders as string[])}
                         >
-                            <Form>
-                                <ModalHeader className="flex flex-col gap-1">
-                                    Send {selectedTemplate?.name} Test Message
-                                </ModalHeader>
-                                <ModalBody>
-                                    <p className="text-ls font-semibold mb-4">Fill the placeholders of the template</p>
-                                    {selectedTemplate?.availablePlaceholders?.map((placeholder) =>
-                                        <Input key={placeholder} label={placeholder} name={placeholder}/>
-                                    )}
-                                </ModalBody>
-                                <ModalFooter>
-                                    <Button color="danger" variant="light" onPress={onClose}>
-                                        Close
-                                    </Button>
-                                    <Button color="primary" type="submit">
-                                        Send
-                                    </Button>
-                                </ModalFooter>
-                            </Form>
+                            {(formik) => (
+                                <Form>
+                                    <ModalHeader className="flex flex-col gap-1">
+                                        Send {selectedTemplate?.name} Test Message
+                                    </ModalHeader>
+                                    <ModalBody>
+                                        <p className="text-ls font-semibold mb-4">Fill the placeholders of the
+                                            template</p>
+                                        {selectedTemplate?.availablePlaceholders?.map((placeholder) =>
+                                            <Input key={placeholder} label={placeholder} name={placeholder}/>
+                                        )}
+                                    </ModalBody>
+                                    <ModalFooter>
+                                        <Button color="danger" variant="light" onPress={onClose}>
+                                            Close
+                                        </Button>
+                                        <Button color="primary" type="submit" isDisabled={!formik.isValid}>
+                                            Send
+                                        </Button>
+                                    </ModalFooter>
+                                </Form>
+                            )}
                         </Formik>
                     </>
                 )}
diff --git a/src/main/frontend/components/administration/withConfigPage.tsx b/src/main/frontend/components/administration/withConfigPage.tsx
index c936093..88bb44a 100644
--- a/src/main/frontend/components/administration/withConfigPage.tsx
+++ b/src/main/frontend/components/administration/withConfigPage.tsx
@@ -139,7 +139,7 @@ export default function withConfigPage(WrappedComponent: React.ComponentType<any
                                 <Button
                                     color="primary"
                                     isLoading={formik.isSubmitting}
-                                    disabled={formik.isSubmitting || configSaved || !formik.dirty}
+                                    isDisabled={formik.isSubmitting || configSaved || !formik.dirty}
                                     type="submit"
                                 >
                                     {formik.isSubmitting ? "" : configSaved ? <Check/> : "Save"}
diff --git a/src/main/frontend/components/general/UserManagementCard.tsx b/src/main/frontend/components/general/UserManagementCard.tsx
index 794d8b6..cde7fbb 100644
--- a/src/main/frontend/components/general/UserManagementCard.tsx
+++ b/src/main/frontend/components/general/UserManagementCard.tsx
@@ -130,7 +130,7 @@ export function UserManagementCard({user}: { user: UserInfoDto }) {
 
                 <Dropdown placement="bottom-end" size="sm" backdrop="opaque">
                     <DropdownTrigger>
-                        <DotsThreeVertical/>
+                        <DotsThreeVertical cursor="pointer"/>
                     </DropdownTrigger>
                     <DropdownMenu aria-label="Static Actions" items={dropdownItems} disabledKeys={disabledKeys}>
                         {(item) => (