Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(explore): Chart save modal displays error instead of failing silently #21920

Merged
merged 8 commits into from
Oct 27, 2022

Conversation

kgabryje
Copy link
Member

SUMMARY

When user tried to save a chart and a request executed by SaveModal chart failed, the modal would just close and there would be no indication that an error occurred. That might lead the user to think that their chart was successfully saved even though it wasn't.
This PR fixes that behaviour by not closing the modal and displaying an alert with error message within it.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2022-10-24.at.13.21.55.mov

After:

Screen.Recording.2022-10-24.at.12.29.24.mov

TESTING INSTRUCTIONS

  1. Open the chart save modal
  2. Turn off the Internet (to trigger an error)
  3. Click save button
  4. See that the error is displayed and the modal doesn't close

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

CC @codyml

@kgabryje
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

@kgabryje Ephemeral environment spinning up at http://34.220.201.232:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

Copy link
Member

@codyml codyml left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I left one non-blocking comment about try/catch. The loading indicator also looks a little strange to me left-justified. Would it be possible to make it centered?

@@ -150,9 +151,6 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
async saveOrOverwrite(gotodash: boolean) {
this.setState({ alert: null, isLoading: true });
this.props.actions.removeSaveModalAlert();
// eslint-disable-next-line @typescript-eslint/no-unused-vars

let promise = Promise.resolve();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing promises to awaits looks great, thanks! Two related notes:

  1. Since all the catch blocks are the same, should we just wrap the entire function body in one try block?
  2. Previously, since these promises had no catch block, errors would go unhandled and therefore show up in the browser console. Should we preserve that behavior by re-throwing or not catching errors?

If you think yes for both of those, we could just do something like:

async saveOrOverwrite(goodish:boolean) {
  try {
    // If anything throws here, modal will stay open, finally block will execute,
    // and error will remain unhandled because there's no catch block
    this.props.onHide();
  } finally {
    this.setState({ isLoading: false });
  }
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great idea! Done

@geido
Copy link
Member

geido commented Oct 25, 2022

Hey @kgabryje I think I am noticing a weird behaviour when saving the chart as a new one. After saving the chart shows the empty state.

Superset.mp4

@kgabryje kgabryje force-pushed the fix/save-modal-error branch from 134c7ef to 64a82e7 Compare October 26, 2022 08:44
@kgabryje
Copy link
Member Author

kgabryje commented Oct 26, 2022

@geido @codyml Thank you for your feedback and testing! I fixed the issue with chart disappearing after saving.

The problem was a race condition between re-hydrating explore after saving and triggering query. Because of some strange flows in the code, delaying closing the save modal was causing the query to be triggered before Explore was rehydrated. The result was that the query was updating the previous chart (previous slice_id), instead of the freshly created one.

I fixed this issue by moving the logic responsible for detecting saving from URL (we were reading saveaction search parameter in the URL to decide if query needs to be triggered) to Redux (which is now being set by hydrateExplore, so now the correct order of actions is ensured).

Screen.Recording.2022-10-26.at.10.45.32.mov

@codecov
Copy link

codecov bot commented Oct 26, 2022

Codecov Report

Merging #21920 (fb7321c) into master (7600da8) will increase coverage by 0.00%.
The diff coverage is 32.00%.

@@           Coverage Diff           @@
##           master   #21920   +/-   ##
=======================================
  Coverage   66.95%   66.96%           
=======================================
  Files        1807     1807           
  Lines       69196    69208   +12     
  Branches     7402     7406    +4     
=======================================
+ Hits        46331    46343   +12     
- Misses      20954    20958    +4     
+ Partials     1911     1907    -4     
Flag Coverage Δ
javascript 53.40% <32.00%> (+0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
superset-frontend/src/explore/ExplorePage.tsx 0.00% <0.00%> (ø)
...et-frontend/src/explore/reducers/exploreReducer.js 38.09% <0.00%> (-0.62%) ⬇️
...rset-frontend/src/explore/components/SaveModal.tsx 40.00% <13.33%> (+1.46%) ⬆️
.../explore/components/ExploreViewContainer/index.jsx 52.48% <40.00%> (-0.52%) ⬇️
...set-frontend/src/explore/actions/exploreActions.ts 57.50% <50.00%> (-0.40%) ⬇️
...rc/explore/components/ExploreChartHeader/index.jsx 57.14% <80.00%> (+1.37%) ⬆️
...set-frontend/src/explore/actions/hydrateExplore.ts 57.14% <100.00%> (+1.04%) ⬆️
...t-frontend/src/explore/actions/saveModalActions.js 97.33% <100.00%> (+0.07%) ⬆️
...-frontend/src/explore/reducers/saveModalReducer.js 45.45% <100.00%> (+15.45%) ⬆️
... and 8 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

Copy link
Member

@codyml codyml left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing job fixing the chart refresh error!! Code looks great; two things:

  • I think the loading indicator is still left-justified
  • I noticed that the overwrite/saveas toggle is now sticky on the same chart, so if you open a chart that you don't have permission to overwrite and save it as a new chart, the next time you go to save it'll still be on Save As, whereas previously I think it would always default to Overwrite if you had permissions. Do we want to maintain that previous behavior?

@kgabryje
Copy link
Member Author

  • I think the loading indicator is still left-justified

Oops, I didn't notice your first comment. Fixed 🙂

  • I noticed that the overwrite/saveas toggle is now sticky on the same chart, so if you open a chart that you don't have permission to overwrite and save it as a new chart, the next time you go to save it'll still be on Save As, whereas previously I think it would always default to Overwrite if you had permissions. Do we want to maintain that previous behavior?

Well spotted! 🙏 Fixed

Copy link
Member

@codyml codyml left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally, LGTM!

Copy link
Member

@rusackas rusackas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@kgabryje
Copy link
Member Author

/testenv up

@kgabryje kgabryje merged commit 9d25453 into apache:master Oct 27, 2022
@github-actions
Copy link
Contributor

@kgabryje Ephemeral environment spinning up at http://54.190.235.8:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.1.0 and removed 🚢 2.1.3 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/L 🚢 2.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants