Clean up logic

elastic · Apr 18, 2023 · a04a9bd · a04a9bd
1 parent 5e1e855
commit a04a9bd
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 87 deletions.
diff --git a/src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts b/src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts
@@ -106,10 +106,14 @@ export const resetConfirmStrings = {
     i18n.translate('dashboard.resetChangesConfirmModal.resetChangesTitle', {
       defaultMessage: 'Reset dashboard?',
     }),
-  getResetSubtitle: () =>
-    i18n.translate('dashboard.resetChangesConfirmModal.resetChangesDescription', {
-      defaultMessage: `This dashboard will return to its last saved state.  You might lose changes to filters and queries.`,
-    }),
+  getResetSubtitle: (viewMode: ViewMode) =>
+    viewMode === ViewMode.EDIT
+      ? i18n.translate('dashboard.discardChangesConfirmModal.discardChangesDescription', {
+          defaultMessage: `Resetting will cause all unsaved changes to be lost.`,
+        })
+      : i18n.translate('dashboard.resetChangesConfirmModal.resetChangesDescription', {
+          defaultMessage: `This dashboard will return to its last saved state.  You might lose changes to filters and queries.`,
+        }),
   getResetConfirmButtonText: () =>
     i18n.translate('dashboard.resetChangesConfirmModal.confirmButtonLabel', {
       defaultMessage: 'Reset',
@@ -119,20 +123,6 @@ export const resetConfirmStrings = {
 /*
   Dashboard Listing Page
 */
-export const discardConfirmStrings = {
-  getDiscardTitle: () =>
-    i18n.translate('dashboard.discardChangesConfirmModal.discardChangesTitle', {
-      defaultMessage: 'Reset dashboard?',
-    }),
-  getDiscardSubtitle: () =>
-    i18n.translate('dashboard.discardChangesConfirmModal.discardChangesDescription', {
-      defaultMessage: `Resetting will cause all unsaved changes to be lost.`,
-    }),
-  getDiscardConfirmButtonText: () =>
-    i18n.translate('dashboard.discardChangesConfirmModal.confirmButtonLabel', {
-      defaultMessage: 'Reset',
-    }),
-};
 
 export const createConfirmStrings = {
   getCreateTitle: () =>
@@ -232,13 +222,13 @@ export const dashboardUnsavedListingStrings = {
       defaultMessage: 'Continue editing',
     }),
   getDiscardAriaLabel: (title: string) =>
-    i18n.translate('dashboard.listing.unsaved.discardAria', {
-      defaultMessage: 'Discard changes to {title}',
+    i18n.translate('dashboard.listing.unsaved.resetAria', {
+      defaultMessage: 'Reset changes to {title}',
       values: { title },
     }),
   getDiscardTitle: () =>
-    i18n.translate('dashboard.listing.unsaved.discardTitle', {
-      defaultMessage: 'Discard changes',
+    i18n.translate('dashboard.listing.unsaved.resetTitle', {
+      defaultMessage: 'Reset changes',
     }),
 };
 

diff --git a/src/plugins/dashboard/public/dashboard_app/listing/confirm_overlays.tsx b/src/plugins/dashboard/public/dashboard_app/listing/confirm_overlays.tsx
@@ -24,42 +24,24 @@ import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { toMountPoint } from '@kbn/kibana-react-plugin/public';
 
 import { pluginServices } from '../../services/plugin_services';
-import {
-  createConfirmStrings,
-  discardConfirmStrings,
-  resetConfirmStrings,
-} from '../_dashboard_app_strings';
+import { createConfirmStrings, resetConfirmStrings } from '../_dashboard_app_strings';
 
 export type DiscardOrKeepSelection = 'cancel' | 'discard' | 'keep';
 
-export const confirmDiscardUnsavedChanges = (discardCallback: () => void) => {
-  const {
-    overlays: { openConfirm },
-  } = pluginServices.getServices();
-
-  openConfirm(discardConfirmStrings.getDiscardSubtitle(), {
-    confirmButtonText: discardConfirmStrings.getDiscardConfirmButtonText(),
-    buttonColor: 'danger',
-    defaultFocusedButton: EUI_MODAL_CANCEL_BUTTON,
-    title: discardConfirmStrings.getDiscardTitle(),
-  }).then((isConfirmed) => {
-    if (isConfirmed) {
-      discardCallback();
-    }
-  });
-};
-
-export const confirmResetUnsavedChanges = (discardCallback: () => void) => {
+export const confirmDiscardUnsavedChanges = (
+  discardCallback: () => void,
+  viewMode: ViewMode = ViewMode.EDIT // we want to show the danger modal on the listing page
+) => {
   const {
     overlays: { openConfirm },
   } = pluginServices.getServices();
 
-  openConfirm(resetConfirmStrings.getResetSubtitle(), {
+  openConfirm(resetConfirmStrings.getResetSubtitle(viewMode), {
     confirmButtonText: resetConfirmStrings.getResetConfirmButtonText(),
-    buttonColor: 'primary',
+    buttonColor: viewMode === ViewMode.EDIT ? 'danger' : 'primary',
+    maxWidth: 500,
     defaultFocusedButton: EUI_MODAL_CANCEL_BUTTON,
     title: resetConfirmStrings.getResetTitle(),
-    maxWidth: 500,
   }).then((isConfirmed) => {
     if (isConfirmed) {
       discardCallback();

diff --git a/src/plugins/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx b/src/plugins/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
@@ -20,10 +20,7 @@ import { pluginServices } from '../../services/plugin_services';
 import { CHANGE_CHECK_DEBOUNCE } from '../../dashboard_constants';
 import { SaveDashboardReturn } from '../../services/dashboard_saved_object/types';
 import { useDashboardContainerContext } from '../../dashboard_container/dashboard_container_context';
-import {
-  confirmDiscardUnsavedChanges,
-  confirmResetUnsavedChanges,
-} from '../listing/confirm_overlays';
+import { confirmDiscardUnsavedChanges } from '../listing/confirm_overlays';
 
 export const useDashboardMenuItems = ({
   redirectTo,
@@ -61,6 +58,7 @@ export const useDashboardMenuItems = ({
   const hasOverlays = select((state) => state.componentState.hasOverlays);
   const lastSavedId = select((state) => state.componentState.lastSavedId);
   const dashboardTitle = select((state) => state.explicitInput.title);
+  const viewMode = select((state) => state.explicitInput.viewMode);
 
   /**
    * Show the Dashboard app's share menu
@@ -123,26 +121,20 @@ export const useDashboardMenuItems = ({
    * (2) if `switchToViewMode` is `true`, set the dashboard to view mode.
    */
   const resetChanges = useCallback(
-    (viewMode: ViewMode, switchToViewMode: boolean = false) => {
+    (switchToViewMode: boolean = false) => {
       dashboardContainer.clearOverlays();
-      if (viewMode === ViewMode.EDIT) {
-        if (hasUnsavedChanges) {
-          confirmDiscardUnsavedChanges(() => {
-            batch(() => {
-              dashboardContainer.resetToLastSavedState();
-              if (switchToViewMode) dispatch(setViewMode(ViewMode.VIEW));
-            });
+      if (hasUnsavedChanges) {
+        confirmDiscardUnsavedChanges(() => {
+          batch(() => {
+            dashboardContainer.resetToLastSavedState();
+            if (switchToViewMode) dispatch(setViewMode(ViewMode.VIEW));
           });
-          return;
-        }
-        dispatch(setViewMode(ViewMode.VIEW));
-      } else {
-        confirmResetUnsavedChanges(() => {
-          dashboardContainer.resetToLastSavedState();
-        });
+        }, viewMode);
+        return;
       }
+      dispatch(setViewMode(ViewMode.VIEW));
     },
-    [dashboardContainer, dispatch, hasUnsavedChanges, setViewMode]
+    [dashboardContainer, dispatch, hasUnsavedChanges, viewMode, setViewMode]
   );
 
   /**
@@ -249,21 +241,18 @@ export const useDashboardMenuItems = ({
     clone,
   ]);
 
-  const getResetChangesMenuItem = useCallback(
-    (viewMode: ViewMode) => {
-      return {
-        ...topNavStrings.resetChanges,
-        id: 'reset',
-        testId: 'dashboardDiscardChangesMenuItem',
-        disableButton:
-          !hasUnsavedChanges ||
-          hasOverlays ||
-          (viewMode === ViewMode.EDIT && (isSaveInProgress || !lastSavedId)),
-        run: () => resetChanges(viewMode),
-      };
-    },
-    [hasOverlays, lastSavedId, resetChanges, isSaveInProgress, hasUnsavedChanges]
-  );
+  const resetChangesMenuItem = useMemo(() => {
+    return {
+      ...topNavStrings.resetChanges,
+      id: 'reset',
+      testId: 'dashboardDiscardChangesMenuItem',
+      disableButton:
+        !hasUnsavedChanges ||
+        hasOverlays ||
+        (viewMode === ViewMode.EDIT && (isSaveInProgress || !lastSavedId)),
+      run: () => resetChanges(),
+    };
+  }, [hasOverlays, lastSavedId, resetChanges, viewMode, isSaveInProgress, hasUnsavedChanges]);
 
   /**
    * Build ordered menus for view and edit mode.
@@ -278,10 +267,10 @@ export const useDashboardMenuItems = ({
       menuItems.fullScreen,
       ...shareMenuItem,
       ...cloneMenuItem,
-      { ...getResetChangesMenuItem(ViewMode.VIEW) },
+      resetChangesMenuItem,
       ...editMenuItem,
     ];
-  }, [menuItems, share, showWriteControls, getResetChangesMenuItem, isLabsEnabled]);
+  }, [menuItems, share, showWriteControls, resetChangesMenuItem, isLabsEnabled]);
 
   const editModeTopNavConfig = useMemo(() => {
     const labsMenuItem = isLabsEnabled ? [menuItems.labs] : [];
@@ -291,14 +280,14 @@ export const useDashboardMenuItems = ({
       editModeItems.push(
         menuItems.saveAs,
         menuItems.switchToViewMode,
-        { ...getResetChangesMenuItem(ViewMode.EDIT) },
+        resetChangesMenuItem,
         menuItems.quickSave
       );
     } else {
       editModeItems.push(menuItems.switchToViewMode, menuItems.saveAs);
     }
     return [...labsMenuItem, menuItems.settings, ...shareMenuItem, ...editModeItems];
-  }, [lastSavedId, menuItems, share, getResetChangesMenuItem, isLabsEnabled]);
+  }, [lastSavedId, menuItems, share, resetChangesMenuItem, isLabsEnabled]);
 
   return { viewModeTopNavConfig, editModeTopNavConfig };
 };