fix(ux): no unsaved changes warning when canceling edit on detail pages

[vanshaj2023]

Issue description

On detail/edit pages (Upstreams, Routes, Services, etc.), clicking Cancel silently discards all unsaved form changes with no warning. Users can lose edits without realizing it.

Root cause
The Cancel button calls setReadOnly(true) directly with no unsaved changes check:

<Button variant="outline" onClick={() => setReadOnly(true)}>
  {t('form.btn.cancel')}
</Button>

Expected behavior

A confirmation dialog should appear when the user has unsaved changes, consistent with the plugin editor drawer which was fixed in #3333 .

How to Reproduce

1. Go to Upstreams → open any upstream → click Edit
2. Make changes to any field
3. Click Cancel
4. All changes are silently discarded, no confirmation dialog

Screenshots

No response

Environment

apisix-dashboard: master

Additional context

Affected pages

1. Upstreams (upstreams/detail.$id.tsx)
2. Routes (routes/detail.$id.tsx)

[vanshaj2023]

Hi @Baoyuantop ,
I noticed the same issue that we fixed in #3333
Do I do the same thing here.

[vanshaj2023]

Hi @Baoyuantop,

Sorry for submitting a PR without waiting for a discussion first.

I went ahead and opened PR #3355 because this is the exact same issue we just resolved in #3333, so I applied the same established pattern here.

Let me know if you need any changes!

[Baoyuantop]

Hi @vanshaj2023, why do you need to submit #3355 after submitting #3333? Aren't they solving the same problem?

[vanshaj2023]

Hi @Baoyuantop, they fix the same type of bug but in different places.

PR #3333 fixed the Plugin Editor Drawer, while PR #3355 applies the exact same fix to the main Detail/Edit pages (Upstreams, Routes, etc.) where changes were still being silently discarded.

[Baoyuantop]

Hi @vanshaj2023, I believe this is the same function, and we should complete it in a single PR.

[Jaswanth-arjun]

Hi @vanshaj2023 ,

Nice catch on extending the fix from #3333 to detail pages.

One small suggestion: since this logic is being reused across multiple places, would it make sense to extract the unsaved changes check into a reusable hook or utility? This could help avoid duplication and ensure consistency across all edit flows.

Just a thought — happy to hear your opinion.

[vanshaj2023]

Hi @Baoyuantop, understood! I will combine the changes so that both areas are handled in a single PR.

Hi @Jaswanth-arjun, thank you for the suggestion! I'm also considering extracting the unsaved changes logic into a reusable hook/utility for better consistency.
@Baoyuantop, would you prefer that approach, or should I just focus on combining the fixes without refactoring?

Once we're aligned, I'll submit the updated PR shortly.