From a04a9bd724a8583b8a2c1c292b433f4223899b56 Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Tue, 18 Apr 2023 16:04:12 -0600 Subject: [PATCH] Clean up logic --- .../dashboard_app/_dashboard_app_strings.ts | 34 ++++------ .../listing/confirm_overlays.tsx | 34 +++------- .../top_nav/use_dashboard_menu_items.tsx | 67 ++++++++----------- 3 files changed, 48 insertions(+), 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 index 3bfcacc9caab5..3bd91b0ec0c51 100644 --- 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 index f8f936cbe1448..383fae3376a40 100644 --- 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 index 9a25620ef1b81..f603a6635293b 100644 --- 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 }; };