[Dashboard First] Lens By Value

src/plugins/dashboard/config.ts

@@ -20,7 +20,7 @@
 import { schema, TypeOf } from '@kbn/config-schema';
 
 export const configSchema = schema.object({
- allowByValueEmbeddables: schema.boolean({ defaultValue: false }),
+ allowByValueEmbeddables: schema.boolean({ defaultValue: true }),
 });
 
 export type ConfigSchema = TypeOf<typeof configSchema>;

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

@@ -57,7 +57,6 @@ import {
  ViewMode,
  ContainerOutput,
  EmbeddableInput,
- SavedObjectEmbeddableInput,
 } from '../../../embeddable/public';
 import { NavAction, SavedDashboardPanel } from '../types';
 
@@ -168,7 +167,7 @@ export class DashboardAppController {
  chrome.docTitle.change(dash.title);
  }
 
- const incomingEmbeddable = embeddable
+ let incomingEmbeddable = embeddable
  .getStateTransfer(scopedHistory())
  .getIncomingEmbeddablePackage();
 
@@ -328,6 +327,21 @@ export class DashboardAppController {
  dashboardStateManager.getPanels().forEach((panel: SavedDashboardPanel) => {
  embeddablesMap[panel.panelIndex] = convertSavedDashboardPanelToPanelState(panel);
  });
+
+ // If the incoming embeddable state's id already exists in the embeddables map, replace the input, retaining the existing gridData for that panel.
+ if (incomingEmbeddable?.embeddableId && embeddablesMap[incomingEmbeddable.embeddableId]) {
+ const originalPanelState = { ...embeddablesMap[incomingEmbeddable.embeddableId] };
+ embeddablesMap[incomingEmbeddable.embeddableId] = {
+ gridData: originalPanelState.gridData,
+ type: incomingEmbeddable.type,
+ explicitInput: {
+ ...incomingEmbeddable.input,
+ id: incomingEmbeddable.embeddableId,
+ },
+ };
+ incomingEmbeddable = undefined;
+ }
+
  let expandedPanelId;
  if (dashboardContainer && !isErrorEmbeddable(dashboardContainer)) {
  expandedPanelId = dashboardContainer.getInput().expandedPanelId;
@@ -454,25 +468,16 @@ export class DashboardAppController {
  refreshDashboardContainer();
  });
 
- if (incomingEmbeddable) {
- if ('id' in incomingEmbeddable) {
- container.addOrUpdateEmbeddable<SavedObjectEmbeddableInput>(
- incomingEmbeddable.type,
- {
- savedObjectId: incomingEmbeddable.id,
- }
- );
- } else if ('input' in incomingEmbeddable) {
- const input = incomingEmbeddable.input;
- delete input.id;
- const explicitInput = {
- savedVis: input,
- };
- container.addOrUpdateEmbeddable<EmbeddableInput>(
- incomingEmbeddable.type,
- explicitInput
- );
- }
+ // If the incomingEmbeddable does not yet exist in the panels listing, create a new panel using the container's addEmbeddable method.
+ if (
+ incomingEmbeddable &&
+ (!incomingEmbeddable.embeddableId ||
+ !container.getInput().panels[incomingEmbeddable.embeddableId])
+ ) {
+ container.addNewEmbeddable<EmbeddableInput>(
+ incomingEmbeddable.type,
+ incomingEmbeddable.input
+ );
  }
  }
 

src/plugins/dashboard/public/attribute_service/attribute_service.tsx

@@ -24,6 +24,7 @@ import {
  SavedObjectEmbeddableInput,
  isSavedObjectEmbeddableInput,
  IEmbeddable,
+ Container,
 } from '../embeddable_plugin';
 import {
  SavedObjectsClientContract,
@@ -105,6 +106,15 @@ export class AttributeService<
  return isSavedObjectEmbeddableInput(input);
  };
 
+ public getExplicitInputFromEmbeddable(embeddable: IEmbeddable): ValType | RefType {
+ return embeddable.getRoot() &&
+ (embeddable.getRoot() as Container).getInput().panels[embeddable.id].explicitInput
+ ? ((embeddable.getRoot() as Container).getInput().panels[embeddable.id].explicitInput as
+ | ValType
+ | RefType)
+ : (embeddable.getInput() as ValType | RefType);
+ }
+
  getInputAsValueType = async (input: ValType | RefType): Promise<ValType> => {
  if (!this.inputIsRefType(input)) {
  return input;

src/plugins/dashboard/public/index.ts

@@ -31,7 +31,7 @@ export {
 } from './application';
 export { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
 
-export { DashboardStart, DashboardUrlGenerator } from './plugin';
+export { DashboardStart, DashboardUrlGenerator, DashboardFeatureFlagConfig } from './plugin';
 export {
  DASHBOARD_APP_URL_GENERATOR,
  createDashboardUrlGenerator,

src/plugins/dashboard/public/plugin.tsx

@@ -101,7 +101,7 @@ declare module '../../share/public' {
 
 export type DashboardUrlGenerator = UrlGeneratorContract<typeof DASHBOARD_APP_URL_GENERATOR>;
 
-interface DashboardFeatureFlagConfig {
+export interface DashboardFeatureFlagConfig {
  allowByValueEmbeddables: boolean;
 }
 

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

@@ -53,15 +53,46 @@ test('is compatible when edit url is available, in edit mode and editable', asyn
  ).toBe(true);
 });
 
-test('redirects to app using state transfer', async () => {
+test('redirects to app using state transfer with by value mode', async () => {
  applicationMock.currentAppId$ = of('superCoolCurrentApp');
  const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
- const embeddable = new EditableEmbeddable({ id: '123', viewMode: ViewMode.EDIT }, true);
+ const embeddable = new EditableEmbeddable(
+ { id: '123', viewMode: ViewMode.EDIT, coolInput1: 1, coolInput2: 2 },
+ 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',
+ embeddableId: '123',
+ valueInput: {
+ id: '123',
+ viewMode: ViewMode.EDIT,
+ coolInput1: 1,
+ coolInput2: 2,
+ },
+ },
+ });
+});
+
+test('redirects to app using state transfer without by value mode', async () => {
+ applicationMock.currentAppId$ = of('superCoolCurrentApp');
+ const action = new EditPanelAction(getFactory, applicationMock, stateTransferMock);
+ const embeddable = new EditableEmbeddable(
+ { id: '123', viewMode: ViewMode.EDIT, savedObjectId: '1234' },
+ true
+ );
+ embeddable.getOutput = jest.fn(() => ({ editApp: 'ultraVisualize', editPath: '/123' }));
+ await action.execute({ embeddable });
+ expect(stateTransferMock.navigateToEditor).toHaveBeenCalledWith('ultraVisualize', {
+ path: '/123',
+ state: {
+ originatingApp: 'superCoolCurrentApp',
+ embeddableId: '123',
+ valueInput: undefined,
+ },
  });
 });
 

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

@@ -24,7 +24,8 @@ import { take } from 'rxjs/operators';
 import { ViewMode } from '../types';
 import { EmbeddableFactoryNotFoundError } from '../errors';
 import { EmbeddableStart } from '../../plugin';
-import { IEmbeddable, EmbeddableEditorState, EmbeddableStateTransfer } from '../..';
+import { IEmbeddable, EmbeddableStateTransfer, EmbeddableEditorState } from '../..';
+import { SavedObjectEmbeddableInput } from '..';
 
 export const ACTION_EDIT_PANEL = 'editPanel';
 
@@ -109,8 +110,16 @@ 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,
+ valueInput: byValueMode ? embeddable.getInput() : undefined,
+ embeddableId: embeddable.getInput().id,
+ };
+ return { app, path, state };
+ }
+ return { app, path };
  }
  }
 

src/plugins/embeddable/public/lib/containers/container.ts

@@ -198,8 +198,8 @@ export abstract class Container<
  return {
  type: factory.type,
  explicitInput: {
- id: embeddableId,
  ...explicitInput,
+ id: embeddableId,
  } as TEmbeddableInput,
  };
  }

