From 48b7564910fd71f6d6801d752c7b5504b327048c Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Tue, 10 Jan 2023 21:35:12 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20popover=20with=20validation?=
 =?UTF-8?q?=20message=20for=20validation=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/layout/modals/add-app.json  |  3 +++
 .../Modals/EditAppModal/EditAppModal.tsx      | 25 ++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/public/locales/en/layout/modals/add-app.json b/public/locales/en/layout/modals/add-app.json
index ff66e30df..409e524bc 100644
--- a/public/locales/en/layout/modals/add-app.json
+++ b/public/locales/en/layout/modals/add-app.json
@@ -61,5 +61,8 @@
 			"save": "Save secret",
 			"update": "Update secret"
 		}
+	},
+	"validation": {
+		"popover": "Your form contains invalid data. Hence, it can't be saved. Please resolve all issues and click this button again to save your changes"
 	}
 }
\ No newline at end of file
diff --git a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
index 9cd2bcdd8..1d27b151d 100644
--- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
@@ -1,5 +1,6 @@
-import { Alert, Button, Group, Stack, Tabs, Text, ThemeIcon } from '@mantine/core';
+import { Alert, Button, Group, Popover, Stack, Tabs, Text, ThemeIcon } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useDisclosure } from '@mantine/hooks';
 import { ContextModalProps } from '@mantine/modals';
 import {
   IconAccessPoint,
@@ -210,12 +211,28 @@ export const EditAppModal = ({
             <Button onClick={closeModal} px={50} variant="light" color="gray">
               {t('common:cancel')}
             </Button>
-            <Button disabled={!form.isValid()} px={50} type="submit">
-              {t('common:save')}
-            </Button>
+            <SaveButton formIsValid={form.isValid()} />
           </Group>
         </Stack>
       </form>
     </>
   );
 };
+
+const SaveButton = ({ formIsValid }: { formIsValid: boolean }) => {
+  const [opened, { close, open }] = useDisclosure(false);
+  const { t } = useTranslation(['layout/modals/add-app', 'common']);
+
+  return (
+    <Popover opened={opened && !formIsValid} withArrow withinPortal>
+      <Popover.Target>
+        <div onMouseEnter={open} onMouseLeave={close}>
+          <Button disabled={!formIsValid} px={50} type="submit">
+            {t('common:save')}
+          </Button>
+        </div>
+      </Popover.Target>
+      <Popover.Dropdown sx={{ pointerEvents: 'none' }}>{t('validation.popover')}</Popover.Dropdown>
+    </Popover>
+  );
+};