[embeddable] replace Embeddable ViewMode with presentation-publishing ViewMode (#211960)

Embeddable ViewMode is part of legacy embeddable architecture. This PR removes Embeddable ViewMode and replaces its usage with presentation-publishing ViewMode. presentation-publishing ViewMode is a string literal type so an enum is no longer needed. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2025-03-04 09:05:23 -07:00 · 2025-03-04 09:05:23 -07:00 · b213eb6bb2
commit b213eb6bb2
parent 8e5b8580f4
56 changed files with 74 additions and 126 deletions
--- a/examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx
+++ b/examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx
@ -34,7 +34,6 @@ import {
  ControlGroupRendererApi,
  type ControlStateTransform,
 } from '@kbn/controls-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';

 const INPUT_KEY = 'kbnControls:saveExample:input';

@ -210,7 +209,7 @@ export const EditExample = () => {
              },
            };
          }}
-          viewMode={ViewMode.EDIT}
+          viewMode={'edit'}
        />
      </EuiPanel>
    </>
--- a/examples/controls_example/public/app/react_control_example/react_control_example.tsx
+++ b/examples/controls_example/public/app/react_control_example/react_control_example.tsx
@ -28,7 +28,7 @@ import { CONTROL_GROUP_TYPE } from '@kbn/controls-plugin/common';
 import { ControlGroupApi } from '@kbn/controls-plugin/public';
 import { CoreStart } from '@kbn/core/public';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