src/plugins/embeddable/public/lib/embeddables/ref_or_val_embeddable/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { ReferenceOrValueEmbeddable, isReferenceOrValueEmbeddable } from './types';

src/plugins/embeddable/public/lib/embeddables/ref_or_val_embeddable/types.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { EmbeddableInput, SavedObjectEmbeddableInput } from '..';
+
+export interface ReferenceOrValueEmbeddable<
+ ValTypeInput extends EmbeddableInput = EmbeddableInput,
+ RefTypeInput extends SavedObjectEmbeddableInput = SavedObjectEmbeddableInput
+> {
+ inputIsRefType: (input: ValTypeInput | RefTypeInput) => input is RefTypeInput;
+ getInputAsValueType: () => Promise<ValTypeInput>;
+ getInputAsRefType: () => Promise<RefTypeInput>;
+}
+
+export function isReferenceOrValueEmbeddable(
+ incoming: unknown
+): incoming is ReferenceOrValueEmbeddable {
+ return (
+ !!(incoming as ReferenceOrValueEmbeddable).inputIsRefType &&
+ !!(incoming as ReferenceOrValueEmbeddable).getInputAsValueType &&
+ !!(incoming as ReferenceOrValueEmbeddable).getInputAsRefType
+ );
+}

src/plugins/embeddable/public/lib/state_transfer/embeddable_state_transfer.test.ts

