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 = ({ {t('common:cancel')} - - {t('common:save')} - + > ); }; + +const SaveButton = ({ formIsValid }: { formIsValid: boolean }) => { + const [opened, { close, open }] = useDisclosure(false); + const { t } = useTranslation(['layout/modals/add-app', 'common']); + + return ( + + + + + {t('common:save')} + + + + {t('validation.popover')} + + ); +};