Add warning when navigating away with unsaved changes in environment settings

[tiagoapolo]

Is your feature request related to a problem? Please describe.

Currently, there is no warning displayed when navigating between environments while editing settings. This can result in losing any unsaved changes.

Steps to Reproduce

1. Begin editing general settings in environment page (e.g., name, description)
2. Switch to another environment (e.g., production) OR navigate away OR Switch env settings tabs without saving the changes.
3. Observe that the unsaved changes are lost without any warning.

Describe the solution you'd like.

A warning or confirmation dialog should appear if there are unsaved changes in general env setting tab, informing that the changes will be lost if the user navigates away

Describe alternatives you've considered

Watch for field changes in general setting tab in environment page settings and show warning if the url changes.

Additional context

No response

[Zaimwa9]

Hi @tiagoapolo , I'm considering giving a hand on this one, depending on my bandwidth :).

A couple of questions to evaluate the effort, taking into account the planned migration of the codebase to TS (as this component is quite heavy).

A) React-router native prompt

Straightforward and shortest way could be using the Prompt component from react-router.

Cons:

• Not customizable
• Deprecated in versions 5+

B) Migrate and custom hook

The preferred, most elegant and re-usable way would be a custom hook with your own UI and components but it might require migrating to a FC first, leading to my next questions:

• I only saw a requests/responses in types folder, is it ok for you to use it for components if needed (or maybe I am missing something so not super urgent question) ?
• In case of splitting the component for readability, do you have a projected folder structure for this (as pages is included in components now) ? Happy to discuss some possibilities but I don't want to mess your plans :)
• I haven't gone in the details of the component so let me know if you have any insights

I would suggest Option B and migrating first to TS so it's done and the hook could then be elegantly used wherever it's needed