[dashboard] replace embeddable.ViewMode with presentation-publishing.…

…ViewMode (elastic#204464)

Co-authored-by: Elastic Machine <[email protected]>

src/plugins/dashboard/common/dashboard_container/types.ts

@@ -8,7 +8,6 @@
  */
 
 import {
-  ViewMode,
   PanelState,
   EmbeddableInput,
   SavedObjectEmbeddableInput,
@@ -17,6 +16,7 @@ import { Filter, Query, TimeRange } from '@kbn/es-query';
 import type { Reference } from '@kbn/content-management-utils';
 import { RefreshInterval } from '@kbn/data-plugin/common';
 import { KibanaExecutionContext } from '@kbn/core-execution-context-common';
+import type { ViewMode } from '@kbn/presentation-publishing';
 
 import type { DashboardOptions, GridData } from '../../server/content_management';
 
@@ -44,7 +44,7 @@ export interface DashboardPanelState<
 
 export type DashboardContainerByReferenceInput = SavedObjectEmbeddableInput;
 
-export interface DashboardContainerInput extends EmbeddableInput {
+export interface DashboardContainerInput extends Omit<EmbeddableInput, 'viewMode'> {
   // filter context to be passed to children
   query: Query;
   filters: Filter[];

src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx

@@ -14,10 +14,10 @@ import { debounceTime } from 'rxjs';
 import { v4 as uuidv4 } from 'uuid';
 
 import { DASHBOARD_APP_LOCATOR } from '@kbn/deeplinks-analytics';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
 import { createKbnUrlStateStorage, withNotifyOnErrors } from '@kbn/kibana-utils-plugin/public';
 
+import { ViewMode } from '@kbn/presentation-publishing';
 import { DashboardApi, DashboardCreationOptions, DashboardRenderer } from '..';
 import { SharedDashboardState } from '../../common';
 import {
@@ -154,7 +154,7 @@ export function DashboardApp({
         // if print mode is active, force viewMode.PRINT
         ...(screenshotModeService.isScreenshotMode() &&
         screenshotModeService.getScreenshotContext('layout') === 'print'
-          ? { viewMode: ViewMode.PRINT }
+          ? { viewMode: 'print' as ViewMode }
           : {}),
       };
     };

src/plugins/dashboard/public/dashboard_app/dashboard_router.tsx

@@ -10,7 +10,6 @@
 import './_dashboard_app.scss';
 
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { createKbnUrlStateStorage, withNotifyOnErrors } from '@kbn/kibana-utils-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { Route, Routes } from '@kbn/shared-ux-router';
@@ -72,7 +71,7 @@ export async function mountApp({
     if (redirectTo.destination === 'dashboard') {
       path = redirectTo.id ? createDashboardEditUrl(redirectTo.id) : CREATE_NEW_DASHBOARD_URL;
       if (redirectTo.editMode) {
-        state = { viewMode: ViewMode.EDIT };
+        state = { viewMode: 'edit' };
       }
     } else {
       path = createDashboardListingFilterUrl(redirectTo.filter);

src/plugins/dashboard/public/dashboard_app/listing_page/dashboard_listing_page.tsx

@@ -10,7 +10,6 @@
 import React, { useEffect, useState } from 'react';
 
 import { syncGlobalQueryStateWithUrl } from '@kbn/data-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { IKbnUrlStateStorage } from '@kbn/kibana-utils-plugin/public';
 
 import { DashboardRedirect } from '../../dashboard_container/types';
@@ -108,7 +107,7 @@ export const DashboardListingPage = ({
           useSessionStorageIntegration={true}
           initialFilter={initialFilter ?? titleFilter}
           goToDashboard={(id, viewMode) => {
-            redirectTo({ destination: 'dashboard', id, editMode: viewMode === ViewMode.EDIT });
+            redirectTo({ destination: 'dashboard', id, editMode: viewMode === 'edit' });
           }}
           getDashboardUrl={(id, timeRestore) => {
             return getDashboardListItemLink(kbnUrlStateStorage, id, timeRestore);

src/plugins/dashboard/public/dashboard_app/top_nav/share/show_share_modal.tsx

@@ -15,7 +15,6 @@ import { EuiCallOut, EuiCheckboxGroup } from '@elastic/eui';
 import type { Capabilities } from '@kbn/core/public';
 import { QueryState } from '@kbn/data-plugin/common';
 import { DASHBOARD_APP_LOCATOR } from '@kbn/deeplinks-analytics';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { getStateFromKbnUrl, setStateToKbnUrl, unhashUrl } from '@kbn/kibana-utils-plugin/public';
 
@@ -177,7 +176,7 @@ export function ShowShareModal({
     dashboardId: savedObjectId,
     preserveSavedFilters: true,
     refreshInterval: undefined, // We don't share refresh interval externally
-    viewMode: ViewMode.VIEW, // For share locators we always load the dashboard in view mode
+    viewMode: 'view', // For share locators we always load the dashboard in view mode
     useHash: false,
     timeRange: dataService.query.timefilter.timefilter.getTime(),
     ...unsavedStateForLocator,

src/plugins/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx

@@ -9,7 +9,6 @@
 
 import { Dispatch, SetStateAction, useCallback, useMemo, useState } from 'react';
 
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { TopNavMenuData } from '@kbn/navigation-plugin/public';
 import useMountedState from 'react-use/lib/useMountedState';
 
@@ -97,8 +96,8 @@ export const useDashboardMenuItems = ({
       dashboardApi.clearOverlays();
       const switchModes = switchToViewMode
         ? () => {
-            dashboardApi.setViewMode(ViewMode.VIEW);
-            getDashboardBackupService().storeViewMode(ViewMode.VIEW);
+            dashboardApi.setViewMode('view');
+            getDashboardBackupService().storeViewMode('view');
           }
         : undefined;
       if (!hasUnsavedChanges) {
@@ -112,7 +111,7 @@ export const useDashboardMenuItems = ({
           setIsResetting(false);
           switchModes?.();
         }
-      }, viewMode as ViewMode);
+      }, viewMode);
     },
     [dashboardApi, hasUnsavedChanges, viewMode, isMounted]
   );
@@ -146,8 +145,8 @@ export const useDashboardMenuItems = ({
         testId: 'dashboardEditMode',
         className: 'eui-hideFor--s eui-hideFor--xs', // hide for small screens - editing doesn't work in mobile mode.
         run: () => {
-          getDashboardBackupService().storeViewMode(ViewMode.EDIT);
-          dashboardApi.setViewMode(ViewMode.EDIT);
+          getDashboardBackupService().storeViewMode('edit');
+          dashboardApi.setViewMode('edit');
           dashboardApi.clearOverlays();
         },
         disableButton: disableTopNav,
@@ -171,13 +170,13 @@ export const useDashboardMenuItems = ({
         testId: 'dashboardInteractiveSaveMenuItem',
         run: dashboardInteractiveSave,
         label:
-          viewMode === ViewMode.VIEW
+          viewMode === 'view'
             ? topNavStrings.viewModeInteractiveSave.label
             : Boolean(lastSavedId)
             ? topNavStrings.editModeInteractiveSave.label
             : topNavStrings.quickSave.label,
         description:
-          viewMode === ViewMode.VIEW
+          viewMode === 'view'
             ? topNavStrings.viewModeInteractiveSave.description
             : topNavStrings.editModeInteractiveSave.description,
       } as TopNavMenuData,
@@ -232,7 +231,7 @@ export const useDashboardMenuItems = ({
         isResetting ||
         !hasUnsavedChanges ||
         hasOverlays ||
-        (viewMode === ViewMode.EDIT && (isSaveInProgress || !lastSavedId)),
+        (viewMode === 'edit' && (isSaveInProgress || !lastSavedId)),
       isLoading: isResetting,
       run: () => resetChanges(),
     };

src/plugins/dashboard/public/dashboard_app/url/search_sessions_integration.ts

@@ -18,7 +18,6 @@ import {
 import { replaceUrlHashQuery } from '@kbn/kibana-utils-plugin/common';
 import type { Query } from '@kbn/es-query';
 import { SearchSessionInfoProvider } from '@kbn/data-plugin/public';
-import type { ViewMode } from '@kbn/embeddable-plugin/common';
 import { DASHBOARD_APP_LOCATOR } from '@kbn/deeplinks-analytics';
 import { SEARCH_SESSION_ID } from '../../dashboard_constants';
 import { DashboardLocatorParams } from '../../dashboard_container';
@@ -73,7 +72,7 @@ function getLocatorParams({
 }): DashboardLocatorParams {
   const savedObjectId = dashboardApi.savedObjectId.value;
   return {
-    viewMode: (dashboardApi.viewMode.value as ViewMode) ?? 'view',
+    viewMode: dashboardApi.viewMode.value ?? 'view',
     useHash: false,
     preserveSavedFilters: false,
     filters: dataService.query.filterManager.getFilters(),

src/plugins/dashboard/public/dashboard_constants.ts

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ViewMode } from '@kbn/embeddable-plugin/common';
 import type { DashboardContainerInput } from '../common';
 
 // ------------------------------------------------------------------
@@ -85,7 +84,7 @@ export const DASHBOARD_CACHE_TTL = 1000 * 60 * 5; // time to live = 5 minutes
 // Default State
 // ------------------------------------------------------------------
 export const DEFAULT_DASHBOARD_INPUT: Omit<DashboardContainerInput, 'id'> = {
-  viewMode: ViewMode.VIEW,
+  viewMode: 'view',
   timeRestore: false,
   query: { query: '', language: 'kuery' },
   description: '',

src/plugins/dashboard/public/dashboard_container/component/empty_screen/dashboard_empty_screen.tsx

@@ -20,7 +20,6 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { METRIC_TYPE } from '@kbn/analytics';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
 
 import { useDashboardApi } from '../../../dashboard_api/use_dashboard_api';
@@ -131,7 +130,7 @@ export function DashboardEmptyScreen() {
     }
     if (showWriteControls) {
       return (
-        <EuiButton iconType="pencil" onClick={() => dashboardApi.setViewMode(ViewMode.EDIT)}>
+        <EuiButton iconType="pencil" onClick={() => dashboardApi.setViewMode('edit')}>
           {emptyScreenStrings.getEditLinkTitle()}
         </EuiButton>
       );

src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.tsx

@@ -15,8 +15,6 @@ import classNames from 'classnames';
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { Layout, Responsive as ResponsiveReactGridLayout } from 'react-grid-layout';
 
-import { ViewMode } from '@kbn/embeddable-plugin/public';
-
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { useAppFixedViewport } from '@kbn/core-rendering-browser';
 import { DashboardPanelState } from '../../../../common';
@@ -106,7 +104,7 @@ export const DashboardGrid = ({
 
   const onLayoutChange = useCallback(
     (newLayout: Array<Layout & { i: string }>) => {
-      if (viewMode !== ViewMode.EDIT) return;
+      if (viewMode !== 'edit') return;
 
       const updatedPanels: { [key: string]: DashboardPanelState } = newLayout.reduce(
         (updatedPanelsAcc, panelLayout) => {
@@ -127,16 +125,16 @@ export const DashboardGrid = ({
 
   const classes = classNames({
     'dshLayout-withoutMargins': !useMargins,
-    'dshLayout--viewing': viewMode === ViewMode.VIEW,
-    'dshLayout--editing': viewMode !== ViewMode.VIEW,
+    'dshLayout--viewing': viewMode === 'view',
+    'dshLayout--editing': viewMode !== 'view',
     'dshLayout--noAnimation': !animatePanelTransforms || delayedIsPanelExpanded,
     'dshLayout-isMaximizedPanel': expandedPanelId !== undefined,
   });
 
   const { layouts, breakpoints, columns } = useDashboardGridSettings(panelsInOrder, panels);
 
   // in print mode, dashboard layout is not controlled by React Grid Layout
-  if (viewMode === ViewMode.PRINT) {
+  if (viewMode === 'print') {
     return <>{panelComponents}</>;
   }
 

src/plugins/dashboard/public/dashboard_container/component/grid/use_dashboard_grid_settings.tsx

@@ -10,7 +10,6 @@
 import { useMemo } from 'react';
 
 import { useEuiTheme } from '@elastic/eui';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 
 import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
 import { DashboardPanelMap } from '../../../../common';
@@ -30,14 +29,14 @@ export const useDashboardGridSettings = (panelsInOrder: string[], panels: Dashbo
   }, [panels, panelsInOrder]);
 
   const breakpoints = useMemo(
-    () => ({ lg: euiTheme.breakpoint.m, ...(viewMode === ViewMode.VIEW ? { sm: 0 } : {}) }),
+    () => ({ lg: euiTheme.breakpoint.m, ...(viewMode === 'view' ? { sm: 0 } : {}) }),
     [viewMode, euiTheme.breakpoint.m]
   );
 
   const columns = useMemo(
     () => ({
       lg: DASHBOARD_GRID_COLUMN_COUNT,
-      ...(viewMode === ViewMode.VIEW ? { sm: 1 } : {}),
+      ...(viewMode === 'view' ? { sm: 1 } : {}),
     }),
     [viewMode]
   );

src/plugins/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx

@@ -13,7 +13,7 @@ import useResizeObserver from 'use-resize-observer/polyfilled';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { EuiPortal } from '@elastic/eui';
-import { ReactEmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public';
+import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public';
 import { ExitFullScreenButton } from '@kbn/shared-ux-button-exit-full-screen';
 
 import {
@@ -119,7 +119,7 @@ export const DashboardViewport = ({ dashboardContainer }: { dashboardContainer?:
         'dshDashboardViewportWrapper--isFullscreen': fullScreenMode,
       })}
     >
-      {viewMode !== ViewMode.PRINT ? (
+      {viewMode !== 'print' ? (
         <div className={hasControls ? 'dshDashboardViewport-controls' : ''}>
           <ReactEmbeddableRenderer<
             ControlGroupSerializedState,

src/plugins/dashboard/public/dashboard_listing/_dashboard_listing_strings.ts

@@ -7,8 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
+import { ViewMode } from '@kbn/presentation-publishing';
 
 export const dashboardListingErrorStrings = {
   getErrorDeletingDashboardToast: () =>
@@ -116,7 +116,7 @@ export const resetConfirmStrings = {
       defaultMessage: 'Reset dashboard?',
     }),
   getResetSubtitle: (viewMode: ViewMode) =>
-    viewMode === ViewMode.EDIT
+    viewMode === 'edit'
       ? i18n.translate('dashboard.discardChangesConfirmModal.discardChangesDescription', {
           defaultMessage: `All unsaved changes will be lost.`,
         })

src/plugins/dashboard/public/dashboard_listing/confirm_overlays.tsx

@@ -21,22 +21,22 @@ import {
   EuiOutsideClickDetector,
   EuiText,
 } from '@elastic/eui';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 
+import { ViewMode } from '@kbn/presentation-publishing';
 import { coreServices } from '../services/kibana_services';
 import { createConfirmStrings, resetConfirmStrings } from './_dashboard_listing_strings';
 
 export type DiscardOrKeepSelection = 'cancel' | 'discard' | 'keep';
 
 export const confirmDiscardUnsavedChanges = (
   discardCallback: () => void,
-  viewMode: ViewMode = ViewMode.EDIT // we want to show the danger modal on the listing page
+  viewMode: ViewMode = 'edit' // we want to show the danger modal on the listing page
 ) => {
   coreServices.overlays
     .openConfirm(resetConfirmStrings.getResetSubtitle(viewMode), {
       confirmButtonText: resetConfirmStrings.getResetConfirmButtonText(),
-      buttonColor: viewMode === ViewMode.EDIT ? 'danger' : 'primary',
+      buttonColor: viewMode === 'edit' ? 'danger' : 'primary',
       maxWidth: 500,
       defaultFocusedButton: EUI_MODAL_CANCEL_BUTTON,
       title: resetConfirmStrings.getResetTitle(),

src/plugins/dashboard/public/dashboard_listing/dashboard_unsaved_listing.test.tsx

@@ -11,7 +11,6 @@ import { ComponentType, mount } from 'enzyme';
 import React from 'react';
 
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { waitFor } from '@testing-library/react';
 
@@ -72,7 +71,7 @@ describe('Unsaved listing', () => {
       expect(getEditButton().length).toEqual(1);
     });
     getEditButton().simulate('click');
-    expect(props.goToDashboard).toHaveBeenCalledWith('dashboardUnsavedOne', ViewMode.EDIT);
+    expect(props.goToDashboard).toHaveBeenCalledWith('dashboardUnsavedOne', 'edit');
   });
 
   it('Redirects to new dashboard when continue editing clicked', async () => {
@@ -85,7 +84,7 @@ describe('Unsaved listing', () => {
       expect(getEditButton().length).toBe(1);
     });
     getEditButton().simulate('click');
-    expect(props.goToDashboard).toHaveBeenCalledWith(undefined, ViewMode.EDIT);
+    expect(props.goToDashboard).toHaveBeenCalledWith(undefined, 'edit');
   });
 
   it('Shows a warning then clears changes when delete unsaved changes is pressed', async () => {

src/plugins/dashboard/public/dashboard_listing/dashboard_unsaved_listing.tsx

@@ -18,8 +18,7 @@ import {
 } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { ViewMode } from '@kbn/embeddable-plugin/public';
-
+import { ViewMode } from '@kbn/presentation-publishing';
 import type { DashboardAttributes } from '../../server/content_management';
 import {
   DASHBOARD_PANELS_UNSAVED_ID,
@@ -124,7 +123,7 @@ export const DashboardUnsavedListing = ({
 
   const onOpen = useCallback(
     (id?: string) => {
-      goToDashboard(id, ViewMode.EDIT);
+      goToDashboard(id, 'edit');
     },
     [goToDashboard]
   );