Fixing Dashboard Navigation After 'Save As' Operation

by Admin 54 views
Issue #14 - [FEATURE] Dashboard Navigation After 'Save As' Operation

Hey guys! Let's dive into a common snag in dashboard functionalities and how we're gonna fix it. This is all about the 'Save As' feature in your dashboards. Specifically, we're tackling the issue where, after you've saved a dashboard as a new one, you're left hanging on the original dashboard. Sounds familiar, right?

The Problem: The 'Save As' Confusion

So, what's the deal? Well, when you use the 'Save As' feature to whip up a fresh dashboard, the current system doesn't automatically whisk you away to your shiny new creation. You're stuck on the old dashboard. The URL doesn't update, and you're left wondering if the save even worked! This is exactly what we are going to fix!

Motivation: Why This Matters

This is more than just a minor inconvenience; it can be seriously confusing. Imagine you've just spent time tweaking a dashboard and want to create a copy. You hit 'Save As', give it a new name, and click save. A success message pops up, but you are still looking at the old dashboard. Now you have to manually search for your new one. It's a waste of time and can lead to frustration. The goal is simple: make the user experience as smooth and intuitive as possible. We want users to feel confident that their actions have the desired effect. We want to avoid any uncertainty about whether the save operation was successful, and we want to help them easily access the new dashboard they just created. It is important to remember that a happy user is a productive user, and a well-designed interface promotes both efficiency and satisfaction.

Current Behavior: What's Happening Now

Currently, after you use the 'Save As' feature to create a new dashboard, you stay put on the original dashboard. The URL stays the same, and there is no automatic navigation to your new dashboard, even though the save operation itself completes without any errors.

Here's how it goes down:

  1. Dashboard List Page: You start on the dashboards list page.
  2. Open an Existing Dashboard: You pick a dashboard to work with.
  3. The Three-Dot Menu: Click on the three dots in the dashboard header.
  4. Save As: Select 'Save As' from the dropdown menu.
  5. New Name: Give your new dashboard a unique name.
  6. Click Save: Hit that 'Save' button.
  7. Success Toast: You see a success message, but... You're still on the same old dashboard!

This is what is frustrating! The success message is there, but the expected outcome, the navigation to the new dashboard, doesn't happen.

The Solution: Automatic Navigation

Expected Behavior: What Should Happen

The goal is to make things a lot smoother. After you successfully save a dashboard using 'Save As', the application should automatically transport you to the newly created dashboard. The URL should update, and the new dashboard should be displayed.

Here's the plan:

  • Automatic Navigation: After you hit 'Save' in the 'Save As' dialog, the browser should immediately whisk you away to the new dashboard's URL.
  • URL Update: The URL should update to something like /superset/dashboard/{new_dashboard_id}/, where {new_dashboard_id} is the unique ID of your fresh dashboard.
  • Dashboard Display: The new dashboard should load and display, so you can start working on it right away.
  • Testing and Stability: The old tests should still pass, and we are going to add new tests to make sure this new behavior is working as expected.
  • No Interference: The regular 'Save' operations (the ones that just overwrite the existing dashboard) should still work without any unexpected navigation.

Acceptance Criteria: How We Know We've Succeeded

We will know we have fixed this issue when:

  • After clicking 'Save' in the 'Save As' dialog, the browser navigates to the new dashboard URL.
  • The URL updates to /superset/dashboard/{new_dashboard_id}/.
  • The newly created dashboard is loaded and displayed to the user.
  • All existing tests pass.
  • New tests cover the navigation behavior.
  • The 'Save' and 'Save As' operations continue to work as before without causing unwanted navigation.

Testing the Fix

Steps to Test: How to Make Sure It Works

To make sure this works, we need to do a few things:

  1. Go to the Dashboards page: Open up any existing dashboard.
  2. Click the Three-Dot Menu: Select 'Save As'.
  3. Enter a Name and Save: Give your new dashboard a name, then click 'Save'.
  4. Check the URL: Make sure the URL changes to show the new dashboard ID (like /superset/dashboard/123/ changing to /superset/dashboard/456/).
  5. Verify the Display: Make sure the new dashboard loads up and displays correctly.
  6. Run the Tests: Use the command npm test -- dashboardState.test.js to run the test suite.
  7. Check the Results: Make sure all tests pass, including the new ones for navigation.
  8. Test Overwrite: Test that the regular 'Save' operations (overwrite) still work without unexpected navigation.

Running the Tests in Detail

We will dive into how to run the tests and verify everything works smoothly:

  • Open a terminal or command prompt: Navigate to the root directory of your project.
  • Run the tests: Use the command npm test -- dashboardState.test.js to execute the tests related to dashboard state and actions. This command tells npm to run the test suite and specifically target the dashboardState.test.js file.
  • Review the output: After running the command, npm will provide detailed output. Look for lines that indicate the number of tests run, any failures, and any errors. If all tests pass, you should see a clear message indicating success.
  • Check for new tests: Ensure that the test suite includes new tests specifically designed to verify the correct navigation behavior after using the 'Save As' feature. These tests should cover scenarios where a user saves a dashboard as a new one and confirms that the browser navigates to the new dashboard's URL, the URL updates, and the new dashboard is loaded and displayed.
  • Address any failures: If any tests fail, carefully examine the error messages to understand the cause of the failure. Check the test code for potential issues and verify that the expected behavior matches the actual behavior.
  • Fix and rerun: After making any necessary fixes, rerun the test suite to ensure that all tests pass.

Ensuring the Fix Works with Existing Features

It is essential to make sure the fix doesn't break any existing functionalities. This involves testing that the regular 'Save' operations (which overwrite existing dashboards) continue to work as expected without causing any unintended navigation. This means users should not be unexpectedly redirected to a different dashboard when they are simply saving changes to the current one.

Here’s how to ensure the fix does not interfere with the current save operation:

  • Open an existing dashboard: Navigate to the dashboards page and select a dashboard to modify.
  • Make changes: Make some edits to the dashboard to simulate a real-world scenario.
  • Save the dashboard: Click the 'Save' button (not 'Save As'). The dashboard should save correctly without any navigation.
  • Verify no change in URL: Ensure that the URL in the browser remains the same. The user should not be redirected to another page.
  • Confirm the changes: Verify that the changes you made to the dashboard are saved and reflected.
  • Run existing tests: Run all the existing tests to confirm that no other features are negatively affected by the fix.

Submission

To help us see what is happening, record your screen using a tool like cap.so. Export it as an MP4 and drag it into the issue comment. Don't worry, it's pretty easy.

For more information on submitting pull requests, check out this guide. Good luck!

That's it, guys! With these fixes, your dashboard experience should become a whole lot smoother. If you have any questions or need a hand, feel free to reach out. Happy dashboarding!