From 10b2ccb9db0a20f961e01ca650bd67b427f7f2e9 Mon Sep 17 00:00:00 2001 From: "Qingyang(Abby) Hu" Date: Thu, 22 Jun 2023 12:00:47 -0700 Subject: [PATCH] Render empty screen (#4346) Render empty screen with correct edit and view view when creating a new dashboard. Signed-off-by: abbyhu2000 --- .../dashboard/public/application/app.scss | 11 +++ .../dashboard/public/application/app.tsx | 1 + ...d_app.scss => dashboard_empty_screen.scss} | 6 -- .../application/dashboard_empty_screen.tsx | 1 + .../utils/use/use_dashboard_container.tsx | 81 +++++++++++++------ 5 files changed, 70 insertions(+), 30 deletions(-) create mode 100644 src/plugins/dashboard/public/application/app.scss rename src/plugins/dashboard/public/application/{_dashboard_app.scss => dashboard_empty_screen.scss} (83%) diff --git a/src/plugins/dashboard/public/application/app.scss b/src/plugins/dashboard/public/application/app.scss new file mode 100644 index 000000000000..0badd1060d6b --- /dev/null +++ b/src/plugins/dashboard/public/application/app.scss @@ -0,0 +1,11 @@ +.dshAppContainer { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +#dashboardViewport { + display: flex; + flex-direction: column; + flex: 1; +} diff --git a/src/plugins/dashboard/public/application/app.tsx b/src/plugins/dashboard/public/application/app.tsx index 710908233d98..c516e88fae90 100644 --- a/src/plugins/dashboard/public/application/app.tsx +++ b/src/plugins/dashboard/public/application/app.tsx @@ -9,6 +9,7 @@ * GitHub history for details. */ +import './app.scss'; import { AppMountParameters } from 'opensearch-dashboards/public'; import React from 'react'; import { Route, Switch } from 'react-router-dom'; diff --git a/src/plugins/dashboard/public/application/_dashboard_app.scss b/src/plugins/dashboard/public/application/dashboard_empty_screen.scss similarity index 83% rename from src/plugins/dashboard/public/application/_dashboard_app.scss rename to src/plugins/dashboard/public/application/dashboard_empty_screen.scss index 94634d2c408e..d930f578e11d 100644 --- a/src/plugins/dashboard/public/application/_dashboard_app.scss +++ b/src/plugins/dashboard/public/application/dashboard_empty_screen.scss @@ -1,9 +1,3 @@ -.dshAppContainer { - display: flex; - flex-direction: column; - flex: 1; -} - .dshStartScreen { text-align: center; } diff --git a/src/plugins/dashboard/public/application/dashboard_empty_screen.tsx b/src/plugins/dashboard/public/application/dashboard_empty_screen.tsx index 558fe0af5f62..d7f4a725a6fc 100644 --- a/src/plugins/dashboard/public/application/dashboard_empty_screen.tsx +++ b/src/plugins/dashboard/public/application/dashboard_empty_screen.tsx @@ -28,6 +28,7 @@ * under the License. */ +import './dashboard_empty_screen.scss'; import React from 'react'; import { I18nProvider } from '@osd/i18n/react'; import { diff --git a/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx b/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx index fbea2e5e61a8..fe55af0c6f85 100644 --- a/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx +++ b/src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx @@ -28,18 +28,26 @@ import { } from '../../embeddable'; import { ContainerOutput, + EmbeddableFactoryNotFoundError, EmbeddableInput, ErrorEmbeddable, ViewMode, isErrorEmbeddable, + openAddPanelFlyout, } from '../../../embeddable_plugin'; import { convertPanelStateToSavedDashboardPanel, convertSavedDashboardPanelToPanelState, } from '../../lib/embeddable_saved_object_converters'; import { DashboardEmptyScreen, DashboardEmptyScreenProps } from '../../dashboard_empty_screen'; -import { DashboardAppStateContainer, DashboardServices, SavedDashboardPanel } from '../../../types'; +import { + DashboardAppState, + DashboardAppStateContainer, + DashboardServices, + SavedDashboardPanel, +} from '../../../types'; import { migrateLegacyQuery } from '../../lib/migrate_legacy_query'; +import { getSavedObjectFinder } from '../../../../../saved_objects/public'; import { DashboardConstants } from '../../../dashboard_constants'; export const useDashboardContainer = ( @@ -111,59 +119,82 @@ const createDashboardEmbeddable = ( http, dashboardConfig, embeddableCapabilities, + notifications, + overlays, + savedObjects, } = dashboardServices; const { query: queryService } = data; const filterManager = queryService.filterManager; const timefilter = queryService.timefilter.timefilter; const queryStringManager = queryService.queryString; const { visualizeCapabilities, mapsCapabilities } = embeddableCapabilities; - // const dashboardDom = document.getElementById('dashboardViewport'); const dashboardFactory = embeddable.getEmbeddableFactory< DashboardContainerInput, ContainerOutput, DashboardContainer >(DASHBOARD_CONTAINER_TYPE); - const getShouldShowEditHelp = () => { + const getShouldShowEditHelp = (appStateData: DashboardAppState) => { return ( - !savedDash.panels.length && - savedDash.viewMode === ViewMode.EDIT && + !appStateData.panels.length && + appStateData.viewMode === ViewMode.EDIT && !dashboardConfig.getHideWriteControls() ); }; - const getShouldShowViewHelp = () => { + const getShouldShowViewHelp = (appStateData: DashboardAppState) => { return ( - !savedDash.panels.length && - savedDash.viewMode === ViewMode.VIEW && + !appStateData.panels.length && + appStateData.viewMode === ViewMode.VIEW && !dashboardConfig.getHideWriteControls() ); }; - const shouldShowUnauthorizedEmptyState = () => { + const shouldShowUnauthorizedEmptyState = (appStateData: DashboardAppState) => { const readonlyMode = - !savedDash.panels.length && - !getShouldShowEditHelp() && - !getShouldShowViewHelp() && + !appStateData.panels.length && + !getShouldShowEditHelp(appStateData) && + !getShouldShowViewHelp(appStateData) && dashboardConfig.getHideWriteControls(); const userHasNoPermissions = - !savedDash.panels.length && !visualizeCapabilities.save && !mapsCapabilities.save; + !appStateData.panels.length && !visualizeCapabilities.save && !mapsCapabilities.save; return readonlyMode || userHasNoPermissions; }; const getEmptyScreenProps = ( shouldShowEditHelp: boolean, - isEmptyInReadOnlyMode: boolean + isEmptyInReadOnlyMode: boolean, + stateContainer: DashboardAppStateContainer ): DashboardEmptyScreenProps => { const emptyScreenProps: DashboardEmptyScreenProps = { - onLinkClick: () => {}, // TODO + onLinkClick: () => { + if (shouldShowEditHelp) { + if (dashboardContainer && !isErrorEmbeddable(dashboardContainer)) { + openAddPanelFlyout({ + embeddable: dashboardContainer, + getAllFactories: embeddable.getEmbeddableFactories, + getFactory: embeddable.getEmbeddableFactory, + notifications, + overlays, + SavedObjectFinder: getSavedObjectFinder(savedObjects, uiSettings), + }); + } + } else { + stateContainer.transitions.set('viewMode', ViewMode.EDIT); + } + }, showLinkToVisualize: shouldShowEditHelp, uiSettings, http, }; if (shouldShowEditHelp) { - emptyScreenProps.onVisualizeClick = () => { - alert('click'); // TODO + emptyScreenProps.onVisualizeClick = async () => { + const type = 'visualization'; + const factory = embeddable.getEmbeddableFactory(type); + if (!factory) { + throw new EmbeddableFactoryNotFoundError(type); + } + await factory.create({} as EmbeddableInput, dashboardContainer); }; } if (isEmptyInReadOnlyMode) { @@ -174,7 +205,6 @@ const createDashboardEmbeddable = ( const getDashboardInput = () => { const appStateData = appState.getState(); - const embeddablesMap: { [key: string]: DashboardPanelState; } = {}; @@ -194,8 +224,10 @@ const createDashboardEmbeddable = ( panels: embeddablesMap, isFullScreenMode: appStateData.fullScreenMode, isEmbeddedExternally: false, // TODO - // isEmptyState: shouldShowEditHelp || shouldShowViewHelp || isEmptyInReadonlyMode, - isEmptyState: false, // TODO + isEmptyState: + getShouldShowEditHelp(appStateData) || + getShouldShowViewHelp(appStateData) || + shouldShowUnauthorizedEmptyState(appStateData), useMargins: appStateData.options.useMargins, lastReloadRequestTime, // TODO title: appStateData.title, @@ -212,13 +244,14 @@ const createDashboardEmbeddable = ( dashboardContainer = container; dashboardContainer.renderEmpty = () => { - const shouldShowEditHelp = getShouldShowEditHelp(); - const shouldShowViewHelp = getShouldShowViewHelp(); - const isEmptyInReadOnlyMode = shouldShowUnauthorizedEmptyState(); + const appStateData = appState.getState(); + const shouldShowEditHelp = getShouldShowEditHelp(appStateData); + const shouldShowViewHelp = getShouldShowViewHelp(appStateData); + const isEmptyInReadOnlyMode = shouldShowUnauthorizedEmptyState(appStateData); const isEmptyState = shouldShowEditHelp || shouldShowViewHelp || isEmptyInReadOnlyMode; return isEmptyState ? ( ) : null; };