[Visualize] First version of by-value visualize editor

src/plugins/dashboard/public/application/dashboard_app_controller.tsx

@@ -468,9 +468,14 @@ export class DashboardAppController {
  const explicitInput = {
  savedVis: input,
  };
+ const embeddableId =
+ 'embeddableId' in incomingEmbeddable
+ ? incomingEmbeddable.embeddableId
+ : undefined;
  container.addOrUpdateEmbeddable<EmbeddableInput>(
  incomingEmbeddable.type,
- explicitInput
+ explicitInput,
+ embeddableId
  );
  }
  }

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -171,6 +171,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
  // TODO: In the current infrastructure, embeddables in a container do not react properly to
  // changes. Removing the existing embeddable, and adding a new one is a temporary workaround
  // until the container logic is fixed.
+
  const finalPanels = { ...this.input.panels };
  delete finalPanels[previousPanelState.explicitInput.id];
  const newPanelId = newPanelState.explicitInput?.id ? newPanelState.explicitInput.id : uuid.v4();
@@ -196,9 +197,10 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
  EEI extends EmbeddableInput = EmbeddableInput,
  EEO extends EmbeddableOutput = EmbeddableOutput,
  E extends IEmbeddable<EEI, EEO> = IEmbeddable<EEI, EEO>
- >(type: string, explicitInput: Partial<EEI>) {
- if (explicitInput.id && this.input.panels[explicitInput.id]) {
- this.replacePanel(this.input.panels[explicitInput.id], {
+ >(type: string, explicitInput: Partial<EEI>, embeddableId?: string) {
+ const idToReplace = embeddableId || explicitInput.id;
+ if (idToReplace && this.input.panels[idToReplace]) {
+ this.replacePanel(this.input.panels[idToReplace], {
  type,
  explicitInput: {
  ...explicitInput,

src/plugins/embeddable/public/lib/actions/edit_panel_action.test.tsx

@@ -56,12 +56,18 @@ test('is compatible when edit url is available, in edit mode and editable', asyn
 test('redirects to app using state transfer', async () => {
  applicationMock.currentAppId$ = of('superCoolCurrentApp');
  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
- const embeddable = new EditableEmbeddable({ id: '123', viewMode: ViewMode.EDIT }, true);
+ const input = { id: '123', viewMode: ViewMode.EDIT };
+ const embeddable = new EditableEmbeddable(input, true);
  embeddable.getOutput = jest.fn(() => ({ editApp: 'ultraVisualize', editPath: '/123' }));
  await action.execute({ embeddable });
  expect(stateTransferMock.navigateToEditor).toHaveBeenCalledWith('ultraVisualize', {
  path: '/123',
- state: { originatingApp: 'superCoolCurrentApp' },
+ state: {
+ originatingApp: 'superCoolCurrentApp',
+ byValueMode: true,
+ embeddableId: '123',
+ valueInput: input,
+ },
  });
 });
 

src/plugins/embeddable/public/lib/actions/edit_panel_action.ts

@@ -24,7 +24,12 @@ import { take } from 'rxjs/operators';
 import { ViewMode } from '../types';
 import { EmbeddableFactoryNotFoundError } from '../errors';
 import { EmbeddableStart } from '../../plugin';
-import { IEmbeddable, EmbeddableEditorState, EmbeddableStateTransfer } from '../..';
+import {
+ IEmbeddable,
+ EmbeddableEditorState,
+ EmbeddableStateTransfer,
+ SavedObjectEmbeddableInput,
+} from '../..';
 
 export const ACTION_EDIT_PANEL = 'editPanel';
 
@@ -109,8 +114,17 @@ export class EditPanelAction implements Action<ActionContext> {
  const app = embeddable ? embeddable.getOutput().editApp : undefined;
  const path = embeddable ? embeddable.getOutput().editPath : undefined;
  if (app && path) {
- const state = this.currentAppId ? { originatingApp: this.currentAppId } : undefined;
- return { app, path, state };
+ if (this.currentAppId) {
+ const byValueMode = !(embeddable.getInput() as SavedObjectEmbeddableInput).savedObjectId;
+ const state: EmbeddableEditorState = {
+ originatingApp: this.currentAppId,
+ byValueMode,
+ valueInput: byValueMode ? embeddable.getInput() : undefined,
+ embeddableId: embeddable.id,
+ };
+ return { app, path, state };
+ }
+ return { app, path };
  }
  }
 

src/plugins/embeddable/public/lib/state_transfer/types.ts

@@ -27,6 +27,7 @@ export interface EmbeddableEditorState {
  originatingApp: string;
  byValueMode?: boolean;
  valueInput?: EmbeddableInput;
+ embeddableId?: string;
 }
 
 export function isEmbeddableEditorState(state: unknown): state is EmbeddableEditorState {
@@ -49,6 +50,7 @@ export interface EmbeddablePackageByReferenceState {
 export interface EmbeddablePackageByValueState {
  type: string;
  input: EmbeddableInput;
+ embeddableId?: string;
 }
 
 export type EmbeddablePackageState =

src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx

@@ -46,6 +46,7 @@ export function TopNavMenuItem(props: TopNavMenuData) {
  iconType: props.iconType,
  iconSide: props.iconSide,
  'data-test-subj': props.testId,
+ className: props.className,
  };
 
  const btn = props.emphasize ? (

src/plugins/vis_default_editor/public/default_editor_controller.tsx

@@ -69,7 +69,6 @@ class DefaultEditorController {
  ]
  : visType.editorConfig.optionTabs),
  ];
-
  this.state = {
  vis,
  optionTabs,

src/plugins/visualizations/public/embeddable/create_vis_embeddable_from_object.ts

@@ -41,7 +41,8 @@ export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDe
  try {
  const visId = vis.id as string;
 
- const editPath = visId ? savedVisualizations.urlFor(visId) : '';
+ const editPath = visId ? savedVisualizations.urlFor(visId) : '#/edit_by_value';
+
  const editUrl = visId
  ? getHttp().basePath.prepend(`/app/visualize${savedVisualizations.urlFor(visId)}`)
  : '';

src/plugins/visualize/public/application/app.tsx

@@ -24,7 +24,12 @@ import { Route, Switch, useLocation } from 'react-router-dom';
 import { syncQueryStateWithUrl } from '../../../data/public';
 import { useKibana } from '../../../kibana_react/public';
 import { VisualizeServices } from './types';
-import { VisualizeEditor, VisualizeListing, VisualizeNoMatch } from './components';
+import {
+ VisualizeEditor,
+ VisualizeListing,
+ VisualizeNoMatch,
+ VisualizeByValueEditor,
+} from './components';
 import { VisualizeConstants } from './visualize_constants';
 
 export const VisualizeApp = () => {
@@ -48,6 +53,9 @@ export const VisualizeApp = () => {
 
  return (
  <Switch>
+ <Route exact path={`${VisualizeConstants.EDIT_BY_VALUE_PATH}`}>
+ <VisualizeByValueEditor />
+ </Route>
  <Route path={[VisualizeConstants.CREATE_PATH, `${VisualizeConstants.EDIT_PATH}/:id`]}>
  <VisualizeEditor />
  </Route>

src/plugins/visualize/public/application/components/index.ts

@@ -20,3 +20,4 @@
 export { VisualizeListing } from './visualize_listing';
 export { VisualizeEditor } from './visualize_editor';
 export { VisualizeNoMatch } from './visualize_no_match';
+export { VisualizeByValueEditor } from './visualize_byvalue_editor';

src/plugins/visualize/public/application/components/visualize_byvalue_editor.tsx

@@ -0,0 +1,105 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import './visualize_editor.scss';
+import React, { useEffect, useState } from 'react';
+import { EventEmitter } from 'events';
+
+import { VisualizeInput } from 'src/plugins/visualizations/public';
+import { useKibana } from '../../../../kibana_react/public';
+import {
+ useChromeVisibility,
+ useVisByValue,
+ useVisualizeAppState,
+ useEditorUpdates,
+ useLinkedSearchUpdates,
+} from '../utils';
+import { VisualizeServices } from '../types';
+import { VisualizeEditorCommon } from './visualize_editor_common';
+
+export const VisualizeByValueEditor = () => {
+ const [originatingApp, setOriginatingApp] = useState<string>();
+ const { services } = useKibana<VisualizeServices>();
+ const [eventEmitter] = useState(new EventEmitter());
+ const [hasUnsavedChanges, setHasUnsavedChanges] = useState(true);
+ const [embeddableId, setEmbeddableId] = useState<string>();
+ const [valueInput, setValueInput] = useState<VisualizeInput>();
+
+ useEffect(() => {
+ const { originatingApp: value, embeddableId: embeddableIdValue, valueInput: valueInputValue } =
+ services.embeddable
+ .getStateTransfer(services.scopedHistory)
+ .getIncomingEditorState({ keysToRemoveAfterFetch: ['id', 'embeddableId', 'valueInput'] }) ||
+ {};
+ setOriginatingApp(value);
+ setValueInput(valueInputValue);
+ setEmbeddableId(embeddableIdValue);
+ if (!valueInputValue) {
+ history.back();
+ }
+ }, [services]);
+
+ const isChromeVisible = useChromeVisibility(services.chrome);
+
+ const { byValueVisInstance, visEditorRef, visEditorController } = useVisByValue(
+ services,
+ eventEmitter,
+ isChromeVisible,
+ valueInput,
+ originatingApp
+ );
+ const { appState, hasUnappliedChanges } = useVisualizeAppState(
+ services,
+ eventEmitter,
+ byValueVisInstance
+ );
+ const { isEmbeddableRendered, currentAppState } = useEditorUpdates(
+ services,
+ eventEmitter,
+ setHasUnsavedChanges,
+ appState,
+ byValueVisInstance,
+ visEditorController
+ );
+ useLinkedSearchUpdates(services, eventEmitter, appState, byValueVisInstance);
+
+ useEffect(() => {
+ // clean up all registered listeners if any is left
+ return () => {
+ eventEmitter.removeAllListeners();
+ };
+ }, [eventEmitter]);
+
+ return (
+ <VisualizeEditorCommon
+ visInstance={byValueVisInstance}
+ appState={appState}
+ currentAppState={currentAppState}
+ isChromeVisible={isChromeVisible}
+ hasUnsavedChanges={hasUnsavedChanges}
+ hasUnappliedChanges={hasUnappliedChanges}
+ isEmbeddableRendered={isEmbeddableRendered}
+ originatingApp={originatingApp}
+ setOriginatingApp={setOriginatingApp}
+ setHasUnsavedChanges={setHasUnsavedChanges}
+ visEditorRef={visEditorRef}
+ embeddableId={embeddableId}
+ />
+ );
+};

src/plugins/visualize/public/application/components/visualize_editor.tsx

@@ -21,8 +21,6 @@ import './visualize_editor.scss';
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { EventEmitter } from 'events';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiScreenReaderOnly } from '@elastic/eui';
 
 import { useKibana } from '../../../../kibana_react/public';
 import {
@@ -33,8 +31,7 @@ import {
  useLinkedSearchUpdates,
 } from '../utils';
 import { VisualizeServices } from '../types';
-import { ExperimentalVisInfo } from './experimental_vis_info';
-import { VisualizeTopNav } from './visualize_top_nav';
+import { VisualizeEditorCommon } from './visualize_editor_common';
 
 export const VisualizeEditor = () => {
  const { id: visualizationIdFromUrl } = useParams();
@@ -67,7 +64,9 @@ export const VisualizeEditor = () => {
 
  useEffect(() => {
  const { originatingApp: value } =
- services.embeddable.getStateTransfer(services.scopedHistory).getIncomingEditorState() || {};
+ services.embeddable
+ .getStateTransfer(services.scopedHistory)
+ .getIncomingEditorState({ keysToRemoveAfterFetch: ['id', 'input'] }) || {};
  setOriginatingApp(value);
  }, [services]);
 
@@ -79,38 +78,19 @@ export const VisualizeEditor = () => {
  }, [eventEmitter]);
 
  return (
- <div className={`app-container visEditor visEditor--${savedVisInstance?.vis.type.name}`}>
- {savedVisInstance && appState && currentAppState && (
- <VisualizeTopNav
- currentAppState={currentAppState}
- hasUnsavedChanges={hasUnsavedChanges}
- setHasUnsavedChanges={setHasUnsavedChanges}
- isChromeVisible={isChromeVisible}
- isEmbeddableRendered={isEmbeddableRendered}
- hasUnappliedChanges={hasUnappliedChanges}
- originatingApp={originatingApp}
- setOriginatingApp={setOriginatingApp}
- savedVisInstance={savedVisInstance}
- stateContainer={appState}
- visualizationIdFromUrl={visualizationIdFromUrl}
- />
- )}
- {savedVisInstance?.vis?.type?.isExperimental && <ExperimentalVisInfo />}
- {savedVisInstance && (
- <EuiScreenReaderOnly>
- <h1>
- <FormattedMessage
- id="visualize.pageHeading"
- defaultMessage="{chartName} {chartType} visualization"
- values={{
- chartName: savedVisInstance.savedVis.title,
- chartType: savedVisInstance.vis.type.title,
- }}
- />
- </h1>
- </EuiScreenReaderOnly>
- )}
- <div className={isChromeVisible ? 'visEditor__content' : 'visualize'} ref={visEditorRef} />
- </div>
+ <VisualizeEditorCommon
+ visInstance={savedVisInstance}
+ appState={appState}
+ currentAppState={currentAppState}
+ isChromeVisible={isChromeVisible}
+ hasUnsavedChanges={hasUnsavedChanges}
+ hasUnappliedChanges={hasUnappliedChanges}
+ isEmbeddableRendered={isEmbeddableRendered}
+ originatingApp={originatingApp}
+ setOriginatingApp={setOriginatingApp}
+ visualizationIdFromUrl={visualizationIdFromUrl}
+ setHasUnsavedChanges={setHasUnsavedChanges}
+ visEditorRef={visEditorRef}
+ />
  );
 };