@@ -62,23 +62,27 @@ describe('embeddable state transfer', () => {
 
  it('can send an outgoing embeddable package state', async () => {
  await stateTransfer.navigateToWithEmbeddablePackage(destinationApp, {
- state: { type: 'coolestType', id: '150' },
+ state: { type: 'coolestType', input: { savedObjectId: '150' } },
  });
  expect(application.navigateToApp).toHaveBeenCalledWith('superUltraVisualize', {
- state: { type: 'coolestType', id: '150' },
+ state: { type: 'coolestType', input: { savedObjectId: '150' } },
  });
  });
 
  it('can send an outgoing embeddable package state in append mode', async () => {
  const historyMock = mockHistoryState({ kibanaIsNowForSports: 'extremeSportsKibana' });
  stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, historyMock);
  await stateTransfer.navigateToWithEmbeddablePackage(destinationApp, {
- state: { type: 'coolestType', id: '150' },
+ state: { type: 'coolestType', input: { savedObjectId: '150' } },
  appendToExistingState: true,
  });
  expect(application.navigateToApp).toHaveBeenCalledWith('superUltraVisualize', {
  path: undefined,
- state: { kibanaIsNowForSports: 'extremeSportsKibana', type: 'coolestType', id: '150' },
+ state: {
+ kibanaIsNowForSports: 'extremeSportsKibana',
+ type: 'coolestType',
+ input: { savedObjectId: '150' },
+ },
  });
  });
 
@@ -97,10 +101,13 @@ describe('embeddable state transfer', () => {
  });
 
  it('can fetch an incoming embeddable package state', async () => {
- const historyMock = mockHistoryState({ type: 'skisEmbeddable', id: '123' });
+ const historyMock = mockHistoryState({
+ type: 'skisEmbeddable',
+ input: { savedObjectId: '123' },
+ });
  stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, historyMock);
  const fetchedState = stateTransfer.getIncomingEmbeddablePackage();
- expect(fetchedState).toEqual({ type: 'skisEmbeddable', id: '123' });
+ expect(fetchedState).toEqual({ type: 'skisEmbeddable', input: { savedObjectId: '123' } });
  });
 
  it('returns undefined when embeddable package is not in the right shape', async () => {
@@ -113,12 +120,12 @@ describe('embeddable state transfer', () => {
  it('removes all keys in the keysToRemoveAfterFetch array', async () => {
  const historyMock = mockHistoryState({
  type: 'skisEmbeddable',
- id: '123',
+ input: { savedObjectId: '123' },
  test1: 'test1',
  test2: 'test2',
  });
  stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, historyMock);
- stateTransfer.getIncomingEmbeddablePackage({ keysToRemoveAfterFetch: ['type', 'id'] });
+ stateTransfer.getIncomingEmbeddablePackage({ keysToRemoveAfterFetch: ['type', 'input'] });
  expect(historyMock.replace).toHaveBeenCalledWith(
  expect.objectContaining({ state: { test1: 'test1', test2: 'test2' } })
  );
@@ -127,15 +134,15 @@ describe('embeddable state transfer', () => {
  it('leaves state as is when no keysToRemove are supplied', async () => {
  const historyMock = mockHistoryState({
  type: 'skisEmbeddable',
- id: '123',
+ input: { savedObjectId: '123' },
  test1: 'test1',
  test2: 'test2',
  });
  stateTransfer = new EmbeddableStateTransfer(application.navigateToApp, historyMock);
  stateTransfer.getIncomingEmbeddablePackage();
  expect(historyMock.location.state).toEqual({
  type: 'skisEmbeddable',
- id: '123',
+ input: { savedObjectId: '123' },
  test1: 'test1',
  test2: 'test2',
  });