[8.x] [embeddable] replace Embeddable ViewMode with presentation-publ…

…ishing ViewMode (#211960) (#213135)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[embeddable] replace Embeddable ViewMode with presentation-publishing
ViewMode (#211960)](#211960)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"reese.nathan@elastic.co"},"sourceCommit":{"committedDate":"2025-03-04T16:05:23Z","message":"[embeddable]
replace Embeddable ViewMode with presentation-publishing ViewMode
(#211960)\n\nEmbeddable ViewMode is part of legacy embeddable
architecture. This PR\nremoves Embeddable ViewMode and replaces its
usage with\npresentation-publishing ViewMode. presentation-publishing
ViewMode is a\nstring literal type so an enum is no longer
needed.\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"b213eb6bb296c803e6f21695a20f969af1d2e611","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Embedding","Team:Presentation","release_note:skip","Team:obs-ux-infra_services","Team:obs-ux-management","project:embeddableRebuild","backport:version","v9.1.0","v8.19.0"],"title":"[embeddable]
replace Embeddable ViewMode with presentation-publishing
ViewMode","number":211960,"url":"https://github.com/elastic/kibana/pull/211960","mergeCommit":{"message":"[embeddable]
replace Embeddable ViewMode with presentation-publishing ViewMode
(#211960)\n\nEmbeddable ViewMode is part of legacy embeddable
architecture. This PR\nremoves Embeddable ViewMode and replaces its
usage with\npresentation-publishing ViewMode. presentation-publishing
ViewMode is a\nstring literal type so an enum is no longer
needed.\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"b213eb6bb296c803e6f21695a20f969af1d2e611"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/211960","number":211960,"mergeCommit":{"message":"[embeddable]
replace Embeddable ViewMode with presentation-publishing ViewMode
(#211960)\n\nEmbeddable ViewMode is part of legacy embeddable
architecture. This PR\nremoves Embeddable ViewMode and replaces its
usage with\npresentation-publishing ViewMode. presentation-publishing
ViewMode is a\nstring literal type so an enum is no longer
needed.\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"b213eb6bb296c803e6f21695a20f969af1d2e611"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: jennypavlova <jennypavlova94@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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>
     </>

examples/controls_example/public/app/react_control_example/react_control_example.tsx

@@ -28,15 +28,15 @@ 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 {
   apiPublishesDataLoading,
   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>();

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,
               }),
             };

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}

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);

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,
               }),
             };

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,
@@ -158,7 +157,7 @@ export class ReportingCsvPanelAction implements ActionDefinition<EmbeddableApiCo
       return false;
     }
 
-    return getInheritedViewMode(embeddable) !== ViewMode.EDIT;
+    return getInheritedViewMode(embeddable) !== 'edit';
   };
 
   /**

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",

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,

src/platform/packages/shared/kbn-alerts-ui-shared/tsconfig.json

@@ -21,7 +21,6 @@
     "@kbn/es-query",
     "@kbn/ui-theme",
     "@kbn/controls-plugin",
-    "@kbn/embeddable-plugin",
     "@kbn/core-http-browser",
     "@kbn/core-notifications-browser",
     "@kbn/kibana-utils-plugin",
@@ -35,5 +34,6 @@
     "@kbn/core-http-browser-mocks",
     "@kbn/core-notifications-browser-mocks",
     "@kbn/shared-ux-table-persist",
+    "@kbn/presentation-publishing",
   ]
 }

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
   );
 };

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 (

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';

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
     []

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);
   });

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)

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';

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;
   /**

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,

src/platform/plugins/shared/unified_histogram/kibana.jsonc

@@ -14,7 +14,6 @@
     "requiredBundles": [
       "data",
       "dataViews",
-      "embeddable",
       "inspector",
       "visualizations"
     ]

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,

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",