Superset: Fix Dashboard Navigation After 'Save As'

by Admin 51 views
Issue #14: Dashboard Navigation After "Save As" in Superset

Hey everyone! Let's dive into a common usability issue in Superset: the dashboard navigation after using the "Save as" function. Currently, after saving a dashboard as a new one, users remain on the original dashboard. This can be confusing, making it unclear whether the save operation was successful and requiring you to manually hunt for the newly created dashboard.

Understanding the Problem

Let's get into the nitty-gritty. The main issue revolves around the user experience following the "Save as" action. Instead of seamlessly transitioning to the newly created dashboard, users are left staring at the original one. This inconsistency can lead to frustration and inefficiency.

Current Behavior

So, what's happening right now? After you hit "Save as" to duplicate a dashboard, you'd expect to be taken to the fresh copy, right? Nope! You're stuck on the original. The URL doesn't change, and there's no automatic jump to the new dashboard, even though you get a success message. It's like baking a cake and not getting to see the finished product right away – super annoying!

Here’s how to reproduce the issue:

  1. Head over to your Dashboards list page.
  2. Pick any dashboard you like and open it up.
  3. Spot the three-dot menu in the header and give it a click.
  4. Choose "Save as" from the dropdown – this is where the magic (or lack thereof) happens.
  5. Give your new dashboard a snazzy name in the modal.
  6. Hit that "Save" button.
  7. Observe: You'll see a toast message saying it's saved, but guess what? You're still looking at the old dashboard. The URL hasn't changed, and you're not where you need to be.

Expected Behavior

What should happen, you ask? It's simple: after you save a dashboard using "Save as", the application should whisk you away to the shiny, newly created dashboard. The URL should update to reflect the new dashboard's ID, and you should see the new dashboard loaded in your browser.

In essence, the expected behavior should be:

  • Automatic Navigation: After clicking "Save" in the "Save as" dialog, the browser should navigate to the new dashboard URL.
  • URL Update: The URL should update to /superset/dashboard/{new_dashboard_id}/ where {new_dashboard_id} is the ID of the newly created dashboard.
  • Display of New Dashboard: The newly created dashboard should be loaded and displayed to the user.
  • Consistent Operation: Existing "Save" and "Save as overwrite" operations should continue to work as before without unwanted navigation.

Proposed Solution

To fix this, the application needs to be modified to automatically redirect the user to the new dashboard after the "Save as" operation is complete. This involves updating the URL and loading the new dashboard in the browser.

Implementation Details

The solution requires modifications to the dashboard saving logic. Specifically, after the new dashboard is successfully saved, the application should trigger a client-side redirect to the URL of the new dashboard. This can be achieved by updating the browser's window.location property with the new dashboard's URL. Additionally, the UI should be updated to reflect the changes.

Code Modifications

The code changes would primarily focus on the JavaScript/React code responsible for handling the "Save as" operation. After the API call to save the new dashboard returns successfully, the code should extract the new dashboard's ID from the response and construct the new URL. Then, it should use window.location.href to navigate to the new URL.

Example Code Snippet:

// Assuming 'response' contains the ID of the new dashboard
const newDashboardId = response.id;
const newDashboardUrl = `/superset/dashboard/${newDashboardId}/`;
window.location.href = newDashboardUrl;

Testing Strategy

To ensure the solution works correctly, a comprehensive testing strategy is required. This includes unit tests, integration tests, and end-to-end tests.

  • Unit Tests: Verify that the code responsible for the redirect is functioning correctly.
  • Integration Tests: Ensure that the "Save as" operation, including the redirect, works seamlessly with the backend.
  • End-to-End Tests: Simulate the user's interaction with the UI and verify that the navigation works as expected.

Acceptance Criteria

To ensure that the solution meets the required standards, the following acceptance criteria must be met:

  • [ ] 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}/ where {new_dashboard_id} is the ID of the newly created dashboard
  • [ ] The newly created dashboard is loaded and displayed to the user
  • [ ] Existing tests continue to pass and new test coverage is added for this navigation behavior
  • [ ] The "Save" and "Save as overwrite" operations continue to work as before without unwanted navigation

Steps To Test

Alright, testers, here’s how you can verify that this fix works like a charm:

  1. Go to the Dashboards page and open any dashboard.
  2. Click the three-dot menu and select "Save as".
  3. Give it a new name and hit "Save".
  4. Make sure the URL changes to the new dashboard ID (e.g., /superset/dashboard/123/ becomes /superset/dashboard/456/).
  5. Also, confirm that the new dashboard is loaded and displayed.
  6. Run the test suite for dashboard actions: npm test -- dashboardState.test.js
  7. Make sure all tests pass, including any new tests for the navigation behavior.
  8. Test that regular "Save" operations (overwrite) still work correctly without unexpected navigation.

Additional Notes

  • Ensure that the changes are backward-compatible and do not introduce any new issues.
  • Consider adding a loading indicator to provide feedback to the user while the new dashboard is being loaded.
  • Document the changes and update the user guide accordingly.

Submission

Record your screen using https://cap.so/ (use Studio mode), export it as an MP4, and drag and drop it into an issue comment below.

Also, here’s a guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx

By addressing this issue, we can significantly improve the user experience in Superset and make it more intuitive for everyone. Let's get this fixed!