Prevent Data Loss: Confirmation Modal For Unsaved Changes

Introduction

Hey guys! Have you ever lost work because you accidentally navigated away from a page without saving? It's super frustrating, right? Well, this article is all about implementing a confirmation modal in the Dashboard and Explore sections to prevent exactly that! We'll dive into the motivation behind this feature, the current behavior that leads to data loss, the expected behavior with the modal, and how to verify that everything works as it should. Let's get started!

Motivation: Why a Confirmation Modal?

The main motivation behind adding a confirmation modal is to prevent users from losing their work when they navigate away from the Dashboard editing view or Explore section without saving their changes. Imagine you've spent a good chunk of time tweaking a chart, adding filters, or rearranging your dashboard layout, and then, poof! You accidentally click on something else, and all your hard work vanishes into thin air. That's a terrible user experience, and we want to avoid it at all costs.

This confirmation modal acts as a safety net, alerting users about unsaved changes before they navigate away. It gives them a chance to either save their work or consciously choose to discard it. By providing this explicit control over their workflow, we significantly improve the user experience and prevent accidental data loss. Think of it like that little pop-up that asks, "Are you sure you want to leave this page? Changes you made may not be saved." It's a simple but powerful way to protect your progress.

Moreover, the modal ensures data integrity and reduces user frustration. Users feel more in control when they know they won't accidentally lose their progress. This feature is especially critical for complex dashboards or intricate chart configurations where recreating the work would be time-consuming and annoying. By implementing this confirmation, we show our users that we value their time and effort.

The goal is to create a more user-friendly and forgiving environment. We all make mistakes, and sometimes we click the wrong button. A confirmation modal provides that extra layer of protection, turning a potentially disastrous mistake into a simple choice. So, in essence, it’s about enhancing the overall usability and trustworthiness of the application.

Current Behavior: The Problem

Currently, the application's behavior isn't ideal when it comes to unsaved changes. When users make modifications in the Dashboard editing view or Explore section and then try to navigate away (like clicking on "Datasets" in the navigation menu), the application just lets them leave without any warning. All those unsaved changes? Gone! It's like the application is saying, "Oh, you didn't want to save that? My bad!"

Let's break it down with some reproduction steps:

1. Navigate to an existing Dashboard or create a new one.
2. Make a change without saving (e.g., add a chart, modify a filter, or adjust the layout).
3. Click on a different section in the navigation menu (e.g., "Datasets").
4. Observe: The navigation happens immediately, and all changes are lost without any warning or confirmation.

And it's the same story in the Explore section:

1. Navigate to the Explore section.
2. Make changes to chart configuration, filters, or metrics.
3. Try to navigate to another section (e.g., "Datasets").
4. Observe: Changes are lost without confirmation.

This current behavior can lead to significant data loss and a frustrating user experience. Users might spend hours crafting the perfect dashboard or chart only to accidentally lose their work with a single click. It's a common usability issue that needs to be addressed to make the application more robust and user-friendly.

Ultimately, the lack of a confirmation modal creates a risky environment where users are constantly at risk of losing their progress. This can lead to decreased productivity and a general sense of unease when working with the application. The goal is to eliminate this risk and provide a more secure and predictable user experience.

Expected Behavior: The Solution

The expected behavior is that when users try to navigate away from Dashboard editing or Explore sections with unsaved changes, a confirmation modal should pop up. This modal will prompt them to make a clear decision about their unsaved work. It's like a little checkpoint, asking, "Hey, are you sure you want to do this? You've got some unsaved stuff!"

Here are the acceptance criteria for this new behavior:

• A confirmation modal appears when navigating away from Dashboard editing with unsaved changes.
• A confirmation modal appears when navigating away from the Explore section with unsaved changes.
• The modal provides two clear options: "Save" and "Discard."
• Clicking "Save" triggers the standard save flow for the respective section.
• Clicking "Discard" allows navigation to proceed and discards all unsaved changes.
• The modal can be dismissed (closed) without taking action, keeping the user on the current page.
• The modal displays appropriate messaging explaining that unsaved changes will be lost.

This implementation provides a seamless and intuitive user experience. The modal appears only when necessary, preventing unnecessary interruptions when there are no unsaved changes. The clear options of "Save" and "Discard" give users the power to choose what happens to their work, ensuring they are always in control.

By implementing this confirmation modal, we're not just preventing data loss; we're also building user trust. Users will feel more confident knowing that the application has their back and won't let them accidentally throw away their progress. This, in turn, leads to increased user satisfaction and a more positive overall experience.

The modal also includes a dismissal option, allowing users to close the modal without taking any action. This is important for cases where users might have accidentally triggered the navigation or simply want to continue working on the current page without saving or discarding their changes. The goal is to provide flexibility and avoid forcing users into unwanted actions.

Verification: Making Sure It Works

To make sure this new feature is working correctly, we need to perform both manual and automated testing.

Manual Testing:

1. Dashboard Editing Flow:
   • Open an existing dashboard or create a new one.
   • Add a chart or make any modification.
   • Click to navigate to "Datasets" or another section.
   • Verify a modal appears with "Save" and "Discard" options.
   • Click "Save" and verify the dashboard saves successfully.
   • Repeat and click "Discard" to verify navigation proceeds without saving.
2. Explore Section Flow:
   • Navigate to Explore.
   • Modify chart configuration (change metrics, filters, etc.).
   • Attempt to navigate away.
   • Verify the confirmation modal appears.
   • Test both "Save" and "Discard" actions work correctly.
3. Modal Dismissal:
   • Trigger the modal in either section.
   • Click the close button (X) or outside the modal.
   • Verify you remain on the current page with changes intact.

These manual tests ensure that the modal appears under the correct circumstances and that the Save and Discard actions function as expected. It's also important to test the dismissal functionality to make sure users can easily return to their work without being forced to save or discard.

Automated Testing:

Verify all tests pass, particularly:

• Modal renders when showModal is true.
• Modal does not render when showModal is false.
• "Save" button triggers the save handler.
• "Discard" button triggers the navigation confirmation handler.
• Modal can be dismissed without triggering save or discard actions.

Automated tests provide continuous verification that the confirmation modal is functioning correctly. These tests should cover various scenarios, including cases where there are unsaved changes, cases where there are no unsaved changes, and cases where the user attempts to dismiss the modal.

By combining both manual and automated testing, we can ensure that the confirmation modal is robust, reliable, and provides the intended protection against data loss.

Conclusion

So, there you have it! By adding a confirmation modal for unsaved changes in the Dashboard and Explore sections, we're taking a big step towards improving the user experience and preventing frustrating data loss. This simple feature can save users a lot of time and effort, and it shows that we care about their work.

Remember to follow the verification steps to ensure that everything is working correctly. And as always, your feedback is super valuable, so let us know what you think!