[Visualize Editor] Add cancel button when navigating from Dashboard

[majagrubic]

Summary

Fixes: #70650

When editing visualizations from Dashboard, currently there is no simple way to cancel editing and return to Dashboard. This PR addresses that, by adding a cancel button. This button is present both the old and new (by-value) flow.

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[majagrubic]

@elasticmachine merge upstream

[ThomThomson]

Tested locally in chrome, and mostly works as expected. One thing I noticed, though is that the 'unsaved changes' warning is triggered any time you press Cancel, even if you haven't changed anything, or if you've just created a blank visualization with no customizations.

I think this should be addressed, either by fixing it in this PR (see my code comments), or by letting this PR simply be the addition of a cancel button, with no confirmation, and creating a separate leave confirmation PR.

[majagrubic]

@elasticmachine merge upstream

[ThomThomson]

Thanks again for switching this out to use appLeaveHandler.

Test additions are looking great, and the confirm dialogue comes up mostly when expected with two small exceptions:

• appearing on app leave after a 'create new' without any active changes.
• appearing on save in by value mode.

Overall, LGTM once the CI is passing - tested locally on Chrome

[majagrubic]

The hook is based on hasUnsavedChanges flag, which will be set to true as soon as there are unsaved changes in the editor. And that's true for the initial creation; there IS an active change.

As for the second part, it's gonna be difficult to distinguish between "there is an unsaved change, but I want to discard the modal because there is a save in progress" vs "there is an unsaved change and I wish to show the modal".

[ThomThomson]

The first problem may just come down to a difference in the 'unsaved changes' calculation between lens and visualize - which might be out of scope for this PR.

The second problem we also faced on lens, and found that the most explicit way to do this was to set the OnAppLeave handler to do nothing in the save and return method. Directly before the return redirect happens, you can call:

onAppLeave((actions) => {
  return actions.default();
});

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9166947

Metrics [docs]

async chunks size

id	before	after	diff
visualize	271.4KB	273.7KB	+2.3KB

page load bundle size

id	before	after	diff
dashboard	570.2KB	570.2KB	+11.0B

History

• 💚 Build #79849 succeeded d0e433e
• 💔 Build #79793 failed 2e6ff13
• 💔 Build #79730 failed 13394f7
• 💚 Build #79570 succeeded 6214a92
• 💚 Build #79050 succeeded 411692303665d242a47bea3e374544198c5a2dc2

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[ThomThomson]

Tested locally on chrome, everything works as expected!
LGTM.