From 95d00e98bdc125402bca78188ed4b2f413102265 Mon Sep 17 00:00:00 2001 From: vanshaj2023 Date: Tue, 24 Mar 2026 04:00:46 +0530 Subject: [PATCH] fix(ux): show unsaved changes warning on cancel in route and upstream detail pages --- src/locales/de/common.json | 5 +++++ src/locales/en/common.json | 5 +++++ src/locales/es/common.json | 5 +++++ src/locales/tr/common.json | 5 +++++ src/locales/zh/common.json | 5 +++++ src/routes/routes/detail.$id.tsx | 22 ++++++++++++++++++++-- src/routes/upstreams/detail.$id.tsx | 22 ++++++++++++++++++++-- 7 files changed, 65 insertions(+), 4 deletions(-) diff --git a/src/locales/de/common.json b/src/locales/de/common.json index 89817b6a10..29d2c75327 100644 --- a/src/locales/de/common.json +++ b/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": { diff --git a/src/locales/en/common.json b/src/locales/en/common.json index 6544bf790c..f08b5dcaaa 100644 --- a/src/locales/en/common.json +++ b/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": { diff --git a/src/locales/es/common.json b/src/locales/es/common.json index d46f14f9d7..dfc70e6220 100644 --- a/src/locales/es/common.json +++ b/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": { diff --git a/src/locales/tr/common.json b/src/locales/tr/common.json index 63745f663f..88e15520e0 100644 --- a/src/locales/tr/common.json +++ b/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": { diff --git a/src/locales/zh/common.json b/src/locales/zh/common.json index b5861692fd..748b6dc050 100644 --- a/src/locales/zh/common.json +++ b/src/locales/zh/common.json @@ -304,6 +304,11 @@ "edit": { "success": "编辑 {{name}} 成功", "title": "编辑 {{name}}" + }, + "unsaved": { + "title": "未保存的更改", + "content": "您有未保存的更改，确定要关闭吗？", + "confirm": "放弃更改" } }, "mark": { diff --git a/src/routes/routes/detail.$id.tsx b/src/routes/routes/detail.$id.tsx index ca49bf2de7..2bcfab8bae 100644 --- a/src/routes/routes/detail.$id.tsx +++ b/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: {t('info.unsaved.content')}, + labels: { confirm: t('info.unsaved.confirm'), cancel: t('form.btn.cancel') }, + onConfirm: () => { + form.reset(); + setReadOnly(true); + }, + }); + } else { + setReadOnly(true); + } + }; + if (isLoading) { return ; } @@ -105,7 +123,7 @@ const RouteDetailForm = (props: Props) => { {!readOnly && ( {t('form.btn.save')} - diff --git a/src/routes/upstreams/detail.$id.tsx b/src/routes/upstreams/detail.$id.tsx index ca5f8e9c42..69ef804572 100644 --- a/src/routes/upstreams/detail.$id.tsx +++ b/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: {t('info.unsaved.content')}, + labels: { confirm: t('info.unsaved.confirm'), cancel: t('form.btn.cancel') }, + onConfirm: () => { + form.reset(); + setReadOnly(true); + }, + }); + } else { + setReadOnly(true); + } + }; + if (isLoading) { return ; } @@ -110,7 +128,7 @@ const UpstreamDetailForm = ( {!readOnly && ( {t('form.btn.save')} -