-import { ReactEmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public';
+import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public';
 import { AggregateQuery, Filter, Query, TimeRange } from '@kbn/es-query';
 import { combineCompatibleChildrenApis } from '@kbn/presentation-containers';
 import {
@ -36,7 +36,7 @@ import {
  HasUniqueId,
  PublishesDataLoading,
  useBatchedPublishingSubjects,
-  ViewMode as ViewModeType,
+  ViewMode,
 } from '@kbn/presentation-publishing';
 import { toMountPoint } from '@kbn/react-kibana-mount';

@ -55,12 +55,12 @@ import {
 const toggleViewButtons = [
  {
    id: `viewModeToggle_edit`,
-    value: ViewMode.EDIT,
+    value: 'edit',
    label: 'Edit mode',
  },
  {
    id: `viewModeToggle_view`,
-    value: ViewMode.VIEW,
+    value: 'view',
    label: 'View mode',
  },
 ];
@ -95,7 +95,7 @@ export const ReactControlExample = ({
    return new BehaviorSubject<[number, number] | undefined>(undefined);
  }, []);
  const viewMode$ = useMemo(() => {
-    return new BehaviorSubject<ViewModeType>(ViewMode.EDIT as ViewModeType);
+    return new BehaviorSubject<ViewMode>('edit');
  }, []);
  const saveNotification$ = useMemo(() => {
    return new Subject<void>();
--- a/examples/portable_dashboards_example/public/dashboard_with_controls_example.tsx
+++ b/examples/portable_dashboards_example/public/dashboard_with_controls_example.tsx
@ -9,7 +9,6 @@

 import React, { useEffect, useState } from 'react';

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { controlGroupStateBuilder } from '@kbn/controls-plugin/public';
@ -70,7 +69,7 @@ export const DashboardWithControlsExample = ({ dataView }: { dataView: DataView
            return {
              getInitialInput: () => ({
                timeRange: { from: 'now-30d', to: 'now' },
-                viewMode: ViewMode.VIEW,
+                viewMode: 'view',
                controlGroupState,
              }),
            };
--- a/examples/portable_dashboards_example/public/dual_dashboards_example.tsx
+++ b/examples/portable_dashboards_example/public/dual_dashboards_example.tsx
@ -19,7 +19,6 @@ import {
  EuiTitle,
 } from '@elastic/eui';
 import { DashboardApi, DashboardRenderer } from '@kbn/dashboard-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';

 export const DualDashboardsExample = () => {
@ -34,14 +33,14 @@ export const DualDashboardsExample = () => {
        legend="View mode"
        options={[
          {
-            id: ViewMode.VIEW,
+            id: 'view',
            label: 'View mode',
-            value: ViewMode.VIEW,
+            value: 'view',
          },
          {
-            id: ViewMode.EDIT,
+            id: 'edit',
            label: 'Edit mode',
-            value: ViewMode.EDIT,
+            value: 'edit',
          },
        ]}
        idSelected={viewMode}
--- a/examples/portable_dashboards_example/public/static_by_reference_example.tsx
+++ b/examples/portable_dashboards_example/public/static_by_reference_example.tsx
@ -14,7 +14,6 @@ import { buildPhraseFilter, Filter } from '@kbn/es-query';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { DashboardRenderer, DashboardCreationOptions } from '@kbn/dashboard-plugin/public';
 import { EuiCode, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
-import { ViewMode } from '@kbn/embeddable-plugin/public';

 export const StaticByReferenceExample = ({
  dashboardId,
@ -51,7 +50,7 @@ export const StaticByReferenceExample = ({
            const field = dataView.getFieldByName('machine.os.keyword');
            let filter: Filter;
            let creationOptions: DashboardCreationOptions = {
-              getInitialInput: () => ({ viewMode: ViewMode.VIEW }),
+              getInitialInput: () => ({ viewMode: 'view' }),
            };
            if (field) {
              filter = buildPhraseFilter(field, 'win xp', dataView);
--- a/examples/portable_dashboards_example/public/static_by_value_example.tsx
+++ b/examples/portable_dashboards_example/public/static_by_value_example.tsx
@ -9,7 +9,6 @@

 import React from 'react';

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import type { DashboardPanelMap } from '@kbn/dashboard-plugin/common';
 import { DashboardRenderer } from '@kbn/dashboard-plugin/public';
@ -32,7 +31,7 @@ export const StaticByValueExample = () => {
            return {
              getInitialInput: () => ({
                timeRange: { from: 'now-30d', to: 'now' },
-                viewMode: ViewMode.VIEW,
+                viewMode: 'view',
                panels: panelsJson as DashboardPanelMap,
              }),
            };
--- a/src/platform/packages/private/kbn-reporting/get_csv_panel_actions/panel_actions/get_csv_panel_action.tsx
+++ b/src/platform/packages/private/kbn-reporting/get_csv_panel_actions/panel_actions/get_csv_panel_action.tsx
@ -24,7 +24,6 @@ import {
  PublishesSavedSearch,
  HasTimeRange,
 } from '@kbn/discover-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { LicensingPluginStart } from '@kbn/licensing-plugin/public';
 import {
  apiCanAccessViewMode,
@ -148,7 +147,7 @@ export class ReportingCsvPanelAction implements ActionDefinition<EmbeddableApiCo
      return false;
    }

-    return getInheritedViewMode(embeddable) !== ViewMode.EDIT;
+    return getInheritedViewMode(embeddable) !== 'edit';
  };

  private executeGenerate = async (params: ExecutionParams) => {
--- a/src/platform/packages/private/kbn-reporting/get_csv_panel_actions/tsconfig.json
+++ b/src/platform/packages/private/kbn-reporting/get_csv_panel_actions/tsconfig.json
@ -23,7 +23,6 @@
    "@kbn/discover-utils",
    "@kbn/saved-search-plugin",
    "@kbn/discover-plugin",
-    "@kbn/embeddable-plugin",
    "@kbn/ui-actions-plugin",
    "@kbn/react-kibana-mount",
    "@kbn/reporting-public",
--- a/src/platform/packages/shared/kbn-alerts-ui-shared/src/alert_filter_controls/hooks/use_view_edit_mode.ts
+++ b/src/platform/packages/shared/kbn-alerts-ui-shared/src/alert_filter_controls/hooks/use_view_edit_mode.ts
@ -7,14 +7,14 @@
 * License v3.0 only", or the "Server Side Public License, v 1".
 */

-import { ViewMode } from '@kbn/embeddable-plugin/common';
+import { ViewMode } from '@kbn/presentation-publishing';
 import { useCallback, useEffect, useState } from 'react';

 interface UseViewEditModeArgs {
  initialMode?: ViewMode;
 }

-export const useViewEditMode = ({ initialMode = ViewMode.VIEW }: UseViewEditModeArgs) => {
+export const useViewEditMode = ({ initialMode = 'view' }: UseViewEditModeArgs) => {
  const [filterGroupMode, setFilterGroupMode] = useState(initialMode);

  const [hasPendingChanges, setHasPendingChanges] = useState(false);
@ -33,15 +33,15 @@ export const useViewEditMode = ({ initialMode = ViewMode.VIEW }: UseViewEditMode
  }, [hasPendingChanges]);

  const switchToEditMode = useCallback(() => {
-    setFilterGroupMode(ViewMode.EDIT);
+    setFilterGroupMode('edit');
  }, []);

  const switchToViewMode = useCallback(() => {
    setHasPendingChanges(false);
-    setFilterGroupMode(ViewMode.VIEW);
+    setFilterGroupMode('view');
  }, []);

-  const isViewMode = filterGroupMode === ViewMode.VIEW;
+  const isViewMode = filterGroupMode === 'view';

  return {
    filterGroupMode,
--- a/src/platform/packages/shared/kbn-alerts-ui-shared/tsconfig.json
+++ b/src/platform/packages/shared/kbn-alerts-ui-shared/tsconfig.json
@ -20,7 +20,6 @@
    "@kbn/unified-search-plugin",
    "@kbn/es-query",
    "@kbn/controls-plugin",
-    "@kbn/embeddable-plugin",
    "@kbn/core-http-browser",
    "@kbn/core-notifications-browser",
    "@kbn/kibana-utils-plugin",
@ -34,5 +33,6 @@
    "@kbn/core-http-browser-mocks",
    "@kbn/core-notifications-browser-mocks",
    "@kbn/shared-ux-table-persist",
+    "@kbn/presentation-publishing",
  ]
 }
--- a/src/platform/plugins/private/input_control_vis/public/deprecation_badge.ts
+++ b/src/platform/plugins/private/input_control_vis/public/deprecation_badge.ts
@ -7,7 +7,6 @@
 * 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 {
  apiCanAccessViewMode,
@ -32,7 +31,7 @@ const isApiCompatible = (api: unknown | null): api is InputControlDeprecationAct
 const compatibilityCheck = (api: EmbeddableApiContext['embeddable']) => {
  return (
    isApiCompatible(api) &&
-    getInheritedViewMode(api) === ViewMode.EDIT &&
+    getInheritedViewMode(api) === 'edit' &&
    api.getVis().type.name === INPUT_CONTROL_VIS_TYPE
  );
 };
--- a/src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx
+++ b/src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx
@ -20,7 +20,6 @@ import {
  EuiIcon,
  EuiToolTip,
 } from '@elastic/eui';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import {
  apiHasParentApi,
@ -119,8 +118,8 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
    setInitialLoadComplete(true);
  }

-  const viewMode = (rawViewMode ?? ViewMode.VIEW) as ViewMode;
-  const isEditable = viewMode === ViewMode.EDIT;
+  const viewMode = rawViewMode ?? 'view';
+  const isEditable = viewMode === 'edit';
  const controlWidth = width ?? DEFAULT_CONTROL_WIDTH;
  const controlGrow = grow ?? DEFAULT_CONTROL_GROW;
  return (
--- a/src/platform/plugins/shared/controls/public/control_group/components/floating_actions.tsx
+++ b/src/platform/plugins/shared/controls/public/control_group/components/floating_actions.tsx
@ -12,8 +12,7 @@ import React, { FC, ReactElement, useEffect, useState } from 'react';
 import { v4 } from 'uuid';
 import { Subscription, switchMap } from 'rxjs';

-import { type ViewMode } from '@kbn/embeddable-plugin/public';
-import { apiHasUniqueId } from '@kbn/presentation-publishing';
+import { ViewMode, apiHasUniqueId } from '@kbn/presentation-publishing';
 import { Action } from '@kbn/ui-actions-plugin/public';
 import { AnyApiAction } from '@kbn/presentation-panel-plugin/public/panel_actions/types';
 import { uiActionsService } from '../../services/kibana_services';
--- a/src/platform/plugins/shared/controls/public/control_group/control_group_renderer/control_group_renderer.tsx
+++ b/src/platform/plugins/shared/controls/public/control_group/control_group_renderer/control_group_renderer.tsx
@ -12,9 +12,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { v4 as uuidv4 } from 'uuid';

-import { ReactEmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public';
+import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
-import { useSearchApi, type ViewMode as ViewModeType } from '@kbn/presentation-publishing';
+import { useSearchApi, type ViewMode } from '@kbn/presentation-publishing';

 import type { ControlGroupApi } from '../..';
 import {
@ -38,7 +38,7 @@ export interface ControlGroupRendererProps {
    initialState: Partial<ControlGroupRuntimeState>,
    builder: ControlGroupStateBuilder
  ) => Promise<Partial<ControlGroupCreationOptions>>;
-  viewMode?: ViewModeType;
+  viewMode?: ViewMode;
  filters?: Filter[];
  timeRange?: TimeRange;
  query?: Query;
@ -70,7 +70,7 @@ export const ControlGroupRenderer = ({
  });

  const viewMode$ = useMemo(
-    () => new BehaviorSubject<ViewModeType>(viewMode ?? ViewMode.VIEW),
+    () => new BehaviorSubject<ViewMode>(viewMode ?? 'view'),
    // viewMode only used as initial value - changes do not effect memoized value.
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
--- a/src/platform/plugins/shared/discover/public/embeddable/actions/view_saved_search_action.test.ts
+++ b/src/platform/plugins/shared/discover/public/embeddable/actions/view_saved_search_action.test.ts
@ -8,7 +8,6 @@
 */

 import { SEARCH_EMBEDDABLE_TYPE } from '@kbn/discover-utils';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { SavedSearch } from '@kbn/saved-search-plugin/common';
 import { BehaviorSubject } from 'rxjs';

@ -54,7 +53,7 @@ describe('view saved search action', () => {
    const action = new ViewSavedSearchAction(applicationMock, services.locator);
    expect(
      await action.isCompatible({
-        embeddable: { ...compatibleEmbeddableApi, viewMode$: new BehaviorSubject(ViewMode.EDIT) },
+        embeddable: { ...compatibleEmbeddableApi, viewMode$: new BehaviorSubject('edit') },
      })
    ).toBe(false);
  });
--- a/src/platform/plugins/shared/discover/public/embeddable/actions/view_saved_search_compatibility_check.ts
+++ b/src/platform/plugins/shared/discover/public/embeddable/actions/view_saved_search_compatibility_check.ts
@ -8,7 +8,6 @@
 */

 import { SEARCH_EMBEDDABLE_TYPE } from '@kbn/discover-utils';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import {
  apiCanAccessViewMode,
  apiHasType,
@ -28,7 +27,7 @@ export const compatibilityCheck = (
 ): api is ViewSavedSearchActionApi => {
  return (
    apiCanAccessViewMode(api) &&
-    getInheritedViewMode(api) === ViewMode.VIEW &&
+    getInheritedViewMode(api) === 'view' &&
    apiHasType(api) &&
    apiIsOfType(api, SEARCH_EMBEDDABLE_TYPE) &&
    apiPublishesSavedSearch(api)
--- a/src/platform/plugins/shared/embeddable/common/index.ts
+++ b/src/platform/plugins/shared/embeddable/common/index.ts
@ -14,6 +14,5 @@ export type {
  EmbeddablePersistableStateService,
  EmbeddableRegistryDefinition,
 } from './types';
-export { ViewMode } from './types';
 export type { SavedObjectEmbeddableInput } from './lib';
 export { isSavedObjectEmbeddableInput } from './lib';
--- a/src/platform/plugins/shared/embeddable/common/types.ts
+++ b/src/platform/plugins/shared/embeddable/common/types.ts
@ -15,16 +15,9 @@ import type {
  PersistableStateDefinition,
 } from '@kbn/kibana-utils-plugin/common';

-export enum ViewMode {
-  EDIT = 'edit',
-  PREVIEW = 'preview',
-  PRINT = 'print',
-  VIEW = 'view',
-}
-
 export type EmbeddableInput = {
  version?: string;
-  viewMode?: ViewMode;
+  viewMode?: 'view' | 'edit' | 'print' | 'preview';
  title?: string;
  description?: string;
  /**
--- a/src/platform/plugins/shared/embeddable/public/index.ts
+++ b/src/platform/plugins/shared/embeddable/public/index.ts
@ -31,7 +31,6 @@ export {
  SELECT_RANGE_TRIGGER,
  VALUE_CLICK_TRIGGER,
 } from './ui_actions/triggers';
-export { ViewMode } from '../common/types';
 export type {
  CellValueContext,
  ChartActionContext,
--- a/src/platform/plugins/shared/unified_histogram/kibana.jsonc
+++ b/src/platform/plugins/shared/unified_histogram/kibana.jsonc
@ -14,7 +14,6 @@
    "requiredBundles": [
      "data",
      "dataViews",
-      "embeddable",
      "inspector",
      "visualizations"
    ]
--- a/src/platform/plugins/shared/unified_histogram/public/chart/hooks/use_lens_props.ts
+++ b/src/platform/plugins/shared/unified_histogram/public/chart/hooks/use_lens_props.ts
@ -8,7 +8,6 @@
 */

 import type { TimeRange } from '@kbn/data-plugin/common';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DefaultInspectorAdapters } from '@kbn/expressions-plugin/common';
 import type { EmbeddableComponentProps, TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { useCallback, useEffect, useState } from 'react';
@ -87,7 +86,7 @@ export const getLensProps = ({
  onLoad: (isLoading: boolean, adapters: Partial<DefaultInspectorAdapters> | undefined) => void;
 }): LensProps => ({
  id: 'unifiedHistogramLensComponent',
-  viewMode: ViewMode.VIEW,
+  viewMode: 'view',
  timeRange: getTimeRange(),
  attributes,
  noPadding: true,
--- a/src/platform/plugins/shared/unified_histogram/tsconfig.json
+++ b/src/platform/plugins/shared/unified_histogram/tsconfig.json
@ -15,7 +15,6 @@
    "@kbn/test-jest-helpers",
    "@kbn/i18n",
    "@kbn/es-query",
-    "@kbn/embeddable-plugin",
    "@kbn/core-ui-settings-browser",
    "@kbn/datemath",
    "@kbn/core-ui-settings-browser-mocks",
--- a/src/platform/plugins/shared/visualizations/public/actions/edit_in_lens_action.tsx
+++ b/src/platform/plugins/shared/visualizations/public/actions/edit_in_lens_action.tsx
@ -10,7 +10,6 @@
 import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { TimefilterContract } from '@kbn/data-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import {
  apiCanAccessViewMode,
@ -141,7 +140,7 @@ export class EditInLensAction implements Action<EmbeddableApiContext> {

  async isCompatible(context: EmbeddableApiContext) {
    const { embeddable } = context;
-    if (!compatibilityCheck(embeddable) || getInheritedViewMode(embeddable) !== ViewMode.EDIT)
+    if (!compatibilityCheck(embeddable) || getInheritedViewMode(embeddable) !== 'edit')
      return false;

    const vis = embeddable.getVis();
--- a/src/platform/plugins/shared/visualizations/public/legacy/embeddable/diff_embeddable_input.test.ts
+++ b/src/platform/plugins/shared/visualizations/public/legacy/embeddable/diff_embeddable_input.test.ts
@ -8,7 +8,7 @@
 */

 import { KibanaExecutionContext } from '@kbn/core/types';
-import { EmbeddableInput, ViewMode } from '@kbn/embeddable-plugin/common';
+import { EmbeddableInput } from '@kbn/embeddable-plugin/common';
 import { omitGenericEmbeddableInput, genericEmbeddableInputIsEqual } from './diff_embeddable_input';

 const getGenericEmbeddableState = (state?: Partial<EmbeddableInput>): EmbeddableInput => {
@ -23,7 +23,7 @@ const getGenericEmbeddableState = (state?: Partial<EmbeddableInput>): Embeddable
    syncColors: false,
    syncTooltips: false,
    syncCursor: true,
-    viewMode: ViewMode.VIEW,
+    viewMode: 'view',
    title: 'So Very Generic',
    id: 'soVeryGeneric',
  };
@ -98,7 +98,7 @@ describe('Generic embeddable input diff function', () => {
    expect(
      genericEmbeddableInputIsEqual(
        getGenericEmbeddableState(),
-        getGenericEmbeddableState({ viewMode: ViewMode.EDIT })
+        getGenericEmbeddableState({ viewMode: 'edit' })
      )
    ).toBe(true);
  });
--- a/src/platform/plugins/shared/visualizations/public/legacy/embeddable/embeddable.tsx
+++ b/src/platform/plugins/shared/visualizations/public/legacy/embeddable/embeddable.tsx
@ -14,7 +14,7 @@ import { merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, skip } from 'rxjs';
 import { RenderCompleteDispatcher } from '@kbn/kibana-utils-plugin/public';
 import { Adapters } from '@kbn/inspector-plugin/public';
-import { EmbeddableInput, ViewMode } from '@kbn/embeddable-plugin/common';
+import { EmbeddableInput } from '@kbn/embeddable-plugin/common';
 import { EmbeddableError, EmbeddableOutput, IEmbeddable } from './i_embeddable';
 import { genericEmbeddableInputIsEqual, omitGenericEmbeddableInput } from './diff_embeddable_input';

@ -73,7 +73,7 @@ export abstract class Embeddable<
      ...output,
    };
    this.input = {
-      viewMode: ViewMode.EDIT,
+      viewMode: 'edit',
      ...input,
    };

--- a/x-pack/examples/embedded_lens_example/public/app.tsx
+++ b/x-pack/examples/embedded_lens_example/public/app.tsx
@ -27,7 +27,6 @@ import type {
  DateHistogramIndexPatternColumn,
 } from '@kbn/lens-plugin/public';

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
 import type { StartDependencies } from './plugin';

@ -268,7 +267,7 @@ export const App = (props: {
            onTableRowClick={(_data) => {
              // call back event for on table row click event
            }}
-            viewMode={ViewMode.VIEW}
+            viewMode={'view'}
            extraActions={[
              {
                id: 'testAction',
--- a/x-pack/examples/embedded_lens_example/tsconfig.json
+++ b/x-pack/examples/embedded_lens_example/tsconfig.json
@ -16,7 +16,6 @@
  "kbn_references": [
    "@kbn/core",
    "@kbn/data-plugin",
-    "@kbn/embeddable-plugin",
    "@kbn/lens-plugin",
    "@kbn/developer-examples-plugin",
    "@kbn/data-views-plugin",
--- a/x-pack/examples/lens_config_builder_example/public/app.tsx
+++ b/x-pack/examples/lens_config_builder_example/public/app.tsx
@ -22,7 +22,6 @@ import {
 import type { CoreStart } from '@kbn/core/public';
 import type { LensEmbeddableInput, FormulaPublicApi } from '@kbn/lens-plugin/public';

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
 import { LensConfig, LensConfigBuilder } from '@kbn/lens-embeddable-utils/config_builder';
 import { DataViewsContract } from '@kbn/data-views-plugin/public';
@ -128,7 +127,7 @@ export const App = (props: {
              onTableRowClick={(_data) => {
                // call back event for on table row click event
              }}
-              viewMode={ViewMode.VIEW}
+              viewMode={'view'}
              extraActions={[
                {
                  id: 'testAction',
--- a/x-pack/examples/lens_config_builder_example/tsconfig.json
+++ b/x-pack/examples/lens_config_builder_example/tsconfig.json
@ -16,7 +16,6 @@
  "kbn_references": [
    "@kbn/core",
    "@kbn/data-plugin",
-    "@kbn/embeddable-plugin",
    "@kbn/lens-plugin",
    "@kbn/developer-examples-plugin",
    "@kbn/data-views-plugin",
--- a/x-pack/examples/testing_embedded_lens/public/app.tsx
+++ b/x-pack/examples/testing_embedded_lens/public/app.tsx
@ -24,7 +24,6 @@ import type { CoreStart } from '@kbn/core/public';
 import useDebounce from 'react-use/lib/useDebounce';
 import { DOCUMENT_FIELD_NAME } from '@kbn/lens-plugin/common/constants';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type {
  TypedLensByValueInput,
  PersistedIndexPatternLayer,
@ -631,7 +630,7 @@ export const App = (props: {
                            // call back event for on table row click event
                          }}
                          disableTriggers={!enableTriggers}
-                          viewMode={ViewMode.VIEW}
+                          viewMode={'view'}
                          withDefaultActions={enableDefaultAction}
                          extraActions={
                            enableExtraAction
--- a/x-pack/examples/testing_embedded_lens/tsconfig.json
+++ b/x-pack/examples/testing_embedded_lens/tsconfig.json
@ -16,7 +16,6 @@
  "kbn_references": [
    "@kbn/core",
    "@kbn/data-plugin",
-    "@kbn/embeddable-plugin",
    "@kbn/lens-plugin",
    "@kbn/developer-examples-plugin",
    "@kbn/data-views-plugin",
--- a/x-pack/platform/plugins/private/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts
+++ b/x-pack/platform/plugins/private/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts
@ -8,7 +8,6 @@
 import { CoreStart } from '@kbn/core/public';
 import { DiscoverAppLocatorParams } from '@kbn/discover-plugin/common';
 import { DiscoverStart } from '@kbn/discover-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public';
 import { DOC_TYPE as LENS_DOC_TYPE } from '@kbn/lens-plugin/common/constants';
@ -50,9 +49,7 @@ const isApiCompatible = (api: unknown | null): api is AbstractExploreDataActionA

 const compatibilityCheck = (api: EmbeddableApiContext['embeddable']) => {
  return (
-    isApiCompatible(api) &&
-    getInheritedViewMode(api) === ViewMode.VIEW &&
-    !apiIsOfType(api, LENS_DOC_TYPE)
+    isApiCompatible(api) && getInheritedViewMode(api) === 'view' && !apiIsOfType(api, LENS_DOC_TYPE)
  );
 };

--- a/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality_details/overview/document_trends/trend_docs_chart.tsx
+++ b/x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality_details/overview/document_trends/trend_docs_chart.tsx
@ -8,7 +8,6 @@
 import React, { useCallback } from 'react';
 import { css } from '@emotion/react';
 import { EuiFlexGroup, EuiLoadingChart, OnTimeChangeProps } from '@elastic/eui';
-import { ViewMode } from '@kbn/embeddable-plugin/common';
 import { KibanaErrorBoundary } from '@kbn/shared-ux-error-boundary';

 import { flyoutDegradedDocsTrendText } from '../../../../../common/translations';
@ -73,7 +72,7 @@ export function TrendDocsChart({
              overrides={{
                settings: { legendAction: 'ignore' },
              }}
-              viewMode={ViewMode.VIEW}
+              viewMode={'view'}
              hidePanelTitles={true}
              disabledActions={DISABLED_ACTIONS}
              timeRange={timeRange}
--- a/x-pack/platform/plugins/shared/dataset_quality/tsconfig.json
+++ b/x-pack/platform/plugins/shared/dataset_quality/tsconfig.json
@ -35,7 +35,6 @@
    "@kbn/unified-histogram-plugin",
    "@kbn/data-views-plugin",
    "@kbn/shared-ux-error-boundary",
-    "@kbn/embeddable-plugin",
    "@kbn/es-query",
    "@kbn/core-saved-objects-api-server",
    "@kbn/deeplinks-management",
--- a/x-pack/platform/plugins/shared/maps/public/lens/passive_map.tsx
+++ b/x-pack/platform/plugins/shared/maps/public/lens/passive_map.tsx
@ -8,7 +8,7 @@
 import React, { useEffect, useRef } from 'react';
 import useMountedState from 'react-use/lib/useMountedState';
 import { Subscription } from 'rxjs';
-import { ReactEmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public';
+import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public';
 import type { LayerDescriptor } from '../../common/descriptor_types';
 import { INITIAL_LOCATION, MAP_SAVED_OBJECT_TYPE } from '../../common';
 import { createBasemapLayerDescriptor } from '../classes/layers/create_basemap_layer_descriptor';
@ -65,7 +65,7 @@ export function PassiveMap(props: Props) {
                },
                filters: [],
                hidePanelTitles: true,
-                viewMode: ViewMode.VIEW,
+                viewMode: 'view',
                isLayerTOCOpen: false,
                mapSettings: {
                  disableInteractive: false,
--- a/x-pack/platform/plugins/shared/ml/public/application/services/dashboard_service.ts
+++ b/x-pack/platform/plugins/shared/ml/public/application/services/dashboard_service.ts
@ -7,7 +7,7 @@

 import { useMemo } from 'react';
 import type { DashboardStart } from '@kbn/dashboard-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
+import type { ViewMode } from '@kbn/presentation-publishing';
 import { useMlKibana } from '../contexts/kibana';

 export type DashboardService = ReturnType<typeof dashboardServiceProvider>;
@ -38,10 +38,10 @@ export function dashboardServiceProvider(dashboardService: DashboardStart) {
    /**
     * Generates dashboard url
     */
-    async getDashboardUrl(dashboardId: string, viewMode: ViewMode = ViewMode.EDIT) {
+    async getDashboardUrl(dashboardId: string, viewMode: ViewMode = 'edit') {
      return await dashboardService.locator?.getUrl({
        dashboardId,
-        viewMode: ViewMode.EDIT,
+        viewMode: 'edit',
        useHash: false,
      });
    },
--- a/x-pack/platform/plugins/shared/ml/public/application/supplied_configurations/supplied_configurations_flyout/kibana_tab_content.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/supplied_configurations/supplied_configurations_flyout/kibana_tab_content.tsx
@ -20,7 +20,6 @@ import {
 } from '@elastic/eui';
 import { useEuiTheme } from '@elastic/eui';
 import { asyncForEach } from '@kbn/std';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { Module } from '../../../../common/types/modules';
 import { useDashboardService } from '../../services/dashboard_service';
 import { useMlKibana } from '../../contexts/kibana';
@ -53,7 +52,7 @@ export const KibanaTabContent: FC<Props> = ({ module, selectedKibanaSubTab }) =>
          const result = await dashboardService.fetchDashboardsById(dashboardIds);

          await asyncForEach(result, async ({ id }) => {
-            const url = await dashboardService.getDashboardUrl(id, ViewMode.VIEW);
+            const url = await dashboardService.getDashboardUrl(id, 'view');
            if (url) {
              allUrls[id] = url;
            }
--- a/x-pack/solutions/observability/plugins/apm/public/components/app/metrics/static_dashboard/index.tsx
+++ b/x-pack/solutions/observability/plugins/apm/public/components/app/metrics/static_dashboard/index.tsx
@ -7,7 +7,6 @@

 import React, { useState, useEffect } from 'react';

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DashboardApi, DashboardCreationOptions } from '@kbn/dashboard-plugin/public';
 import { DashboardRenderer } from '@kbn/dashboard-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/common';
@ -82,7 +81,7 @@ async function getCreationOptions(

    return {
      getInitialInput: () => ({
-        viewMode: ViewMode.VIEW,
+        viewMode: 'view',
        panels,
        controlGroupState,
      }),
--- a/x-pack/solutions/observability/plugins/apm/public/components/app/service_dashboards/index.tsx
+++ b/x-pack/solutions/observability/plugins/apm/public/components/app/service_dashboards/index.tsx
@ -17,11 +17,11 @@ import {
  EuiLoadingLogo,
 } from '@elastic/eui';

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DashboardApi, DashboardCreationOptions } from '@kbn/dashboard-plugin/public';
 import { DashboardRenderer } from '@kbn/dashboard-plugin/public';
 import type { SerializableRecord } from '@kbn/utility-types';

+import type { ViewMode } from '@kbn/presentation-publishing';
 import { EmptyDashboards } from './empty_dashboards';
 import { GotoDashboard, LinkDashboard } from './actions';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
@ -101,7 +101,7 @@ export function ServiceDashboards() {

  const getCreationOptions = useCallback((): Promise<DashboardCreationOptions> => {
    const getInitialInput = () => ({
-      viewMode: ViewMode.VIEW,
+      viewMode: 'view' as ViewMode,
      timeRange: { from: rangeFrom, to: rangeTo },
    });
    return Promise.resolve<DashboardCreationOptions>({
--- a/x-pack/solutions/observability/plugins/exploratory_view/kibana.jsonc
+++ b/x-pack/solutions/observability/plugins/exploratory_view/kibana.jsonc
@ -41,7 +41,6 @@
    ],
    "requiredBundles": [
      "dataViews",
-      "embeddable",
      "data",
      "kibanaReact",
      "kibanaUtils",
--- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
+++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx
@ -15,7 +15,6 @@ import {
  LensPublicStart,
  XYState,
 } from '@kbn/lens-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/common';
 import { observabilityFeatureId } from '@kbn/observability-shared-plugin/public';
 import styled from '@emotion/styled';
 import { AnalyticsServiceSetup } from '@kbn/core-analytics-browser';
@ -211,7 +210,7 @@ export default function Embeddable(props: ExploratoryEmbeddableComponentProps) {
        onBrushEnd={onBrushEnd}
        withDefaultActions={Boolean(withActions)}
        extraActions={actions}
-        viewMode={ViewMode.VIEW}
+        viewMode={'view'}
        searchSessionId={searchSessionId}
        onLoad={(loading, inspectorAdapters) => {
          reportEvent(inspectorAdapters);
--- a/x-pack/solutions/observability/plugins/infra/kibana.jsonc
+++ b/x-pack/solutions/observability/plugins/infra/kibana.jsonc
@ -45,7 +45,6 @@
      "spaces",
      "ml",
      "home",
-      "embeddable",
      "osquery",
      "cloud",
      "profilingDataAccess",
@ -60,7 +59,6 @@
      "kibanaUtils",
      "kibanaReact",
      "ml",
-      "embeddable",
      "controls"
    ]
  }
--- a/x-pack/solutions/observability/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/log_threshold_count_chart.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/log_threshold_count_chart.tsx
@ -5,7 +5,6 @@
 * 2.0.
 */
 import React from 'react';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { useEuiTheme } from '@elastic/eui';
 import { useKibanaContextForPlugin } from '../../../../../../hooks/use_kibana';
 import type { IndexPattern, Threshold, Timerange } from './create_lens_definition';
@ -52,7 +51,7 @@ export function LogThresholdCountChart({
        style={{ height }}
        timeRange={timeRange}
        attributes={lensDef}
-        viewMode={ViewMode.VIEW}
+        viewMode={'view'}
        noPadding
      />
    </div>
--- a/x-pack/solutions/observability/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/log_threshold_ratio_chart.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/log_threshold_ratio_chart.tsx
@ -5,7 +5,6 @@
 * 2.0.
 */
 import React from 'react';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { useEuiTheme } from '@elastic/eui';
 import { useKibanaContextForPlugin } from '../../../../../../hooks/use_kibana';
 import type { IndexPattern, Threshold, Timerange } from './create_lens_definition';
@ -55,7 +54,7 @@ export function LogThresholdRatioChart({
        style={{ height }}
        timeRange={timeRange}
        attributes={lensDef}
-        viewMode={ViewMode.VIEW}
+        viewMode={'view'}
        noPadding
      />
    </div>
--- a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/dashboards/dashboards.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/dashboards/dashboards.tsx
@ -17,9 +17,9 @@ import {
  EuiLoadingLogo,
 } from '@elastic/eui';

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DashboardApi, DashboardCreationOptions } from '@kbn/dashboard-plugin/public';
 import { DashboardRenderer } from '@kbn/dashboard-plugin/public';
+import type { ViewMode } from '@kbn/presentation-publishing';

 import type { DashboardSearchOut } from '@kbn/dashboard-plugin/server/content_management';
 import type { SerializableRecord } from '@kbn/utility-types';
@ -129,7 +129,7 @@ export function Dashboards() {

  const getCreationOptions = useCallback((): Promise<DashboardCreationOptions> => {
    const getInitialInput = () => ({
-      viewMode: ViewMode.VIEW,
+      viewMode: 'view' as ViewMode,
      timeRange: { from: dateRange.from, to: dateRange.to },
    });
    return Promise.resolve<DashboardCreationOptions>({
--- a/x-pack/solutions/observability/plugins/infra/public/components/lens/lens_wrapper.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/components/lens/lens_wrapper.tsx
@ -5,7 +5,6 @@
 * 2.0.
 */
 import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { css } from '@emotion/react';
 import { useEuiTheme } from '@elastic/eui';
@ -115,7 +114,7 @@ export const LensWrapper = ({
              onLoad={handleOnLoad}
              query={state.query}
              timeRange={dateRange}
-              viewMode={ViewMode.VIEW}
+              viewMode={'view'}
            />
          </>
        )}
--- a/x-pack/solutions/observability/plugins/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx
+++ b/x-pack/solutions/observability/plugins/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx
@ -5,7 +5,6 @@
 * 2.0.
 */

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import moment from 'moment';
 import React from 'react';
@ -58,7 +57,7 @@ export function ErrorRateChart({
        to,
      }}
      attributes={lensDef}
-      viewMode={ViewMode.VIEW}
+      viewMode={'view'}
      onBrushEnd={({ range }) => {
        onBrushed?.({
          from: moment(range[0]).toDate(),
--- a/x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/charts/visitor_breakdown_chart.tsx
+++ b/x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/charts/visitor_breakdown_chart.tsx
@ -7,7 +7,6 @@

 import React, { useCallback, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import {
  CountIndexPatternColumn,
  PersistedIndexPatternLayer,
@ -97,7 +96,7 @@ export function VisitorBreakdownChart({
        from: start ?? '',
        to: end ?? '',
      }}
-      viewMode={ViewMode.VIEW}
+      viewMode={'view'}
      onFilter={filterHandler}
    />
  );
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
@ -9,7 +9,6 @@ import React, { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';

 import { FormattedMessage } from '@kbn/i18n-react';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import type { RangeFilterParams } from '@kbn/es-query';
 import type { ClickTriggerEvent, MultiClickTriggerEvent } from '@kbn/charts-plugin/public';
@ -262,7 +261,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
            syncCursor={false}
            syncTooltips={false}
            timeRange={timerange}
-            viewMode={ViewMode.VIEW}
+            viewMode={'view'}
            withDefaultActions={false}
          />
        </div>
--- a/x-pack/solutions/security/plugins/security_solution/public/dashboards/components/dashboard_renderer.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/dashboards/components/dashboard_renderer.test.tsx
@ -6,7 +6,6 @@
 */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { DashboardRenderer as DashboardContainerRenderer } from '@kbn/dashboard-plugin/public';

 import { TestProviders } from '../../common/mock';
@ -57,7 +56,7 @@ describe('DashboardRenderer', () => {
    expect(input).toEqual(
      expect.objectContaining({
        timeRange: props.timeRange,
-        viewMode: ViewMode.VIEW,
+        viewMode: 'view',
        query: undefined,
        filters: undefined,
      })
--- a/x-pack/solutions/security/plugins/security_solution/public/dashboards/components/dashboard_renderer.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/dashboards/components/dashboard_renderer.tsx
@ -13,8 +13,8 @@ import type {
  DashboardLocatorParams,
 } from '@kbn/dashboard-plugin/public';
 import { DashboardRenderer as DashboardContainerRenderer } from '@kbn/dashboard-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { Filter, Query } from '@kbn/es-query';
+import type { ViewMode } from '@kbn/presentation-publishing';

 import { useDispatch } from 'react-redux';
 import { BehaviorSubject } from 'rxjs';
@ -41,7 +41,7 @@ const DashboardRendererComponent = ({
  query,
  savedObjectId,
  timeRange,
-  viewMode = ViewMode.VIEW,
+  viewMode = 'view',
 }: {
  canReadDashboard: boolean;
  dashboardContainer?: DashboardApi;
--- a/x-pack/solutions/security/plugins/security_solution/public/dashboards/components/dashboard_tool_bar.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/dashboards/components/dashboard_tool_bar.test.tsx
@ -11,7 +11,6 @@ import { DashboardToolBar } from './dashboard_tool_bar';
 import type { DashboardApi } from '@kbn/dashboard-plugin/public';
 import { coreMock } from '@kbn/core/public/mocks';
 import { DashboardTopNav } from '@kbn/dashboard-plugin/public';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { APP_NAME } from '../../../common/constants';
 import { NavigationProvider, SecurityPageName } from '@kbn/security-solution-navigation';
 import { TestProviders } from '../../common/mock';
@ -60,7 +59,7 @@ describe('DashboardToolBar', () => {
  });

  it('should render the DashboardToolBar component with the correct props for view mode', () => {
-    expect(mockOnLoad).toHaveBeenCalledWith(ViewMode.VIEW);
+    expect(mockOnLoad).toHaveBeenCalledWith('view');
  });

  it('should render the DashboardTopNav component with the correct redirect to listing url', () => {
--- a/x-pack/solutions/security/plugins/security_solution/public/dashboards/components/dashboard_tool_bar.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/dashboards/components/dashboard_tool_bar.tsx
@ -8,11 +8,11 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import type { DashboardApi } from '@kbn/dashboard-plugin/public';
 import { DashboardTopNav } from '@kbn/dashboard-plugin/public';
-import type { ViewMode } from '@kbn/embeddable-plugin/public';

 import type { ChromeBreadcrumb } from '@kbn/core/public';
 import type { DashboardCapabilities } from '@kbn/dashboard-plugin/common';
 import type { RedirectToProps } from '@kbn/dashboard-plugin/public/dashboard_container/types';
+import type { ViewMode } from '@kbn/presentation-publishing';
 import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
 import { SecurityPageName } from '../../../common';
 import { useCapabilities, useKibana, useNavigation } from '../../common/lib/kibana';
@ -56,7 +56,7 @@ const DashboardToolBarComponent = ({
  );

  useEffect(() => {
-    onLoad?.((viewMode as ViewMode) ?? 'view');
+    onLoad?.(viewMode ?? 'view');
  }, [onLoad, viewMode]);

  const embedSettings = useMemo(
--- a/x-pack/solutions/security/plugins/security_solution/public/dashboards/pages/details/index.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/dashboards/pages/details/index.test.tsx
@ -11,7 +11,6 @@ import { Router } from '@kbn/shared-ux-router';
 import { DashboardView } from '.';
 import { useCapabilities } from '../../../common/lib/kibana';
 import { TestProviders } from '../../../common/mock';
-import { ViewMode } from '@kbn/embeddable-plugin/public';

 jest.mock('react-router-dom', () => {
  const actual = jest.requireActual('react-router-dom');
@ -69,7 +68,7 @@ describe('DashboardView', () => {
  test('render when no error state', () => {
    const { queryByTestId } = render(
      <Router history={mockHistory}>
-        <DashboardView initialViewMode={ViewMode.VIEW} />
+        <DashboardView initialViewMode={'view'} />
      </Router>,
      { wrapper: TestProviders }
    );
@ -84,7 +83,7 @@ describe('DashboardView', () => {
    });
    const { queryByTestId } = render(
      <Router history={mockHistory}>
-        <DashboardView initialViewMode={ViewMode.VIEW} />
+        <DashboardView initialViewMode={'view'} />
      </Router>,
      { wrapper: TestProviders }
    );
@ -96,7 +95,7 @@ describe('DashboardView', () => {
  test('render dashboard view with height', () => {
    const { queryByTestId } = render(
      <Router history={mockHistory}>
-        <DashboardView initialViewMode={ViewMode.VIEW} />
+        <DashboardView initialViewMode={'view'} />
      </Router>,
      { wrapper: TestProviders }
    );
--- a/x-pack/solutions/security/plugins/security_solution/public/dashboards/pages/details/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/dashboards/pages/details/index.tsx
@ -11,7 +11,7 @@ import type { DashboardCapabilities } from '@kbn/dashboard-plugin/common/types';
 import { useParams } from 'react-router-dom';
 import { pick } from 'lodash/fp';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import type { ViewMode } from '@kbn/embeddable-plugin/common';
+import type { ViewMode } from '@kbn/presentation-publishing';
 import { SecurityPageName } from '../../../../common/constants';
 import { SpyRoute } from '../../../common/utils/route/spy_routes';
 import { useCapabilities } from '../../../common/lib/kibana';
--- a/x-pack/solutions/security/plugins/security_solution/public/dashboards/pages/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/dashboards/pages/index.tsx
@ -7,7 +7,6 @@
 import React from 'react';
 import { Routes, Route } from '@kbn/shared-ux-router';

-import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { DashboardsLandingPage } from './landing_page';
 import { DashboardView } from './details';
 import { DASHBOARDS_PATH } from '../../../common/constants';
@ -18,13 +17,13 @@ const DashboardsContainerComponent = () => {
    <DashboardContextProvider>
      <Routes>
        <Route strict path={`${DASHBOARDS_PATH}/create`}>
-          <DashboardView initialViewMode={ViewMode.EDIT} />
+          <DashboardView initialViewMode={'edit'} />
        </Route>
        <Route strict path={`${DASHBOARDS_PATH}/:detailName/edit`}>
-          <DashboardView initialViewMode={ViewMode.EDIT} />
+          <DashboardView initialViewMode={'edit'} />
        </Route>
        <Route strict path={`${DASHBOARDS_PATH}/:detailName`}>
-          <DashboardView initialViewMode={ViewMode.VIEW} />
+          <DashboardView initialViewMode={'view'} />
        </Route>
        <Route path={`${DASHBOARDS_PATH}`}>
          <DashboardsLandingPage />