Render empty screen

Render empty screen with correct edit and view view when creating a new dashboard. Signed-off-by: abbyhu2000 <[email protected]>
opensearch-project · Jun 21, 2023 · ef248f4 · ef248f4
1 parent bed8e5c
commit ef248f4
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 19 deletions.
diff --git a/src/plugins/dashboard/public/application/app.scss 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
@@ -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/...rd/public/application/_dashboard_app.scss → ...c/application/dashboard_empty_screen.scss b/...rd/public/application/_dashboard_app.scss → ...c/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
@@ -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
@@ -28,10 +28,12 @@ import {
 } from '../../embeddable';
 import {
   ContainerOutput,
+  EmbeddableFactoryNotFoundError,
   EmbeddableInput,
   ErrorEmbeddable,
   ViewMode,
   isErrorEmbeddable,
+  openAddPanelFlyout,
 } from '../../../embeddable_plugin';
 import {
   convertPanelStateToSavedDashboardPanel,
@@ -40,6 +42,7 @@ import {
 import { DashboardEmptyScreen, DashboardEmptyScreenProps } from '../../dashboard_empty_screen';
 import { 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,6 +114,9 @@ const createDashboardEmbeddable = (
     http,
     dashboardConfig,
     embeddableCapabilities,
+    notifications,
+    overlays,
+    savedObjects,
   } = dashboardServices;
   const { query: queryService } = data;
   const filterManager = queryService.filterManager;
@@ -126,44 +132,66 @@ const createDashboardEmbeddable = (
 
   const getShouldShowEditHelp = () => {
     return (
-      !savedDash.panels.length &&
-      savedDash.viewMode === ViewMode.EDIT &&
+      !appState.getState().panels.length &&
+      appState.getState().viewMode === ViewMode.EDIT &&
       !dashboardConfig.getHideWriteControls()
     );
   };
 
   const getShouldShowViewHelp = () => {
     return (
-      !savedDash.panels.length &&
-      savedDash.viewMode === ViewMode.VIEW &&
+      !appState.getState().panels.length &&
+      appState.getState().viewMode === ViewMode.VIEW &&
       !dashboardConfig.getHideWriteControls()
     );
   };
 
   const shouldShowUnauthorizedEmptyState = () => {
     const readonlyMode =
-      !savedDash.panels.length &&
+      !appState.getState().panels.length &&
       !getShouldShowEditHelp() &&
       !getShouldShowViewHelp() &&
       dashboardConfig.getHideWriteControls();
     const userHasNoPermissions =
-      !savedDash.panels.length && !visualizeCapabilities.save && !mapsCapabilities.save;
+      !appState.getState().panels.length && !visualizeCapabilities.save && !mapsCapabilities.save;
     return readonlyMode || userHasNoPermissions;
   };
 
   const getEmptyScreenProps = (
     shouldShowEditHelp: boolean,
-    isEmptyInReadOnlyMode: boolean
+    isEmptyInReadOnlyMode: boolean,
+    dashboardContainer: DashboardContainer,
+    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) {
@@ -194,8 +222,8 @@ const createDashboardEmbeddable = (
       panels: embeddablesMap,
       isFullScreenMode: appStateData.fullScreenMode,
       isEmbeddedExternally: false, // TODO
-      // isEmptyState: shouldShowEditHelp || shouldShowViewHelp || isEmptyInReadonlyMode,
-      isEmptyState: false, // TODO
+      isEmptyState:
+        getShouldShowEditHelp() || getShouldShowViewHelp() || shouldShowUnauthorizedEmptyState(),
       useMargins: appStateData.options.useMargins,
       lastReloadRequestTime, // TODO
       title: appStateData.title,
@@ -218,7 +246,12 @@ const createDashboardEmbeddable = (
             const isEmptyState = shouldShowEditHelp || shouldShowViewHelp || isEmptyInReadOnlyMode;
             return isEmptyState ? (
               <DashboardEmptyScreen
-                {...getEmptyScreenProps(shouldShowEditHelp, isEmptyInReadOnlyMode)}
+                {...getEmptyScreenProps(
+                  shouldShowEditHelp,
+                  isEmptyInReadOnlyMode,
+                  dashboardContainer,
+                  appState
+                )}
               />
             ) : null;
           };