From 316a9167d1b0b229b536bca6c02ba35a3415b69c Mon Sep 17 00:00:00 2001 From: "Qingyang(Abby) Hu" Date: Sat, 1 Jul 2023 00:13:39 -0700 Subject: [PATCH] [Dashboard De-Angular] Add breadcrumb with view/edit mode and unsaved flow (#4479) * set isDirty back to false when saving susccessfully Signed-off-by: abbyhu2000 * Breadcrumb working Signed-off-by: abbyhu2000 * change to dashboards in breadcrumb Signed-off-by: abbyhu2000 --------- Signed-off-by: abbyhu2000 --- .../components/dashboard_editor.tsx | 24 +++++ .../public/application/utils/breadcrumbs.ts | 98 +++++++++++++++++++ .../application/utils/get_nav_actions.tsx | 3 + 3 files changed, 125 insertions(+) create mode 100644 src/plugins/dashboard/public/application/utils/breadcrumbs.ts diff --git a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx index fd4634abda2d..fb2b7c74aed6 100644 --- a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx +++ b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx @@ -14,10 +14,15 @@ import { DashboardServices } from '../../types'; import { useDashboardAppState } from '../utils/use/use_dashboard_app_state'; import { useDashboardContainer } from '../utils/use/use_dashboard_container'; import { useEditorUpdates } from '../utils/use/use_editor_updates'; +import { + setBreadcrumbsForExistingDashboard, + setBreadcrumbsForNewDashboard, +} from '../utils/breadcrumbs'; export const DashboardEditor = () => { const { id: dashboardIdFromUrl } = useParams<{ id: string }>(); const { services } = useOpenSearchDashboards(); + const { chrome } = services; const isChromeVisible = useChromeVisibility(services.chrome); const [eventEmitter] = useState(new EventEmitter()); @@ -48,6 +53,25 @@ export const DashboardEditor = () => { appState ); + useEffect(() => { + if (appState) { + if (savedDashboardInstance?.id) { + chrome.setBreadcrumbs( + setBreadcrumbsForExistingDashboard( + savedDashboardInstance.title, + appState?.getState().viewMode, + appState?.getState().isDirty + ) + ); + chrome.docTitle.change(savedDashboardInstance.title); + } else { + chrome.setBreadcrumbs( + setBreadcrumbsForNewDashboard(appState?.getState().viewMode, appState?.getState().isDirty) + ); + } + } + }, [appState?.getState(), savedDashboardInstance, chrome]); + useEffect(() => { // clean up all registered listeners if any is left return () => { diff --git a/src/plugins/dashboard/public/application/utils/breadcrumbs.ts b/src/plugins/dashboard/public/application/utils/breadcrumbs.ts new file mode 100644 index 000000000000..dbedf389b07c --- /dev/null +++ b/src/plugins/dashboard/public/application/utils/breadcrumbs.ts @@ -0,0 +1,98 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Any modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +import { i18n } from '@osd/i18n'; +import { DashboardConstants } from '../../dashboard_constants'; +import { ViewMode } from '../../embeddable_plugin'; + +export function getLandingBreadcrumbs() { + return [ + { + text: i18n.translate('dashboard.dashboardAppBreadcrumbsTitle', { + defaultMessage: 'Dashboards', + }), + href: `#${DashboardConstants.LANDING_PAGE_PATH}`, + }, + ]; +} + +export const setBreadcrumbsForNewDashboard = (viewMode: ViewMode, isDirty: boolean) => { + if (viewMode === ViewMode.VIEW) { + return [ + ...getLandingBreadcrumbs(), + { + text: i18n.translate('dashboard.strings.dashboardViewTitle', { + defaultMessage: 'New Dashboard', + }), + }, + ]; + } else { + if (isDirty) { + return [ + ...getLandingBreadcrumbs(), + { + text: i18n.translate('dashboard.strings.dashboardEditTitle', { + defaultMessage: 'Editing New Dashboard (unsaved)', + }), + }, + ]; + } else { + return [ + ...getLandingBreadcrumbs(), + { + text: i18n.translate('dashboard.strings.dashboardEditTitle', { + defaultMessage: 'Editing New Dashboard', + }), + }, + ]; + } + } +}; + +export const setBreadcrumbsForExistingDashboard = ( + title: string, + viewMode: ViewMode, + isDirty: boolean +) => { + if (viewMode === ViewMode.VIEW) { + return [ + ...getLandingBreadcrumbs(), + { + text: i18n.translate('dashboard.strings.dashboardViewTitle', { + defaultMessage: '{title}', + values: { title }, + }), + }, + ]; + } else { + if (isDirty) { + return [ + ...getLandingBreadcrumbs(), + { + text: i18n.translate('dashboard.strings.dashboardEditTitle', { + defaultMessage: 'Editing {title} (unsaved)', + values: { title }, + }), + }, + ]; + } else { + return [ + ...getLandingBreadcrumbs(), + { + text: i18n.translate('dashboard.strings.dashboardEditTitle', { + defaultMessage: 'Editing {title}', + values: { title }, + }), + }, + ]; + } + } +}; diff --git a/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx b/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx index 6e2ad4dc17ec..3e0573e5622e 100644 --- a/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx +++ b/src/plugins/dashboard/public/application/utils/get_nav_actions.tsx @@ -113,6 +113,9 @@ export const getNavActions = ( stateContainer.transitions.set('description', currentDescription); stateContainer.transitions.set('timeRestore', currentTimeRestore); } + + // If the save was successfull, then set the app state isDirty back to false + stateContainer.transitions.set('isDirty', false); return response; }); };