Prompt message when switching tabs with unsaved changes, in account-keys modal

woocommerce / woocommerce-gateway-stripe

The official Stripe Payment Gateway for WooCommerce

https://wordpress.org/plugins/woocommerce-gateway-stripe/

234 stars 206 forks source link

Prompt message when switching tabs with unsaved changes, in account-keys modal #2279

Open lovo-h opened 2 years ago

lovo-h commented 2 years ago

Description

When switching between Live and Test tabs in the Edit live account keys & webhooks modal (see image below), if data has been entered it will be lost upon switching tabs.

Possible Solution

Prompt a message if unsaved changes exist, before switching tabs.

Acceptance Criteria

The user gets prompted with a message when they attempt to switch between Live and Test tabs if they have unsaved data.
The user does not get prompted with a message if they have already saved the data.

asumaran commented 2 years ago

I've tried to do the same in https://github.com/woocommerce/woocommerce-gateway-stripe/pull/2243 without success. The problem is that we can indeed show an alert before ~clicking~ switching the tab (we could use the internal WooCommerce's history library for that) but we can't prevent switching tabs after clicking the tab. The TabPanel doesn't expose a way to stop the click event.

lovo-h commented 2 years ago

@asumaran, that's correct. An alternative solution would be to create a custom tab panel component that can prevent switching tabs after clicking the tab. This could be a component that would be specifically used for the Stripe extension. I am not a big fan of this approach.

Ideally, we could update the tab panel component so that it behaves as mentioned above (that is, it doesn't automatically switch tabs after clicking the tab but instead, can be hooked into so that the tab switching mechanism can be controlled).

Thoughts?

cc @ricardo

ricardo commented 2 years ago

Alternatively, we could use this approach and keep two active tab states. That may also require a custom tab panel component.

asumaran commented 2 years ago

@ricardo how that approach would allow us to display a message and prevent switching to the other tab?

ricardo commented 2 years ago

how that approach would allow us to display a message and prevent switching to the other tab?

We wouldn't need to display a message or prevent switching tabs because we would allow saving both tabs at the same time, with a "Save keys" button. This was probably the original idea behind the design.

MuskanMathur28 commented 8 months ago

Hey! I would like to solve this issue.

ricardo commented 8 months ago

Hey @MuskanMathur28,

Feel free to fork the repository and open a pull request here.

Thank you for your interest in contributing 🙏.