Add onAppLeave handler and ditch confirmModal

Author: Maja Grubic

src/plugins/dashboard/public/application/top_nav/get_top_nav_config.ts

@@ -18,6 +18,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { AppMountParameters } from 'kibana/public';
 import { ViewMode } from '../../embeddable_plugin';
 import { TopNavIds } from './top_nav_ids';
 import { NavAction } from '../../types';
@@ -31,7 +32,8 @@ import { NavAction } from '../../types';
 export function getTopNavConfig(
   dashboardMode: ViewMode,
   actions: { [key: string]: NavAction },
-  hideWriteControls: boolean
+  hideWriteControls: boolean,
+  onAppLeave?: AppMountParameters['onAppLeave']
 ) {
   switch (dashboardMode) {
     case ViewMode.VIEW:

src/plugins/visualize/public/application/app.tsx

@@ -21,6 +21,7 @@ import './app.scss';
 import React, { useEffect } from 'react';
 import { Route, Switch, useLocation } from 'react-router-dom';
 
+import { AppMountParameters } from 'kibana/public';
 import { syncQueryStateWithUrl } from '../../../data/public';
 import { useKibana } from '../../../kibana_react/public';
 import { VisualizeServices } from './types';
@@ -32,7 +33,11 @@ import {
 } from './components';
 import { VisualizeConstants } from './visualize_constants';
 
-export const VisualizeApp = () => {
+export interface VisualizeAppProps {
+  onAppLeave: AppMountParameters['onAppLeave'];
+}
+
+export const VisualizeApp = ({ onAppLeave }: VisualizeAppProps) => {
   const {
     services: {
       data: { query },
@@ -54,10 +59,10 @@ export const VisualizeApp = () => {
   return (
     <Switch>
       <Route exact path={`${VisualizeConstants.EDIT_BY_VALUE_PATH}`}>
-        <VisualizeByValueEditor />
+        <VisualizeByValueEditor onAppLeave={onAppLeave} />
       </Route>
       <Route path={[VisualizeConstants.CREATE_PATH, `${VisualizeConstants.EDIT_PATH}/:id`]}>
-        <VisualizeEditor />
+        <VisualizeEditor onAppLeave={onAppLeave} />
       </Route>
       <Route
         exact

src/plugins/visualize/public/application/components/visualize_byvalue_editor.tsx

@@ -32,8 +32,9 @@ import {
 } from '../utils';
 import { VisualizeServices } from '../types';
 import { VisualizeEditorCommon } from './visualize_editor_common';
+import { VisualizeAppProps } from '../app';
 
-export const VisualizeByValueEditor = () => {
+export const VisualizeByValueEditor = ({ onAppLeave }: VisualizeAppProps) => {
   const [originatingApp, setOriginatingApp] = useState<string>();
   const { services } = useKibana<VisualizeServices>();
   const [eventEmitter] = useState(new EventEmitter());
@@ -100,6 +101,7 @@ export const VisualizeByValueEditor = () => {
       setHasUnsavedChanges={setHasUnsavedChanges}
       visEditorRef={visEditorRef}
       embeddableId={embeddableId}
+      onAppLeave={onAppLeave}
     />
   );
 };

src/plugins/visualize/public/application/components/visualize_editor.tsx

@@ -32,8 +32,9 @@ import {
 } from '../utils';
 import { VisualizeServices } from '../types';
 import { VisualizeEditorCommon } from './visualize_editor_common';
+import { VisualizeAppProps } from '../app';
 
-export const VisualizeEditor = () => {
+export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
   const { id: visualizationIdFromUrl } = useParams<{ id: string }>();
   const [originatingApp, setOriginatingApp] = useState<string>();
   const { services } = useKibana<VisualizeServices>();
@@ -91,6 +92,7 @@ export const VisualizeEditor = () => {
       visualizationIdFromUrl={visualizationIdFromUrl}
       setHasUnsavedChanges={setHasUnsavedChanges}
       visEditorRef={visEditorRef}
+      onAppLeave={onAppLeave}
     />
   );
 };

src/plugins/visualize/public/application/components/visualize_editor_common.tsx

@@ -20,6 +20,7 @@ import './visualize_editor.scss';
 import React, { RefObject } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiScreenReaderOnly } from '@elastic/eui';
+import { AppMountParameters } from 'kibana/public';
 import { VisualizeTopNav } from './visualize_top_nav';
 import { ExperimentalVisInfo } from './experimental_vis_info';
 import {
@@ -38,6 +39,7 @@ interface VisualizeEditorCommonProps {
   setHasUnsavedChanges: (value: boolean) => void;
   hasUnappliedChanges: boolean;
   isEmbeddableRendered: boolean;
+  onAppLeave: AppMountParameters['onAppLeave'];
   visEditorRef: RefObject<HTMLDivElement>;
   originatingApp?: string;
   setOriginatingApp?: (originatingApp: string | undefined) => void;
@@ -54,6 +56,7 @@ export const VisualizeEditorCommon = ({
   setHasUnsavedChanges,
   hasUnappliedChanges,
   isEmbeddableRendered,
+  onAppLeave,
   originatingApp,
   setOriginatingApp,
   visualizationIdFromUrl,
@@ -76,6 +79,7 @@ export const VisualizeEditorCommon = ({
           stateContainer={appState}
           visualizationIdFromUrl={visualizationIdFromUrl}
           embeddableId={embeddableId}
+          onAppLeave={onAppLeave}
         />
       )}
       {visInstance?.vis?.type?.isExperimental && <ExperimentalVisInfo />}

src/plugins/visualize/public/application/components/visualize_top_nav.tsx

@@ -19,7 +19,9 @@
 
 import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
 
-import { OverlayRef } from 'kibana/public';
+import { AppMountParameters, OverlayRef } from 'kibana/public';
+import _ from 'lodash';
+import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../../../kibana_react/public';
 import {
   VisualizeServices,
@@ -43,6 +45,7 @@ interface VisualizeTopNavProps {
   stateContainer: VisualizeAppStateContainer;
   visualizationIdFromUrl?: string;
   embeddableId?: string;
+  onAppLeave: AppMountParameters['onAppLeave'];
 }
 
 const TopNav = ({
@@ -58,10 +61,11 @@ const TopNav = ({
   stateContainer,
   visualizationIdFromUrl,
   embeddableId,
+  onAppLeave,
 }: VisualizeTopNavProps) => {
   const { services } = useKibana<VisualizeServices>();
   const { TopNavMenu } = services.navigation.ui;
-  const { setHeaderActionMenu } = services;
+  const { setHeaderActionMenu, visualizeCapabilities } = services;
   const { embeddableHandler, vis } = visInstance;
   const [inspectorSession, setInspectorSession] = useState<OverlayRef>();
   const openInspector = useCallback(() => {
@@ -93,6 +97,7 @@ const TopNav = ({
           visualizationIdFromUrl,
           stateTransfer,
           embeddableId,
+          onAppLeave,
         },
         services
       );
@@ -111,6 +116,7 @@ const TopNav = ({
     services,
     embeddableId,
     stateTransfer,
+    onAppLeave,
   ]);
   const [indexPattern, setIndexPattern] = useState(vis.data.indexPattern);
   const showDatePicker = () => {
@@ -131,6 +137,25 @@ const TopNav = ({
     };
   }, [inspectorSession]);
 
+  useEffect(() => {
+    onAppLeave((actions) => {
+      // Confirm when the user has made any changes to an existing doc
+      // or when the user has configured something without saving
+      if (hasUnappliedChanges || hasUnsavedChanges) {
+        return actions.confirm(
+          i18n.translate('visualize.confirmModal.confirmTextDescription', {
+            defaultMessage: 'Leave Visualize editor with unsaved changes?',
+          }),
+          i18n.translate('visualize.confirmModal.title', {
+            defaultMessage: 'Unsaved changes',
+          })
+        );
+      } else {
+        return actions.default();
+      }
+    });
+  }, [onAppLeave, hasUnappliedChanges, hasUnsavedChanges, visualizeCapabilities.save]);
+
   useEffect(() => {
     if (!vis.data.indexPattern) {
       services.data.indexPatterns.getDefault().then((index) => {

src/plugins/visualize/public/application/index.tsx

@@ -27,7 +27,10 @@ import { VisualizeApp } from './app';
 import { VisualizeServices } from './types';
 import { addHelpMenuToAppChrome, addBadgeToAppChrome } from './utils';
 
-export const renderApp = ({ element }: AppMountParameters, services: VisualizeServices) => {
+export const renderApp = (
+  { element, onAppLeave }: AppMountParameters,
+  services: VisualizeServices
+) => {
   // add help link to visualize docs into app chrome menu
   addHelpMenuToAppChrome(services.chrome, services.docLinks);
   // add readonly badge if saving restricted
@@ -39,7 +42,7 @@ export const renderApp = ({ element }: AppMountParameters, services: VisualizeSe
     <Router history={services.history}>
       <KibanaContextProvider services={services}>
         <services.i18n.Context>
-          <VisualizeApp />
+          <VisualizeApp onAppLeave={onAppLeave} />
         </services.i18n.Context>
       </KibanaContextProvider>
     </Router>