[Maps] fix notifying user about losing unsaved changes when navigatin…

…g away from map (#72003) * [Maps] fix notifying user about losing unsaved changes when navigating away from map * clean up * tslint fixes Co-authored-by: Elastic Machine <[email protected]>
elastic · Jul 16, 2020 · 46eba14 · 46eba14
1 parent 394e7ba
commit 46eba14
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 161 deletions.
diff --git a/x-pack/plugins/maps/public/routing/maps_router.js b/x-pack/plugins/maps/public/routing/maps_router.js
@@ -17,18 +17,18 @@ import { LoadMapAndRender } from './routes/maps_app/load_map_and_render';
 export let goToSpecifiedPath;
 export let kbnUrlStateStorage;
 
-export async function renderApp(context, { appBasePath, element, history }) {
+export async function renderApp(context, { appBasePath, element, history, onAppLeave }) {
   goToSpecifiedPath = (path) => history.push(path);
   kbnUrlStateStorage = createKbnUrlStateStorage({ useHash: false, history });
 
-  render(<App history={history} appBasePath={appBasePath} />, element);
+  render(<App history={history} appBasePath={appBasePath} onAppLeave={onAppLeave} />, element);
 
   return () => {
     unmountComponentAtNode(element);
   };
 }
 
-const App = ({ history, appBasePath }) => {
+const App = ({ history, appBasePath, onAppLeave }) => {
   const store = getStore();
   const I18nContext = getCoreI18n().Context;
 
@@ -37,8 +37,20 @@ const App = ({ history, appBasePath }) => {
       <Provider store={store}>
         <Router basename={appBasePath} history={history}>
           <Switch>
-            <Route path={`/map/:savedMapId`} component={LoadMapAndRender} />
-            <Route exact path={`/map`} component={LoadMapAndRender} />
+            <Route
+              path={`/map/:savedMapId`}
+              render={(props) => (
+                <LoadMapAndRender
+                  savedMapId={props.match.params.savedMapId}
+                  onAppLeave={onAppLeave}
+                />
+              )}
+            />
+            <Route
+              exact
+              path={`/map`}
+              render={() => <LoadMapAndRender onAppLeave={onAppLeave} />}
+            />
             // Redirect other routes to list, or if hash-containing, their non-hash equivalents
             <Route
               path={``}

diff --git a/x-pack/plugins/maps/public/routing/page_elements/breadcrumbs.js b/x-pack/plugins/maps/public/routing/page_elements/breadcrumbs.js
diff --git a/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js b/x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/top_nav_menu.js
@@ -21,7 +21,6 @@ import {
   showSaveModal,
 } from '../../../../../../../src/plugins/saved_objects/public';
 import { MAP_SAVED_OBJECT_TYPE } from '../../../../common/constants';
-import { updateBreadcrumbs } from '../breadcrumbs';
 import { goToSpecifiedPath } from '../../maps_router';
 
 export function MapsTopNavMenu({
@@ -35,7 +34,6 @@ export function MapsTopNavMenu({
   refreshConfig,
   setRefreshConfig,
   setRefreshStoreConfig,
-  initialLayerListConfig,
   indexPatterns,
   updateFiltersAndDispatch,
   isSaveDisabled,
@@ -44,7 +42,7 @@ export function MapsTopNavMenu({
   openMapSettings,
   inspectorAdapters,
   syncAppAndGlobalState,
-  currentPath,
+  setBreadcrumbs,
   isOpenSettingsDisabled,
 }) {
   const { TopNavMenu } = getNavigation().ui;
@@ -64,14 +62,13 @@ export function MapsTopNavMenu({
   // Nav settings
   const config = getTopNavConfig(
     savedMap,
-    initialLayerListConfig,
     isOpenSettingsDisabled,
     isSaveDisabled,
     closeFlyout,
     enableFullScreen,
     openMapSettings,
     inspectorAdapters,
-    currentPath
+    setBreadcrumbs
   );
 
   const submitQuery = function ({ dateRange, query }) {
@@ -121,14 +118,13 @@ export function MapsTopNavMenu({
 
 function getTopNavConfig(
   savedMap,
-  initialLayerListConfig,
   isOpenSettingsDisabled,
   isSaveDisabled,
   closeFlyout,
   enableFullScreen,
   openMapSettings,
   inspectorAdapters,
-  currentPath
+  setBreadcrumbs
 ) {
   return [
     {
@@ -210,19 +206,15 @@ function getTopNavConfig(
                   isTitleDuplicateConfirmed,
                   onTitleDuplicate,
                 };
-                return doSave(
-                  savedMap,
-                  saveOptions,
-                  initialLayerListConfig,
-                  closeFlyout,
-                  currentPath
-                ).then((response) => {
-                  // If the save wasn't successful, put the original values back.
-                  if (!response.id || response.error) {
-                    savedMap.title = currentTitle;
+                return doSave(savedMap, saveOptions, closeFlyout, setBreadcrumbs).then(
+                  (response) => {
+                    // If the save wasn't successful, put the original values back.
+                    if (!response.id || response.error) {
+                      savedMap.title = currentTitle;
+                    }
+                    return response;
                   }
-                  return response;
-                });
+                );
               };
 
               const saveModal = (
@@ -243,7 +235,7 @@ function getTopNavConfig(
   ];
 }
 
-async function doSave(savedMap, saveOptions, initialLayerListConfig, closeFlyout, currentPath) {
+async function doSave(savedMap, saveOptions, closeFlyout, setBreadcrumbs) {
   closeFlyout();
   savedMap.syncWithStore();
   let id;
@@ -265,7 +257,7 @@ async function doSave(savedMap, saveOptions, initialLayerListConfig, closeFlyout
 
   if (id) {
     goToSpecifiedPath(`/map/${id}${window.location.hash}`);
-    updateBreadcrumbs(savedMap, initialLayerListConfig, currentPath);
+    setBreadcrumbs();
 
     getToasts().addSuccess({
       title: i18n.translate('xpack.maps.mapController.saveSuccessMessage', {

diff --git a/x-pack/plugins/maps/public/routing/routes/list/maps_list_view.js b/x-pack/plugins/maps/public/routing/routes/list/maps_list_view.js
@@ -33,7 +33,6 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { addHelpMenuToAppChrome } from '../../../help_menu_util';
 import { Link } from 'react-router-dom';
-import { updateBreadcrumbs } from '../../page_elements/breadcrumbs';
 import { goToSpecifiedPath } from '../../maps_router';
 
 export const EMPTY_FILTER = '';
@@ -53,17 +52,13 @@ export class MapsListView extends React.Component {
     listingLimit: getUiSettings().get('savedObjects:listingLimit'),
   };
 
-  UNSAFE_componentWillMount() {
-    this._isMounted = true;
-    updateBreadcrumbs();
-  }
-
   componentWillUnmount() {
     this._isMounted = false;
     this.debouncedFetch.cancel();
   }
 
   componentDidMount() {
+    this._isMounted = true;
     this.initMapList();
   }
 

diff --git a/x-pack/plugins/maps/public/routing/routes/maps_app/index.js b/x-pack/plugins/maps/public/routing/routes/maps_app/index.js
@@ -11,6 +11,7 @@ import {
   getFilters,
   getQueryableUniqueIndexPatternIds,
   getRefreshConfig,
+  hasUnsavedChanges,
 } from '../../../selectors/map_selectors';
 import {
   replaceLayerList,
@@ -34,6 +35,9 @@ function mapStateToProps(state = {}) {
     flyoutDisplay: getFlyoutDisplay(state),
     refreshConfig: getRefreshConfig(state),
     filters: getFilters(state),
+    hasUnsavedChanges: (savedMap, initialLayerListConfig) => {
+      return hasUnsavedChanges(state, savedMap, initialLayerListConfig);
+    },
   };
 }
 

diff --git a/x-pack/plugins/maps/public/routing/routes/maps_app/load_map_and_render.js b/x-pack/plugins/maps/public/routing/routes/maps_app/load_map_and_render.js
@@ -27,9 +27,8 @@ export const LoadMapAndRender = class extends React.Component {
   }
 
   async _loadSavedMap() {
-    const { savedMapId } = this.props.match.params;
     try {
-      const savedMap = await getMapsSavedObjectLoader().get(savedMapId);
+      const savedMap = await getMapsSavedObjectLoader().get(this.props.savedMapId);
       if (this._isMounted) {
         this.setState({ savedMap });
       }
@@ -48,11 +47,11 @@ export const LoadMapAndRender = class extends React.Component {
 
   render() {
     const { savedMap, failedToLoad } = this.state;
+
     if (failedToLoad) {
       return <Redirect to="/" />;
     }
 
-    const currentPath = this.props.match.url;
-    return savedMap ? <MapsAppView savedMap={savedMap} currentPath={currentPath} /> : null;
+    return savedMap ? <MapsAppView savedMap={savedMap} onAppLeave={this.props.onAppLeave} /> : null;
   }
 };