[9.3] [Canvas] Apply embeddable transforms to embeddable elements (#252191)

x-pack/platform/plugins/private/canvas/canvas_plugin_src/functions/external/embeddable.ts

@@ -13,6 +13,7 @@ import type {
 } from '@kbn/expressions-plugin/common';
 import type { MigrateFunction, MigrateFunctionsObject } from '@kbn/kibana-utils-plugin/common';
 import type { SavedObjectReference } from '@kbn/core/types';
+import { DEFAULT_TIME_RANGE } from '../../../common/lib';
 import type { ExpressionValueFilter } from '../../../types';
 import type { EmbeddableExpression } from '../../expression_types';
 import { EmbeddableExpressionType } from '../../expression_types';
@@ -26,13 +27,8 @@ export interface Arguments {
   type: string;
 }
 
-const defaultTimeRange = {
-  from: 'now-15m',
-  to: 'now',
-};
-
 const baseEmbeddableInput = {
-  timeRange: defaultTimeRange,
+  timeRange: DEFAULT_TIME_RANGE,
   disableTriggers: true,
   renderMode: 'noInteractivity',
 };

x-pack/platform/plugins/private/canvas/canvas_plugin_src/functions/external/saved_lens.ts

@@ -10,6 +10,7 @@ import type { PaletteOutput } from '@kbn/coloring';
 import type { Filter as DataFilter } from '@kbn/es-query';
 import type { TimeRange } from '@kbn/es-query';
 import type { SavedObjectReference } from '@kbn/core/types';
+import { DEFAULT_TIME_RANGE } from '../../../common/lib';
 import { getQueryFilters } from '../../../common/lib/build_embeddable_filters';
 import type { ExpressionValueFilter, TimeRange as TimeRangeArg } from '../../../types';
 import type { EmbeddableExpression } from '../../expression_types';
@@ -30,11 +31,6 @@ export interface SavedLensInput {
   palette?: PaletteOutput;
 }
 
-const defaultTimeRange = {
-  from: 'now-15m',
-  to: 'now',
-};
-
 export function savedLens(): ExpressionFunctionDefinition<
   'savedLens',
   ExpressionValueFilter | null,
@@ -77,7 +73,7 @@ export function savedLens(): ExpressionFunctionDefinition<
           id,
           savedObjectId: id,
           filters: getQueryFilters(filters),
-          timeRange: timerange || defaultTimeRange,
+          timeRange: timerange || DEFAULT_TIME_RANGE,
           title: title === null ? undefined : title,
           disableTriggers: true,
           palette,

x-pack/platform/plugins/private/canvas/canvas_plugin_src/functions/external/saved_map.ts

@@ -7,6 +7,7 @@
 
 import type { ExpressionFunctionDefinition } from '@kbn/expressions-plugin/common';
 import type { SavedObjectReference } from '@kbn/core/types';
+import { DEFAULT_TIME_RANGE } from '../../../common/lib';
 import type { ExpressionValueFilter, MapCenter, TimeRange as TimeRangeArg } from '../../../types';
 import type { EmbeddableExpression } from '../../expression_types';
 import { EmbeddableTypes, EmbeddableExpressionType } from '../../expression_types';
@@ -20,11 +21,6 @@ interface Arguments {
   timerange: TimeRangeArg | null;
 }
 
-const defaultTimeRange = {
-  from: 'now-15m',
-  to: 'now',
-};
-
 export function savedMap(): ExpressionFunctionDefinition<
   'savedMap',
   ExpressionValueFilter | null,
@@ -70,7 +66,7 @@ export function savedMap(): ExpressionFunctionDefinition<
         input: {
           id: args.id,
           savedObjectId: args.id,
-          timeRange: args.timerange || defaultTimeRange,
+          timeRange: args.timerange || DEFAULT_TIME_RANGE,
           mapCenter: args.center
             ? {
                 lat: args.center.lat,

x-pack/platform/plugins/private/canvas/canvas_plugin_src/functions/external/saved_visualization.ts

@@ -8,7 +8,9 @@
 import { omit } from 'lodash';
 import type { ExpressionFunctionDefinition } from '@kbn/expressions-plugin/common';
 import type { VisualizeInput } from '@kbn/visualizations-plugin/public';
+
 import type { SavedObjectReference } from '@kbn/core/types';
+import { DEFAULT_TIME_RANGE } from '../../../common/lib';
 import type { EmbeddableExpression } from '../../expression_types';
 import { EmbeddableTypes, EmbeddableExpressionType } from '../../expression_types';
 import { getQueryFilters } from '../../../common/lib/build_embeddable_filters';
@@ -23,11 +25,6 @@ interface Arguments {
   title: string | null;
 }
 
-const defaultTimeRange = {
-  from: 'now-15m',
-  to: 'now',
-};
-
 export function savedVisualization(): ExpressionFunctionDefinition<
   'savedVisualization',
   ExpressionValueFilter | null,
@@ -93,7 +90,7 @@ export function savedVisualization(): ExpressionFunctionDefinition<
           savedObjectId: id,
           disableTriggers: true,
           disabledActions: ['ACTION_EDIT_IN_LENS'],
-          timeRange: timerange ? omit(timerange, 'type') : defaultTimeRange,
+          timeRange: timerange ? omit(timerange, 'type') : DEFAULT_TIME_RANGE,
           filters: getQueryFilters(filters),
           vis: visOptions,
           title: title === null ? undefined : title,

x-pack/platform/plugins/private/canvas/common/lib/constants.ts

@@ -43,3 +43,7 @@ export const LAUNCHED_FULLSCREEN_AUTOPLAY = 'workpad-full-screen-launch-with-aut
 export const CANVAS_EMBEDDABLE_CLASSNAME = `canvasEmbeddable`;
 export const CONTEXT_MENU_TOP_BORDER_CLASSNAME = 'canvasContextMenu--topBorder';
 export const API_ROUTE_FUNCTIONS = `${INTERNAL_API_ROUTE}/fns`;
+export const DEFAULT_TIME_RANGE = {
+  from: 'now-15m',
+  to: 'now',
+};

x-pack/platform/plugins/private/canvas/server/embeddable/fixtures/index.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { fromExpression } from '@kbn/interpreter';
+import { decode } from '../../../common/lib/embeddable_dataurl';
+import type { WorkpadAttributes } from '../../routes/workpad/workpad_attributes';
+
+const baseWorkpadAttributes: WorkpadAttributes = {
+  assets: {},
+  '@timestamp': new Date().toISOString(),
+  '@created': new Date().toISOString(),
+  height: 100,
+  width: 100,
+  css: '',
+  name: 'Test workpad',
+  page: 0,
+  pages: [],
+  colors: [],
+  variables: [],
+  isWriteable: true,
+};
+
+const baseElement = {
+  id: 'element-id',
+  position: { left: 0, top: 0, width: 100, height: 100, angle: 0, parent: null },
+  type: 'element' as const,
+  filter: '',
+};
+
+const basePage = {
+  id: 'page-id',
+  style: { background: 'white' },
+  transition: 'none' as const,
+  groups: [],
+};
+
+export const makeWorkpad = (expression: string): WorkpadAttributes => ({
+  ...baseWorkpadAttributes,
+  pages: [{ ...basePage, elements: [{ ...baseElement, expression }] }],
+});
+
+export const getDecodedConfig = (workpad: WorkpadAttributes) =>
+  decode(
+    fromExpression(workpad.pages[0].elements[0].expression).chain[0].arguments.config[0] as string
+  );
+
+export const getExpressionFunctionName = (workpad: WorkpadAttributes) =>
+  fromExpression(workpad.pages[0].elements[0].expression).chain[0].function;

x-pack/platform/plugins/private/canvas/server/embeddable/get_references_for_element.test.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getReferencesForElement } from './get_references_for_element';
+
+describe('getReferencesForElement', () => {
+  const references = [
+    { name: 'element-id:l0_reference-1', id: 'reference-1-id', type: 'reference-1-type' },
+    { name: 'element-id:l1000_reference-2', id: 'reference-2-id', type: 'reference-2-type' },
+    {
+      id: '16b1d7d0-ea71-11eb-8b4b-f7b600de0f7d',
+      name: 'element-1e179b97-d902-4104-84ea-bda6203c8b7b:l1_savedLens.id',
+      type: 'lens',
+    },
+    {
+      id: 'de71f4f0-1902-11e9-919b-ffe5949a18d2',
+      name: 'element-542c41d5-82d7-4382-a3a5-d3b48d82ff05:l1_savedMap.id',
+      type: 'map',
+    },
+  ];
+  it('should return the references for the element and remove the element ID prefix from the reference names', () => {
+    const result1 = getReferencesForElement(references, 'element-id');
+    expect(result1).toEqual([
+      { name: 'reference-1', id: 'reference-1-id', type: 'reference-1-type' },
+      { name: 'reference-2', id: 'reference-2-id', type: 'reference-2-type' },
+    ]);
+
+    const result2 = getReferencesForElement(
+      references,
+      'element-1e179b97-d902-4104-84ea-bda6203c8b7b'
+    );
+    expect(result2).toEqual([
+      {
+        id: '16b1d7d0-ea71-11eb-8b4b-f7b600de0f7d',
+        name: 'savedLens.id',
+        type: 'lens',
+      },
+    ]);
+
+    const result3 = getReferencesForElement(
+      references,
+      'element-542c41d5-82d7-4382-a3a5-d3b48d82ff05'
+    );
+    expect(result3).toEqual([
+      {
+        id: 'de71f4f0-1902-11e9-919b-ffe5949a18d2',
+        name: 'savedMap.id',
+        type: 'map',
+      },
+    ]);
+  });
+
+  it('should return an empty array if there are no references for the element', () => {
+    const result = getReferencesForElement(references, 'other-element-id');
+    expect(result).toEqual([]);
+  });
+});

x-pack/platform/plugins/private/canvas/server/embeddable/get_references_for_element.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { SavedObjectReference } from '@kbn/core/server';
+
+export const getReferencesForElement = (
+  references: SavedObjectReference[],
+  elementId: string
+): SavedObjectReference[] =>
+  references
+    .filter(({ name }) => name.startsWith(`${elementId}:`))
+    .map(({ name, ...rest }) => ({
+      ...rest,
+      name: name.replace(`${elementId}:`, '').replace(/l\d+_/, ''), // Removes the element ID prefix and subsequently the link number prefix added by the expression service
+    }));

x-pack/platform/plugins/private/canvas/server/embeddable/transform_references_out.test.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { transformPanelReferencesOut } from './transform_references_out';
+
+describe('transformPanelReferencesOut', () => {
+  it('does not transform panel reference if the panelRefName does not match', () => {
+    const panelReferences = [
+      { id: 'test-id', name: 'valid-reference-name', type: 'valid-reference-type' },
+    ];
+    const transformedPanelReferences = transformPanelReferencesOut(
+      panelReferences,
+      'non-matching-reference-name'
+    );
+    expect(transformedPanelReferences).toEqual(panelReferences);
+  });
+
+  describe('embeddable functions', () => {
+    it('transforms panel references out for legacy lens embeddable', () => {
+      const panelReferences = [{ id: 'test-id', name: 'embeddable.id', type: 'lens' }];
+      const transformedPanelReferences = transformPanelReferencesOut(
+        panelReferences,
+        'embeddable.id'
+      );
+      expect(transformedPanelReferences).toEqual([
+        { id: 'test-id', name: 'savedObjectRef', type: 'lens' },
+      ]);
+    });
+
+    it('transforms panel references out for legacy visualization embeddable', () => {
+      const panelReferences = [{ id: 'test-id', name: 'embeddable.id', type: 'visualization' }];
+      const transformedPanelReferences = transformPanelReferencesOut(
+        panelReferences,
+        'embeddable.id'
+      );
+      expect(transformedPanelReferences).toEqual([
+        { id: 'test-id', name: 'savedObjectRef', type: 'visualization' },
+      ]);
+    });
+
+    it('transforms panel references out for legacy map embeddable', () => {
+      const panelReferences = [{ id: 'test-id', name: 'embeddable.id', type: 'map' }];
+      const transformedPanelReferences = transformPanelReferencesOut(
+        panelReferences,
+        'embeddable.id'
+      );
+      expect(transformedPanelReferences).toEqual([
+        { id: 'test-id', name: 'savedObjectRef', type: 'map' },
+      ]);
+    });
+
+    it('transforms panel references out for legacy search embeddable', () => {
+      const panelReferences = [{ id: 'test-id', name: 'embeddable.id', type: 'search' }];
+      const transformedPanelReferences = transformPanelReferencesOut(
+        panelReferences,
+        'embeddable.id'
+      );
+      expect(transformedPanelReferences).toEqual([
+        { id: 'test-id', name: 'savedObjectRef', type: 'search' },
+      ]);
+    });
+  });
+});

x-pack/platform/plugins/private/canvas/server/embeddable/transform_references_out.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { SavedObjectReference } from '@kbn/core/server';
+
+const BY_REF_TYPES = ['search', 'visualization', 'lens', 'map'];
+
+export function transformPanelReferencesOut(
+  panelReferences: SavedObjectReference[],
+  panelRefName?: string
+) {
+  return panelRefName
+    ? panelReferences.map((ref) => {
+        return ref.name === panelRefName && BY_REF_TYPES.includes(ref.type)
+          ? {
+              ...ref,
+              // Embeddable transforms for BY_REF_TYPES embeddable types
+              // are looking for by-reference reference with name 'savedObjectRef'
+              name: 'savedObjectRef',
+            }
+          : ref;
+      })
+    : panelReferences;
+}