fix(ux): show unsaved changes warning on cancel in route and upstream…

src/locales/de/common.json

@@ -304,6 +304,11 @@
     "edit": {
       "success": "{{name}} erfolgreich bearbeitet",
       "title": "{{name}} bearbeiten"
+    },
+    "unsaved": {
+      "title": "Nicht gespeicherte Änderungen",
+      "content": "Sie haben nicht gespeicherte Änderungen. Möchten Sie wirklich schließen?",
+      "confirm": "Änderungen verwerfen"
     }
   },
   "mark": {

src/locales/en/common.json

@@ -304,6 +304,11 @@
     "edit": {
       "success": "Edit {{name}} Successfully",
       "title": "Edit {{name}}"
+    },
+    "unsaved": {
+      "title": "Unsaved Changes",
+      "content": "You have unsaved changes. Are you sure you want to close?",
+      "confirm": "Discard Changes"
     }
   },
   "mark": {

src/locales/es/common.json

@@ -304,6 +304,11 @@
     "edit": {
       "success": "Editado {{name}} con éxito",
       "title": "Editar {{name}}"
+    },
+    "unsaved": {
+      "title": "Cambios sin guardar",
+      "content": "Tiene cambios sin guardar. ¿Está seguro de que desea cerrar?",
+      "confirm": "Descartar cambios"
     }
   },
   "mark": {

src/locales/tr/common.json

@@ -304,6 +304,11 @@
     "edit": {
       "success": "{{name}} başarıyla güncellendi",
       "title": "{{name}} Düzenle"
+    },
+    "unsaved": {
+      "title": "Kaydedilmemiş Değişiklikler",
+      "content": "Kaydedilmemiş değişiklikleriniz var. Kapatmak istediğinizden emin misiniz?",
+      "confirm": "Değişiklikleri at"
     }
   },
   "mark": {

src/locales/zh/common.json

@@ -304,6 +304,11 @@
     "edit": {
       "success": "编辑 {{name}} 成功",
       "title": "编辑 {{name}}"
+    },
+    "unsaved": {
+      "title": "未保存的更改",
+      "content": "您有未保存的更改，确定要关闭吗？",
+      "confirm": "放弃更改"
     }
   },
   "mark": {

src/routes/routes/detail.$id.tsx

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Button, Group, Skeleton } from '@mantine/core';
+import { Button, Group, Skeleton, Text } from '@mantine/core';
+import { modals } from '@mantine/modals';
 import { notifications } from '@mantine/notifications';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import {
@@ -93,6 +94,23 @@ const RouteDetailForm = (props: Props) => {
     },
   });
 
+  const handleCancel = () => {
+    if (form.formState.isDirty) {
+      modals.openConfirmModal({
+        centered: true,
+        title: t('info.unsaved.title'),
+        children: <Text size="sm">{t('info.unsaved.content')}</Text>,
+        labels: { confirm: t('info.unsaved.confirm'), cancel: t('form.btn.cancel') },
+        onConfirm: () => {
+          form.reset();
+          setReadOnly(true);
+        },
+      });
+    } else {
+      setReadOnly(true);
+    }
+  };
+
   if (isLoading) {
     return <Skeleton height={400} />;
   }
@@ -105,7 +123,7 @@ const RouteDetailForm = (props: Props) => {
         {!readOnly && (
           <Group>
             <FormSubmitBtn>{t('form.btn.save')}</FormSubmitBtn>
-            <Button variant="outline" onClick={() => setReadOnly(true)}>
+            <Button variant="outline" onClick={handleCancel}>
               {t('form.btn.cancel')}
             </Button>
           </Group>

src/routes/upstreams/detail.$id.tsx

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Button, Group,Skeleton } from '@mantine/core';
+import { Button, Group, Skeleton, Text } from '@mantine/core';
+import { modals } from '@mantine/modals';
 import { notifications } from '@mantine/notifications';
 import {
   queryOptions,
@@ -93,6 +94,23 @@ const UpstreamDetailForm = (
     }
   }, [upstreamData, form, isLoading]);
 
+  const handleCancel = () => {
+    if (form.formState.isDirty) {
+      modals.openConfirmModal({
+        centered: true,
+        title: t('info.unsaved.title'),
+        children: <Text size="sm">{t('info.unsaved.content')}</Text>,
+        labels: { confirm: t('info.unsaved.confirm'), cancel: t('form.btn.cancel') },
+        onConfirm: () => {
+          form.reset();
+          setReadOnly(true);
+        },
+      });
+    } else {
+      setReadOnly(true);
+    }
+  };
+
   if (isLoading) {
     return <Skeleton height={400} />;
   }
@@ -110,7 +128,7 @@ const UpstreamDetailForm = (
           {!readOnly && (
             <Group>
               <FormSubmitBtn>{t('form.btn.save')}</FormSubmitBtn>
-              <Button variant="outline" onClick={() => setReadOnly(true)}>
+              <Button variant="outline" onClick={handleCancel}>
                 {t('form.btn.cancel')}
               </Button>
             </Group>